/* ============================================
   3HTS · basis.css (16-10-2026, snelheid)
   De zes basisstijlbladen in vaste volgorde samengevoegd tot één bestand:
   core, components, modals, nav-pro, btn-pro, layout-fix. Wijzig de losse
   bestanden en bouw dit bestand daarna opnieuw (zelfde volgorde).
   ============================================ */

/* ==================== core.css ==================== */
/* ============================================
   3HTS · Core Design System v3 · 2027
   Paper light theme · Editorial typography
   ============================================ */

:root{
  /* Palette */
  --paper:#F5F3EE;
  --paper-2:#EEEAE1;
  --paper-3:#E6E1D5;
  --ink:#0A0B0E;
  --ink-2:#1A1E26;
  --ink-3:#3A3F48;
  --mute:#5C616B;
  --mute-2:rgba(10,11,14,.60);
  --line:rgba(10,11,14,.08);
  --line-2:rgba(10,11,14,.14);
  --line-3:rgba(10,11,14,.22);
  --orange:#E8641A;
  --orange-2:#FF7A2E;
  --orange-3:#C94E10;
  --orange-soft:rgba(232,100,26,.08);
  --orange-ink:#B84A10;
  --orange-on-dark:#FF7A2E;--orange-light:#FFB07A;
  --green:#2FB673;
  --amber:#E8A01A;
  --red:#D43B3B;
  --accent-blue:#1C4FA8;

  /* Fonts */
  --f-display:'Barlow Condensed','Helvetica Neue',Arial,sans-serif;
  --f-body:'Barlow','Inter',system-ui,sans-serif;
  --f-italic:'Instrument Serif',Georgia,serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;

  /* Spacing */
  --pad-x:max(24px, calc((100vw - 1440px) / 2 + 40px));
  --pad-y-sm:clamp(60px,8vw,120px);
  --pad-y-md:clamp(100px,12vw,180px);
  --pad-y-lg:clamp(140px,16vw,220px);

  /* Radii */
  --r-sm:6px;
  --r-md:12px;
  --r-lg:20px 20px 4px 20px;
  --r-xl:28px 28px 6px 28px;

  /* Shadows */
  --shadow-sm:0 2px 8px rgba(10,11,14,.04),0 12px 32px -12px rgba(10,11,14,.08);
  --shadow-md:0 8px 24px rgba(10,11,14,.06),0 24px 64px -16px rgba(10,11,14,.14);
  --shadow-lg:0 20px 60px rgba(10,11,14,.10),0 40px 120px -20px rgba(10,11,14,.18);

  /* Transitions */
  --ease-out:cubic-bezier(.22,.8,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
html{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  scroll-behavior:auto;
}
body{
  background:var(--paper);
  color:var(--ink);
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

/* Paper grain texture */
body::before{
  content:"";
  position:fixed;inset:0;
  pointer-events:none;z-index:200;
  background-image:
    radial-gradient(circle at 25% 30%, rgba(10,11,14,.012) 0%, transparent 50%),
    radial-gradient(circle at 75% 70%, rgba(10,11,14,.008) 0%, transparent 50%),
    repeating-radial-gradient(circle at 50% 50%, rgba(10,11,14,.002) 0, rgba(10,11,14,.002) 1px, transparent 1px, transparent 3px);
  mix-blend-mode:multiply;
  opacity:.6;
}

/* ===== Typography ===== */
h1,h2,h3,h4,h5{font-family:var(--f-display);font-weight:700;line-height:1;letter-spacing:-.01em;color:var(--ink)}
h1 em,h2 em,h3 em,h4 em{font-family:var(--f-italic);font-style:italic;font-weight:400;color:var(--orange);letter-spacing:.002em}

.h-display{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(52px,9.5vw,160px);
  line-height:.88;letter-spacing:-.025em;
  text-transform:uppercase;
}
.h-hero{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(42px,7vw,108px);
  line-height:.92;letter-spacing:-.02em;
  text-transform:uppercase;
}
.h-section{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(36px,5.2vw,78px);
  line-height:.96;letter-spacing:-.015em;
  text-transform:uppercase;
}
.h-sub{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(24px,2.6vw,36px);
  line-height:1.06;letter-spacing:-.005em;
}
.h-card{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(22px,2.2vw,30px);
  line-height:1.02;letter-spacing:-.005em;
  text-transform:uppercase;
}

p{font-family:var(--f-body);font-size:16px;line-height:1.62;color:var(--ink-2)}
.lead{font-size:clamp(17px,1.4vw,22px);line-height:1.55;color:var(--ink-2);max-width:64ch}
.small{font-size:13px;line-height:1.5;color:var(--mute)}
.mono{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}

a{color:inherit;text-decoration:none;transition:color .2s var(--ease-out)}
a:hover{color:var(--orange-ink)}
.dark-sec a:hover{color:var(--orange-2)}

em{font-family:var(--f-italic);font-style:italic;color:var(--orange-ink)}

::selection{background:var(--orange-3);color:#fff}

/* ===== Kickers / Labels ===== */
.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-mono);font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
  padding:7px 14px;border:1px solid var(--line-2);border-radius:99px;
  background:rgba(255,255,255,.4);backdrop-filter:blur(8px);
}
.kicker i{
  width:6px;height:6px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 0 4px rgba(232,100,26,.18);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(232,100,26,.18)}50%{box-shadow:0 0 0 8px rgba(232,100,26,.04)}}

.label-num{
  font-family:var(--f-mono);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--orange-ink);
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-display);font-weight:600;font-size:15px;
  letter-spacing:.04em;text-transform:uppercase;
  padding:15px 26px;border:none;cursor:pointer;
  border-radius:8px;
  transition:all .24s var(--ease-out);
  text-decoration:none;white-space:nowrap;
  position:relative;overflow:hidden;
}
.btn-primary{
  background:var(--ink);color:var(--paper);
  box-shadow:0 8px 28px rgba(10,11,14,.12);
}
.btn-primary:hover{background:var(--orange);color:#fff;transform:translateY(-2px);box-shadow:0 12px 40px rgba(232,100,26,.3)}
.btn-primary::after{
  content:"→";margin-left:4px;transition:transform .24s var(--ease-out);
}
.btn-primary:hover::after{transform:translateX(4px)}
.btn-outline{
  background:transparent;color:var(--ink);
  border:1px solid var(--line-3);
}
.btn-outline:hover{border-color:var(--ink);background:var(--ink);color:var(--paper);transform:translateY(-2px)}
.btn-ghost{
  background:transparent;color:var(--ink);padding:12px 0;
  border-bottom:1px solid var(--ink);border-radius:0;
}
.btn-ghost:hover{color:var(--orange);border-color:var(--orange)}
.btn-lg{padding:20px 34px;font-size:16px}
.btn-sm{padding:11px 18px;font-size:13px}

/* ===== Layout ===== */
.wrap{padding-left:var(--pad-x);padding-right:var(--pad-x);max-width:100%;margin:0 auto}
.section{padding-top:var(--pad-y-md);padding-bottom:var(--pad-y-md);position:relative}
.section-sm{padding-top:var(--pad-y-sm);padding-bottom:var(--pad-y-sm)}
.section-lg{padding-top:var(--pad-y-lg);padding-bottom:var(--pad-y-lg)}

.dark-sec{background:var(--ink);color:var(--paper)}
.dark-sec .h-section,.dark-sec .h-sub,.dark-sec h1,.dark-sec h2,.dark-sec h3{color:#fff}
.dark-sec p,.dark-sec .lead{color:rgba(255,255,255,.72)}
.dark-sec .kicker{color:rgba(255,255,255,.6);border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.04)}
.dark-sec .mono{color:rgba(255,255,255,.6)}
.dark-sec .btn-outline{color:#fff;border-color:rgba(255,255,255,.22)}
.dark-sec .btn-outline:hover{background:#fff;color:var(--ink)}

/* ===== Nav ===== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:18px var(--pad-x);
  display:flex;align-items:center;justify-content:space-between;
  transition:background .3s var(--ease-out),backdrop-filter .3s var(--ease-out),padding .3s var(--ease-out);
  pointer-events:auto;
}
.nav.scrolled{
  background:rgba(245,243,238,.82);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line);
  padding-top:14px;padding-bottom:14px;
}
.nav-logo{
  display:flex;align-items:center;gap:12px;
  font-family:var(--f-display);font-weight:800;
  font-size:20px;letter-spacing:.06em;color:var(--ink);
}
.nav-logo .logo-mark{
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:flex-start;
  position:relative;flex-shrink:0;
  background:transparent;overflow:hidden;
}
.nav-logo .logo-mark img,.nav-logo .logo-mark svg{
  height:100%;width:auto;max-width:none;display:block;
  object-fit:contain;object-position:left center;
}
.nav-logo .logo-mark.logo-mark-text{
  width:38px;height:38px;border-radius:8px;
  background:var(--ink);color:var(--paper);
  font-family:var(--f-display);font-weight:800;font-size:14px;letter-spacing:.04em;
  overflow:hidden;
}
.nav-logo .logo-mark.logo-mark-text::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--orange);
}
.nav-logo small{
  display:block;font-size:11px;letter-spacing:.22em;color:var(--mute);
  font-weight:500;margin-top:1px;text-transform:uppercase;
}
.nav-items{display:flex;align-items:center;gap:4px;list-style:none}
.nav-items a{
  padding:10px 16px;font-family:var(--f-display);font-weight:600;
  font-size:14px;letter-spacing:.04em;text-transform:uppercase;
  border-radius:6px;position:relative;
  transition:color .2s var(--ease-out);
}
.nav-items a:hover{color:var(--orange)}
.nav-items a.active{color:var(--orange)}
.nav-items a.active::after{content:"";position:absolute;left:16px;right:16px;bottom:4px;height:2px;background:var(--orange)}

.nav-items .has-sub{position:relative}
.nav-items .has-sub > a::after{content:"↓";font-size:10px;margin-left:6px;display:inline-block;transition:transform .2s var(--ease-out)}
.nav-items .has-sub:hover > a::after{transform:rotate(180deg)}
.nav-sub{
  position:absolute;top:100%;left:0;
  min-width:320px;padding:14px;
  background:var(--paper);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow-lg);
  opacity:0;pointer-events:none;transform:translateY(8px);
  transition:all .24s var(--ease-out);list-style:none;
  z-index:110;
}
.nav-items .has-sub:hover .nav-sub{opacity:1;pointer-events:auto;transform:translateY(0)}
.nav-sub li a{
  display:flex;flex-direction:column;gap:2px;
  padding:12px 14px;border-radius:8px;
  font-size:14px;line-height:1.3;text-transform:none;letter-spacing:0;
  font-family:var(--f-body);font-weight:500;color:var(--ink);
}
.nav-sub li a small{font-family:var(--f-mono);font-size:10px;color:var(--mute);letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.nav-sub li a:hover{background:var(--paper-2);color:var(--orange)}
.nav-sub li a::after{content:"→";margin-left:auto;opacity:0;transition:all .2s var(--ease-out)}
.nav-sub li a:hover::after{opacity:1;transform:translateX(3px)}

.nav-cta{display:flex;align-items:center;gap:10px}
.nav-cta .btn{padding:11px 18px;font-size:13px}
.nav-phone{
  display:flex;align-items:center;gap:8px;
  font-family:var(--f-mono);font-size:13px;color:var(--ink);
  padding:8px 14px;border:1px solid var(--line-2);border-radius:99px;
  transition:all .2s var(--ease-out);
}
.nav-phone:hover{border-color:var(--orange);color:var(--orange)}
.nav-phone-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(47,182,115,.2);animation:pulse 2s ease-in-out infinite}

.nav-burger{display:none;background:none;border:none;width:44px;height:44px;cursor:pointer;position:relative}
.nav-burger span{position:absolute;left:10px;right:10px;height:2px;background:var(--ink);border-radius:2px;transition:all .24s var(--ease-out)}
.nav-burger span:nth-child(1){top:14px}
.nav-burger span:nth-child(2){top:21px}
.nav-burger span:nth-child(3){top:28px}
.nav-burger.open span:nth-child(1){top:21px;transform:rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){top:21px;transform:rotate(-45deg)}

/* Nav progress */
.nav-progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--orange);z-index:101;transition:width .1s linear}

/* Mobile nav */
.nav-mobile{
  display:none;position:fixed;inset:0;z-index:99;
  background:var(--paper);
  padding:100px var(--pad-x) 40px;
  overflow-y:auto;
  opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease-out);
}
.nav-mobile.open{opacity:1;pointer-events:auto}
.nav-mobile-list{list-style:none;display:flex;flex-direction:column;gap:2px}
.nav-mobile-list a{
  display:block;padding:18px 0;border-bottom:1px solid var(--line);
  font-family:var(--f-display);font-weight:600;font-size:28px;
  text-transform:uppercase;letter-spacing:-.005em;color:var(--ink);
}
.nav-mobile-list a small{display:block;font-size:12px;color:var(--mute);margin-top:4px;letter-spacing:.1em;font-weight:500}

@media(max-width:960px){
  .nav-items,.nav-cta{display:none}
  .nav-burger{display:block}
  .nav-mobile{display:block}
}

/* ===== Footer ===== */
.footer{background:var(--ink);color:var(--paper);padding:var(--pad-y-md) var(--pad-x) 40px}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:60px;padding-bottom:60px;border-bottom:1px solid rgba(255,255,255,.08)}
.footer-top h4{font-family:var(--f-display);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:20px;font-weight:500}
.footer-top .logo-mark{background:transparent;width:44px;height:44px;overflow:hidden;flex-shrink:0}
.footer-top .logo-mark img{width:100%;height:100%;object-fit:contain;display:block}
.footer-brand-desc{margin:20px 0 24px;color:rgba(255,255,255,.6);font-size:14px;line-height:1.55;max-width:320px}
.footer-socials{display:flex;gap:8px}
.footer-socials a{
  width:38px;height:38px;border:1px solid rgba(255,255,255,.14);border-radius:8px;
  display:grid;place-items:center;color:#fff;transition:all .24s var(--ease-out);
}
.footer-socials a:hover{background:var(--orange);border-color:var(--orange)}
.footer-socials svg{width:16px;height:16px}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-col a{font-family:var(--f-body);color:rgba(255,255,255,.7);font-size:14px;transition:color .2s var(--ease-out)}
.footer-col a:hover{color:var(--orange)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:30px;font-family:var(--f-mono);font-size:11px;color:rgba(255,255,255,.55);letter-spacing:.08em;text-transform:uppercase;gap:20px;flex-wrap:wrap}
.footer-bottom a{color:rgba(255,255,255,.6)}
.footer-bottom a:hover{color:#fff}

@media(max-width:900px){
  .footer-top{grid-template-columns:1fr 1fr;gap:40px}
}
@media(max-width:560px){
  .footer-top{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;align-items:flex-start}
}

/* ===== Reveal on view ===== */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
[data-reveal].revealed{opacity:1;transform:translateY(0)}
[data-reveal-delay="1"]{transition-delay:.08s}
[data-reveal-delay="2"]{transition-delay:.16s}
[data-reveal-delay="3"]{transition-delay:.24s}
[data-reveal-delay="4"]{transition-delay:.32s}
[data-reveal-delay="5"]{transition-delay:.4s}
[data-reveal-delay="6"]{transition-delay:.48s}
[data-reveal-delay="7"]{transition-delay:.56s}
/* reduced-motion: reveal fail-safe — content nooit onzichtbaar laten bij verminderde beweging */
@media (prefers-reduced-motion: reduce){
  [data-reveal],[data-reveal].revealed,.feat-card{opacity:1 !important;transform:none !important;transition:none !important}
}

/* ===== Character reveal ===== */
.char-reveal .char{display:inline-block;opacity:0;transform:translateY(60%);transition:all .8s var(--ease-out)}
.char-reveal.revealed .char{opacity:1;transform:translateY(0)}

/* ===== Utility ===== */
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-6{grid-template-columns:repeat(6,1fr)}
@media(max-width:960px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}.grid-6{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.grid-6{grid-template-columns:repeat(2,1fr)}}

.text-center{text-align:center}
.divider{height:1px;background:var(--line);margin:0}
.accent{color:var(--orange-ink)}
.nowrap{white-space:nowrap}
.mb-sm{margin-bottom:16px}
.mb-md{margin-bottom:32px}
.mb-lg{margin-bottom:56px}

/* Shared card surface */
.surface{
  background:rgba(255,255,255,.5);backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:var(--r-md);
  transition:all .3s var(--ease-out);
}
.surface:hover{border-color:var(--line-2);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.surface-dark{
  background:rgba(255,255,255,.02);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.08);border-radius:var(--r-md);
}

/* Loader */
.loader{
  position:fixed;inset:0;z-index:999;background:var(--paper);
  display:grid;place-items:center;
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);
}
.loader.done{opacity:0;pointer-events:none;transform:scale(1.02)}
.loader-inner{text-align:center}
.loader-logo{
  width:88px;height:88px;margin:0 auto 20px;
  position:relative;overflow:hidden;
  perspective:620px;
}
.loader-logo-stack{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  animation:loaderSpin 2.2s linear infinite;will-change:transform;
}
.loader-layer{
  position:absolute;inset:0;overflow:hidden;
  display:flex;align-items:center;justify-content:flex-start;
}
/* fallback before JS builds the stack: keep the single mark centred + cropped */
.loader-logo > img{height:100%;width:auto;max-width:none;object-fit:contain;object-position:left center;display:block}
.loader-logo img{height:100%;width:auto;max-width:none;object-fit:contain;object-position:left center;display:block}
.loader-logo.has-text{
  width:72px;height:72px;background:var(--ink);color:var(--paper);border-radius:12px;
  display:grid;place-items:center;
  font-family:var(--f-display);font-weight:800;font-size:28px;letter-spacing:.02em;
}
.loader-bar{width:200px;height:2px;background:var(--line-2);border-radius:2px;overflow:hidden;margin:0 auto}
.loader-bar-fill{height:100%;background:var(--orange);width:0;transition:width .4s var(--ease-out)}
.loader-label{margin-top:16px;font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
@keyframes loaderSpin{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}
@media (prefers-reduced-motion: reduce){.loader-logo-stack{animation:none}}

/* ===== Webshop nav-knop — v3 btn-idioom (chamfered + mono + oranje gradient), levendig ===== */
.nav-items .nav-shop-li{margin-left:10px}
.nav-items a.nav-shop{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 22px;
  background:linear-gradient(135deg,var(--orange-3) 0%,#B84A10 50%,#B53F00 100%);
  background-size:220% 100%;
  color:#fff;
  font-family:var(--f-mono);font-weight:800;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  position:relative;overflow:hidden;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  box-shadow:0 8px 24px rgba(232,100,26,.45);
  animation:shopGlow 2.4s var(--ease-in-out) infinite, shopGradient 7s linear infinite;
  transition:transform .26s var(--ease-out),box-shadow .26s var(--ease-out),filter .2s var(--ease-out);
}
.nav-items a.nav-shop svg{width:17px;height:17px;flex-shrink:0}
.nav-items a.nav-shop:hover{
  color:#fff;transform:translateY(-2px) scale(1.03);
  box-shadow:0 16px 40px rgba(232,100,26,.62);filter:brightness(1.08);
}
.nav-items a.nav-shop::after{display:none} /* geen onderstreep-indicator */
.nav-shop-shine{
  position:absolute;top:0;left:-70%;width:50%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);
  transform:skewX(-18deg);pointer-events:none;
  animation:shopShine 3.2s ease-in-out infinite;
}
@keyframes shopGlow{
  0%,100%{box-shadow:0 8px 24px rgba(232,100,26,.4)}
  50%{box-shadow:0 10px 34px rgba(232,100,26,.72),0 0 0 3px rgba(232,100,26,.12)}
}
@keyframes shopGradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes shopShine{0%{left:-70%}55%,100%{left:140%}}
/* mobiel menu-item */
.nav-mobile-list a.nav-shop-m{color:var(--orange)}
.nav-mobile-list a.nav-shop-m small{color:var(--mute)}
@media(prefers-reduced-motion:reduce){
  .nav-items a.nav-shop{animation:none}
  .nav-shop-shine{display:none}
}

/* Print */
@media print{
  .nav,.footer,.loader,canvas,video{display:none !important}
  body{background:#fff}
  *{color:#000 !important}
}

/* ============ A11Y — Prioriteit 2 audit (14-07-2026) ============ */
/* Zichtbare toetsenbord-focus site-breed (wint van losse outline:none via !important) */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,
[tabindex]:focus-visible,[role="radio"]:focus-visible,[role="button"]:focus-visible{
  outline:2px solid var(--orange,#e8641a) !important;
  outline-offset:2px !important;
  border-radius:2px;
}
/* Skip-link: eerste focusbare element, alleen zichtbaar bij focus */
.skip-link{
  position:fixed;left:12px;top:-64px;z-index:100000;
  background:var(--orange,#e8641a);color:#fff;
  padding:11px 18px;border-radius:9px;
  font-family:var(--f-mono,ui-monospace,monospace);font-size:13px;font-weight:600;letter-spacing:.02em;
  text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.35);transition:top .16s ease;
}
.skip-link:focus{top:12px}
#main:focus{outline:none}
/* Urgentie-radiogroep: <button> houdt exact dezelfde look als de oude <div> */
.cx-urg{appearance:none;-webkit-appearance:none;width:100%;display:block}

/* ==================== components.css ==================== */
/* ============================================
   3HTS · Components · Reusable surfaces
   ============================================ */

/* ===== Hero (home) ===== */
.hero-v3{
  position:relative;min-height:100vh;
  padding:140px var(--pad-x) 80px;
  display:flex;align-items:center;
  overflow:hidden;
  background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%);
}
.hero-v3::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 80% 20%, rgba(232,100,26,.08) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 10% 90%, rgba(28,79,168,.05) 0%, transparent 60%);
  pointer-events:none;
}
.hero-v3-grid{position:relative;z-index:2;width:100%;display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:center}
@media(max-width:960px){.hero-v3-grid{grid-template-columns:1fr;gap:40px}}
.hero-v3-left{display:flex;flex-direction:column;gap:28px}
.hero-v3 h1{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(48px,8.5vw,128px);
  line-height:.86;letter-spacing:-.025em;
  text-transform:uppercase;
}
.hero-v3 h1 em{font-family:var(--f-italic);font-style:italic;font-weight:400;color:var(--orange);text-transform:none;letter-spacing:.005em}
.hero-v3 h1 .word{display:inline-block;overflow:hidden;vertical-align:bottom}
.hero-v3 h1 .word-inner{display:inline-block;transform:translateY(110%);transition:transform 1s var(--ease-out)}
.hero-v3 h1.revealed .word-inner{transform:translateY(0)}
.hero-v3-lead{font-size:clamp(16px,1.35vw,20px);line-height:1.55;color:var(--ink-2);max-width:560px}
.hero-v3-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}

.hero-scroll-hint{position:absolute;bottom:30px;left:var(--pad-x);display:flex;align-items:center;gap:12px;font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);z-index:3}
.hero-scroll-hint-line{width:44px;height:1px;background:var(--ink);position:relative;overflow:hidden}
.hero-scroll-hint-line::after{content:"";position:absolute;left:-100%;top:0;bottom:0;width:50%;background:var(--orange);animation:scroll-line 2s ease-in-out infinite}
@keyframes scroll-line{0%{left:-50%}100%{left:100%}}

/* ===== Process steps (horizontal scroll pinned) ===== */
/* ===== Process v2 · Living scroll diagram ===== */
.process-v2{position:relative;background:var(--paper);overflow:hidden}
.pv2{height:260vh;position:relative}
.pv2-pin{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  padding:80px var(--pad-x) 60px;
  background:
    radial-gradient(70% 55% at 50% 42%, rgba(232,100,26,.06), transparent 70%),
    linear-gradient(180deg, var(--paper), var(--paper-3,#EFEBDF));
}
.pv2-pin::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg, transparent 0 calc(50% - .5px), rgba(10,11,14,.045) calc(50% - .5px) 50%, transparent 50%) 0 0/60px 60px,
    linear-gradient(0deg, transparent 0 calc(50% - .5px), rgba(10,11,14,.045) calc(50% - .5px) 50%, transparent 50%) 0 0/60px 60px;
  mask-image:radial-gradient(80% 60% at 50% 50%, #000 20%, transparent 85%);
  opacity:.6;
}
.pv2-scanline{
  position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent, rgba(232,100,26,.7) 40%, rgba(232,100,26,1) 50%, rgba(232,100,26,.7) 60%, transparent);
  box-shadow:0 0 18px rgba(232,100,26,.5);
  transform:translateY(var(--pv2-scan,0vh));
  transition:transform .15s linear;
  z-index:2;pointer-events:none;
}
.pv2-meta{
  position:relative;z-index:3;
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;
  color:var(--mute);text-transform:uppercase;margin-bottom:28px;
  max-width:1200px;margin-left:auto;margin-right:auto;width:100%;
}
.pv2-meta b{color:var(--ink);font-weight:700;letter-spacing:.12em}
.pv2-meta-time b{color:var(--orange-ink);font-family:var(--f-mono);text-transform:uppercase}

.pv2-diagram{
  position:relative;z-index:3;width:100%;max-width:1200px;margin:0 auto;
  padding:0 20px;
}
.pv2-svg{
  width:100%;height:40px;display:block;overflow:visible;
}
.pv2-rail-bg{stroke:rgba(10,11,14,.12);stroke-width:1.5;stroke-dasharray:4 6}
.pv2-rail-fill{stroke:var(--orange);stroke-width:2;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(232,100,26,.55))}
.pv2-nodes{
  position:absolute;top:0;left:20px;right:20px;height:40px;
  display:flex;justify-content:space-between;align-items:center;
  list-style:none;padding:0;margin:0;pointer-events:none;
}
.pv2-node{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;
  transition:transform .4s var(--ease-out);
}
.pv2-node-dot{
  width:14px;height:14px;border-radius:50%;
  background:var(--paper);border:2px solid rgba(10,11,14,.25);
  box-shadow:0 0 0 0 rgba(232,100,26,.0);
  transition:all .35s var(--ease-out);
  position:relative;z-index:2;
}
.pv2-node.is-passed .pv2-node-dot{background:var(--orange);border-color:var(--orange)}
.pv2-node.is-active{transform:translateY(-2px)}
.pv2-node.is-active .pv2-node-dot{
  background:var(--orange);border-color:var(--orange);
  box-shadow:0 0 0 6px rgba(232,100,26,.18), 0 0 20px rgba(232,100,26,.6);
  animation:pv2-pulse 1.6s ease-out infinite;
}
@keyframes pv2-pulse{
  0%{box-shadow:0 0 0 0 rgba(232,100,26,.45), 0 0 18px rgba(232,100,26,.6)}
  100%{box-shadow:0 0 0 14px rgba(232,100,26,0), 0 0 8px rgba(232,100,26,.3)}
}
.pv2-node-n{
  position:absolute;top:-26px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;color:var(--mute);
  transition:color .3s var(--ease-out);
}
.pv2-node.is-active .pv2-node-n,.pv2-node.is-passed .pv2-node-n{color:var(--orange)}
.pv2-node-lbl{
  position:absolute;top:28px;white-space:nowrap;
  font-family:var(--f-display);font-weight:600;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2);
  transition:color .3s var(--ease-out),transform .3s var(--ease-out);
}
.pv2-node.is-active .pv2-node-lbl{color:var(--ink);transform:scale(1.08)}

.pv2-stage{
  position:relative;z-index:3;
  max-width:1200px;margin:70px auto 0;width:100%;
  min-height:280px;
}
.pv2-slide{
  position:absolute;inset:0;
  display:grid;grid-template-columns:1.2fr 1fr;gap:60px;
  opacity:0;transform:translateY(24px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
  pointer-events:none;
}
.pv2-slide.is-active{opacity:1;transform:none;pointer-events:auto}
.pv2-slide h3{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(38px,5vw,76px);line-height:.98;letter-spacing:-.015em;
  text-transform:uppercase;color:var(--ink);
}
.pv2-slide h3 em{font-family:var(--f-italic);font-style:italic;font-weight:400;color:var(--orange);text-transform:none}
.pv2-slide p{font-size:16px;line-height:1.55;color:var(--ink-2);max-width:44ch;margin-top:16px}
.pv2-slide ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;align-self:start}
.pv2-slide ul li{
  position:relative;padding:14px 0 14px 22px;font-size:15px;color:var(--ink-2);line-height:1.45;
  border-bottom:1px solid var(--line);
}
.pv2-slide ul li:last-child{border-bottom:none}
.pv2-slide ul li::before{
  content:"";position:absolute;left:0;top:22px;width:12px;height:2px;background:var(--orange);
}

@media(max-width:960px){
  .pv2{height:auto}
  .pv2-pin{position:static;height:auto;padding:60px var(--pad-x)}
  .pv2-stage{min-height:0;margin-top:70px}
  .pv2-slide{position:relative;opacity:1;transform:none;grid-template-columns:1fr;gap:24px;margin-bottom:40px}
  .pv2-slide:not(:first-child){border-top:1px solid var(--line);padding-top:40px}
  .pv2-node-lbl{font-size:11px;letter-spacing:.04em}
}

/* ===== Legacy process (still used by sub-pages) ===== */
.process{position:relative;background:var(--paper)}
.process-track{height:500vh;position:relative}
.process-pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
.process-rail{display:flex;gap:32px;padding:0 var(--pad-x);will-change:transform;align-items:stretch}
.process-step{
  flex:0 0 clamp(300px,40vw,520px);
  min-height:70vh;padding:40px 36px;
  background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-lg);
  display:flex;flex-direction:column;position:relative;
  transition:all .5s var(--ease-out);
}
.process-step-no{font-family:var(--f-display);font-weight:800;font-size:14px;letter-spacing:.28em;color:var(--orange);text-transform:uppercase;margin-bottom:6px}
.process-step-phase{font-family:var(--f-mono);font-size:11px;color:var(--mute);margin-bottom:24px;letter-spacing:.1em}
.process-step h3{font-family:var(--f-display);font-weight:800;font-size:clamp(32px,3.6vw,48px);line-height:.98;text-transform:uppercase;margin-bottom:16px;color:var(--ink)}
.process-step h3 em{font-family:var(--f-italic);font-style:italic;font-weight:400;color:var(--orange);text-transform:none}
.process-step-lead{color:var(--ink-2);font-size:15px;margin-bottom:24px;line-height:1.6}
.process-step-list{list-style:none;display:flex;flex-direction:column;gap:8px;padding-top:20px;border-top:1px solid var(--line)}
.process-step-list li{font-size:15px;line-height:1.5;color:var(--ink-2);padding-left:20px;position:relative}
.process-step-list li::before{content:"";position:absolute;left:0;top:7px;width:10px;height:2px;background:var(--orange)}

.process-nav{position:absolute;top:40px;left:var(--pad-x);right:var(--pad-x);display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;color:var(--mute);text-transform:uppercase;z-index:3;pointer-events:none}
.process-nav b{color:var(--ink);font-weight:700}
.process-bar{position:absolute;bottom:40px;left:var(--pad-x);right:var(--pad-x);height:2px;background:var(--line-2);border-radius:2px;overflow:hidden;z-index:3}
.process-bar-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--orange);border-radius:2px;transition:width .1s linear}

/* ===== Sector / Industry tiles ===== */
.sector-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
@media(max-width:900px){.sector-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.sector-grid{grid-template-columns:1fr}}
.sector{
  padding:40px 32px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  display:flex;flex-direction:column;gap:16px;min-height:280px;
  transition:all .3s var(--ease-out);cursor:pointer;position:relative;overflow:hidden;
}
.sector:hover{background:var(--paper-2)}
.sector::after{content:"→";position:absolute;top:32px;right:32px;font-family:var(--f-mono);font-size:18px;color:var(--mute);transition:all .24s var(--ease-out)}
.sector:hover::after{color:var(--orange);transform:translateX(4px)}
.sector-no{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;color:var(--orange-ink);text-transform:uppercase}
.sector h3{font-family:var(--f-display);font-weight:700;font-size:clamp(22px,2.2vw,32px);line-height:1;text-transform:uppercase;letter-spacing:-.005em;color:var(--ink)}
.sector h3 em{font-family:var(--f-italic);font-style:italic;font-weight:400;color:var(--orange);text-transform:none}
.sector p{font-size:15px;color:var(--ink-2);line-height:1.5;margin-top:auto}

/* ===== Service page hero ===== */
.svc-hero{
  position:relative;padding:160px var(--pad-x) 120px;
  background:var(--paper);overflow:hidden;
}
.svc-hero-inner{position:relative;z-index:2;max-width:1200px;display:grid;grid-template-columns:1.3fr 1fr;gap:60px;align-items:end}
@media(max-width:960px){.svc-hero-inner{grid-template-columns:1fr;gap:30px}}
.svc-hero-left{display:flex;flex-direction:column;gap:24px}
.svc-hero-breadcrumb{display:flex;gap:8px;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;color:var(--mute);text-transform:uppercase;margin-bottom:10px}
.svc-hero-breadcrumb a:hover{color:var(--orange)}
.svc-hero-breadcrumb span{color:var(--line-3)}
.svc-hero h1{font-family:var(--f-display);font-weight:700;font-size:clamp(48px,8vw,120px);line-height:.9;text-transform:uppercase;letter-spacing:-.025em;margin:0}
.svc-hero h1 em{font-family:var(--f-italic);font-style:italic;font-weight:400;color:var(--orange);text-transform:none;letter-spacing:.005em}
.svc-hero-lead{font-size:clamp(16px,1.3vw,20px);color:var(--ink-2);max-width:52ch;line-height:1.55}
.svc-hero-img{
  aspect-ratio:4/5;background-size:cover;background-position:center;
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  position:relative;overflow:hidden;
}
.svc-hero-img::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(10,11,14,.4));z-index:1}
.svc-hero-tag{
  position:absolute;bottom:24px;left:24px;z-index:2;
  background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
  padding:10px 14px;border-radius:8px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  display:flex;align-items:center;gap:8px;
}
.svc-hero-tag i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(47,182,115,.25);animation:pulse 2s ease-in-out infinite}

/* ===== Svc features list ===== */
.feat-list{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.feat-item{
  display:grid;grid-template-columns:80px 1fr 1.5fr;gap:40px;
  padding:40px 0;border-bottom:1px solid var(--line);
  align-items:baseline;transition:padding .3s var(--ease-out);
}
.feat-item:hover{padding-left:12px}
@media(max-width:900px){.feat-item{grid-template-columns:50px 1fr;gap:20px}.feat-item > div:nth-child(3){grid-column:span 2}}
.feat-no{font-family:var(--f-mono);font-size:12px;letter-spacing:.18em;color:var(--orange);text-transform:uppercase}
.feat-item h3{font-family:var(--f-display);font-weight:600;font-size:clamp(24px,2.4vw,32px);line-height:1.05;color:var(--ink);letter-spacing:-.005em}
.feat-item p{font-size:15px;color:var(--ink-2);line-height:1.6}

/* ===== FAQ ===== */
.faq-list{border-top:1px solid var(--line-2)}
.faq-item{border-bottom:1px solid var(--line-2)}
.faq-q{
  width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:28px 0;display:flex;gap:30px;align-items:baseline;
  font-family:var(--f-display);font-weight:600;font-size:clamp(20px,2vw,28px);color:var(--ink);
  line-height:1.15;letter-spacing:-.005em;
  transition:color .2s var(--ease-out);
}
.faq-q:hover{color:var(--orange)}
.faq-q-no{flex:none;font-family:var(--f-mono);font-size:11px;color:var(--mute);letter-spacing:.14em;width:40px;text-transform:uppercase}
.faq-q-text{flex:1}
.faq-q-toggle{flex:none;width:28px;height:28px;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center;font-size:14px;color:var(--ink);transition:all .3s var(--ease-out)}
.faq-item.open .faq-q-toggle{background:var(--orange);border-color:var(--orange);color:#fff;transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease-out),padding .5s var(--ease-out)}
.faq-item.open .faq-a{max-height:600px;padding:0 0 28px 70px}
.faq-a p{max-width:72ch;color:var(--ink-2);font-size:16px;line-height:1.65}

/* ===== CTA Big ===== */
.cta-big{
  padding:var(--pad-y-lg) var(--pad-x);
  background:var(--ink);color:#fff;position:relative;overflow:hidden;
}
.cta-big::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(232,100,26,.22) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 20% 80%, rgba(232,100,26,.12) 0%, transparent 60%);
  pointer-events:none;
}
.cta-big-inner{position:relative;z-index:2;text-align:center}
.cta-big h2{font-family:var(--f-display);font-weight:700;font-size:clamp(48px,7vw,108px);line-height:.92;text-transform:uppercase;letter-spacing:-.02em;color:#fff;margin-bottom:24px}
.cta-big h2 em{font-family:var(--f-italic);font-style:italic;font-weight:400;color:var(--orange);text-transform:none}
.cta-big p{font-size:clamp(16px,1.3vw,19px);color:rgba(255,255,255,.68);max-width:60ch;margin:0 auto 40px;line-height:1.55}
.cta-big-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:40px}
.cta-big-contact{display:flex;justify-content:center;gap:40px;padding-top:40px;border-top:1px solid rgba(255,255,255,.1);flex-wrap:wrap}
.cta-big-contact-item{display:flex;flex-direction:column;gap:4px;font-family:var(--f-body)}
.cta-big-contact-item span{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;color:rgba(255,255,255,.45);text-transform:uppercase}
.cta-big-contact-item a{color:#fff;font-size:18px;font-weight:500;transition:color .2s var(--ease-out)}
.cta-big-contact-item a:hover{color:var(--orange)}

/* ===== Contact form ===== */
.cform{display:flex;flex-direction:column;gap:16px;max-width:640px}
.cform-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.cform-row{grid-template-columns:1fr}}
.cform label{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--mute);text-transform:uppercase;display:block;margin-bottom:8px}
.cform input,.cform textarea,.cform select{
  width:100%;padding:14px 16px;
  background:rgba(255,255,255,.5);border:1px solid var(--line-2);border-radius:8px;
  font-family:var(--f-body);font-size:15px;color:var(--ink);
  transition:all .2s var(--ease-out);outline:none;
}
.cform input:focus,.cform textarea:focus,.cform select:focus{border-color:var(--orange);background:#fff;box-shadow:0 0 0 3px rgba(232,100,26,.1)}
.cform textarea{min-height:140px;resize:vertical;font-family:var(--f-body)}
.cform-actions{display:flex;gap:14px;align-items:center;margin-top:8px;flex-wrap:wrap}
.cform-note{font-size:12px;color:var(--mute);line-height:1.5}

/* ===== Legacy / sub-page aliases (dienst & over-ons) ===== */
/* Section wrappers */
.sec{padding:var(--pad-y-md) 0;position:relative}
.sec.sec-sm{padding:var(--pad-y-sm) 0}
.sec.sec-lg{padding:var(--pad-y-lg) 0}
.sec + .sec{border-top:1px solid var(--line)}
.container{max-width:1280px;margin:0 auto;padding:0 var(--pad-x)}
@media(min-width:1440px){.container{padding-left:max(30px, calc((100vw - 1280px) / 2));padding-right:max(30px, calc((100vw - 1280px) / 2))}}

.sec-head{max-width:900px;margin-bottom:60px;display:flex;flex-direction:column;gap:18px}
.sec-head .kicker{align-self:flex-start}
.sec-head h2{margin-top:4px}
.sec-head .lead{margin-top:8px}
@media(max-width:640px){.sec-head{margin-bottom:40px}}

/* Feature list on service / about pages (.feat inline style) */
.feat-list .feat{
  display:grid;grid-template-columns:64px 1fr 1.8fr 200px;gap:32px;
  padding:32px 0;border-bottom:1px solid var(--line);
  align-items:baseline;transition:all .3s var(--ease-out);position:relative;
}
.feat-list .feat:first-child{border-top:1px solid var(--line)}
.feat-list .feat:hover{padding-left:12px;background:linear-gradient(90deg, rgba(232,100,26,.02), transparent 60%)}
.feat-list .feat > b{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.18em;color:var(--orange);
  text-transform:uppercase;font-weight:500;align-self:flex-start;padding-top:6px;
}
.feat-list .feat > h4{
  font-family:var(--f-display);font-weight:600;font-size:clamp(22px,2.1vw,30px);
  line-height:1.05;color:var(--ink);letter-spacing:-.005em;
}
.feat-list .feat > p{font-size:15px;color:var(--ink-2);line-height:1.6;margin:0}
.feat-right{display:flex;flex-direction:column;gap:4px;align-self:flex-start;padding-top:6px;border-left:1px solid var(--line);padding-left:20px}
.feat-right span{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;color:var(--mute);text-transform:uppercase}
.feat-right b{font-family:var(--f-display);font-weight:700;font-size:18px;color:var(--ink);letter-spacing:-.005em}
@media(max-width:1100px){
  .feat-list .feat{grid-template-columns:56px 1fr 1.4fr;gap:24px}
  .feat-right{grid-column:2 / -1;flex-direction:row;justify-content:flex-start;gap:8px;border-left:none;padding-left:0;align-items:baseline}
  .feat-right::before{content:"→";color:var(--orange);font-family:var(--f-mono);margin-right:4px}
}
@media(max-width:720px){
  .feat-list .feat{grid-template-columns:48px 1fr;gap:16px}
  .feat-list .feat > p,.feat-right{grid-column:2}
}

/* ============================================
   CINEMATIC UPGRADE v2 — MOTION PASS
   ============================================ */

/* HERO — volledig donker */
.hero-v3{
  background:#0A0B0E !important;
}
.hero-v3::before{
  background:
    radial-gradient(ellipse 75% 55% at 78% 15%, rgba(232,100,26,.22) 0%, transparent 62%),
    radial-gradient(ellipse 50% 40% at 15% 85%, rgba(28,79,168,.09) 0%, transparent 60%) !important;
}
/* Cursor spotlight op hero */
.hero-v3::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(circle 700px at var(--mx,68%) var(--my,32%),rgba(232,100,26,.13),transparent 55%);
}

/* Hero buttons → leesbaar op donkere achtergrond */
.hero-v3 .btn-outline{color:#fff !important;border-color:rgba(255,255,255,.28) !important}
.hero-v3 .btn-outline:hover{background:rgba(255,255,255,.1) !important;border-color:rgba(255,255,255,.65) !important;color:#fff !important}

/* Hero tekst → wit op donkere achtergrond */
.hero-v3 .kicker{color:rgba(255,255,255,.52);border-color:rgba(255,255,255,.13);background:rgba(255,255,255,.04)}
.hero-v3 h1{color:#fff}
.hero-v3-lead{color:rgba(255,255,255,.7)}
.hero-scroll-hint{color:rgba(255,255,255,.38)}
.hero-scroll-hint-line{background:rgba(255,255,255,.2)}

/* CURSOR SPOTLIGHT op donkere secties */
.cta-big{position:relative}
.cta-big::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(circle 380px at var(--mx,50%) var(--my,50%),rgba(232,100,26,.14),transparent 52%);
}
.cta-big-inner{position:relative;z-index:2}

/* SECTOR kaarten — oranje streep hover */
.sector{
  overflow:hidden;
  transition:all .4s var(--ease-out) !important;
}
.sector::before{
  content:"";position:absolute;bottom:0;left:0;right:0;height:3px;
  background:var(--orange);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease-out);z-index:2;
}
.sector:hover::before{transform:scaleX(1)}
.sector:hover{
  background:rgba(232,100,26,.04) !important;
  transform:translateY(-4px);
  box-shadow:0 14px 44px rgba(232,100,26,.1),inset 0 0 0 1px rgba(232,100,26,.15);
}

/* CTA BIG — grotere, filmische h2 */
.cta-big h2{
  font-size:clamp(52px,8.5vw,130px) !important;
  line-height:.88 !important;
}

/* NAV dark staat boven de donkere hero */
.nav:not(.scrolled){
  background:transparent !important;
  border-bottom:none !important;
}
.nav:not(.scrolled) .nav-logo,
.nav:not(.scrolled) .nav-items a,
.nav:not(.scrolled) .nav-cta .btn-outline{color:rgba(255,255,255,.85) !important}
.nav:not(.scrolled) .nav-phone{color:rgba(255,255,255,.75) !important;border-color:rgba(255,255,255,.18) !important}
.nav:not(.scrolled) .nav-phone:hover{color:#fff !important;border-color:var(--orange) !important}

/* Snap de nav-sub bg zodat hij leesbaar is op donkere hero */
.nav-sub{background:var(--paper) !important}

/* LANGUAGE SWITCHER */
.nav-lang{
  display:flex;align-items:center;
  font-family:var(--f-mono);font-size:11px;font-weight:600;letter-spacing:.12em;
  border:1px solid rgba(255,255,255,.2);border-radius:6px;overflow:hidden;
  margin-right:4px;flex-shrink:0;
}
.nav-lang-btn{
  padding:5px 9px;color:rgba(255,255,255,.6);text-decoration:none;
  transition:background .2s,color .2s;display:block;line-height:1;
  background:transparent;border:none;cursor:pointer;
}
.nav-lang-btn.is-active{background:var(--orange);color:#fff;}
.nav-lang-btn:not(.is-active):hover{background:rgba(255,255,255,.08);color:#fff}
.nav.scrolled .nav-lang{border-color:var(--line-2)}
.nav.scrolled .nav-lang-btn{color:var(--ink-3)}
.nav.scrolled .nav-lang-btn.is-active{background:var(--orange);color:#fff}
.nav.scrolled .nav-lang-btn:not(.is-active):hover{background:var(--paper-2);color:var(--ink)}

/* MOBILE NAV lang toggle */
.nav-mobile-lang{
  display:flex;gap:8px;align-items:center;
  padding:14px 24px 0;
  font-family:var(--f-mono);font-size:12px;font-weight:600;letter-spacing:.12em;
}
.nav-mobile-lang span,.nav-mobile-lang a{
  padding:6px 14px;border-radius:5px;text-decoration:none;
  transition:background .2s;color:var(--ink);
}
.nav-mobile-lang span{background:var(--orange);color:#fff}
.nav-mobile-lang a:hover{background:var(--paper-2)}

/* ============================================
   Polish layer — cursor, magnetic, velocity
   ============================================ */

/* Custom cursor (desktop only, reduced-motion safe) */
.cursor-dot,.cursor-ring{
  position:fixed;top:0;left:0;pointer-events:none;z-index:9998;
  border-radius:50%;
  will-change:transform,width,height,opacity,background;
  mix-blend-mode:difference;
}
.cursor-dot{
  width:6px;height:6px;background:var(--paper);
  transform:translate3d(-50%,-50%,0);
  transition:width .25s var(--ease-out),height .25s var(--ease-out),background .25s var(--ease-out);
}
.cursor-ring{
  width:34px;height:34px;border:1px solid var(--paper);opacity:.55;
  transform:translate3d(-50%,-50%,0);
  transition:width .35s var(--ease-out),height .35s var(--ease-out),border-color .3s var(--ease-out),opacity .3s var(--ease-out),background .3s var(--ease-out);
}
body.cursor-hover .cursor-dot{width:10px;height:10px;background:var(--orange);mix-blend-mode:normal}
body.cursor-hover .cursor-ring{width:56px;height:56px;border-color:var(--orange);opacity:.9;background:rgba(232,100,26,.08);mix-blend-mode:normal}
body.cursor-press .cursor-ring{width:24px;height:24px;opacity:1}
@media(hover:none),(pointer:coarse),(max-width:900px){
  .cursor-dot,.cursor-ring{display:none !important}
}
@media(prefers-reduced-motion:reduce){
  .cursor-dot,.cursor-ring{display:none !important}
}
.has-custom-cursor,.has-custom-cursor *{cursor:none !important}
.has-custom-cursor a,.has-custom-cursor button,.has-custom-cursor [data-magnetic]{cursor:none}

/* Magnetic hover target (JS sets --mx / --my in px) */
[data-magnetic]{
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
  will-change:transform;
}
[data-magnetic] > *{
  display:inline-flex;align-items:center;gap:inherit;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
  will-change:transform;
}
[data-magnetic].is-magnetic{transform:translate3d(var(--mx,0),var(--my,0),0)}
[data-magnetic].is-magnetic > *{transform:translate3d(calc(var(--mx,0) * .45),calc(var(--my,0) * .45),0)}

/* Velocity-based skew on scroll (JS sets --sv on body) */
.vel-skew{
  transform:skewY(calc(var(--sv,0) * .05deg));
  transform-origin:center center;
  transition:transform .12s linear;
  will-change:transform;
}

/* Scroll progress bar (top of viewport) */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:9997;
  background:transparent;pointer-events:none;
}
.scroll-progress > span{
  display:block;height:100%;width:var(--sp,0%);
  background:linear-gradient(90deg,var(--orange),#ff9240 70%,transparent);
  transition:width .08s linear;
  box-shadow:0 0 18px rgba(232,100,26,.5);
}

/* Reveal polish — soft rise with subtle blur */
.reveal-soft{
  opacity:0;transform:translate3d(0,28px,0);filter:blur(6px);
  transition:opacity .9s var(--ease-out),transform .9s var(--ease-out),filter .9s var(--ease-out);
}
.reveal-soft.revealed{opacity:1;transform:none;filter:none}

/* Subtle hover lift on CTAs */
.cta-major,.cta-ink,.btn,.btn-ink,a.cta,a.btn{position:relative}
.cta-major::after,.btn-ink::after{
  content:"";position:absolute;inset:-2px;border-radius:inherit;
  background:radial-gradient(120px 80px at var(--gx,50%) var(--gy,50%),rgba(232,100,26,.25),transparent 70%);
  opacity:0;transition:opacity .4s var(--ease-out);pointer-events:none;z-index:-1;
}
.cta-major:hover::after,.btn-ink:hover::after{opacity:1}

/* ============================================
   HERO VIDEO — walking person right side
   ============================================ */
.hero-video{
  position:absolute;right:0;top:0;
  width:58%;height:100%;
  object-fit:cover;z-index:0;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.5) 10%,rgba(0,0,0,.9) 22%,#000 35%);
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.5) 10%,rgba(0,0,0,.9) 22%,#000 35%);
}
.hero-video-vignette{
  position:absolute;right:0;top:0;width:58%;height:100%;
  z-index:1;pointer-events:none;
  background:
    linear-gradient(to top,rgba(10,11,14,.8) 0%,rgba(10,11,14,.2) 30%,transparent 55%),
    linear-gradient(to bottom,rgba(10,11,14,.5) 0%,transparent 25%);
}
@media(max-width:960px){
  .hero-video{width:100%;height:100%;opacity:.28;
    -webkit-mask-image:none;mask-image:none}
  .hero-video-vignette{display:none}
}

/* ============================================
   SERVICE GRID — cinematic chamfered cards
   ============================================ */
.svc-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:400px 240px 290px;
  gap:10px;
}
/* Explicit placement */
.svc-c1   {grid-column:1;  grid-row:1/3}
.svc-c2   {grid-column:2;  grid-row:1/3}
.svc-c2r1 {grid-column:2;  grid-row:1}
.svc-c2r2 {grid-column:2;  grid-row:2}
.svc-c3   {grid-column:3;  grid-row:1/3}
.svc-wide {grid-column:1/3;grid-row:3}
.svc-c3r3 {grid-column:3;  grid-row:3}

/* CTA variant — foto achtergrond met sterke onderkant-overlay (verbergt watermark + tekst leesbaar) */
.svc-card--cta{background:#0D1117}
.svc-card--cta .svc-card-overlay{
  background:
    linear-gradient(to top,rgba(10,11,14,.96) 0%,rgba(10,11,14,.78) 30%,rgba(10,11,14,.25) 60%,rgba(10,11,14,0) 100%),
    linear-gradient(135deg,rgba(232,100,26,.18) 0%,rgba(232,100,26,0) 50%);
}
.svc-card--cta .svc-card-no{color:rgba(255,255,255,.85);font-size:48px;line-height:1}
.svc-card--cta .svc-card-cta{color:#fff;font-weight:600}
.svc-card--cta:hover .svc-card-media{transform:scale(1.04)}
.svc-card--cta:hover{filter:drop-shadow(0 0 2px rgba(232,100,26,.7)) drop-shadow(0 20px 48px rgba(10,11,14,.7))}

/* Tablet */
@media(max-width:1024px) and (min-width:601px){
  .svc-grid{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto;
    gap:8px;
  }
  .svc-c1,.svc-c2,.svc-c2r1,.svc-c2r2,.svc-c3,.svc-wide,.svc-c3r3{
    grid-column:auto;grid-row:auto;min-height:260px;
  }
  .svc-wide{grid-column:span 2;min-height:220px}
}
/* Mobile */
@media(max-width:600px){
  .svc-grid{grid-template-columns:1fr;gap:8px}
  .svc-c1,.svc-c2,.svc-c2r1,.svc-c2r2,.svc-c3,.svc-wide,.svc-c3r3{
    grid-column:auto;grid-row:auto;min-height:240px;
  }
}

.svc-card{
  position:relative;overflow:hidden;
  background:#0D1117;
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
  transition:clip-path .6s var(--ease-out),transform .55s var(--ease-out),filter .45s var(--ease-out);
  cursor:pointer;text-decoration:none;display:block;
}
.svc-card:hover{
  clip-path:polygon(0 0,100% 0,100% 0,100% 100%,0 100%,0 100%);
  transform:scale(1.018);
  filter:drop-shadow(0 0 2px rgba(232,100,26,.8)) drop-shadow(0 20px 48px rgba(10,11,14,.7));
  z-index:5;position:relative;
}

/* Photo bg */
.svc-card-media{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transition:transform 1.4s var(--ease-out),filter .55s var(--ease-out);
  filter:grayscale(.2) brightness(.58);
}
.svc-card:hover .svc-card-media{
  transform:scale(1.07);
  filter:grayscale(0) brightness(.76);
}

/* Video bg */
.svc-card-video{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.4s var(--ease-out),filter .55s var(--ease-out);
  filter:grayscale(.15) brightness(.58);
}
.svc-card:hover .svc-card-video{
  transform:scale(1.05);
  filter:grayscale(0) brightness(.76);
}

/* Gradient overlay */
.svc-card-overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to top,rgba(10,11,14,.94) 0%,rgba(10,11,14,.5) 42%,rgba(10,11,14,.06) 100%),
    linear-gradient(140deg,rgba(232,100,26,.12) 0%,transparent 55%);
  transition:opacity .5s var(--ease-out);
}
.svc-card:hover .svc-card-overlay{opacity:.82}

/* Orange corner dot — chamfer accent */
.svc-card::before{
  content:"";position:absolute;
  top:0;right:0;
  width:22px;height:22px;
  background:linear-gradient(225deg,var(--orange) 0,var(--orange) 55%,transparent 56%);
  z-index:4;pointer-events:none;
  opacity:.7;
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);
  transform-origin:top right;
}
.svc-card:hover::before{opacity:0;transform:scale(1.6)}

/* Shimmer sweep on hover */
.svc-card::after{
  content:"";position:absolute;
  top:-100%;left:-60%;width:45%;height:280%;
  background:linear-gradient(to bottom right,rgba(255,255,255,.07),transparent 60%);
  transform:skewX(-18deg) translateX(-20%);
  opacity:0;transition:opacity .45s var(--ease-out),transform .65s var(--ease-out);
  z-index:3;pointer-events:none;
}
.svc-card:hover::after{opacity:1;transform:skewX(-18deg) translateX(280%)}

/* Inner layout */
.svc-card-inner{
  position:relative;z-index:2;
  height:100%;padding:22px 24px;
  display:flex;flex-direction:column;
  color:#fff;
}

/* Large ghost number — top right */
.svc-card-no{
  position:absolute;top:12px;right:18px;
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(72px,11vw,120px);
  line-height:.82;letter-spacing:-.06em;
  color:rgba(255,255,255,.055);
  transition:color .5s var(--ease-out),transform .5s var(--ease-out);
  user-select:none;pointer-events:none;
}
.svc-card:hover .svc-card-no{
  color:rgba(232,100,26,.16);
  transform:scale(1.07) translateY(-8px);
}

/* Bottom content stack */
.svc-card-content{margin-top:auto}
.svc-card-label{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;
  color:var(--orange);text-transform:uppercase;margin-bottom:6px;
}
.svc-card-title{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(20px,2.6vw,36px);
  line-height:.97;letter-spacing:-.02em;
  text-transform:uppercase;color:#fff;
  margin:0 0 10px;
}
.svc-card-title em{
  font-family:var(--f-italic);font-style:italic;font-weight:400;
  color:var(--orange);text-transform:none;
}
.svc-card-desc{
  font-size:15px;color:rgba(255,255,255,.75);
  line-height:1.52;margin:0 0 14px;max-width:34ch;
  transform:translateY(10px);opacity:.8;
  transition:transform .5s var(--ease-out),opacity .5s var(--ease-out);
}
.svc-card:hover .svc-card-desc{transform:none;opacity:1}

.svc-card-cta{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;padding:9px 15px;
  border:1px solid rgba(255,255,255,.2);
  clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px));
  transform:translateY(14px);opacity:0;
  transition:transform .45s var(--ease-out),opacity .4s var(--ease-out),
             background .3s,border-color .3s;
  align-self:flex-start;
}
.svc-card:hover .svc-card-cta{
  transform:none;opacity:1;
  background:var(--orange);border-color:var(--orange);
}
.svc-card-cta span{
  display:inline-block;
  transition:transform .3s var(--ease-out);
}
.svc-card:hover .svc-card-cta span{transform:translateX(4px)}

/* ===== Sector scrollspy ===== */
.sec-spy{
  position:fixed;right:30px;top:50%;
  transform:translateY(-50%);
  z-index:40;pointer-events:none;
}
.sec-spy ol{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:16px;
  pointer-events:auto;
}
.sec-spy a{
  display:flex;align-items:center;gap:12px;
  font-family:var(--f-mono);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;
  color:rgba(10,11,14,.4);
  text-decoration:none;
  transition:color .25s var(--ease-out);
}
.sec-spy a span{
  display:inline-block;width:18px;text-align:right;
  color:rgba(10,11,14,.3);
  font-weight:500;
  transition:color .25s var(--ease-out);
}
.sec-spy a::after{
  content:"";width:18px;height:1px;
  background:rgba(10,11,14,.3);
  transition:width .35s var(--ease-out),background .25s var(--ease-out);
  order:99;
}
.sec-spy a:hover{color:var(--ink)}
.sec-spy a:hover::after{background:var(--ink)}
.sec-spy a:hover span{color:var(--ink)}
.sec-spy a.is-active{color:var(--orange)}
.sec-spy a.is-active::after{width:36px;background:var(--orange)}
.sec-spy a.is-active span{color:var(--orange)}

@media(max-width:1180px){.sec-spy{display:none}}

/* ==================== modals.css ==================== */
/* ============================================
   3HTS · Modals + Floating Callback Button
   Offerte aanvragen / Contact opnemen / Bel mij terug
   Dark glassmorphism with cinematic blur
   ============================================ */

/* ===== Modal base ===== */
.kn-modal{
  position:fixed;inset:0;z-index:1000;
  display:none;align-items:center;justify-content:center;
  padding:24px;
  opacity:0;transition:opacity .4s var(--ease-out);
}
.kn-modal.is-open{display:flex;opacity:1}
.kn-modal-backdrop{
  position:absolute;inset:0;
  background:rgba(8,10,14,.78);
  backdrop-filter:blur(18px) saturate(.9);
  -webkit-backdrop-filter:blur(18px) saturate(.9);
}
.kn-modal-card{
  position:relative;z-index:1;
  width:100%;max-width:940px;max-height:92vh;
  background:linear-gradient(180deg,#14181f 0%,#0c0f15 100%);
  border:1px solid rgba(255,255,255,.08);
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
  overflow:hidden;
  transform:translateY(40px) scale(.98);
  transition:transform .55s var(--ease-out);
  display:grid;grid-template-columns:340px 1fr;
  box-shadow:0 40px 120px rgba(0,0,0,.6),0 0 0 1px rgba(232,100,26,.06);
}
@media(max-width:780px){
  .kn-modal-card{grid-template-columns:1fr;max-width:560px}
}
.kn-modal.is-open .kn-modal-card{transform:translateY(0) scale(1)}
.kn-modal-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(232,100,26,.5) 50%,transparent 100%);
  z-index:5;
}

/* ============================================
   ASIDE — Cinematic visual side
   ============================================ */
.kn-modal-aside{
  position:relative;
  background:linear-gradient(160deg,#1a1f28 0%,#0a0d12 100%);
  border-right:1px solid rgba(232,100,26,.18);
  padding:36px 30px 30px;
  display:flex;flex-direction:column;
  overflow:hidden;
  box-shadow:inset -1px 0 0 0 rgba(232,100,26,.08);
}
@media(max-width:780px){
  .kn-modal-aside{display:none}
}

/* Pulserende edge glow op aside-rand */
.kn-modal-aside::after{
  content:"";
  position:absolute;top:0;right:0;width:2px;height:100%;
  background:linear-gradient(180deg,transparent 0%,rgba(232,100,26,.7) 50%,transparent 100%);
  opacity:.4;pointer-events:none;
  animation:knAsideEdgePulse 3s ease-in-out infinite;
  z-index:2;
}
@keyframes knAsideEdgePulse{
  0%,100%{opacity:.3;transform:scaleY(.7)}
  50%{opacity:.9;transform:scaleY(1)}
}

/* Aside decoratie */
.kn-modal-aside-bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.kn-modal-aside-bg span{
  position:absolute;border-radius:50%;
  filter:blur(60px);opacity:.5;pointer-events:none;
}
.kn-modal-aside-bg span:nth-child(1){
  width:280px;height:280px;
  background:radial-gradient(circle,rgba(232,100,26,.45),transparent 70%);
  top:-80px;left:-80px;
  animation:knAsideFloat1 16s ease-in-out infinite;
}
.kn-modal-aside-bg span:nth-child(2){
  width:240px;height:240px;
  background:radial-gradient(circle,rgba(80,140,200,.32),transparent 70%);
  bottom:-80px;right:-60px;
  animation:knAsideFloat2 18s ease-in-out infinite;
}
@keyframes knAsideFloat1{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(60px,40px) scale(1.15)}
}
@keyframes knAsideFloat2{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-50px,-40px) scale(1.1)}
}

/* Mesh */
.kn-modal-aside-mesh{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px) 0 0/50px 50px,
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px) 0 0/50px 50px;
  mask-image:radial-gradient(ellipse 75% 70% at 50% 50%,#000 30%,transparent 90%);
  opacity:.6;
}

/* Sparkles — 8 stuks voor extra leven */
.kn-modal-aside-sparkles{position:absolute;inset:0;pointer-events:none;z-index:0}
.kn-modal-aside-sparkles i{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:#fff;
  box-shadow:0 0 6px rgba(255,255,255,.9),0 0 12px rgba(232,100,26,.7);
  opacity:0;
}
.kn-modal-aside-sparkles i:nth-child(1){top:12%;left:18%;animation:knTwinkle 3s ease-in-out infinite}
.kn-modal-aside-sparkles i:nth-child(2){top:22%;right:14%;animation:knTwinkle 4s ease-in-out infinite 1s}
.kn-modal-aside-sparkles i:nth-child(3){top:46%;left:8%;animation:knTwinkle 3.5s ease-in-out infinite 2s}
.kn-modal-aside-sparkles i:nth-child(4){top:38%;right:24%;animation:knTwinkle 4.2s ease-in-out infinite .5s}
.kn-modal-aside-sparkles i:nth-child(5){bottom:30%;left:30%;animation:knTwinkle 3.8s ease-in-out infinite 1.5s}
.kn-modal-aside-sparkles i:nth-child(6){bottom:18%;right:12%;animation:knTwinkle 4.5s ease-in-out infinite 2.8s}
.kn-modal-aside-sparkles i:nth-child(7){top:58%;left:48%;animation:knTwinkle 3.2s ease-in-out infinite .2s}
.kn-modal-aside-sparkles i:nth-child(8){bottom:42%;right:42%;animation:knTwinkle 4s ease-in-out infinite 3.2s}
@keyframes knTwinkle{
  0%,100%{opacity:0;transform:scale(.5)}
  50%{opacity:1;transform:scale(1.6)}
}

/* Beams — diagonale lichtstrepen */
.kn-modal-aside-beams{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.kn-modal-aside-beams span{
  position:absolute;width:1px;height:160%;
  background:linear-gradient(180deg,transparent 0%,rgba(232,100,26,.55) 50%,transparent 100%);
  transform-origin:top center;
}
.kn-modal-aside-beams span:nth-child(1){left:25%;top:-30%;transform:rotate(14deg);animation:knAsideBeam 6s ease-in-out infinite}
.kn-modal-aside-beams span:nth-child(2){left:75%;top:-30%;transform:rotate(-12deg);animation:knAsideBeam 8s ease-in-out infinite 1.8s}
@keyframes knAsideBeam{
  0%,100%{opacity:.1}
  50%{opacity:.7}
}

/* Scan-line — horizontal lijn die langzaam top→bottom */
.kn-modal-aside-scan{
  position:absolute;left:0;right:0;height:2px;top:0;
  background:linear-gradient(90deg,transparent 0%,rgba(232,100,26,.55) 30%,rgba(232,100,26,.85) 50%,rgba(232,100,26,.55) 70%,transparent 100%);
  box-shadow:0 0 18px rgba(232,100,26,.55);
  pointer-events:none;z-index:1;
  animation:knAsideScan 6s linear infinite;
}
@keyframes knAsideScan{
  0%{top:0;opacity:0}
  10%{opacity:.8}
  90%{opacity:.8}
  100%{top:100%;opacity:0}
}

/* Corner brackets — oranje hoek-haakjes met pulse */
.kn-modal-aside-corner{
  position:absolute;width:24px;height:24px;
  border:2px solid var(--orange);
  z-index:2;pointer-events:none;
  opacity:.6;
  animation:knAsideCornerPulse 2.4s ease-in-out infinite;
}
.kn-modal-aside-corner.tl{top:14px;left:14px;border-right:0;border-bottom:0}
.kn-modal-aside-corner.tr{top:14px;right:14px;border-left:0;border-bottom:0;animation-delay:.6s}
.kn-modal-aside-corner.bl{bottom:14px;left:14px;border-right:0;border-top:0;animation-delay:1.2s}
.kn-modal-aside-corner.br{bottom:14px;right:14px;border-left:0;border-top:0;animation-delay:1.8s}
@keyframes knAsideCornerPulse{
  0%,100%{opacity:.4;box-shadow:0 0 0 rgba(232,100,26,0)}
  50%{opacity:1;box-shadow:0 0 18px rgba(232,100,26,.5)}
}

/* Mega wireframe icon — multi-layer met tegengestelde rotaties */
.kn-modal-aside-deco{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-58%);
  width:60%;max-width:220px;height:220px;
  pointer-events:none;z-index:0;
}
.kn-modal-aside-deco svg{
  position:absolute;inset:0;width:100%;height:100%;
  stroke-width:1.2;fill:none;
}
/* Achtergrond ring laag — draait langzaam clockwise */
.kn-modal-aside-deco .layer-ring{
  stroke:rgba(232,100,26,.18);
  animation:knAsideRotate 60s linear infinite;
  opacity:.9;
}
/* Voorgrond icoon — draait sneller counter-clockwise */
.kn-modal-aside-deco .layer-icon{
  stroke:rgba(232,100,26,.28);
  animation:knAsideRotate 36s linear infinite reverse;
  filter:drop-shadow(0 0 12px rgba(232,100,26,.25));
}
/* Subtle breath pulse op de hele deco */
.kn-modal-aside-deco{
  animation:knAsideBreath 5s ease-in-out infinite;
}
@keyframes knAsideRotate{to{transform:rotate(360deg)}}
@keyframes knAsideBreath{
  0%,100%{transform:translate(-50%,-58%) scale(1)}
  50%{transform:translate(-50%,-58%) scale(1.06)}
}

/* Aside content */
.kn-modal-aside-inner{
  position:relative;z-index:1;
  display:flex;flex-direction:column;justify-content:space-between;
  height:100%;gap:24px;
}
.kn-modal-aside-top{display:flex;flex-direction:column;gap:14px}
.kn-modal-aside-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 12px;
  background:rgba(232,100,26,.12);
  border:1px solid rgba(232,100,26,.3);
  border-radius:99px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;
  color:var(--orange-light);text-transform:uppercase;font-weight:700;
  align-self:flex-start;
}
.kn-modal-aside-badge::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 10px rgba(232,100,26,.6);
  animation:pxPulse 1.6s ease-in-out infinite;
}
.kn-modal-aside-tagline{
  font-family:var(--f-display);font-weight:600;
  font-size:22px;line-height:1.2;color:#fff;
  margin:0;
}
.kn-modal-aside-tagline em{
  font-family:var(--f-italic);font-style:italic;font-weight:400;
  color:var(--orange);
}

/* Belofte bullets — staggered fade-in bij modal-open + pop checkmark */
.kn-modal-aside-list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:14px;
}
.kn-modal-aside-list li{
  display:flex;gap:12px;
  font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.78);
  position:relative;
  opacity:0;transform:translateX(-12px);
}
.kn-modal.is-open .kn-modal-aside-list li{
  animation:knBulletIn .55s var(--ease-out) forwards;
}
.kn-modal.is-open .kn-modal-aside-list li:nth-child(1){animation-delay:.35s}
.kn-modal.is-open .kn-modal-aside-list li:nth-child(2){animation-delay:.5s}
.kn-modal.is-open .kn-modal-aside-list li:nth-child(3){animation-delay:.65s}
@keyframes knBulletIn{
  to{opacity:1;transform:translateX(0)}
}

/* Check-circle */
.kn-modal-aside-list li::before{
  content:"";flex-shrink:0;
  width:18px;height:18px;border-radius:50%;
  background:rgba(232,100,26,.15);
  border:1px solid rgba(232,100,26,.5);
  position:relative;
  margin-top:1px;
  box-shadow:0 0 0 0 rgba(232,100,26,.5);
  animation:knCheckPulse 3s ease-in-out infinite;
}
.kn-modal-aside-list li:nth-child(2)::before{animation-delay:.5s}
.kn-modal-aside-list li:nth-child(3)::before{animation-delay:1s}
@keyframes knCheckPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(232,100,26,.4)}
  50%{box-shadow:0 0 0 4px rgba(232,100,26,0)}
}

/* Checkmark draw via clip-path animation */
.kn-modal-aside-list li::after{
  content:"";position:absolute;top:5px;left:5px;
  width:8px;height:5px;
  border-left:1.5px solid var(--orange);
  border-bottom:1.5px solid var(--orange);
  transform:rotate(-45deg) scale(0);
  transform-origin:center;
}
.kn-modal.is-open .kn-modal-aside-list li::after{
  animation:knCheckPop .4s var(--ease-out) forwards;
}
.kn-modal.is-open .kn-modal-aside-list li:nth-child(1)::after{animation-delay:.55s}
.kn-modal.is-open .kn-modal-aside-list li:nth-child(2)::after{animation-delay:.7s}
.kn-modal.is-open .kn-modal-aside-list li:nth-child(3)::after{animation-delay:.85s}
@keyframes knCheckPop{
  0%{transform:rotate(-45deg) scale(0)}
  60%{transform:rotate(-45deg) scale(1.4)}
  100%{transform:rotate(-45deg) scale(1)}
}

/* Bottom direct contact */
.kn-modal-aside-direct{
  display:flex;flex-direction:column;gap:8px;
  padding-top:18px;border-top:1px solid rgba(255,255,255,.08);
}
.kn-modal-aside-direct-lbl{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;
  color:rgba(255,255,255,.4);text-transform:uppercase;font-weight:600;
}
.kn-modal-aside-direct a{
  display:flex;align-items:center;gap:8px;
  color:#fff;text-decoration:none;
  font-size:14px;font-weight:500;
  transition:color .2s var(--ease-out);
}
.kn-modal-aside-direct a:hover{color:var(--orange)}
.kn-modal-aside-direct svg{width:14px;height:14px;flex-shrink:0;stroke:var(--orange);fill:none;stroke-width:2}

/* ===== Modal head ===== */
.kn-modal-head{
  position:relative;padding:30px 32px 18px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.kn-modal-kicker{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;
  color:var(--orange);text-transform:uppercase;margin-bottom:10px;
  display:flex;align-items:center;gap:8px;
}
.kn-modal-kicker::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 12px rgba(232,100,26,.7);
}
.kn-modal-head h2{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(26px,2.6vw,36px);line-height:1.05;
  color:#fff;text-transform:uppercase;letter-spacing:-.015em;
  margin:0;
}
.kn-modal-head h2 em{
  font-family:var(--f-italic);font-style:italic;font-weight:400;
  color:var(--orange);text-transform:none;letter-spacing:.005em;
}
.kn-modal-head p{
  font-size:14px;line-height:1.5;color:rgba(255,255,255,.62);
  margin:10px 0 0;max-width:46ch;
}
.kn-modal-close{
  position:absolute;top:18px;right:18px;
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  color:#fff;font-size:22px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s var(--ease-out),transform .2s var(--ease-out);
}
.kn-modal-close:hover{background:rgba(232,100,26,.2);border-color:rgba(232,100,26,.4);transform:rotate(90deg)}

/* ===== Modal body + form ===== */
.kn-modal-body{padding:24px 32px 30px;overflow-y:auto;flex:1}
.kn-modal-form{display:flex;flex-direction:column;gap:18px}
.kn-form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.kn-form-row{grid-template-columns:1fr}}
.kn-field{position:relative;display:flex;flex-direction:column}
.kn-field label{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;
  color:rgba(255,255,255,.55);text-transform:uppercase;margin-bottom:8px;
}
.kn-field label .req{color:var(--orange)}
.kn-field input,
.kn-field select,
.kn-field textarea{
  width:100%;padding:13px 14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  color:#fff;font-family:var(--f-body);font-size:15px;
  border-radius:0;outline:none;
  transition:border-color .2s var(--ease-out),background .2s var(--ease-out);
  box-sizing:border-box;
}
.kn-field input:focus,
.kn-field select:focus,
.kn-field textarea:focus{
  border-color:rgba(232,100,26,.7);
  background:rgba(255,255,255,.06);
}
.kn-field textarea{min-height:90px;resize:vertical}
.kn-field select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23E8641A' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px;
  padding-right:36px;
}
.kn-field select option{background:#0c0f15;color:#fff}

/* ===== Checkboxes ===== */
.kn-checks{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin-top:6px}
@media(max-width:520px){.kn-checks{grid-template-columns:1fr}}
.kn-check{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;color:rgba(255,255,255,.85)}
.kn-check input{
  width:18px;height:18px;accent-color:var(--orange);cursor:pointer;
  margin:0;padding:0;border:0;
}

/* ===== Submit button ===== */
.kn-submit{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 28px;
  background:linear-gradient(135deg,var(--orange) 0%,#B53F00 100%);
  color:#fff;font-family:var(--f-mono);font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;font-weight:600;cursor:pointer;
  border:0;outline:none;margin-top:8px;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),filter .2s var(--ease-out);
  box-shadow:0 12px 32px rgba(232,100,26,.35);
}
.kn-submit:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(232,100,26,.5);filter:brightness(1.08)}
.kn-submit:active{transform:translateY(0)}
.kn-submit span.arrow{transition:transform .25s var(--ease-out)}
.kn-submit:hover span.arrow{transform:translateX(4px)}

/* ===== Footer info ===== */
.kn-modal-foot{
  padding:18px 32px;border-top:1px solid rgba(255,255,255,.06);
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-size:12px;color:rgba(255,255,255,.45);flex-wrap:wrap;
}
.kn-modal-foot a{color:rgba(255,255,255,.72);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.2)}
.kn-modal-foot a:hover{color:var(--orange);border-color:var(--orange)}
.kn-modal-foot .kn-modal-direct{display:flex;gap:14px;align-items:center}

/* ===== Success state — full card overlay ===== */
.kn-modal-success{
  position:absolute;inset:0;z-index:6;
  background:linear-gradient(180deg,#14181f 0%,#0c0f15 100%);
  display:none;flex-direction:column;
  align-items:center;justify-content:center;
  padding:50px 32px;text-align:center;
}
.kn-modal-success.is-active{display:flex}
.kn-modal-success-icon{
  width:72px;height:72px;border-radius:50%;
  background:linear-gradient(135deg,#34d058 0%,#1f7a32 100%);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 22px;
  box-shadow:0 0 40px rgba(52,208,88,.45);
  animation:knSuccessPop .6s var(--ease-out);
}
.kn-modal-success-icon svg{width:36px;height:36px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.kn-modal-success h3{
  font-family:var(--f-display);font-size:28px;color:#fff;
  margin:0 0 10px;text-transform:uppercase;letter-spacing:-.01em;
}
.kn-modal-success h3 em{font-family:var(--f-italic);font-style:italic;font-weight:400;color:var(--orange);text-transform:none}
.kn-modal-success p{color:rgba(255,255,255,.66);margin:0;font-size:15px;line-height:1.55}
@keyframes knSuccessPop{
  0%{transform:scale(.3);opacity:0}
  60%{transform:scale(1.1);opacity:1}
  100%{transform:scale(1);opacity:1}
}

/* ============================================
   FLOATING CALLBACK BUTTON — Bel mij terug FAB
   ============================================ */
.kn-fab{
  position:fixed;bottom:28px;right:28px;z-index:900;
  display:flex;align-items:center;
}
.kn-fab-label{
  background:#14181f;color:#fff;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:600;
  padding:10px 16px;margin-right:-8px;
  border:1px solid rgba(255,255,255,.1);
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);
  opacity:0;transform:translateX(20px);
  transition:opacity .3s var(--ease-out),transform .3s var(--ease-out);
  pointer-events:none;
}
.kn-fab:hover .kn-fab-label{opacity:1;transform:translateX(0)}
.kn-fab-btn{
  position:relative;
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,var(--orange) 0%,#B53F00 100%);
  color:#fff;cursor:pointer;
  border:0;outline:none;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 16px 48px rgba(232,100,26,.45),0 0 0 0 rgba(232,100,26,.6);
  animation:knFabPulse 2.4s infinite ease-out;
  transition:transform .25s var(--ease-out);
}
.kn-fab-btn:hover{transform:scale(1.08)}
.kn-fab-btn svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@keyframes knFabPulse{
  0%{box-shadow:0 16px 48px rgba(232,100,26,.45),0 0 0 0 rgba(232,100,26,.6)}
  70%{box-shadow:0 16px 48px rgba(232,100,26,.45),0 0 0 24px rgba(232,100,26,0)}
  100%{box-shadow:0 16px 48px rgba(232,100,26,.45),0 0 0 0 rgba(232,100,26,0)}
}
@media(max-width:600px){
  .kn-fab{bottom:18px;right:18px}
  .kn-fab-btn{width:56px;height:56px}
  .kn-fab-btn svg{width:24px;height:24px}
  .kn-fab-label{display:none}
}

/* Lock body when modal is open */
body.kn-modal-locked{overflow:hidden}


/* ------------------------------------------------------------------
   Duidelijk maken op welke vacature iemand reageert. Kwam je binnen via
   een vacature, dan staat die naam bovenin de popup en staat het
   functieveld vast. Toegevoegd 17-09-2026.
   ------------------------------------------------------------------ */
.am-vacature{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;
  margin-top:14px;padding:11px 14px;border-radius:8px;
  background:rgba(232,100,26,.12);border:1px solid rgba(232,100,26,.38);
}
.am-vacature-lbl{
  font-family:var(--f-mono,monospace);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.62);
}
.am-vacature-naam{
  font-family:var(--f-display,'Barlow Condensed',sans-serif);font-weight:700;
  font-size:17px;letter-spacing:.01em;color:#fff;
}
.kn-modal-form input.is-vast{
  background:rgba(255,255,255,.04);color:rgba(255,255,255,.72);cursor:default;
}

/* ==================== nav-pro.css ==================== */
/* ============================================
   3HTS · Nav Pro v2 — Dark premium navigation
   Donkere achtergrond, witte tekst, maximum impact
   Hover-bridge fix voor sub-menu
   ============================================ */

/* HARD overrides van core.css en components.css */
.nav,
.nav:not(.scrolled),
.nav.scrolled{
  position:fixed !important;top:0;left:0;right:0;z-index:100;
  padding:14px 36px !important;
  display:flex !important;align-items:center;justify-content:space-between;
  gap:16px;
  background:rgba(13,17,23,.92) !important;
  backdrop-filter:blur(30px) saturate(1.4) !important;
  -webkit-backdrop-filter:blur(30px) saturate(1.4) !important;
  border-bottom:1px solid rgba(232,100,26,.25) !important;
  box-shadow:0 12px 40px rgba(0,0,0,.4),0 1px 0 rgba(255,255,255,.04) inset !important;
  transition:background .35s var(--ease-out),padding .3s var(--ease-out) !important;
}
@media(max-width:1200px){.nav{padding:14px 24px !important}}

/* Top accent stripe — pulserend oranje */
.nav::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:2;
  background:linear-gradient(90deg,
    transparent 0%,
    var(--orange) 15%,
    var(--orange-light) 35%,
    var(--orange-light) 65%,
    var(--orange) 85%,
    transparent 100%
  );
  pointer-events:none;
  animation:navStripeGlow 4s ease-in-out infinite;
}
@keyframes navStripeGlow{
  0%,100%{opacity:.7;filter:brightness(1)}
  50%{opacity:1;filter:brightness(1.3)}
}

/* ===== Logo ===== */
.nav-logo{
  display:flex !important;align-items:center;gap:14px;
  text-decoration:none !important;
  transition:transform .3s var(--ease-out);
  position:relative;
}
.nav-logo:hover{transform:translateX(2px)}
.nav-logo .logo-mark{
  width:auto !important;height:auto !important;
  display:inline-flex !important;align-items:center;
  position:relative;flex-shrink:0;
  background:transparent;overflow:visible !important;
}
.nav-logo .logo-mark img,
.nav-logo .logo-mark svg{
  height:52px !important;width:auto !important;max-width:280px !important;
  display:block !important;
  object-fit:contain !important;object-position:left center !important;
  filter:drop-shadow(0 2px 10px rgba(232,100,26,.3));
}
/* Verberg de zelfgemaakte "3HTS Technical Services" tekst-span — alleen origineel logo */
.nav-logo > span:not(.logo-mark){display:none !important}
.nav-logo small{
  display:block !important;font-size:9px !important;letter-spacing:.26em !important;
  color:rgba(255,255,255,.55) !important;
  font-weight:600 !important;margin-top:4px !important;text-transform:uppercase !important;
}

/* ===== Menu items ===== */
.nav-items{
  display:flex !important;align-items:center;gap:2px;list-style:none !important;
  margin:0 !important;padding:0 !important;
}
.nav-items > li{position:relative}
.nav-items > li > a{
  display:inline-flex !important;align-items:center;gap:6px;
  padding:11px 16px !important;
  font-family:var(--f-display) !important;font-weight:700 !important;
  font-size:13px !important;letter-spacing:.1em !important;text-transform:uppercase !important;
  color:rgba(255,255,255,.92) !important;
  text-decoration:none !important;
  position:relative;
  transition:color .25s var(--ease-out) !important;
  background:transparent !important;border-radius:0 !important;
  white-space:nowrap !important;
}
.nav-items > li > a::after{
  content:"";position:absolute;left:18px;right:18px;bottom:4px;height:2px;
  background:linear-gradient(90deg,var(--orange),var(--orange-light)) !important;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .35s var(--ease-out);
}
.nav-items > li > a:hover{color:var(--orange-light) !important}
.nav-items > li > a:hover::after{transform:scaleX(1)}
.nav-items > li > a.active{color:var(--orange-light) !important}
.nav-items > li > a.active::after{transform:scaleX(1)}

/* Has-sub chevron — absolute aan rechterkant */
.nav-items .has-sub{position:relative}
.nav-items .has-sub > a{padding-right:30px !important}
.nav-items .has-sub > a::before{
  content:"" !important;display:block !important;
  position:absolute !important;
  right:12px !important;top:50% !important;
  width:6px;height:6px;margin:0 !important;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-65%) rotate(45deg);
  transition:transform .25s var(--ease-out);
}
.nav-items .has-sub:hover > a::before{transform:translateY(-25%) rotate(-135deg)}
/* Has-sub underline iets korter, eindigt voor chevron */
.nav-items .has-sub > a::after{right:30px !important}

/* ===== HOVER-BRIDGE FIX ===== */
/* Invisible padding-bridge tussen parent en sub-menu zodat muis er niet doorheen valt */
.nav-items .has-sub::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:20px;
  pointer-events:auto;
}
.nav-items .has-sub:hover::after{pointer-events:auto}

/* ===== Sub-menu / Dropdown ===== */
.nav-sub{
  position:absolute !important;top:calc(100% + 18px);left:-12px;
  min-width:360px;padding:14px !important;
  background:linear-gradient(180deg,#14181f 0%,#0c0f15 100%) !important;
  border:1px solid rgba(232,100,26,.25) !important;
  border-radius:0 !important;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
  box-shadow:0 32px 80px rgba(0,0,0,.6),0 0 0 1px rgba(232,100,26,.1) !important;
  opacity:0;pointer-events:none;transform:translateY(8px);
  transition:opacity .25s var(--ease-out),transform .25s var(--ease-out);
  list-style:none !important;
  z-index:110;
}
.nav-items .has-sub:hover .nav-sub{
  opacity:1;pointer-events:auto;transform:translateY(0);
}
/* Verwijder browser focus-outline op nav-links die kan blijven hangen */
.nav-items > li > a:focus{outline:none}
.nav-items > li > a:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:2px}
/* Top oranje accent line in dropdown */
.nav-sub::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--orange) 50%,transparent);
  z-index:1;
}
.nav-sub li{margin:0}
.nav-sub li a{
  display:flex !important;flex-direction:column !important;gap:3px !important;
  padding:14px 16px !important;border-radius:0 !important;
  font-size:14px !important;line-height:1.3 !important;
  text-transform:none !important;letter-spacing:0 !important;
  font-family:var(--f-body) !important;font-weight:700 !important;
  color:#fff !important;text-decoration:none !important;
  position:relative;
  transition:background .2s var(--ease-out),padding-left .25s var(--ease-out),color .2s var(--ease-out) !important;
  background:transparent !important;
}
.nav-sub li a small{
  display:block !important;font-family:var(--f-mono) !important;
  font-size:10px !important;letter-spacing:.14em !important;
  color:rgba(255,255,255,.5) !important;text-transform:uppercase !important;
  font-weight:600 !important;
}
.nav-sub li a::after{display:none !important}
.nav-sub li a:hover{
  background:rgba(232,100,26,.12) !important;
  color:var(--orange-light) !important;
  padding-left:22px !important;
}
.nav-sub li a:hover small{color:rgba(255,176,122,.7) !important}

/* ===== Right group ===== */
.nav-lang{
  display:inline-flex !important;align-items:center;gap:0;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  padding:3px;
  margin-right:6px;
}
.nav-lang-btn{
  display:inline-flex !important;align-items:center;justify-content:center;
  padding:6px 12px !important;
  font-family:var(--f-mono) !important;font-size:11px !important;
  letter-spacing:.16em !important;font-weight:800 !important;
  color:rgba(255,255,255,.75) !important;text-decoration:none !important;text-transform:uppercase !important;
  transition:background .2s var(--ease-out),color .2s var(--ease-out) !important;
  cursor:pointer;background:transparent !important;
}
.nav-lang-btn.is-active{
  background:var(--orange-3) !important;color:#fff !important;
  box-shadow:0 2px 12px rgba(232,100,26,.5) !important;
}
.nav-lang-btn:not(.is-active):hover{color:var(--orange-light) !important;background:rgba(232,100,26,.1) !important}

/* CTA group */
.nav-cta{display:flex !important;align-items:center;gap:12px !important}

/* Phone pill */
.nav-phone{
  display:inline-flex !important;align-items:center;gap:10px !important;
  padding:10px 18px !important;
  font-family:var(--f-mono) !important;font-size:13px !important;
  font-weight:700 !important;letter-spacing:.04em !important;
  color:#fff !important;text-decoration:none !important;
  background:rgba(255,255,255,.06) !important;
  border:1.5px solid rgba(255,255,255,.16) !important;
  border-radius:99px !important;
  transition:all .25s var(--ease-out) !important;
  white-space:nowrap !important;flex-shrink:0;
}
.nav-phone:hover{
  color:#fff !important;
  background:var(--orange) !important;border-color:var(--orange) !important;
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(232,100,26,.5) !important;
}
.nav-phone-dot{
  width:9px !important;height:9px !important;border-radius:50% !important;
  background:#2FB673 !important;
  box-shadow:0 0 0 3px rgba(47,182,115,.25),0 0 14px rgba(47,182,115,.7) !important;
  animation:pulse 2s ease-in-out infinite !important;
  flex-shrink:0;
}

/* CTA button — Offerte aanvragen */
.nav-cta .btn.btn-primary,
.nav-cta .btn-primary{
  background:linear-gradient(135deg,var(--orange-3) 0%,#B53F00 100%) !important;
  color:#fff !important;
  padding:12px 24px !important;font-size:12px !important;
  font-family:var(--f-mono) !important;font-weight:800 !important;
  letter-spacing:.16em !important;text-transform:uppercase !important;
  border:0 !important;outline:none;
  display:inline-flex !important;align-items:center;gap:10px;
  text-decoration:none !important;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  box-shadow:0 10px 28px rgba(232,100,26,.45) !important;
  transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),filter .2s var(--ease-out) !important;
}
.nav-cta .btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 36px rgba(232,100,26,.6) !important;
  filter:brightness(1.12);
}
.nav-cta .btn-primary svg{transition:transform .25s var(--ease-out)}
.nav-cta .btn-primary:hover svg{transform:translateX(4px)}

/* Burger menu */
.nav-burger{
  display:none;background:transparent !important;border:0 !important;outline:none;cursor:pointer;
  width:44px;height:44px;position:relative;flex-shrink:0;
}
.nav-burger span{
  position:absolute !important;left:10px;right:10px;height:2px;
  background:#fff !important;border-radius:2px;
  transition:all .3s var(--ease-out) !important;
}
.nav-burger span:nth-child(1){top:14px}
.nav-burger span:nth-child(2){top:21px}
.nav-burger span:nth-child(3){top:28px}
.nav-burger.open span:nth-child(1){top:21px;transform:rotate(45deg);background:var(--orange) !important}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){top:21px;transform:rotate(-45deg);background:var(--orange) !important}

/* Scroll progress */
.nav-progress{
  position:fixed;top:0;left:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--orange) 0%,#fff5ea 50%,var(--orange) 100%);
  z-index:101;
  transition:width .08s linear;
  box-shadow:0 0 16px rgba(232,100,26,.8);
}

/* Mobile breakpoints */
@media(max-width:1200px){
  .nav{padding:14px 20px !important;gap:8px !important}
  .nav-items > li > a{padding:9px 12px !important;font-size:12px !important;letter-spacing:.08em !important}
  .nav-phone{padding:8px 14px !important;font-size:12px !important}
  .nav-cta .btn-primary{padding:10px 18px !important;font-size:11px !important}
  .nav-logo .logo-mark img{height:44px !important;max-width:230px !important}
}
@media(max-width:960px){
  .nav-lang{display:none !important}
}
@media(max-width:960px){
  .nav-items,.nav-cta{display:none !important}
  .nav-burger{display:block !important}
  .nav-mobile{display:block}
}


/* ------------------------------------------------------------------
   De bovenbalk doortrekken tot de bovenrand van het scherm.
   Op een telefoon met een inkeping loopt de pagina onder de statusbalk
   door, want de viewport staat op cover. De balk was daar niet hoog
   genoeg voor, waardoor je de pagina door die strook heen zag scrollen.
   Hieronder wordt de balk precies zoveel hoger als die strook diep is,
   zodat zijn achtergrond en het matglas de hele strook afdekken.
   Op een computer is de veilige zone nul, daar verandert dus niets.
   Dit heet de veilige zone van de telefoon. Toegevoegd 16-09-2026.
   ------------------------------------------------------------------ */
@supports (padding-top: env(safe-area-inset-top)) {
  /* Alle drie de selectors, ook :not(.scrolled). Bovenin dit bestand staat
     die zwaardere selector met 14px, en die won anders in de beginstand,
     zodat de telefoonrand pas na scrollen werd meegenomen. Gecorrigeerd
     17-09-2026. Op een computer is de rand nul, dus 14px zoals altijd. */
  .nav,
  .nav:not(.scrolled),
  .nav.scrolled { padding-top: calc(14px + env(safe-area-inset-top, 0px)) !important; }
}


/* ------------------------------------------------------------------
   Meer matglas en de bovenrand van het scherm afdekken.
   Het eerste omdat de balk anders te doorzichtig oogt boven een foto.
   Het tweede omdat je op een telefoon de pagina zag scrollen door de
   strook onder de statusbalk. Deze schaduwlaag loopt vanaf de bovenkant
   van de balk door naar boven, zodat die strook altijd bedekt is,
   hoe diep hij op dat toestel ook is. Toegevoegd 16-09-2026.
   ------------------------------------------------------------------ */
.nav::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:100%;
  height:220px;
  background:rgba(13,17,23,.94);
  -webkit-backdrop-filter:blur(30px) saturate(1.4);
  backdrop-filter:blur(30px) saturate(1.4);
  pointer-events:none;
}

/* ==================== btn-pro.css ==================== */
/* ============================================
   3HTS · Button Pro
   Site-brede CTA button upgrade
   Overrides defaults from core.css
   ============================================ */

/* ===== Base button ===== */
.btn:not(.nav-cta .btn):not(.nav-lang-btn){
  display:inline-flex !important;align-items:center;gap:10px;
  font-family:var(--f-mono) !important;font-weight:800 !important;
  font-size:13px !important;letter-spacing:.14em !important;
  text-transform:uppercase !important;
  padding:15px 28px !important;
  border:0;cursor:pointer;
  border-radius:0 !important;
  text-decoration:none !important;white-space:nowrap;
  position:relative;overflow:visible !important;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),filter .2s var(--ease-out),background .25s var(--ease-out),color .25s var(--ease-out) !important;
}

/* ===== Primary — Orange gradient ===== */
.btn-primary:not(.nav-cta .btn-primary){
  background:linear-gradient(135deg,var(--orange-3) 0%,#B53F00 100%) !important;
  color:#fff !important;
  box-shadow:0 10px 28px rgba(232,100,26,.4) !important;
}
.btn-primary:not(.nav-cta .btn-primary):hover{
  transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(232,100,26,.55) !important;
  filter:brightness(1.12);
}
.btn-primary:not(.nav-cta .btn-primary):active{
  transform:translateY(-1px);
}
/* Override the text-arrow "→" from core.css */
.btn-primary:not(.nav-cta .btn-primary)::after{
  content:"→" !important;
  margin-left:4px !important;
  display:inline-block !important;
  transition:transform .25s var(--ease-out) !important;
  font-family:var(--f-display) !important;
  font-weight:800 !important;
}
.btn-primary:not(.nav-cta .btn-primary):hover::after{
  transform:translateX(6px) !important;
}

/* ===== Outline — Sharp + subtle bg ===== */
.btn-outline:not(.nav-cta .btn-outline){
  background:transparent !important;color:var(--knop-rand-inkt,var(--ink)) !important;
  border:1.5px solid var(--knop-rand,rgba(28,29,33,.2)) !important;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  position:relative;
}
.btn-outline:not(.nav-cta .btn-outline)::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,var(--orange-3) 0%,#B53F00 100%);
  opacity:0;transition:opacity .3s var(--ease-out);
  z-index:-1;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
}
.btn-outline:not(.nav-cta .btn-outline):hover{
  color:#fff !important;
  border-color:var(--orange) !important;
  transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(232,100,26,.3) !important;
}
.btn-outline:not(.nav-cta .btn-outline):hover::before{opacity:1}

/* Outline on dark sections (cta-big) - keep light text — higher specificity */
.cta-big .btn-outline:not(.nav-cta .btn-outline),
.dark-sec .btn-outline:not(.nav-cta .btn-outline),
.svc-cross-card .btn-outline:not(.nav-cta .btn-outline){
  color:#fff !important;
  border-color:rgba(255,255,255,.3) !important;
}
.cta-big .btn-outline:not(.nav-cta .btn-outline):hover,
.dark-sec .btn-outline:not(.nav-cta .btn-outline):hover{
  color:#fff !important;border-color:var(--orange) !important;
}
.cta-big .btn-outline:not(.nav-cta .btn-outline):hover::before,
.dark-sec .btn-outline:not(.nav-cta .btn-outline):hover::before{opacity:1}

/* ===== Sizes ===== */
.btn-lg:not(.nav-cta .btn-lg){
  padding:18px 36px !important;font-size:14px !important;letter-spacing:.16em !important;
}
.btn-sm:not(.nav-cta .btn-sm){
  padding:11px 20px !important;font-size:12px !important;letter-spacing:.12em !important;
}

/* ===== Ghost ===== */
.btn-ghost:not(.nav-cta .btn-ghost){
  background:transparent !important;color:var(--ink) !important;
  padding:12px 0 !important;
  border:0 !important;border-bottom:2px solid var(--ink) !important;
  border-radius:0 !important;
  clip-path:none !important;
  font-family:var(--f-mono) !important;font-weight:700 !important;
  font-size:13px !important;letter-spacing:.14em !important;
  transition:color .2s var(--ease-out),border-color .2s var(--ease-out) !important;
}
.btn-ghost:not(.nav-cta .btn-ghost):hover{
  color:var(--orange-ink) !important;
  border-color:var(--orange) !important;
}

/* ===== Tel button-style — apart, met groene dot ===== */
a[href^="tel:"].btn{
  position:relative;
}
a[href^="tel:"].btn::before{
  content:"";display:inline-block;
  width:9px;height:9px;border-radius:50%;
  background:#2FB673;
  box-shadow:0 0 0 3px rgba(47,182,115,.25),0 0 14px rgba(47,182,115,.7);
  animation:pulse 2s ease-in-out infinite;
  margin-right:4px;flex-shrink:0;
}

/* ==================== layout-fix.css ==================== */
/* ============================================
   3HTS · Layout fixes
   Site-brede compactie — typografie +1px versie
   ============================================ */

/* ===== Site-brede schaling ===== */
html{font-size:16px}
body{font-size:16px;line-height:1.55}
p{font-size:16px;line-height:1.6}

/* Section padding compacter */
.sec{padding:50px 0 !important}
.sec.sec-sm{padding:32px 0}
.sec.sec-lg{padding:70px 0}
.section{padding:50px 0}
.section-sm{padding:32px 0}
.section-lg{padding:70px 0}

/* Section heads compacter */
.sec-head{margin-bottom:30px !important}

/* h-section binnen pages */
.h-section{
  font-size:clamp(23px,2.4vw,37px) !important;
  line-height:1.08 !important;
  letter-spacing:-.005em !important;
}
.sec-head .lead{
  font-size:16px;
  line-height:1.6;
  max-width:62ch;
}
.lead{
  font-size:16px;
  line-height:1.6;
}

/* Kicker pill */
.kicker{
  font-size:11px !important;letter-spacing:.16em !important;
  padding:5px 12px !important;
}

/* ===== Service cards (svc-card) typografie ===== */
.svc-card-title{
  font-size:clamp(19px,1.8vw,25px) !important;
  line-height:1.12 !important;
}
.svc-card-desc{
  font-size:15px;
  line-height:1.5;
}
.svc-card-label{font-size:11px;letter-spacing:.18em}
.svc-card-cta{font-size:12px;letter-spacing:.14em}
.svc-card-no{font-size:92px !important}

/* Sector cards */
.sector h3{font-size:clamp(21px,2vw,27px) !important;line-height:1.1 !important}
.sector p{font-size:15px;line-height:1.55}

/* Feat-card typografie */
.feat-card h4{font-size:clamp(17px,1.6vw,23px) !important;line-height:1.15 !important}
.feat-card p{font-size:15px !important;line-height:1.55 !important}
.feat-card-num{font-size:92px !important;top:-8px !important}
.feat-card-tag{font-size:11px}
.feat-card-meta-key{font-size:11px}
.feat-card-meta-val{font-size:11px}

/* ===== Homepage hero (hero-v3) ===== */
.hero-v3{
  min-height:auto !important;height:auto !important;
  padding:100px var(--pad-x) 50px !important;
}
@media(max-width:960px){
  .hero-v3{padding:84px var(--pad-x) 40px !important}
}
.hero-v3 h1{
  font-size:clamp(29px,3.6vw,53px);
  line-height:.98;letter-spacing:-.015em;
}
.hero-v3-lead{
  font-size:16px;line-height:1.55;
  max-width:44ch;
}
.hero-v3-grid{gap:36px;align-items:center}

/* Service hero (dienstpagina's) */
.svc-hero{padding:110px var(--pad-x) 50px !important}
@media(max-width:960px){
  .svc-hero{padding:90px var(--pad-x) 40px !important}
}
.svc-hero h1{
  font-size:clamp(27px,3.4vw,49px);
  line-height:.98;
}
.svc-hero-lead{
  font-size:16px;line-height:1.55;
  max-width:48ch;
}

/* Cases / Sectoren / About / FAQ hero */
.cases-hero,
.sec-hero,
.about-hero,
.faq-hero{padding:110px var(--pad-x) 50px !important}
@media(max-width:960px){
  .cases-hero,.sec-hero,.about-hero,.faq-hero{padding:84px var(--pad-x) 32px !important}
}
.cases-hero h1,
.sec-hero h1,
.about-hero h1,
.faq-hero h1{
  font-size:clamp(29px,3.6vw,53px) !important;
  line-height:.96 !important;
}
.cases-hero-lead,.sec-hero-lead,.about-lead{
  font-size:16px !important;line-height:1.55 !important;max-width:60ch;
}

/* CTA-big sectie — strak, compact */
.cta-big{padding:36px var(--pad-x) !important}
.cta-big-inner{max-width:760px;margin:0 auto;text-align:center}
.cta-big .kicker{margin-bottom:14px !important}
.cta-big h2{
  font-size:clamp(21px,2.4vw,33px) !important;
  line-height:1.05 !important;letter-spacing:-.005em !important;
  margin:0 !important;
}
.cta-big p{
  font-size:16px;
  max-width:46ch;margin:10px auto 18px;line-height:1.55;
}
.cta-big-actions{margin-top:14px;gap:10px}
.cta-big-contact{
  margin-top:22px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.08);
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
}
@media(max-width:720px){.cta-big-contact{grid-template-columns:repeat(2,1fr)}}
.cta-big-contact-item{display:flex;flex-direction:column;gap:2px;text-align:center}
.cta-big-contact-item span{font-size:11px;letter-spacing:.18em;color:rgba(255,255,255,.6)}
.cta-big-contact-item a{font-size:13.5px;color:#fff;text-decoration:none}
.cta-big-contact-item a:hover{color:var(--orange)}

/* ===== Footer compacter ===== */
.footer{padding:50px var(--pad-x) 20px !important}
.footer-top{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:32px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
@media(max-width:960px){
  .footer{padding:36px var(--pad-x) 16px !important}
  .footer-top{grid-template-columns:1fr 1fr;gap:30px !important;padding-bottom:24px !important}
}
@media(max-width:560px){
  .footer-top{grid-template-columns:1fr;gap:24px !important}
}
.footer-brand-desc{
  font-size:14px;line-height:1.55;
  margin-top:14px;color:rgba(255,255,255,.55);
  max-width:30ch;
}
.footer-col h3{
  font-family:var(--f-mono);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.5);font-weight:600;
  margin:0 0 14px;
}
.footer-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.footer-col li{margin:0}
.footer-col a{
  font-size:14px;color:rgba(255,255,255,.78);
  text-decoration:none;line-height:1.4;
  transition:color .2s var(--ease-out);
}
.footer-col a:hover{color:var(--orange)}
.footer-socials{display:flex;gap:10px;margin-top:18px}
.footer-socials a{
  width:36px;height:36px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);color:rgba(255,255,255,.75);
  border:1px solid rgba(255,255,255,.1);
  transition:all .2s var(--ease-out);
}
.footer-socials a svg{width:16px;height:16px}
.footer-socials a:hover{background:var(--orange);color:#fff;border-color:var(--orange)}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  font-size:12px;
  color:rgba(255,255,255,.55);
  padding-top:18px;
  gap:14px;flex-wrap:wrap;
}
.footer-bottom a{
  color:rgba(255,255,255,.55);text-decoration:none;
  font-size:12px;
}
.footer-bottom a:hover{color:var(--orange)}

/* ===== Buttons ===== */
.btn:not(.nav-cta .btn):not(.nav-lang-btn){
  padding:13px 24px !important;font-size:12.5px !important;
  letter-spacing:.12em !important;gap:8px;
}
.btn-lg:not(.nav-cta .btn-lg){
  padding:14px 28px !important;font-size:13px !important;
}
.btn-sm:not(.nav-cta .btn-sm){
  padding:10px 18px !important;font-size:12px !important;
}

/* ===== FAQ v2 ===== */
.faq-v2-q{padding:20px 14px 20px 0 !important}
.faq-v2-q-no{font-size:12px !important}
.faq-v2-q-text{font-size:clamp(16px,1.4vw,19px) !important;line-height:1.3 !important}
.faq-v2-q-toggle{width:36px !important;height:36px !important;font-size:19px !important}
.faq-v2-a-inner{padding:0 56px 0 76px !important}
.faq-v2-a-inner p{font-size:16px !important;line-height:1.55 !important;margin-bottom:18px !important}

/* ===== Process flow steps ===== */
.svc-flow-step{padding:24px 18px !important;gap:10px !important}
.svc-flow-step h4{font-size:17px !important;line-height:1.15 !important;margin-top:2px !important}
.svc-flow-step p{font-size:15px !important;line-height:1.5 !important}
.svc-flow-num{font-size:11px}
.svc-flow-icon{width:38px !important;height:38px !important}
.svc-flow-icon svg{width:18px !important;height:18px !important}

/* ===== Modal ===== */
.kn-modal-head{padding:24px 26px 14px !important}
.kn-modal-head h2{font-size:clamp(21px,2vw,29px);line-height:1.1}
.kn-modal-head p{font-size:16px;margin-top:8px}
.kn-modal-body{padding:18px 26px 24px}
.kn-field label{font-size:11px}
.kn-field input,.kn-field select,.kn-field textarea{font-size:16px;padding:11px 12px}
.kn-submit{padding:14px 24px;font-size:13px}

/* ===== Container max-width ===== */
.container{max-width:1180px !important}

/* ===== Body small text & links ===== */
a{font-size:inherit}
li{font-size:16px}

/* ===== Footer logo — alleen het originele logo tonen, geen dubbele tekst ===== */
.footer .logo-mark{
  width:auto !important;height:auto !important;
  overflow:visible !important;
  display:inline-block !important;
}
.footer .logo-mark img{
  height:42px !important;width:auto !important;
  max-width:280px !important;
  display:block !important;
  object-fit:contain !important;object-position:left center !important;
  filter:none !important;
}
/* Verberg de dubbele tekst-span ernaast */
.footer .logo-mark + div,
.footer-top > div:first-child > div > div{
  display:none !important;
}

/* ===== Process-v2 sectie compacter ===== */
.process-v2{padding:36px var(--pad-x) 50px !important}
.process-v2 .wrap{padding-top:0 !important;padding-bottom:24px !important;max-width:1180px;margin:0 auto}
.pv2{margin-top:20px !important}
.pv2-pin{padding:30px 0 !important}
.pv2-meta{margin-bottom:18px;font-size:11px}
.pv2-meta-n,.pv2-meta-time{font-size:11px;letter-spacing:.14em}
.pv2-diagram{margin:14px 0 30px}
.pv2-svg{height:32px}
.pv2-node-n{font-size:11px}
.pv2-node-lbl{font-size:11px;letter-spacing:.12em}
.pv2-stage{margin-top:24px !important;min-height:auto !important}
.pv2-slide{padding:0 !important}
.pv2-slide h3{
  font-size:clamp(24px,3vw,42px);
  line-height:1.05;letter-spacing:-.005em;
  margin:0 0 14px;
}
.pv2-slide p{
  font-size:16px;line-height:1.55;
  margin:0 0 14px;max-width:62ch;
}
.pv2-slide ul{margin:0;padding:0}
.pv2-slide li{
  font-size:15px !important;line-height:1.5 !important;
  padding:8px 0 !important;
}

/* ===== Process-v2: behoud sticky animatie, alleen compacter ===== */
.pv2{height:140vh !important}
.pv2-pin{
  position:sticky !important;top:0 !important;height:100vh !important;
  padding:50px var(--pad-x) !important;
  display:flex !important;flex-direction:column;justify-content:center;
  overflow:hidden !important;
}
/* Grid pattern + scanline TERUG voor de wauw factor */
.pv2-pin::before{display:block !important}
.pv2-scanline{display:block !important}
.pv2-stage{
  min-height:240px !important;margin-top:40px !important;
  position:relative !important;
  max-width:1180px;
}
/* Slides absolute met fade animatie (zoals origineel) */
.pv2-slide{
  position:absolute !important;inset:0 !important;
  display:grid !important;grid-template-columns:1.2fr 1fr;gap:36px !important;
  opacity:0;transform:translateY(20px);
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);
}
.pv2-slide.is-active{opacity:1 !important;transform:none !important}
/* Fallback: eerste slide zichtbaar als JS niet draait */
.pv2-slide:first-child{opacity:1;transform:none}
@media(max-width:900px){
  .pv2{height:auto !important}
  .pv2-pin{position:static !important;height:auto !important}
  .pv2-slide{position:relative !important;opacity:1 !important;transform:none !important;grid-template-columns:1fr !important;gap:14px !important;margin-bottom:30px}
}

/* ===== Sectoren grid borders strak ===== */
.sec.sec-lg:has(.sector-grid),
.sec:has(.sector-grid){
  padding:30px 0 50px !important;
}
.sector-grid{
  border-top:0;border-left:1px solid var(--line);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
}
.sector{padding:30px 26px;min-height:230px;gap:12px}
.sector::after{top:24px;right:24px;font-size:16px}

/* ============================================
   KRITIEKE FIX (6 juli 2026) — brede-scherm collapse
   --------------------------------------------
   --pad-x groeide ongelimiteerd op brede schermen
   (max(24px, (100vw-1440)/2 + 40)). Als binnen-padding
   op border-box + max-width elementen (.container,
   .about-hero-x-inner, hero-x inners, footer, hero-v3)
   vrat die groeiende marge op vol scherm / 4K de hele
   tekstkolom op -> tekst viel uiteen in "1 woord per regel".
   Oplossing: --pad-x aftoppen op 64px zodat 2x padding
   nooit de max-width nadert. Onder 1440px verandert er
   niets (blijft 24px, identiek aan de huidige goede staat).
   ============================================ */
:root{
  --pad-x:clamp(24px, calc((100vw - 1440px) / 2 + 40px), 64px);
}
/* Neutraliseer de dubbele container-gutter (components.css) die
   op >=1440px alsnog met (100vw-1280)/2 dichtkneep. */
@media(min-width:1440px){
  .container{
    padding-left:var(--pad-x) !important;
    padding-right:var(--pad-x) !important;
  }
}
/* Full-bleed rasters gecentreerd houden op zeer brede schermen
   (dat deed de groeiende --pad-x voorheen impliciet). */
.hero-v3-grid{max-width:1360px;margin-inline:auto}
.footer-top,.footer-bottom{max-width:1360px;margin-inline:auto}

/* ============ REDUCED MOTION — Prioriteit 7 audit (14-07-2026) ============
   Zet alle decoratieve beweging stil voor bezoekers met "verminder beweging".
   Universele reset (breekijzer verslaat de 89 animaties zonder !important);
   .nav-phone-dot expliciet want die heeft zelf een !important-animatie. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    animation-delay:0ms !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  .nav-phone-dot{animation:none !important}
}