/* ===========================
   
   =========================== */

:root{
  --bg:#0b0f14;           /* dark theme */
  --fg:#f4f4f4;
  --muted:#a9b0b8;
  --card:#181818;
  --line:rgba(78, 77, 77, 0.468);
  --accent:#FFB400;
  --accent-ink:#111;
  --container:1100px;     /* max width */
  --header-h: 38px;
  --safe-top: env(safe-area-inset-top);      /* iPhone notch */
  --safe-bot: env(safe-area-inset-bottom);
}

/* Base */
*{box-sizing:border-box}
html, body {scroll-behavior: smooth; scroll-padding-top: var(--header-h);}
:where(section, h1, h2, h3)[id] { scroll-margin-top: var(--header-h);}
html,body{height:100%}
html, body{overflow-x:hidden}
body{overflow-wrap:anywhere;-webkit-text-size-adjust:100%}
html,body{ margin:0;padding:0; background:var(--bg);color:var(--fg); font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;}
a{color:inherit;text-decoration:none}
img, video, canvas, svg{max-width:100%;height:auto;display:block}

/* Layout containers */
.container{max-width:var(--container);margin:0 auto;padding:0 16px}
.wrap{max-width:var(--container);margin:0 auto;padding:clamp(16px,2vw,24px)}
.wrap{padding-left:calc(env(safe-area-inset-left) + 16px);padding-right:calc(env(safe-area-inset-right) + 16px)}

.wrap { padding: 0 clamp(16px, 2vw, 24px) !important;}

/* Header + Nav */
header{position: sticky; top: 0; z-index: 50; padding-top: var(--safe-top); background: rgba(11,15,20,.9); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line);}

.nav{display:flex;align-items:center;justify-content:space-between;height:60px; padding-top: 15px; padding-bottom: 20px;}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand img{height:30px;width:auto}

/* Desktop menu */
.topmenu{display:flex;gap:22px}
.topmenu a{opacity:.9}
.topmenu a:hover{opacity:1}
.topmenu a.active{color:var(--accent)}

/* Partner strip (optional) */
.partner{opacity:.85;display:flex;align-items:center;gap:8px;font-size:14px}
.partner img{height:20px}

/* Hamburger */
.hamburger{
  display:none;align-items:center;justify-content:center;
  color: var(--fg);
  width:40px;height:40px;border:1px solid rgb(38, 38, 38);
  border-radius:10px;background:transparent
}
.hamburger:focus{outline:2px solid var(--accent);outline-offset:2px}

/* Mobile drawer */
.drawer{
  position:fixed;inset:0 0 0 auto;z-index:60;
  width:min(82vw,360px);
  background:rgba(11,15,20,.98);
  box-shadow:-10px 0 30px rgba(0,0,0,.35);
  transform:translateX(100%);transition:transform .25s ease;
}
.drawer.open{transform:translateX(0)}
.drawer .panel{display:flex;flex-direction:column;height:100%}
.drawer header{position:static;border:0}
.drawer .title{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--line)
}
.drawer nav{display:flex;flex-direction:column;padding:10px}
.drawer a{padding:12px 10px;border-radius:10px;color:var(--fg)}
.drawer a:hover{background:rgba(255,255,255,.06)}

/* Hero */
.hero{
  display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:center;
  padding:2px 0;
}
.hero h1{font-size:clamp(28px,4.5vw,46px);line-height:1.15;margin:0 0 8px}
.hero p{color:var(--muted);margin:0 0 16px;max-width:700px}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.hero .img{width:100%;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000}
.hero .img img{width:100%;height:100%;object-fit:cover}

/* slider */
.slider { position:relative; overflow:hidden; }
.slides{display:flex;transition:transform .4s ease}
.slide{min-width:100%}
.prev, .next{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:5;
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  border:0; border-radius:999px;
  background:rgba(0,0,0,.35);
  color:#fff; font-size:22px; line-height:1; cursor:pointer;
}
.prev{ left:10px; }
.next{ right:10px; }
.prev:hover, .next:hover{ background:rgba(0,0,0,.55); }


/* Buttons */
.btn{display:inline-block;padding:12px 18px;border-radius:999px;font-weight:700;text-decoration:none}
.btn.primary{background:var(--accent);color:var(--accent-ink);border:1px solid transparent}
.btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--line)}
.btn:hover{transform:translateY(-1px)}

/* Sections, cards, grids */
.section{margin:28px 0}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;padding:5px
}
.card__media{border-radius:11px; overflow: hidden;}
.card__media img{display:block; width:100%;height:auto;}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

/* FAQ */
.faq h2,.section h2{margin:.2em 0 .6em;font-size:clamp(22px,2.6vw,30px)}
.faq details{background:var(--card);border-radius:14px;padding:14px;margin:10px 0;border:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:700}

/* Lists / notes / figures */
.list{margin:0;padding-left:18px}
.note{font-size:14px;color:var(--muted)}
figure{margin:12px 0}

/* Main content padding */
main{padding:24px 0 72px}

/* Footer */
.footer-block{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;padding:5px;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* forceer 2 */
  align-items: start;
}

.footer-block > h2{
  grid-column: 1 / -1;   /* titel over beide kolommen */
  margin: 0 0 .5rem;
}

footer{
  border-top:1px solid var(--line);
  padding:28px 0;margin-top:32px;
  color:var(--muted);font-size:14px;text-align:center
}
footer .footer-logo img{max-height:35px;margin-bottom:8px;display:inline-block}
.foot-logo__img { height: 50px; width: auto; display: block; padding-left: 5px; padding-bottom: 15px; }
.foot-logo { display: inline-block; line-height: 0; vertical-align: middle;}
.addr{ font-style: normal; }         
.addr > *{ display:block; }         
.addr a{ margin-top:4px; }  
/* Contact regels onder elkaar */
.footer-block .contact-list{ margin:0 0 .5rem; padding:0; list-style:none; }
.footer-block .contact-list li{ display:block; }
.footer-block .social-list{
  display:flex; flex-wrap:wrap; gap:12px;
  margin:0; padding:0; list-style:none;
}
.footer-block .btn-icon{
  display:inline-flex; align-items:center; gap:.5rem;
 text-decoration:none;
  color:#fff;                    /* icon kleurt mee */
}

/* Layout kop + knoppen */
.cases-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:10px;
}
.cases .controls{ display:flex; gap:8px; }
.cases-btn{
  appearance:none; border:1px solid var(--line); background:#111; color:#fff;
  padding:.4rem .7rem; border-radius:.6rem; cursor:pointer;
}
.cases-btn:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

/* De slider: horizontaal scrollen + snap */
.cases-track{
  display:flex; gap:16px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-padding-left:5px;
  -webkit-overflow-scrolling:touch;  /* lekker swipen op mobiel */
  padding:5px; border:1px solid var(--line); border-radius:16px; background:var(--card);
}

/* Cards */
.case-card{
  flex: 0 0 clamp(260px, 33vw, 360px);     /* breedte per card */
  scroll-snap-align: start;                 /* klik netjes in positie */
  background:#101010; border:1px solid var(--line);
  border-radius:16px; padding:12px;
}
.case-card img{
  width:100%; height:170px; object-fit:cover;
  border-radius:12px; display:block; margin-bottom:10px;
}

/* Klein scherm: wat breder, 80% van viewport */
@media (max-width: 720px){
  .case-card{ flex-basis: 80vw; }
}
.cases-viewport{
  position: relative;
}

.cases-track{
  display:flex; gap:16px; overflow-x:auto;
  scroll-snap-type:x mandatory; scroll-padding-left:5px;
  -webkit-overflow-scrolling:touch;
  padding:5px 48px;                  /* ruimte voor de knoppen */
  border:1px solid var(--line);
  border-radius:16px; background:var(--card);
}

.cases-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:.6rem;
  background:#111; color:#fff; cursor:pointer; z-index:2;
}
.cases-nav.prev{ left:6px; }
.cases-nav.next{ right:6px; }
.cases-nav:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.cases-track{ scrollbar-width: thin; scrollbar-color:#333 transparent; }
.cases-track::-webkit-scrollbar{ height:6px; }
.cases-track::-webkit-scrollbar-track{ background:transparent; }
.cases-track::-webkit-scrollbar-thumb{ background:#333; border-radius:999px; }
/* Optioneel: knoppen verbergen op mobiel, swipe is genoeg */
@media (max-width: 720px){
  .cases-nav{ display:none; }
}

/* Responsive */
@media (max-width:980px){
  .hero{grid-template-columns:1fr;gap:16px}
  .grid,.grid-2{grid-template-columns:1fr}
  .partner{display:none}
}
@media (max-width:860px){
  .nav {padding-top: 1px; padding-bottom: 1px;}
  .topmenu{ display: none;}
 .brand img{height:20px;width:auto}
  .hamburger{display:flex}
  .footer-block{grid-template-columns:1fr}
   .grid,.grid-2,.grid-3 {grid-template-columns:1fr}
}