@font-face {
  font-family: 'NeueHaasGrotesk';
  src: url('https://scatchproductions.nl/wp-content/fonts/NeueHaasGroteskDisplay-95Black.woff2') format('woff2');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'NeueHaasGrotesk';
  src: url('https://scatchproductions.nl/wp-content/fonts/NeueHaasGroteskText-55Roman.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'NeueHaasGrotesk';
  src: url('https://scatchproductions.nl/wp-content/fonts/NeueHaasGroteskText-65Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'NeueHaasGrotesk';
  src: url('https://scatchproductions.nl/wp-content/fonts/NeueHaasGroteskDisplay-75Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* reset alleen binnen eigen elementen */
#sp-nav, #sp-hero, #sp-ticker, #sp-over, #sp-services, #sp-footer {
  box-sizing: border-box;
}
#sp-nav *, #sp-hero *, #sp-ticker *, #sp-over *, #sp-services *, #sp-footer * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root{
  --black:#0a0a0a;
  --white:#ffffff;
  --off:#f7f6f3;
  --dark:#111111;
  --muted:#888;
  --cta:#1a1a1a;
  --cta-hover:#333;
  --green:#87C549;
  --font-ui:'NeueHaasGrotesk','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-display:'NeueHaasGrotesk','Helvetica Neue',Helvetica,Arial,sans-serif;
}

html{scroll-behavior:smooth !important;}
body{
  margin:0 !important;
  background:var(--white) !important;
  color:var(--dark) !important;
  font-family:var(--font-ui) !important;
  font-size:16px !important;
  line-height:1.6 !important;
}
img{max-width:100% !important;display:block !important;}
a{text-decoration:none !important;}
ul{list-style:none !important;}

/* ─── NAV ─── */
#sp-nav{
  position:fixed !important;
  top:14px !important;left:14px !important;right:14px !important;
  z-index:9999 !important;
  display:flex !important;align-items:center !important;justify-content:space-between !important;
  padding:10px 12px 10px 24px !important;
  background:rgba(255,255,255,0.18) !important;
  backdrop-filter:blur(28px) saturate(200%) brightness(1.08) !important;
  -webkit-backdrop-filter:blur(28px) saturate(200%) brightness(1.08) !important;
  border:1px solid rgba(255,255,255,0.55) !important;
  border-bottom:1px solid rgba(255,255,255,0.28) !important;
  box-shadow:0 4px 32px rgba(0,0,0,0.10),0 1.5px 0 rgba(255,255,255,0.65) inset,0 -1px 0 rgba(255,255,255,0.18) inset !important;
  border-radius:9999px !important;
  transition:background 0.4s,border-color 0.4s,box-shadow 0.4s !important;
  opacity:0;animation:sp-fadeD 0.7s 0.1s ease forwards !important;
}
#sp-nav.sp-dark{
  background:rgba(10,10,10,0.32) !important;
  border-color:rgba(255,255,255,0.14) !important;
  box-shadow:0 4px 32px rgba(0,0,0,0.22),0 1.5px 0 rgba(255,255,255,0.10) inset !important;
}

#sp-nav .sp-logo{
  display:inline-flex !important;
  align-items:center !important;
  text-decoration:none !important;
}
.sp-logo-text{
  font-family:'Helvetica Now Display','Helvetica Neue',Helvetica,Arial,sans-serif !important;
  font-weight:900 !important;
  font-size:21px !important;
  letter-spacing:0.01em !important;
  text-transform:uppercase !important;
  color:#111 !important;
  transition:color 0.4s !important;
  white-space:nowrap !important;
  line-height:1 !important;
}
.sp-logo-dot{
  color:var(--green) !important;
  font-size:38px !important;
  line-height:0 !important;
  vertical-align:baseline !important;
}
#sp-nav.sp-dark .sp-logo-text{color:#fff !important;}

#sp-nav .sp-links{
  display:flex !important;gap:2px !important;
  position:absolute !important;left:50% !important;transform:translateX(-50%) !important;
}
#sp-nav .sp-links a{
  font-family:var(--font-ui) !important;
  font-size:12px !important;font-weight:500 !important;
  letter-spacing:0.06em !important;text-transform:uppercase !important;
  color:rgba(0,0,0,0.55) !important;
  padding:7px 16px !important;border-radius:9999px !important;
  transition:color 0.2s,background 0.2s !important;
}
#sp-nav .sp-links a:hover{color:var(--dark) !important;background:rgba(0,0,0,0.06) !important;}
#sp-nav.sp-dark .sp-links a{color:rgba(255,255,255,0.58) !important;}
#sp-nav.sp-dark .sp-links a:hover{color:#fff !important;background:rgba(255,255,255,0.08) !important;}

#sp-nav .sp-cta{
  display:inline-flex !important;align-items:center !important;gap:10px !important;
  font-family:var(--font-ui) !important;
  font-size:12px !important;font-weight:600 !important;
  letter-spacing:0.07em !important;text-transform:uppercase !important;
  color:rgba(0,0,0,0.7) !important;
  padding:7px 20px 7px 8px !important;
  border:1px solid rgba(0,0,0,0.14) !important;
  border-radius:9999px !important;
  transition:background 0.25s,border-color 0.25s !important;
}
#sp-nav .sp-cta:hover{background:rgba(0,0,0,0.06) !important;border-color:rgba(0,0,0,0.22) !important;}
#sp-nav.sp-dark .sp-cta{color:#fff !important;border-color:rgba(255,255,255,0.2) !important;}
#sp-nav.sp-dark .sp-cta:hover{background:rgba(255,255,255,0.1) !important;border-color:rgba(255,255,255,0.35) !important;}
#sp-nav .sp-cta .c{
  width:32px !important;height:32px !important;border-radius:50% !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  background:rgba(0,0,0,0.08) !important;
  border:1px solid rgba(0,0,0,0.10) !important;
  flex-shrink:0 !important;
}
#sp-nav.sp-dark .sp-cta .c{background:rgba(255,255,255,0.1) !important;border-color:rgba(255,255,255,0.2) !important;}
#sp-nav .sp-cta .c svg{width:11px !important;height:11px !important;transition:transform 0.38s cubic-bezier(0.34,1.4,0.64,1) !important;}
#sp-nav .sp-cta:hover .c svg{transform:rotate(45deg) !important;}
#sp-nav .sp-cta .c svg path{stroke:var(--green) !important;}

/* ─── BUTTONS ─── */
.sp-btn{
  display:inline-flex !important;align-items:center !important;gap:14px !important;
  font-family:var(--font-ui) !important;
  font-size:13px !important;font-weight:600 !important;
  letter-spacing:0.08em !important;text-transform:uppercase !important;
  cursor:pointer !important;border:none !important;background:transparent !important;
  padding:0 !important;color:inherit !important;
}
.sp-btn .c{
  width:46px !important;height:46px !important;border-radius:50% !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  flex-shrink:0 !important;
  transition:background 0.25s,border-color 0.25s !important;
}
.sp-btn .c svg{width:14px !important;height:14px !important;transition:transform 0.38s cubic-bezier(0.34,1.4,0.64,1) !important;}
.sp-btn:hover .c svg{transform:rotate(45deg) !important;}
.sp-btn.light{color:#fff !important;}
.sp-btn.light .c{border:1.5px solid rgba(255,255,255,0.42) !important;}
.sp-btn.light .c svg path{stroke:var(--green) !important;}
.sp-btn.light:hover .c{background:rgba(255,255,255,0.08) !important;}
.sp-btn.dark{color:var(--dark) !important;}
.sp-btn.dark .c{border:1px solid transparent !important;background:var(--cta) !important;}
.sp-btn.dark .c svg path{stroke:var(--green) !important;}
.sp-btn.dark:hover .c{background:var(--cta-hover) !important;}

.sp-btn-sm{
  display:inline-flex !important;align-items:center !important;gap:9px !important;
  font-family:var(--font-ui) !important;
  font-size:11px !important;font-weight:600 !important;
  letter-spacing:0.08em !important;text-transform:uppercase !important;
  color:var(--dark) !important;cursor:pointer !important;
}
.sp-btn-sm .c{
  width:30px !important;height:30px !important;border-radius:50% !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  border:1px solid rgba(0,0,0,0.18) !important;
  transition:background 0.25s,border-color 0.25s !important;
  flex-shrink:0 !important;
}
.sp-btn-sm .c svg{width:10px !important;height:10px !important;transition:transform 0.38s cubic-bezier(0.34,1.4,0.64,1) !important;}
.sp-btn-sm:hover .c svg{transform:rotate(45deg) !important;}
.sp-btn-sm:hover .c{background:var(--dark) !important;border-color:var(--dark) !important;}
.sp-btn-sm .c svg path{stroke:var(--green) !important;}

/* ─── HERO ─── */
#sp-hero{
  position:relative !important;
  width:100% !important;
  height:100dvh !important;min-height:640px !important;
  display:flex !important;align-items:center !important;
  overflow:hidden !important;
}
#sp-hero .sp-vid{
  position:absolute !important;
  top:0 !important;left:0 !important;
  width:100% !important;height:100% !important;
  z-index:0 !important;
  border-radius:0 0 28px 28px !important;overflow:hidden !important;
}
#sp-hero .sp-vid video{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  pointer-events:none !important;
}
#sp-hero .sp-overlay{
  position:absolute !important;
  top:0 !important;left:0 !important;
  width:100% !important;height:100% !important;
  z-index:1 !important;
  border-radius:0 0 28px 28px !important;
  background:linear-gradient(to top,rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.08) 55%,rgba(0,0,0,0) 100%) !important;
}
#sp-hero .sp-content{
  position:relative !important;z-index:2 !important;
  padding:0 60px !important;
  width:100% !important;
  margin-top:8vh !important;
}
.sp-h1{
  font-family:var(--font-display) !important;
  font-weight:800 !important;
  font-size:clamp(32px,3.8vw,60px) !important;
  line-height:1.05 !important;
  letter-spacing:-0.025em !important;
  color:#fff !important;
  margin-bottom:18px !important;
  max-width:820px !important;
  opacity:0;animation:sp-fadeU 0.9s 0.6s ease forwards !important;
}
.sp-h1-sub{
  font-family:var(--font-ui) !important;
  font-weight:400 !important;
  font-size:clamp(15px,1.5vw,20px) !important;
  color:#fff !important;
  margin-bottom:44px !important;
  max-width:560px !important;
  line-height:1.55 !important;
  opacity:0;animation:sp-fadeU 0.9s 0.72s ease forwards !important;
}
.sp-hero-actions{
  display:flex !important;align-items:center !important;gap:24px !important;
  opacity:0;animation:sp-fadeU 0.9s 0.85s ease forwards !important;
}
.sp-scroll-hint{
  position:absolute !important;bottom:48px !important;left:50% !important;
  transform:translateX(-50%) !important;z-index:3 !important;
  display:flex !important;flex-direction:column !important;align-items:center !important;gap:8px !important;
  cursor:pointer !important;
  opacity:0 !important;animation:sp-fadeU 1s 1s ease forwards !important;
}
.sp-scroll-hint .sp-chevron{
  width:36px !important;height:36px !important;border-radius:50% !important;
  border:1px solid rgba(255,255,255,0.3) !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  animation:sp-bob 2s ease-in-out infinite !important;
}
.sp-scroll-hint .sp-chevron svg{width:12px !important;height:12px !important;}
@keyframes sp-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(5px);}}

/* ─── TICKER ─── */
#sp-ticker{
  background:var(--white) !important;
  padding:26px 0 !important;
  border-bottom:1px solid rgba(0,0,0,0.06) !important;
  overflow:hidden !important;position:relative !important;
}
#sp-ticker::before,#sp-ticker::after{
  content:'' !important;position:absolute !important;top:0 !important;bottom:0 !important;
  width:200px !important;z-index:2 !important;pointer-events:none !important;
}
#sp-ticker::before{left:0 !important;background:linear-gradient(to right,var(--white) 10%,transparent) !important;}
#sp-ticker::after{right:0 !important;background:linear-gradient(to left,var(--white) 10%,transparent) !important;}
.sp-ticker-track{
  display:flex !important;align-items:center !important;gap:80px !important;
  width:max-content !important;
  animation:sp-ticker 24s linear infinite !important;
}
.sp-ticker-track:hover{animation-play-state:paused !important;}
.sp-ticker-item{display:flex !important;align-items:center !important;}
.sp-ticker-item a{display:flex !important;align-items:center !important;}
.sp-ticker-item img{height:42px !important;width:auto !important;filter:grayscale(1) !important;opacity:0.28 !important;transition:filter 0.4s ease,opacity 0.4s ease,transform 0.3s ease !important;cursor:pointer !important;}
.sp-ticker-item a:hover img{filter:grayscale(0) !important;opacity:1 !important;transform:scale(1.04) !important;}
/* per-logo optische correctie zodat alle even groot ogen */
.sp-ticker-item img.l-rentall{height:62px !important;}
.sp-ticker-item img.l-bruurkes{height:58px !important;}
.sp-ticker-item img.l-omerinus{height:58px !important;}
.sp-ticker-item img.l-fairlight{height:30px !important;}
.sp-ticker-item img.l-fysio{height:40px !important;}
.sp-ticker-item img.l-leeuwen{height:50px !important;}
.sp-ticker-item img.l-mariken{height:44px !important;}

/* ─── OVER MIJ ─── */
#sp-over{background:var(--off) !important;padding:230px 60px !important;}
.sp-over-inner{
  max-width:1200px !important;margin:0 auto !important;
  display:grid !important;grid-template-columns:0.85fr 1fr !important;
  gap:80px !important;align-items:start !important;
}
.sp-img-wrap{
  position:relative !important;border-radius:20px !important;
  overflow:hidden !important;aspect-ratio:3/4 !important;background:#ddd !important;
  max-width:360px !important;
}
.sp-img-wrap img{width:100% !important;height:100% !important;object-fit:cover !important;}
.sp-caption{
  position:absolute !important;bottom:20px !important;left:20px !important;right:20px !important;
  background:rgba(10,10,10,0.38) !important;
  backdrop-filter:blur(32px) saturate(180%) brightness(0.9) !important;
  -webkit-backdrop-filter:blur(32px) saturate(180%) brightness(0.9) !important;
  border:1px solid rgba(255,255,255,0.18) !important;
  border-bottom:1px solid rgba(255,255,255,0.08) !important;
  box-shadow:0 8px 32px rgba(0,0,0,0.32),0 1px 0 rgba(255,255,255,0.12) inset !important;
  border-radius:14px !important;padding:16px 20px !important;
}
.sp-caption strong{display:block !important;font-family:var(--font-ui) !important;font-weight:600 !important;font-size:14px !important;color:#fff !important;}
.sp-caption span{font-family:var(--font-ui) !important;font-size:12px !important;color:rgba(255,255,255,0.52) !important;}
.sp-s-label{
  font-family:var(--font-ui) !important;
  font-size:11px !important;font-weight:700 !important;letter-spacing:0.14em !important;
  text-transform:uppercase !important;color:var(--dark) !important;
  margin-bottom:18px !important;
  display:flex !important;align-items:center !important;gap:10px !important;
}
.sp-s-label::before{content:'' !important;width:18px !important;height:1px !important;background:currentColor !important;display:block !important;}
.sp-h2{
  font-family:var(--font-display) !important;font-weight:800 !important;
  font-size:clamp(28px,3.4vw,46px) !important;letter-spacing:-0.025em !important;
  line-height:1.08 !important;color:var(--dark) !important;margin-bottom:24px !important;
}
.sp-h2 em{font-style:italic !important;font-weight:400 !important;color:rgba(0,0,0,0.28) !important;}
.sp-body{
  font-family:var(--font-ui) !important;
  font-size:15px !important;font-weight:400 !important;
  color:rgba(0,0,0,0.58) !important;line-height:1.78 !important;margin-bottom:16px !important;
}

/* ─── SERVICES ─── */
#sp-services{background:var(--white) !important;padding:230px 60px !important;}
.sp-serv-inner{max-width:1200px !important;margin:0 auto !important;}
.sp-serv-head{
  display:flex !important;align-items:flex-end !important;
  justify-content:space-between !important;
  margin-bottom:52px !important;gap:32px !important;
}
.sp-grid{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:14px !important;}
.sp-card{
  border:1px solid rgba(0,0,0,0.08) !important;border-radius:18px !important;
  padding:34px 30px 28px !important;
  display:flex !important;flex-direction:column !important;
  background:rgba(255,255,255,0.75) !important;
  transition:border-color 0.35s,box-shadow 0.35s,transform 0.35s !important;
}
.sp-card:hover{border-color:rgba(0,0,0,0.14) !important;box-shadow:0 16px 48px rgba(0,0,0,0.06) !important;transform:translateY(-3px) !important;}
.sp-card-icon{
  width:44px !important;height:44px !important;border-radius:11px !important;
  background:var(--dark) !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  margin-bottom:26px !important;flex-shrink:0 !important;
}
.sp-card-icon svg{width:20px !important;height:20px !important;}
.sp-card-num{font-family:var(--font-ui) !important;font-size:10px !important;font-weight:600 !important;letter-spacing:0.1em !important;color:rgba(0,0,0,0.14) !important;margin-bottom:10px !important;}
.sp-card h3{font-family:var(--font-ui) !important;font-weight:700 !important;font-size:22px !important;letter-spacing:-0.01em !important;color:var(--dark) !important;margin-bottom:10px !important;}
.sp-card p{font-family:var(--font-ui) !important;font-size:14px !important;font-weight:400 !important;color:rgba(0,0,0,0.48) !important;line-height:1.7 !important;flex:1 !important;margin-bottom:26px !important;}

/* ─── FOOTER ─── */
#sp-footer{
  position:relative !important;
  overflow:hidden !important;
  background:var(--black) !important;
  color:#fff !important;
  border-radius:24px 24px 0 0 !important;
  margin-top:-24px !important;
}
.sp-f-hero{
  position:relative !important;
  width:100% !important;
  min-height:520px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}
.sp-f-hero-vid{
  position:absolute !important;
  top:0 !important;left:0 !important;
  width:100% !important;height:100% !important;
  z-index:0 !important;
}
.sp-f-hero-vid video{
  width:100% !important;height:100% !important;
  object-fit:cover !important;
  pointer-events:none !important;
  filter:grayscale(1) !important;
}
.sp-f-hero-overlay{
  position:absolute !important;
  top:0 !important;left:0 !important;
  width:100% !important;height:100% !important;
  background:rgba(0,0,0,0.55) !important;
  z-index:1 !important;
}
.sp-f-cta{
  position:relative !important;z-index:2 !important;
  padding:190px 60px !important;
  text-align:center !important;
  width:100% !important;
}
.sp-f-label{
  font-family:var(--font-ui) !important;
  font-size:11px !important;font-weight:500 !important;letter-spacing:0.14em !important;
  text-transform:uppercase !important;color:rgba(255,255,255,0.45) !important;
  margin-bottom:18px !important;
  display:flex !important;align-items:center !important;justify-content:center !important;gap:10px !important;
}
.sp-f-label::before{content:'' !important;width:18px !important;height:1px !important;background:currentColor !important;}
.sp-f-cta h2{
  font-family:var(--font-display) !important;font-weight:800 !important;
  font-size:clamp(30px,4.4vw,56px) !important;letter-spacing:-0.025em !important;
  line-height:1.06 !important;color:#fff !important;margin-bottom:18px !important;
}
.sp-f-cta h2 em{font-style:italic !important;font-weight:400 !important;color:rgba(255,255,255,0.35) !important;}
.sp-f-cta .sp-sub{
  font-family:var(--font-ui) !important;
  font-size:15px !important;font-weight:400 !important;
  color:rgba(255,255,255,0.45) !important;margin-bottom:44px !important;
}
.sp-f-cta .sp-row{display:flex !important;justify-content:center !important;}
.sp-f-links{
  position:relative !important;z-index:2 !important;
  border-top:1px solid rgba(255,255,255,0.08) !important;
  padding:56px 60px 100px !important;
  background:var(--black) !important;
}
.sp-f-links-inner{
  max-width:1200px !important;margin:0 auto !important;
  display:flex !important;gap:80px !important;align-items:start !important;
}
.sp-f-col h4{
  font-family:var(--font-ui) !important;
  font-size:11px !important;font-weight:700 !important;letter-spacing:0.12em !important;
  text-transform:uppercase !important;color:rgba(255,255,255,0.32) !important;margin-bottom:20px !important;
}
.sp-f-col ul li{margin-bottom:12px !important;}
.sp-f-col ul a{
  font-family:var(--font-ui) !important;
  font-size:15px !important;font-weight:600 !important;
  color:#fff !important;
  transition:color 0.2s,opacity 0.2s !important;
  opacity:0.75 !important;
}
.sp-f-col ul a:hover{opacity:1 !important;color:var(--green) !important;}
.sp-f-bottom{
  max-width:1200px !important;margin:32px auto 0 !important;
  padding-top:20px !important;
  border-top:1px solid rgba(255,255,255,0.07) !important;
  display:flex !important;align-items:center !important;justify-content:space-between !important;
}
.sp-f-bottom-left span{font-family:var(--font-ui) !important;font-size:12px !important;font-weight:400 !important;color:#fff !important;opacity:0.5 !important;}
.sp-f-bottom-right{display:flex !important;gap:24px !important;}
.sp-f-bottom-right a{font-family:var(--font-ui) !important;font-size:12px !important;font-weight:400 !important;color:#fff !important;opacity:0.5 !important;transition:color 0.2s,opacity 0.2s !important;}
.sp-f-bottom-right a:hover{opacity:1 !important;color:var(--green) !important;}

/* ─── REVEAL ─── */
.sp-reveal{opacity:0 !important;transform:translateY(26px) !important;transition:opacity 0.85s ease,transform 0.85s ease !important;}
.sp-reveal.visible{opacity:1 !important;transform:none !important;}

/* ─── KEYFRAMES ─── */
@keyframes sp-fadeD{from{opacity:0;transform:translateY(-12px);}to{opacity:1;transform:none;}}
@keyframes sp-fadeU{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}
@keyframes sp-ticker{0%{transform:translateX(0);}100%{transform:translateX(calc(-100% / 3));}}

/* ─── PAGE HEADER (subpagina's: projecten/contact) ─── */
.sp-page-head{
  background:var(--off) !important;
  padding:170px 60px 60px !important;
}
.sp-page-head-inner{max-width:1200px !important;margin:0 auto !important;}
.sp-page-head h1{
  font-family:var(--font-display) !important;font-weight:800 !important;
  font-size:clamp(38px,5vw,72px) !important;letter-spacing:-0.03em !important;
  line-height:1.02 !important;color:var(--dark) !important;margin:0 0 14px !important;
}
.sp-page-head h1 .sp-accent{color:var(--green) !important;}
.sp-page-head p{
  font-family:var(--font-ui) !important;font-size:clamp(15px,1.4vw,18px) !important;
  color:rgba(0,0,0,0.42) !important;margin:0 !important;max-width:560px !important;line-height:1.6 !important;
}

/* ─── PROJECTEN GRID (archive) ─── */
#sp-projects{background:var(--off) !important;padding:30px 60px 220px !important;}
.sp-proj-inner{max-width:1200px !important;margin:0 auto !important;}
.sp-proj-filter{
  display:flex !important;flex-wrap:wrap !important;gap:8px 18px !important;
  margin-bottom:48px !important;align-items:center !important;
}
.sp-proj-filter a{
  font-family:var(--font-ui) !important;font-size:clamp(15px,1.6vw,19px) !important;font-weight:600 !important;
  color:rgba(0,0,0,0.32) !important;transition:color 0.2s !important;letter-spacing:-0.01em !important;
}
.sp-proj-filter a:hover{color:var(--green) !important;}
.sp-proj-filter a.is-active{color:var(--green) !important;}
.sp-proj-grid{
  display:grid !important;grid-template-columns:repeat(2,1fr) !important;
  gap:20px !important;
}
.sp-proj-card{
  position:relative !important;display:block !important;
  border-radius:16px !important;overflow:hidden !important;
  aspect-ratio:16/10 !important;background:#111 !important;
  transition:transform 0.4s ease !important;
}
.sp-proj-card-media{position:absolute !important;inset:0 !important;}
.sp-proj-card-media img,.sp-proj-card-media video{
  width:100% !important;height:100% !important;object-fit:cover !important;
  transition:transform 0.6s ease,filter 0.4s ease !important;
}
.sp-proj-card-shade{
  position:absolute !important;inset:0 !important;z-index:1 !important;
  background:linear-gradient(to top,rgba(0,0,0,0.55) 0%,rgba(0,0,0,0) 55%) !important;
  transition:background 0.4s ease !important;
}
.sp-proj-card:hover .sp-proj-card-media img,
.sp-proj-card:hover .sp-proj-card-media video{transform:scale(1.05) !important;filter:brightness(0.62) !important;}
.sp-proj-card:hover .sp-proj-card-shade{background:linear-gradient(to top,rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.25) 100%) !important;}
.sp-proj-card-meta{
  position:absolute !important;left:0 !important;bottom:0 !important;z-index:2 !important;
  padding:26px 28px !important;display:flex !important;flex-wrap:wrap !important;
  align-items:baseline !important;gap:10px !important;
}
.sp-proj-card-meta strong{
  font-family:var(--font-ui) !important;font-weight:700 !important;
  font-size:clamp(16px,1.5vw,19px) !important;color:#fff !important;letter-spacing:-0.01em !important;
}
.sp-proj-card-meta span{
  font-family:var(--font-ui) !important;font-weight:400 !important;
  font-size:clamp(14px,1.3vw,17px) !important;color:rgba(255,255,255,0.6) !important;
  transition:color 0.3s ease !important;
}
.sp-proj-card:hover .sp-proj-card-meta span{color:var(--green) !important;}
.sp-proj-empty{
  font-family:var(--font-ui) !important;font-size:16px !important;
  color:rgba(0,0,0,0.4) !important;padding:40px 0 !important;
}

/* ─── PROJECT DETAIL (single) ─── */
#sp-single{background:var(--white) !important;}
.sp-single-hero{
  position:relative !important;width:100% !important;height:72vh !important;min-height:480px !important;
  overflow:hidden !important;border-radius:0 0 28px 28px !important;
}
.sp-single-hero img,.sp-single-hero video{
  width:100% !important;height:100% !important;object-fit:cover !important;
}
.sp-single-hero-overlay{
  position:absolute !important;inset:0 !important;
  background:linear-gradient(to top,rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.1) 60%,rgba(0,0,0,0) 100%) !important;
}
.sp-single-hero-meta{
  position:absolute !important;left:0 !important;bottom:0 !important;z-index:2 !important;
  padding:60px !important;width:100% !important;
}
.sp-single-hero-meta .sp-s-label{color:rgba(255,255,255,0.7) !important;}
.sp-single-hero-meta .sp-s-label::before{background:rgba(255,255,255,0.7) !important;}
.sp-single-hero-meta h1{
  font-family:var(--font-display) !important;font-weight:800 !important;
  font-size:clamp(34px,5vw,68px) !important;letter-spacing:-0.03em !important;
  line-height:1.02 !important;color:#fff !important;margin:0 !important;
}
.sp-single-hero-meta h1 em{font-style:italic !important;font-weight:400 !important;color:var(--green) !important;}
.sp-single-body{max-width:760px !important;margin:0 auto !important;padding:90px 24px 110px !important;}
.sp-single-body p{
  font-family:var(--font-ui) !important;font-size:17px !important;
  color:rgba(0,0,0,0.62) !important;line-height:1.85 !important;margin:0 0 20px !important;
}
.sp-single-body h2,.sp-single-body h3{
  font-family:var(--font-display) !important;font-weight:700 !important;
  color:var(--dark) !important;margin:36px 0 16px !important;letter-spacing:-0.02em !important;
}
.sp-single-video{
  max-width:1100px !important;margin:0 auto !important;padding:0 24px 60px !important;
}
.sp-single-video .sp-vid-wrap{
  position:relative !important;border-radius:18px !important;overflow:hidden !important;
  aspect-ratio:16/9 !important;background:#000 !important;
}
.sp-single-video iframe,.sp-single-video video{
  position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;border:0 !important;
}
.sp-single-back{padding:0 24px 80px !important;max-width:760px !important;margin:0 auto !important;}

/* ─── CONTACT ─── */
#sp-contact{background:var(--off) !important;padding:0 0 120px !important;}
.sp-contact-intro{
  padding:170px 60px 50px !important;max-width:1200px !important;margin:0 auto !important;
}
.sp-contact-intro h1{
  font-family:var(--font-display) !important;font-weight:800 !important;
  font-size:clamp(34px,5vw,68px) !important;letter-spacing:-0.03em !important;
  line-height:1.04 !important;color:var(--dark) !important;margin:0 0 12px !important;
}
.sp-contact-intro h1 .sp-accent{color:var(--green) !important;}
.sp-contact-intro p{
  font-family:var(--font-ui) !important;font-size:clamp(15px,1.4vw,18px) !important;
  color:rgba(0,0,0,0.42) !important;margin:0 !important;
}
.sp-contact-wrap{
  max-width:1200px !important;margin:0 auto !important;padding:30px 60px 0 !important;
  display:grid !important;grid-template-columns:0.8fr 1fr !important;gap:70px !important;
  align-items:start !important;
}
.sp-contact-aside .sp-s-label{margin-bottom:26px !important;}
.sp-contact-aside .sp-c-row{margin-bottom:24px !important;}
.sp-contact-aside .sp-c-row h4{
  font-family:var(--font-ui) !important;font-size:11px !important;font-weight:700 !important;
  letter-spacing:0.12em !important;text-transform:uppercase !important;
  color:rgba(0,0,0,0.32) !important;margin:0 0 6px !important;
}
.sp-contact-aside .sp-c-row a,.sp-contact-aside .sp-c-row span{
  font-family:var(--font-ui) !important;font-size:17px !important;font-weight:600 !important;
  color:var(--dark) !important;transition:color 0.2s !important;
}
.sp-contact-aside .sp-c-row a:hover{color:var(--green) !important;}
.sp-form-group{margin-bottom:26px !important;}
.sp-form-group label{
  display:block !important;font-family:var(--font-ui) !important;
  font-size:clamp(17px,1.8vw,22px) !important;font-weight:800 !important;
  color:var(--dark) !important;margin-bottom:12px !important;letter-spacing:-0.01em !important;
}
.sp-form-group label .req{color:var(--green) !important;}
.sp-form-group input[type="text"],
.sp-form-group input[type="email"],
.sp-form-group input[type="tel"],
.sp-form-group textarea{
  width:100% !important;font-family:var(--font-ui) !important;font-size:16px !important;
  color:var(--dark) !important;background:#efeeea !important;
  border:1px solid transparent !important;border-radius:12px !important;
  padding:16px 18px !important;transition:border-color 0.2s,background 0.2s !important;
}
.sp-form-group input::placeholder,.sp-form-group textarea::placeholder{color:rgba(0,0,0,0.35) !important;}
.sp-form-group input:focus,.sp-form-group textarea:focus{
  outline:none !important;border-color:var(--green) !important;background:#fff !important;
}
.sp-form-group textarea{min-height:140px !important;resize:vertical !important;}
.sp-checks{display:flex !important;flex-direction:column !important;gap:10px !important;margin-top:6px !important;}
.sp-checks label.sp-check{display:flex !important;flex-direction:row !important;align-items:center !important;gap:11px !important;cursor:pointer !important;line-height:1 !important;margin:0 !important;}
.sp-check input{position:absolute !important;opacity:0 !important;width:0 !important;height:0 !important;margin:0 !important;}
.sp-check .box{
  width:20px !important;height:20px !important;border-radius:5px !important;flex-shrink:0 !important;
  border:1.5px solid rgba(0,0,0,0.2) !important;background:#efeeea !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  transition:background 0.2s,border-color 0.2s !important;
}
.sp-check .box svg{width:12px !important;height:12px !important;opacity:0 !important;transition:opacity 0.15s !important;}
.sp-check input:checked + .box{background:var(--green) !important;border-color:var(--green) !important;}
.sp-check input:checked + .box svg{opacity:1 !important;}
.sp-check input:focus-visible + .box{box-shadow:0 0 0 3px rgba(135,197,73,0.35) !important;}
.sp-check span:not(.box){font-family:var(--font-ui) !important;font-size:15px !important;font-weight:500 !important;color:rgba(0,0,0,0.7) !important;line-height:1 !important;}
.sp-honey{position:absolute !important;left:-9999px !important;width:1px !important;height:1px !important;overflow:hidden !important;}
.sp-submit{
  margin-top:10px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;
  gap:10px !important;font-family:var(--font-ui) !important;font-size:14px !important;font-weight:700 !important;
  letter-spacing:0.08em !important;text-transform:uppercase !important;color:#fff !important;
  background:var(--green) !important;border:none !important;border-radius:12px !important;
  padding:18px 48px !important;cursor:pointer !important;transition:background 0.25s,transform 0.2s !important;
}
.sp-submit:hover{background:#76b13c !important;transform:translateY(-1px) !important;}
.sp-submit:disabled{opacity:0.6 !important;cursor:not-allowed !important;transform:none !important;}
.sp-form-msg{
  margin-top:20px !important;font-family:var(--font-ui) !important;font-size:15px !important;
  font-weight:600 !important;display:none !important;
}
.sp-form-msg.is-ok{display:block !important;color:#4a8a1f !important;}
.sp-form-msg.is-err{display:block !important;color:#c0392b !important;}

/* ─── RESPONSIVE ─── */
@media(max-width:900px){
  #sp-nav .sp-links{display:none !important;}
  #sp-hero .sp-content{padding:0 24px !important;}
  .sp-h1{font-size:32px !important;}
  .sp-h1-sub{font-size:15px !important;max-width:100% !important;}
  .sp-hero-actions{flex-direction:column !important;align-items:flex-start !important;gap:14px !important;}
  #sp-over{padding:72px 24px !important;}
  .sp-over-inner{grid-template-columns:1fr !important;gap:40px !important;}
  .sp-img-wrap{max-width:100% !important;}
  #sp-services{padding:72px 24px !important;}
  .sp-serv-head{flex-direction:column !important;align-items:flex-start !important;}
  .sp-grid{grid-template-columns:1fr !important;}
  .sp-f-cta{padding:60px 24px !important;}
  .sp-f-links{padding:48px 24px 80px !important;}
  .sp-f-links-inner{flex-direction:column !important;gap:32px !important;}
  .sp-f-bottom{flex-direction:column !important;align-items:flex-start !important;gap:10px !important;}
  .sp-ticker-item img{height:32px !important;}
  .sp-ticker-item img.l-rentall{height:46px !important;}
  .sp-ticker-item img.l-bruurkes{height:44px !important;}
  .sp-ticker-item img.l-omerinus{height:44px !important;}
  .sp-ticker-item img.l-fairlight{height:24px !important;}
  .sp-ticker-item img.l-fysio{height:30px !important;}
  .sp-ticker-item img.l-leeuwen{height:38px !important;}
  .sp-ticker-item img.l-mariken{height:34px !important;}
  #sp-ticker{padding:22px 0 !important;}

  /* subpagina's */
  .sp-page-head{padding:130px 24px 44px !important;}
  #sp-projects{padding:6px 24px 80px !important;}
  .sp-proj-grid{grid-template-columns:1fr !important;gap:16px !important;}
  .sp-proj-card-meta{padding:20px 22px !important;}
  .sp-single-hero{height:56vh !important;min-height:360px !important;}
  .sp-single-hero-meta{padding:32px 24px !important;}
  .sp-single-body{padding:60px 24px 80px !important;}
  .sp-contact-intro{padding:130px 24px 30px !important;}
  .sp-contact-wrap{grid-template-columns:1fr !important;gap:44px !important;padding:20px 24px 0 !important;}
  .sp-form-group label{font-size:18px !important;}
}
