/* ==========================================================================
   ohWAUW — Design Tokens
   ========================================================================== */
:root{
  --c-black:#0a0a0b;
  --c-black-2:#161618;
  --c-black-3:#202023;
  --c-white:#ffffff;
  --c-off:#f4f3ef;
  --c-red:#c8102e;
  --c-red-dark:#8f0c21;
  --c-red-light:#e63a52;
  --c-gray-on-dark:#9a9aa1;
  --c-gray-on-light:#5c5c62;
  --c-line-on-dark:rgba(255,255,255,.12);
  --c-line-on-light:rgba(10,10,11,.12);

  --font-display:'Titillium Web', sans-serif;
  --font-body:'Inter', sans-serif;

  --space-1:.5rem;
  --space-2:1rem;
  --space-3:1.5rem;
  --space-4:2rem;
  --space-5:2.5rem;
  --space-6:3rem;
  --space-8:4rem;
  --space-10:5rem;
  --space-12:6rem;
  --space-16:8rem;

  --container:1240px;
  --radius:14px;
  --radius-sm:8px;
  --ease-out:cubic-bezier(.16,.84,.44,1);
  --dur-fast:180ms;
  --dur-med:320ms;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ==========================================================================
   Reset
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--c-black);
  color:var(--c-white);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  animation:page-fade-in .4s var(--ease-out);
}
@keyframes page-fade-in{ from{ opacity:0; } to{ opacity:1; } }
body.nav-open{ overflow:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; margin:0; line-height:1.1; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
svg{ display:block; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
::selection{ background:var(--c-red); color:var(--c-white); }
:focus-visible{ outline:2px solid var(--c-red); outline-offset:2px; }
section[id]{ scroll-margin-top:100px; }

.container{ max-width:var(--container); margin-inline:auto; padding-inline:var(--space-4); }
@media (max-width:640px){ .container{ padding-inline:var(--space-3); } }

section{ position:relative; }

/* Kicker / eyebrow */
.kicker{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.85rem;
  font-weight:600;
  color:var(--c-red);
  display:inline-flex;
  align-items:center;
  gap:.6em;
}
/* Op donkere achtergronden geeft --c-red te weinig contrast (~3.4:1, onder de WCAG-norm
   van 4.5:1 voor deze tekstgrootte) — daar de lichtere rode variant gebruiken (~4.8:1). */
.hero-intro .kicker,
.sector-hero-inner .kicker,
.section-dark .kicker,
.section-alt .kicker,
.case-hero-inner .kicker,
.nav-cta .kicker{
  color:var(--c-red-light);
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  padding:.9rem 1.7rem;
  border-radius:999px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.01em;
  border:1.5px solid transparent;
  transition:transform var(--dur-fast) var(--ease-out), background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0) scale(.97); }
.btn-primary{ background:var(--c-red); color:var(--c-white); box-shadow:0 0 0 rgba(200,16,46,0); transition:transform var(--dur-fast) var(--ease-out), background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-med) var(--ease-out); }
.btn-primary:hover{ background:var(--c-red-dark); box-shadow:0 10px 28px -6px rgba(200,16,46,.55); }
.btn-outline-light{ border-color:rgba(255,255,255,.35); color:var(--c-white); }
.btn-outline-light:hover{ border-color:var(--c-white); background:rgba(255,255,255,.06); }
.btn-outline-dark{ border-color:rgba(10,10,11,.25); color:var(--c-black); }
.btn-outline-dark:hover{ border-color:var(--c-black); background:rgba(10,10,11,.05); }

/* ==========================================================================
   Top bar (hamburger only)
   ========================================================================== */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--space-3) var(--space-4);
  pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 100%);
}
.topbar > *{ pointer-events:auto; }
.brand{ display:inline-flex; align-items:center; }
.brand-logo{ height:42px; width:auto; display:block; }
.footer-brand .brand-logo{ height:36px; }
.topbar .brand{ position:relative; }
.topbar .brand-logo-dark{ position:absolute; top:0; left:0; opacity:0; transition:opacity var(--dur-fast); }
.topbar .brand-logo-light{ transition:opacity var(--dur-fast); }
body.header-on-light .topbar .brand-logo-light{ opacity:0; }
body.header-on-light .topbar .brand-logo-dark{ opacity:1; }
.hamburger{
  width:52px; height:52px;
  border-radius:999px;
  background:var(--c-red);
  border:none;
  display:flex; align-items:center; justify-content:center;
  position:relative;
  flex-shrink:0;
  transition:background var(--dur-fast);
}
.hamburger:hover{ background:var(--c-red-light); }
.hamburger .bars{ position:relative; width:20px; height:14px; }
.hamburger .bars span{
  position:absolute; left:0; width:100%; height:2px; background:var(--c-white); border-radius:2px;
  transition:transform var(--dur-med) var(--ease-out), opacity var(--dur-fast) var(--ease-out), top var(--dur-med) var(--ease-out);
}
.hamburger .bars span:nth-child(1){ top:0; }
.hamburger .bars span:nth-child(2){ top:6px; }
.hamburger .bars span:nth-child(3){ top:12px; }
body.nav-open .hamburger .bars span:nth-child(1){ top:6px; transform:rotate(45deg); }
body.nav-open .hamburger .bars span:nth-child(2){ opacity:0; }
body.nav-open .hamburger .bars span:nth-child(3){ top:6px; transform:rotate(-45deg); }

/* ==========================================================================
   Nav overlay
   ========================================================================== */
.nav-overlay{
  position:fixed; inset:0; z-index:50;
  background:var(--c-black);
  display:flex; flex-direction:column;
  justify-content:center;
  padding:var(--space-6) var(--space-4);
  opacity:0; visibility:hidden;
  transition:opacity var(--dur-med) var(--ease-out), visibility 0s linear var(--dur-med);
}
body.nav-open .nav-overlay{ opacity:1; visibility:visible; transition:opacity var(--dur-med) var(--ease-out); }
.nav-overlay-grid{
  max-width:var(--container); margin-inline:auto; width:100%;
  display:grid; grid-template-columns:1.3fr 1fr; gap:var(--space-8);
  align-items:center;
}
.nav-list{ border-top:1px solid var(--c-line-on-dark); }
.nav-list li{ border-bottom:1px solid var(--c-line-on-dark); }
.nav-list a{
  display:flex; align-items:baseline; gap:var(--space-3);
  padding:.5rem 0;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.3rem, 2.6vw, 1.9rem);
  color:var(--c-white);
  opacity:0; transform:translateY(16px);
  transition:color var(--dur-fast), transform var(--dur-med) var(--ease-out), opacity var(--dur-med) var(--ease-out);
}
body.nav-open .nav-list a{ opacity:1; transform:translateY(0); }
.nav-list a:hover{ color:var(--c-red); }
.nav-list .idx{ font-family:var(--font-display); font-size:.85rem; color:var(--c-red); font-weight:600; min-width:1.6em; }
.nav-list li:nth-child(1) a{ transition-delay:.05s; }
.nav-list li:nth-child(2) a{ transition-delay:.10s; }
.nav-list li:nth-child(3) a{ transition-delay:.15s; }
.nav-list li:nth-child(4) a{ transition-delay:.20s; }
.nav-list li:nth-child(5) a{ transition-delay:.25s; }
.nav-list li:nth-child(6) a{ transition-delay:.30s; }
.nav-list li:nth-child(7) a{ transition-delay:.35s; }
.nav-list li:nth-child(8) a{ transition-delay:.40s; }

.nav-side{
  opacity:0; transform:translateY(16px);
  transition:opacity var(--dur-med) var(--ease-out) .25s, transform var(--dur-med) var(--ease-out) .25s;
}
body.nav-open .nav-side{ opacity:1; transform:translateY(0); }
.nav-cta{
  background:var(--c-black-2);
  border:1px solid var(--c-line-on-dark);
  border-radius:var(--radius);
  padding:var(--space-4);
}
.nav-cta .kicker{ margin-bottom:var(--space-2); }
.nav-cta h3{ font-size:1.4rem; margin-bottom:var(--space-3); }
.nav-contact{ margin-top:var(--space-5); display:flex; flex-direction:column; gap:.9rem; }
.nav-contact-row{ display:flex; align-items:center; gap:.75rem; color:var(--c-white); font-size:.95rem; text-decoration:none; transition:color var(--dur-fast); }
.nav-contact-row:hover{ color:var(--c-red-light); }
.nav-contact-row svg{ color:var(--c-red); flex-shrink:0; }
.nav-social{ display:flex; gap:.75rem; margin-top:var(--space-2); }
.nav-social a{
  width:40px; height:40px; border-radius:999px; border:1px solid var(--c-line-on-dark);
  display:flex; align-items:center; justify-content:center;
  transition:background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.nav-social a:hover{ background:var(--c-red); border-color:var(--c-red); transform:translateY(-2px); }
.nav-lang-switcher{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:var(--space-5); font-family:var(--font-display); font-weight:600; font-size:.85rem; letter-spacing:.04em; }
.nav-lang-link{ color:var(--c-gray-on-dark); text-decoration:none; transition:color var(--dur-fast); }
.nav-lang-link:hover{ color:var(--c-white); }
.nav-lang-link.is-active{ color:var(--c-red); }
.nav-lang-sep{ color:var(--c-line-on-dark); }
.nav-close-hint{ margin-top:var(--space-6); text-align:center; color:var(--c-gray-on-dark); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; }
body.nav-open .topbar{ background:var(--c-black); }

@media (max-width:860px){
  .nav-overlay-grid{ grid-template-columns:1fr; gap:var(--space-6); }
  .nav-overlay{ overflow-y:auto; justify-content:flex-start; padding-top:calc(var(--space-6) + 60px); }
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-stagger > *{ opacity:0; transform:translateY(28px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.reveal-stagger.is-visible > *{ opacity:1; transform:translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1){ transition-delay:.02s; }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay:.10s; }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay:.18s; }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay:.26s; }
.reveal-stagger.is-visible > *:nth-child(5){ transition-delay:.34s; }

/* ==========================================================================
   Home — hero split
   ========================================================================== */
.hero-split{
  height:100dvh; min-height:560px;
  display:flex;
}
.hero-intro{
  position:absolute; top:50%; left:0; right:0; z-index:5;
  transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  pointer-events:none;
}
.hero-intro h1{
  font-size:clamp(1.6rem, 3.6vw, 2.6rem);
  max-width:18ch;
  color:var(--c-white);
  text-shadow:0 2px 24px rgba(0,0,0,.5);
}
.hero-intro p{
  margin-top:var(--space-2);
  color:rgba(255,255,255,.78);
  max-width:46ch;
  font-size:1rem;
}
.hero-intro .kicker{ margin-bottom:var(--space-2); justify-content:center; }
.hero-quad{
  position:relative;
  overflow:hidden;
  display:flex; align-items:flex-end;
  flex:1 1 0%;
  transition:flex .6s var(--ease-out);
}
.hero-quad-img{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  --quad-x:50%;
  object-position:var(--quad-x) 50%;
  transform:scale(1.06);
  transition:transform 1.1s var(--ease-out), filter .5s;
  filter:grayscale(.15);
}
.hero-quad::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 65%, rgba(0,0,0,.8) 100%);
  transition:background var(--dur-med);
}
.hero-quad:hover{ flex:2.2 1 0%; }
.hero-quad:hover .hero-quad-img{ transform:scale(1); filter:grayscale(0) saturate(1.05); }
.hero-quad-content{
  position:relative; z-index:2;
  padding:var(--space-6) var(--space-6) var(--space-5) var(--space-5);
  width:100%;
  display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:.4rem;
}
.hero-quad-label{ min-width:0; }
.hero-quad-label h2{ font-size:clamp(1.15rem,2.2vw,1.7rem); color:var(--c-white); transition:color var(--dur-fast); text-transform:uppercase; letter-spacing:.02em; }
.hero-quad-sub{ display:block; color:var(--c-white); font-size:1.05rem; line-height:1.3; margin-top:.3rem; min-height:2.75rem; }
.hero-quad:hover .hero-quad-label h2{ color:var(--c-red-light); }
.hero-quad-grid{ display:contents; }

.scroll-cue{
  position:absolute; bottom:var(--space-3); left:50%; transform:translateX(-50%); z-index:6;
  color:rgba(255,255,255,.7);
  animation:bob 2.2s ease-in-out infinite;
  background:none; border:none; padding:.4rem; margin:0; cursor:pointer; line-height:0;
  transition:color var(--dur-fast);
}
.scroll-cue:hover{ color:var(--c-white); }
@keyframes bob{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,8px);} }

@media (max-width:760px){
  .hero-split{ display:flex; flex-direction:column; height:auto; min-height:0; }
  .hero-intro{ position:relative; top:auto; transform:none; padding:calc(var(--space-8) + 40px) var(--space-3) var(--space-4); }
  .scroll-cue{ display:none; }

  .hero-quad-grid{
    display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;
    position:relative;
  }
  .hero-quad{ aspect-ratio:1/1; }
  .hero-quad-content{ padding:var(--space-3); }
  .hero-quad-label h2{ font-size:1.05rem; }
  .hero-quad-sub{ font-size:.78rem; min-height:2.05rem; }
}

/* Intro (about) on home */
.intro-section{ background:var(--c-off); color:var(--c-black); padding:var(--space-12) 0; }
.intro-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:var(--space-8); align-items:start; }
.intro-photo{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius); }
.intro-grid h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); color:var(--c-black); }
.intro-grid p{ color:var(--c-gray-on-light); font-size:1.05rem; margin-top:var(--space-3); }
.stat-row{ display:flex; gap:var(--space-6); margin-top:var(--space-5); flex-wrap:wrap; }
.stat{ }
.stat .n{ font-family:var(--font-display); font-size:2.2rem; font-weight:700; color:var(--c-red); }
.stat .l{ font-size:.85rem; color:var(--c-gray-on-light); text-transform:uppercase; letter-spacing:.06em; }
@media (max-width:800px){ .intro-grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   Sector hero (inner pages)
   ========================================================================== */
.sector-hero{
  min-height:100dvh;
  display:flex; align-items:center;
  padding-top:calc(var(--space-10) + 40px);
  padding-bottom:var(--space-10);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.sector-hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:var(--sector-art);
}
.sector-hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(ellipse at 30% 20%, rgba(200,16,46,.16), transparent 55%),
             linear-gradient(180deg, rgba(10,10,11,.2), var(--c-black) 92%);
}
.sector-hero-pano{
  position:absolute; top:0; left:0; z-index:-3;
  --pano-zoom:132%;
  width:var(--pano-zoom); max-width:none; height:100%; object-fit:cover;
  --pano-x-from:0%; --pano-x-to:-24%;
  animation:pano-pan 16s ease-in-out infinite alternate;
}
@keyframes pano-pan{
  0%{ transform:translateX(var(--pano-x-from)); }
  100%{ transform:translateX(var(--pano-x-to)); }
}
@media (prefers-reduced-motion:reduce){
  .sector-hero-pano{ animation:none; }
}
.sector-hero.has-pano::after{
  background:radial-gradient(ellipse at 30% 20%, rgba(200,16,46,.14), transparent 55%),
             linear-gradient(180deg, rgba(10,10,11,.45) 0%, rgba(10,10,11,.25) 38%, var(--c-black) 96%);
}
/* Live 360°-hero op de sectorpagina's (pano.js), vervangt de oude CSS-pan-foto */
.sector-hero-canvas{
  position:absolute; inset:0; z-index:-3;
  width:100%; height:100%; display:block;
  touch-action:pan-y; cursor:grab;
}
.sector-hero-canvas:active{ cursor:grabbing; }
.pano-hint{
  margin-top:var(--space-3);
  font-size:.8rem; color:rgba(255,255,255,.55);
  letter-spacing:.02em;
}
.sector-hero-inner{ max-width:760px; margin-inline:auto; text-align:center; }
.sector-hero-inner .kicker{ justify-content:center; }
.sector-hero h1{
  font-size:clamp(2.3rem, 6vw, 4.4rem);
  margin-top:var(--space-2);
  color:var(--c-white);
}
.sector-hero h1 em{ font-style:normal; color:var(--c-red); }
.sector-hero p.lead{
  margin:var(--space-3) auto 0;
  font-size:1.15rem;
  color:rgba(255,255,255,.75);
  max-width:56ch;
}
.sector-hero .cta-row{ margin-top:var(--space-5); display:flex; gap:var(--space-2); flex-wrap:wrap; align-items:center; justify-content:center; }
.cta-note{ margin-top:var(--space-2); font-size:.85rem; color:rgba(255,255,255,.5); }

/* Sector art variants — abstract duotone geometry, no external images needed */
.art-vastgoed{ background:
  linear-gradient(135deg, #16171a 0%, #0a0a0b 60%),
  repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 2px, transparent 2px 40px);
}
.art-retail{ background:
  linear-gradient(135deg, #17151a 0%, #0a0a0b 60%),
  repeating-linear-gradient(25deg, rgba(200,16,46,.05) 0 2px, transparent 2px 46px);
}
.art-horeca{ background:
  linear-gradient(135deg, #1a1614 0%, #0a0a0b 60%),
  repeating-radial-gradient(circle at 80% 20%, rgba(255,255,255,.04) 0 1px, transparent 1px 34px);
}
.art-industrie{ background:
  linear-gradient(135deg, #131417 0%, #0a0a0b 60%),
  repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 2px, transparent 2px 56px),
  repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 2px, transparent 2px 56px);
}
.art-drone{ background:
  linear-gradient(135deg, #14171a 0%, #0a0a0b 60%),
  radial-gradient(circle at 75% 25%, rgba(200,16,46,.06) 0, transparent 45%);
}

/* ---- Blog-banner (Inzichten-artikelen) — on-brand illustratie i.p.v. stockfoto --- */
.blog-banner{
  width:100%; max-width:100%; box-sizing:border-box;
  margin:var(--space-5) 0 var(--space-6);
  border-radius:var(--radius); overflow:hidden; position:relative;
  aspect-ratio:16/7; min-height:160px;
  display:flex; align-items:center; justify-content:center;
}
.blog-banner svg{ width:100%; height:100%; max-width:180px; color:#fff; }
.blog-banner svg .accent{ color:var(--c-red-light); }
.blog-bg-1{ background:radial-gradient(circle at 28% 30%, rgba(200,16,46,.28), transparent 60%), linear-gradient(135deg,#1c1c1f,#0a0a0b); }
.blog-bg-2{ background:radial-gradient(circle at 72% 35%, rgba(200,16,46,.22), transparent 55%), linear-gradient(150deg,#17151a,#0a0a0b); }
.blog-bg-3{ background:radial-gradient(circle at 50% 75%, rgba(200,16,46,.2), transparent 55%), linear-gradient(160deg,#191a1c,#0a0a0b); }
.blog-bg-4{ background:radial-gradient(circle at 25% 70%, rgba(200,16,46,.24), transparent 55%), linear-gradient(140deg,#1a1717,#0a0a0b); }
@media (max-width:640px){ .blog-banner svg{ max-width:120px; } }

/* Inzichten-index: kaartjes met een kleine thumbnail (hergebruikt de blog-banner-illustratie) */
.insight-card{
  display:flex; gap:var(--space-4); align-items:flex-start;
  padding:var(--space-4); border:1px solid rgba(10,10,11,.1); border-radius:var(--radius);
  text-decoration:none; transition:border-color 180ms, transform 180ms;
}
.insight-card:hover{ border-color:rgba(10,10,11,.3); transform:translateY(-2px); }
.insight-thumb{
  flex:none; width:64px; height:64px; border-radius:calc(var(--radius) - 4px);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.insight-thumb svg{ width:60%; height:60%; color:#fff; }
.insight-thumb svg .accent{ color:var(--c-red-light); }
.insight-card h2{ color:var(--c-black); font-size:1.3rem; }
.insight-card p{ color:var(--c-gray-on-light); margin-top:var(--space-2); line-height:1.6; }
@media (max-width:480px){ .insight-thumb{ width:52px; height:52px; } }

/* ==========================================================================
   Section shells
   ========================================================================== */
.section-dark{ background:var(--c-black); padding:var(--space-12) 0; }
.section-alt{ background:var(--c-black-2); padding:var(--space-12) 0; }
.section-light{ background:var(--c-off); color:var(--c-black); padding:var(--space-12) 0; }
.section-head{ max-width:640px; margin-bottom:var(--space-8); }
.section-head h2{ font-size:clamp(1.9rem,3.6vw,2.7rem); margin-top:var(--space-2); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head.center .kicker{ justify-content:center; }
.section-light .section-head p{ color:var(--c-gray-on-light); }
.section-dark .section-head p, .section-alt .section-head p{ color:var(--c-gray-on-dark); }
.section-head p{ margin-top:var(--space-2); font-size:1.05rem; }

/* Solutions grid (4 blocks) */
.solutions-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-3); }
.solution-card{
  background:var(--c-black-2);
  border:1px solid var(--c-line-on-dark);
  border-radius:var(--radius);
  padding:var(--space-4);
  transition:transform var(--dur-med) var(--ease-out), border-color var(--dur-fast), background var(--dur-fast);
}
.solution-card:hover{ transform:translateY(-6px); border-color:rgba(200,16,46,.5); background:#1c1c1f; }
.solution-icon{
  width:52px; height:52px; border-radius:999px; background:rgba(200,16,46,.12); color:var(--c-red);
  display:flex; align-items:center; justify-content:center; margin-bottom:var(--space-3);
}
.solution-card h3{ font-size:1.15rem; color:var(--c-white); margin-bottom:.6rem; }
.solution-card p{ color:var(--c-gray-on-dark); font-size:.95rem; }
.section-light .solution-card{ background:var(--c-white); border-color:rgba(10,10,11,.08); box-shadow:0 2px 12px rgba(0,0,0,.05); }
.section-light .solution-card:hover{ background:var(--c-white); border-color:rgba(200,16,46,.5); }
.section-light .solution-card h3{ color:var(--c-black); }
.section-light .solution-card p{ color:var(--c-gray-on-light); }
@media (max-width:980px){ .solutions-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .solutions-grid{ grid-template-columns:1fr; } }

/* Technology section */
.tag{ font-family:var(--font-display); font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--c-red); }
.tech-bg-camera{ background:radial-gradient(circle at 70% 30%, rgba(200,16,46,.25), transparent 55%), linear-gradient(160deg,#1c1c1f,#0a0a0b); }
.tech-bg-drone{ background:radial-gradient(circle at 40% 25%, rgba(200,16,46,.18), transparent 55%), linear-gradient(160deg,#18181b,#0a0a0b); }
.tech-bg-video{ background:radial-gradient(circle at 50% 70%, rgba(200,16,46,.2), transparent 55%), linear-gradient(160deg,#19191c,#0a0a0b); }

/* Technologie — bullets links, beeld rechts dat wisselt per keuze */
.tech-pivot{ display:grid; grid-template-columns:1fr 1.15fr; gap:var(--space-6); align-items:stretch; }
.tech-pivot-list{ display:flex; flex-direction:column; gap:.6rem; }
.tech-pivot-item{
  display:flex; align-items:flex-start; gap:1rem; text-align:left;
  padding:var(--space-3); border-radius:var(--radius); border:1px solid var(--c-line-on-dark);
  background:var(--c-black-2);
  transition:border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.tech-pivot-item:hover{ border-color:rgba(200,16,46,.4); transform:translateY(-2px); }
.tech-pivot-item.is-active{ border-color:var(--c-red); background:#1c1c1f; }
.tech-pivot-icon{
  width:44px; height:44px; border-radius:999px; background:rgba(200,16,46,.12); color:var(--c-red);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:transform var(--dur-fast) var(--ease-out), background var(--dur-fast), color var(--dur-fast);
}
.tech-pivot-item.is-active .tech-pivot-icon{ background:var(--c-red); color:var(--c-white); animation:capPop .45s var(--ease-out); }
.tech-pivot-text{ display:flex; flex-direction:column; gap:.25rem; }
.tech-pivot-text strong{ color:var(--c-white); font-family:var(--font-display); font-size:1.2rem; }
.tech-pivot-text span{ font-size:1rem; color:var(--c-gray-on-dark); }
.tech-pivot-visual{ position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--c-line-on-dark); min-height:340px; }
.tech-pivot-panel{ position:absolute; inset:0; opacity:0; transition:opacity var(--dur-med) var(--ease-out); }
.tech-pivot-panel.panel-in{ opacity:1; }
.tech-pivot-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.tech-pivot-caption{ position:absolute; left:0; right:0; bottom:0; z-index:1; padding:var(--space-4); background:linear-gradient(180deg, transparent, rgba(10,10,11,.9) 75%); }
.tech-pivot-caption h3{ color:var(--c-white); font-size:1.6rem; margin-top:0; }
.tech-pivot-pills{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.7rem; }
.tech-pivot-pill{
  display:inline-flex; align-items:center;
  padding:.35rem .85rem; border-radius:999px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
  font-family:var(--font-display); font-weight:600; font-size:.75rem; color:var(--c-white);
}
@media (max-width:860px){
  .tech-pivot{ grid-template-columns:1fr; }
  .tech-pivot-visual{ min-height:220px; order:-1; }
}

/* Testimonials */
.testi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-3); }
.testi-card{ background:var(--c-black); border:1px solid var(--c-line-on-dark); border-radius:var(--radius); padding:var(--space-4); display:flex; flex-direction:column; }
.testi-quote{ color:var(--c-red); font-size:2rem; font-family:var(--font-display); line-height:1; margin-bottom:var(--space-2); }
.testi-card p.msg{ color:var(--c-white); font-size:.95rem; flex:1; }
.testi-card .who{ margin-top:var(--space-3); font-size:.85rem; color:var(--c-gray-on-dark); }
.testi-card .who b{ color:var(--c-white); display:block; font-family:var(--font-display); font-size:.9rem; }
.section-light .testi-card{ background:var(--c-white); border-color:rgba(10,10,11,.08); box-shadow:0 2px 12px rgba(0,0,0,.05); }
.section-light .testi-card p.msg{ color:var(--c-black); }
.section-light .testi-card .who{ color:var(--c-gray-on-light); }
.section-light .testi-card .who b{ color:var(--c-black); }
@media (max-width:980px){ .testi-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .testi-grid{ grid-template-columns:1fr; } }

/* Capabilities — pivot/tab component: buttons on top, one detail panel below */
.cap-tabs{ max-width:880px; margin-inline:auto; }
.cap-tab-buttons{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-2); }
.cap-tab-btn{
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
  padding:var(--space-3) var(--space-2);
  background:var(--c-black-2); border:1px solid var(--c-line-on-dark); border-radius:var(--radius);
  color:var(--c-gray-on-dark); font-family:var(--font-display); font-weight:600; font-size:.92rem; text-align:center;
  transition:border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.cap-tab-btn:hover{ border-color:rgba(200,16,46,.45); color:var(--c-white); }
.cap-tab-btn.is-active{ background:var(--c-red); border-color:var(--c-red); color:var(--c-white); transform:translateY(-3px); }
.cap-tab-icon{ width:38px; height:38px; display:flex; align-items:center; justify-content:center; }
.cap-tab-btn.is-active .cap-tab-icon{ animation:capPop .45s var(--ease-out); }
@keyframes capPop{ 0%{ transform:scale(1) rotate(0deg); } 45%{ transform:scale(1.25) rotate(-8deg); } 100%{ transform:scale(1) rotate(0deg); } }
.cap-tab-panels{ margin-top:var(--space-4); background:var(--c-black-2); border:1px solid var(--c-line-on-dark); border-radius:var(--radius); padding:var(--space-6); min-height:96px; display:flex; align-items:center; justify-content:center; text-align:center; }
.cap-tab-panel{ display:none; opacity:0; transform:translateY(10px); transition:opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); }
.cap-tab-panel.is-active{ display:block; }
.cap-tab-panel.panel-in{ opacity:1; transform:translateY(0); }
.cap-tab-panel h3{ color:var(--c-white); font-size:1.2rem; margin-bottom:.5rem; }
.cap-tab-panel p{ color:var(--c-gray-on-dark); font-size:1rem; max-width:48ch; margin-inline:auto; }
.section-light .cap-tab-btn{ background:var(--c-white); border-color:rgba(10,10,11,.1); color:var(--c-gray-on-light); box-shadow:0 2px 12px rgba(0,0,0,.05); }
.section-light .cap-tab-btn:hover{ border-color:rgba(200,16,46,.45); color:var(--c-black); }
.section-light .cap-tab-btn.is-active{ background:var(--c-red); border-color:var(--c-red); color:var(--c-white); }
.section-light .cap-tab-panels{ background:var(--c-white); border-color:rgba(10,10,11,.08); box-shadow:0 2px 12px rgba(0,0,0,.05); }
.section-light .cap-tab-panel h3{ color:var(--c-black); }
.section-light .cap-tab-panel p{ color:var(--c-gray-on-light); }
@media (max-width:700px){ .cap-tab-buttons{ grid-template-columns:1fr 1fr; } .cap-tab-btn{ font-size:.85rem; } }

/* Reference cards (logo + naam + evt. contactpersoon) */
.client-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--space-3); max-width:920px; margin-inline:auto; }
.client-card{
  display:block; background:var(--c-white); border-radius:var(--radius); padding:var(--space-4);
  text-align:center; box-shadow:0 2px 12px rgba(0,0,0,.06); text-decoration:none;
  transition:transform var(--dur-fast) var(--ease-out);
}
.client-card:hover{ transform:translateY(-4px); }
.client-card-logo{ height:52px; display:flex; align-items:center; justify-content:center; margin-bottom:var(--space-2); }
.client-card-logo img{ max-height:100%; max-width:170px; width:auto; object-fit:contain; }
.client-card-fallback{ font-family:var(--font-display); font-weight:700; font-size:1.2rem; color:var(--c-black); }
.client-card-name{ font-family:var(--font-display); font-weight:700; font-size:1rem; color:var(--c-black); }
.client-card-person{ font-size:.82rem; color:var(--c-gray-on-light); margin-top:.2rem; }
.client-cards.on-dark .client-card{ background:var(--c-black-2); border:1px solid var(--c-line-on-dark); box-shadow:none; }
.client-cards.on-dark .client-card-fallback,
.client-cards.on-dark .client-card-name{ color:var(--c-white); }
.client-cards.on-dark .client-card-person{ color:var(--c-gray-on-dark); }

/* Featured case examples — a compact card grid (not one big media+text block), so it
   stays proportionate whether a sector page has one case or several. */
.case-grid{
  display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-4);
  max-width:820px; margin:0 auto var(--space-6);
}
.case-card{
  flex:1 1 320px; max-width:380px;
  background:var(--c-black-3); border:1px solid var(--c-line-on-dark); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
}
.case-card-photo{ position:relative; height:220px; background:linear-gradient(135deg,#242024,#0a0a0b); }
.case-card-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.case-card-body{ padding:var(--space-5); display:flex; flex-direction:column; gap:.5rem; flex:1; }
.case-card-kicker{ font-family:var(--font-display); font-weight:700; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--c-red-light); }
.case-card-body h3{ font-size:1.05rem; color:var(--c-white); margin:0; }
.case-card-body p{ color:var(--c-gray-on-dark); font-size:.88rem; line-height:1.55; margin:0; flex:1; }
.case-card-actions{ margin-top:.2rem; }
.case-card-actions .btn{ padding:.55rem 1.1rem; font-size:.82rem; }

/* CTA full-bleed — edge-to-edge red strip instead of a card, for a bolder closing moment */
.cta-full{ background:linear-gradient(120deg, var(--c-red-dark), var(--c-red)); padding:var(--space-8) 0; }
.cta-full-inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; }
.cta-full-inner h2{ font-size:clamp(1.6rem,3vw,2.2rem); color:var(--c-white); max-width:20ch; }
.cta-full-inner p{ color:rgba(255,255,255,.85); margin-top:.5rem; max-width:44ch; }
@media (max-width:640px){ .cta-full-inner{ text-align:center; justify-content:center; } }

/* Footer */
.site-footer{ background:var(--c-black-2); padding:var(--space-10) 0 var(--space-4); border-top:1px solid var(--c-line-on-dark); }
.footer-grid{ display:grid; grid-template-columns:1.1fr .8fr 1fr 1.2fr; gap:var(--space-6); padding-bottom:var(--space-8); }
.footer-brand p{ color:var(--c-gray-on-dark); margin-top:var(--space-2); max-width:32ch; font-size:.92rem; }
.footer-col h4{ font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; color:var(--c-gray-on-dark); margin-bottom:var(--space-2); }
.footer-col a, .footer-col span{ display:block; color:var(--c-white); font-size:.92rem; padding:.35rem 0; opacity:.85; transition:opacity var(--dur-fast), color var(--dur-fast); }
.footer-col a:hover{ opacity:1; color:var(--c-red); }
.footer-social{ display:flex; gap:.6rem; margin-top:var(--space-2); }
.footer-social a{ width:38px; height:38px; border-radius:999px; border:1px solid var(--c-line-on-dark); display:flex; align-items:center; justify-content:center; }
.footer-social a:hover{ background:var(--c-red); border-color:var(--c-red); }
.footer-contact-row{ display:flex !important; align-items:center; gap:.6rem; padding:.4rem 0 !important; line-height:1.35; }
.footer-contact-icon{ display:inline-flex !important; align-items:center; justify-content:center; color:var(--c-red); flex-shrink:0; padding:0 !important; }
.footer-cta-text{ color:var(--c-gray-on-dark); font-size:.9rem; margin:0 0 var(--space-3); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:var(--space-4); border-top:1px solid var(--c-line-on-dark); color:var(--c-gray-on-dark); font-size:.82rem; flex-wrap:wrap; gap:var(--space-2); }
.footer-bottom a{ color:var(--c-gray-on-dark); transition:color var(--dur-fast); }
.footer-bottom a:hover{ color:var(--c-red); }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }

/* Cookiebanner (AVG-toestemming voor GA4) */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:95;
  background:var(--c-black-2); border-top:1px solid var(--c-line-on-dark);
  padding:.5rem var(--space-4);
  transform:translateY(100%); transition:transform var(--dur-med) var(--ease-out);
}
.cookie-banner.is-visible{ transform:translateY(0); }
body.nav-open .cookie-banner{ opacity:0; pointer-events:none; }
.cookie-banner-inner{
  max-width:var(--container); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap;
}
.cookie-banner p{ margin:0; color:var(--c-gray-on-dark); font-size:.78rem; line-height:1.4; white-space:nowrap; }
.cookie-banner p a{ color:var(--c-white); text-decoration:underline; }
.cookie-banner-actions{ display:flex; gap:.5rem; flex:none; }
.cookie-banner .btn{ padding:.4rem .9rem; font-size:.78rem; }
.cookie-banner .btn-outline-light{ background:transparent; }
.cookie-banner .btn-cookie-decline{ background:var(--c-off); color:var(--c-black); border-color:transparent; }
.cookie-banner .btn-cookie-decline:hover{ background:var(--c-white); }
@media (max-width:640px){
  .cookie-banner-inner{ flex-direction:column; align-items:stretch; }
  .cookie-banner-actions{ justify-content:flex-end; }
  .cookie-banner p{ white-space:normal; }
}

/* Contact modal ("Boek een demo") */
.modal-overlay{
  position:fixed; inset:0; z-index:80;
  background:rgba(0,0,0,.72);
  display:flex; align-items:center; justify-content:center; padding:var(--space-4);
  opacity:0; visibility:hidden;
  transition:opacity var(--dur-med) var(--ease-out), visibility 0s linear var(--dur-med);
}
.modal-overlay.is-open{ opacity:1; visibility:visible; transition:opacity var(--dur-med) var(--ease-out); }
.modal-card{
  background:var(--c-black-2); border:1px solid var(--c-line-on-dark); border-radius:var(--radius);
  padding:var(--space-6); max-width:480px; width:100%; position:relative;
  max-height:90vh; overflow-y:auto;
  transform:translateY(16px); transition:transform var(--dur-med) var(--ease-out);
}
.modal-overlay.is-open .modal-card{ transform:translateY(0); }
.modal-close{
  position:absolute; top:var(--space-3); right:var(--space-3);
  width:36px; height:36px; border-radius:999px; border:1px solid var(--c-line-on-dark);
  background:transparent; color:var(--c-white);
  display:flex; align-items:center; justify-content:center;
  transition:background var(--dur-fast), border-color var(--dur-fast);
}
.modal-close:hover{ background:var(--c-red); border-color:var(--c-red); }
.modal-founder{ display:flex; align-items:center; gap:.8rem; margin-top:var(--space-4); padding-top:var(--space-4); border-top:1px solid var(--c-line-on-dark); }
.modal-founder-photo{ width:52px; height:52px; border-radius:999px; object-fit:cover; flex-shrink:0; }
.modal-founder div{ display:flex; flex-direction:column; }
.modal-founder strong{ color:var(--c-white); font-family:var(--font-display); font-size:.95rem; }
.modal-founder span{ color:var(--c-gray-on-dark); font-size:.82rem; }
.modal-card h3{ color:var(--c-white); font-size:1.4rem; margin-top:var(--space-2); }
.modal-card > p{ color:var(--c-gray-on-dark); margin-top:var(--space-2); font-size:.95rem; }
.contact-form{ margin-top:var(--space-4); display:flex; flex-direction:column; gap:var(--space-3); }
.contact-form label{ display:flex; flex-direction:column; gap:.4rem; font-size:.85rem; color:var(--c-gray-on-dark); font-family:var(--font-display); font-weight:600; }
.contact-form input, .contact-form textarea{
  background:var(--c-black); border:1px solid var(--c-line-on-dark); border-radius:var(--radius-sm);
  padding:.7rem .9rem; color:var(--c-white); font-family:var(--font-body); font-size:.95rem; resize:vertical;
}
.contact-form input:focus, .contact-form textarea:focus{ outline:none; border-color:var(--c-red); }
.contact-form button{ margin-top:.4rem; align-self:flex-start; }
.contact-form button:disabled{ opacity:.6; cursor:not-allowed; }
/* Honeypot: onzichtbaar voor bezoekers maar aanwezig in de DOM, zodat spam-bots (die vaak elk
   veld invullen) zich verraden. display:none wordt door slimmere bots overgeslagen. */
.contact-form .hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-status{ font-size:.85rem; min-height:1.2em; }
.form-status:empty{ display:none; }
.form-status.is-sending{ color:var(--c-gray-on-dark); }
.form-status.is-success{ color:#7dd88a; }
.form-status.is-error{ color:var(--c-red-light); }
.form-status.is-error a{ color:inherit; text-decoration:underline; text-underline-offset:.15em; }
body.modal-open{ overflow:hidden; }

/* Legal / privacy page */
.legal-page{ padding-top:calc(var(--space-12) + 60px); }
.legal-container{ max-width:720px; }
.legal-container h1{ font-size:clamp(2rem,4vw,2.8rem); color:var(--c-black); margin-top:var(--space-2); }
.legal-updated{ color:var(--c-gray-on-light); font-size:.9rem; margin-top:var(--space-1); }
.legal-container p{ color:var(--c-gray-on-light); line-height:1.7; margin-top:var(--space-4); }
.legal-container h2{ color:var(--c-black); font-size:1.3rem; margin-top:var(--space-8); }
.legal-container ul{ margin-top:var(--space-3); padding-left:1.3em; color:var(--c-gray-on-light); line-height:1.8; }
.legal-container li{ margin-bottom:.3rem; }
.legal-container a{ color:var(--c-red); text-decoration:underline; text-underline-offset:.15em; }
.legal-container a:hover{ color:var(--c-red-dark); }

/* Klantcase (case study) pagina's */
.case-hero{ position:relative; background:var(--c-black); padding:calc(var(--space-12) + 70px) 0 var(--space-10); overflow:hidden; }
.case-hero.has-photo{ padding:calc(var(--space-12) + 130px) 0 calc(var(--space-10) + 60px); }
.case-hero-photo{ position:absolute; inset:0; z-index:0; }
.case-hero-photo.static{ background-repeat:no-repeat; background-size:cover; background-position:center; animation:none; }
/* Live 360°-canvas op klantcase-pagina's (pano.js), vervangt de statische CSS-pan-foto */
.case-hero-canvas{ width:100%; height:100%; display:block; touch-action:pan-y; cursor:grab; }
.case-hero-canvas:active{ cursor:grabbing; }
canvas.case-photo{ display:block; touch-action:pan-y; cursor:grab; }
canvas.case-photo:active{ cursor:grabbing; }
.case-hero-photo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,11,.55) 0%, rgba(10,10,11,.75) 55%, var(--c-black) 100%);
}
.case-hero-inner{ position:relative; z-index:1; max-width:720px; }
.case-hero h1{ font-size:clamp(2.2rem,4.5vw,3.2rem); color:var(--c-white); margin-top:var(--space-2); }
.case-hero p.lead{ margin-top:var(--space-3); font-size:1.15rem; color:rgba(255,255,255,.75); max-width:56ch; }
.case-container{ max-width:760px; }
.case-container h2{ color:var(--c-black); font-size:1.5rem; margin-top:var(--space-8); }
.case-container p{ color:var(--c-gray-on-light); line-height:1.7; margin-top:var(--space-3); font-size:1.05rem; }
.case-photo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); margin-top:var(--space-2); }
.case-photo{ width:100%; height:260px; object-fit:cover; border-radius:var(--radius); background:var(--c-black-2); }
.case-photo-grid.single{ grid-template-columns:1fr; margin-top:var(--space-5); }
.case-photo-grid.single .case-photo{ height:460px; }

/* 360-panorama preview: a slow auto-pan across the real equirectangular photo. Plain CSS,
   no JS/WebGL — a hint at the real interactive tour rather than a full recreation of it.
   Kept deliberately slow and only lightly zoomed: an earlier, faster/tighter version made
   people seasick (real user feedback) and cropped away too much of the actual photo.
   background-position-y is pushed past 50% to crop toward the floor/eye-level band and
   away from the ceiling (equirectangular source has the horizon around its vertical
   center, ceiling above, floor below). .pano-pan-b runs at a different speed (not just a
   delay) so two panels of the same photo drift in and out of sync instead of looking like
   mirrored duplicates. */
.pano-pan{
  --pano-y:62%;
  --pano-x-from:0%; --pano-x-to:100%;
  background-repeat:no-repeat; background-size:auto 260%; background-position:var(--pano-x-from) var(--pano-y);
  animation:pano-pan-move 100s linear infinite alternate;
}
.pano-pan.pano-pan-b{ animation-duration:140s; animation-delay:-40s; }
@keyframes pano-pan-move{
  from{ background-position:var(--pano-x-from) var(--pano-y); }
  to{ background-position:var(--pano-x-to) var(--pano-y); }
}
@media (prefers-reduced-motion:reduce){ .pano-pan{ animation:none; background-position:32% var(--pano-y); } }
.case-pills{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:var(--space-4); }
.case-pill{
  display:inline-flex; align-items:center; padding:.45rem 1.1rem; border-radius:999px;
  background:rgba(200,16,46,.1); color:var(--c-red);
  font-family:var(--font-display); font-weight:600; font-size:.85rem;
}
.case-tour-btn{ margin-top:var(--space-5); }
@media (max-width:640px){
  .case-photo-grid{ grid-template-columns:1fr; }
  .case-photo{ height:220px; }
  .case-photo-grid.single .case-photo{ height:300px; }
  .case-hero.has-photo{ padding:calc(var(--space-12) + 70px) 0 var(--space-8); }
}

/* Prijscalculator */
.calc-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:var(--space-6); align-items:start; max-width:1080px; margin-inline:auto; }
.calc-options{ display:flex; flex-direction:column; gap:var(--space-4); }
.calc-group{ background:var(--c-white); border:1px solid var(--c-line-on-light); border-radius:var(--radius); padding:var(--space-3) var(--space-4); }
.calc-group-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); cursor:pointer; }
.calc-label{ font-family:var(--font-display); font-weight:600; font-size:.98rem; color:var(--c-black); }
.calc-hint{ font-size:.85rem; color:var(--c-gray-on-light); margin-top:.2rem; }
.calc-value{ font-family:var(--font-display); font-weight:700; color:var(--c-red); white-space:nowrap; }
.calc-group input[type="range"]{ width:100%; margin-top:var(--space-2); accent-color:var(--c-red); }
.calc-group input[type="checkbox"]{ width:20px; height:20px; accent-color:var(--c-red); flex-shrink:0; }
.calc-summary{
  position:sticky; top:calc(var(--space-8) + 20px);
  background:var(--c-black); color:var(--c-white);
  border-radius:var(--radius); padding:var(--space-5);
}
.calc-summary h3{ font-size:1.05rem; color:var(--c-gray-on-dark); font-weight:600; }
.calc-total{ font-family:var(--font-display); font-weight:700; font-size:2.8rem; color:var(--c-white); margin-top:.3rem; }
.calc-breakdown{ list-style:none; margin:var(--space-4) 0; padding:0; border-top:1px solid var(--c-line-on-dark); }
.calc-breakdown li{
  display:flex; justify-content:space-between; gap:var(--space-2);
  padding:.6rem 0; border-bottom:1px solid var(--c-line-on-dark);
  font-size:.9rem; color:var(--c-gray-on-dark);
}
.calc-breakdown li span:last-child{ color:var(--c-white); font-family:var(--font-display); font-weight:600; }
.calc-summary .btn{ width:100%; justify-content:center; margin-top:var(--space-2); }
.calc-disclaimer{ font-size:.78rem; color:var(--c-gray-on-dark); margin-top:var(--space-3); line-height:1.4; }
@media (max-width:860px){
  .calc-grid{ grid-template-columns:1fr; }
  .calc-summary{ position:static; }
}

/* generic icon sizing helper */
.icon-24{ width:24px; height:24px; }
.icon-20{ width:20px; height:20px; }

/* ==========================================================================
   v2 HOME — live 360° hero + supporting sections
   ========================================================================== */

/* ---- Live panorama hero -------------------------------------------------- */
.pano-hero{
  position:relative;
  height:100svh; min-height:600px;
  overflow:hidden;
  isolation:isolate;
  background:#0c0c0e;
}
.pano-hero canvas{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; display:block;
  touch-action:pan-y;                 /* verticaal scrollen blijft werken; horizontaal = rondkijken */
  cursor:grab;
}
.pano-hero canvas:active{ cursor:grabbing; }
.pano-hero::after{                    /* leesbaarheids-vignet: bovenrand licht, tekstzone onderin donkerder */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(10,10,11,.5) 0%, rgba(10,10,11,0) 22%, rgba(10,10,11,0) 34%, rgba(10,10,11,.42) 56%, rgba(10,10,11,.9) 100%),
    radial-gradient(ellipse at 50% 40%, rgba(200,16,46,.09), transparent 60%);
}
.pano-hero-inner{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; justify-content:flex-end;
  align-items:center; text-align:center;
  /* ondermarge = ruimte voor de zwevende sector-pills onderin */
  padding:calc(var(--space-10) + 40px) var(--space-4) 92px;
  pointer-events:none;
}
.pano-hero-inner > *{ pointer-events:auto; }
.pano-hero .kicker{ color:var(--c-red-light); justify-content:center; margin-bottom:var(--space-2); }
.pano-hero h1{
  font-size:clamp(2rem, 5.2vw, 3.6rem);
  color:var(--c-white); max-width:16ch;
  text-shadow:0 2px 30px rgba(0,0,0,.6);
}
.pano-hero h1 em{ font-style:normal; color:var(--c-red-light); }
.pano-hero p.lead{
  margin-top:var(--space-3);
  color:rgba(255,255,255,.82);
  max-width:52ch; font-size:1.06rem;
  text-shadow:0 1px 12px rgba(0,0,0,.55);
}
.pano-hero-cta{
  margin-top:var(--space-4);
  display:flex; gap:var(--space-2); flex-wrap:wrap; align-items:center; justify-content:center;
}
.text-link{
  font-family:var(--font-display); font-weight:600; font-size:.92rem;
  color:rgba(255,255,255,.82); border-bottom:1px solid rgba(255,255,255,.3);
  padding-bottom:2px; background:none; border-left:none; border-right:none; border-top:none;
  cursor:pointer; transition:color var(--dur-fast), border-color var(--dur-fast);
}
.text-link:hover{ color:var(--c-white); border-color:var(--c-white); }
.section-light .text-link{ color:var(--c-gray-on-light); border-bottom-color:rgba(10,10,11,.3); }
.section-light .text-link:hover{ color:var(--c-black); border-color:var(--c-black); }

.pano-drag-hint{
  position:absolute; top:78px; left:50%; transform:translateX(-50%);
  z-index:2; display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem 1rem; border-radius:999px;
  background:rgba(10,10,11,.5); border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.9); font-family:var(--font-display); font-weight:600;
  font-size:.78rem; letter-spacing:.03em; text-transform:uppercase; white-space:nowrap;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  animation:hint-fade 6s var(--ease-out) forwards;
  pointer-events:none;
}
.pano-drag-hint svg{ width:16px; height:16px; }
@keyframes hint-fade{ 0%,55%{ opacity:1; } 100%{ opacity:0; visibility:hidden; } }

/* sector-schakelaar in de hero — zwevende pills */
.pano-sectors{
  position:absolute; left:0; right:0; bottom:var(--space-3); z-index:3;
  display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap;
  padding:0 var(--space-3);
}
.pano-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem 1.05rem; border-radius:999px;
  background:rgba(10,10,11,.5); border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.82);
  font-family:var(--font-display); font-weight:600; font-size:.85rem;
  letter-spacing:.02em;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.pano-chip:hover{ color:var(--c-white); border-color:rgba(255,255,255,.5); transform:translateY(-2px); }
.pano-chip .dot{ width:7px; height:7px; border-radius:999px; background:currentColor; opacity:.6; }
.pano-chip.is-active{
  background:var(--c-red); border-color:var(--c-red); color:var(--c-white);
}
.pano-chip.is-active .dot{ opacity:1; }

@media (max-width:760px){
  .pano-hero{ height:88svh; min-height:620px; }
  /* de pills wrappen hier naar 2 regels; ondermarge moet daar ruimte voor laten
     zodat "of bereken direct een richtprijs" niet achter de pills verdwijnt */
  .pano-hero-inner{ padding-bottom:156px; }
  .pano-hero h1{ font-size:clamp(1.9rem, 8vw, 2.6rem); }
  .pano-hero p.lead{ font-size:.96rem; }
  .pano-hero-cta{ margin-top:var(--space-3); }
  .pano-drag-hint{ top:70px; font-size:.7rem; padding:.42rem .8rem; }
  .pano-sectors{ bottom:var(--space-2); }
}

/* ---- "Wat je krijgt" — genummerde stappen ----------------------------- */
.steps-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-3); }
.step-card{
  background:var(--c-black-2); border:1px solid var(--c-line-on-dark);
  border-radius:var(--radius); padding:var(--space-4);
  display:flex; flex-direction:column; gap:.6rem;
  transition:transform var(--dur-med) var(--ease-out), border-color var(--dur-fast);
}
.step-card:hover{ transform:translateY(-6px); border-color:rgba(200,16,46,.5); }
.step-num{
  font-family:var(--font-display); font-weight:700; font-size:.85rem;
  width:34px; height:34px; border-radius:999px;
  background:rgba(200,16,46,.14); color:var(--c-red-light);
  display:flex; align-items:center; justify-content:center;
}
.step-card h3{ font-size:1.08rem; color:var(--c-white); }
.step-card p{ color:var(--c-gray-on-dark); font-size:.92rem; line-height:1.55; }
.section-light .step-card{ background:var(--c-white); border-color:rgba(10,10,11,.08); box-shadow:0 2px 12px rgba(0,0,0,.05); }
.section-light .step-card:hover{ border-color:rgba(200,16,46,.5); }
.section-light .step-card h3{ color:var(--c-black); }
.section-light .step-card p{ color:var(--c-gray-on-light); }
@media (max-width:900px){ .steps-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .steps-grid{ grid-template-columns:1fr; } }

/* ---- Proof-tegels (referenties met resultaat) — horizontale carousel -- */
.proof-carousel-wrap{ position:relative; padding-inline:56px; }
.proof-carousel{
  display:flex; gap:var(--space-3);
  overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding:.2rem .2rem 1rem;
  margin:-.2rem -.2rem -1rem;
  scrollbar-width:none;
}
.proof-carousel::-webkit-scrollbar{ display:none; }
.proof-tile{
  flex:0 0 clamp(240px, 27vw, 310px); scroll-snap-align:start;
  display:flex; flex-direction:column;
  background:var(--c-black-2); border:1px solid var(--c-line-on-dark);
  border-radius:var(--radius); overflow:hidden;
  transition:transform var(--dur-med) var(--ease-out), border-color var(--dur-fast);
}
.proof-tile:hover{ transform:translateY(-6px); border-color:rgba(200,16,46,.5); }
.proof-photo{ height:150px; position:relative; background:linear-gradient(135deg,#242024,#0a0a0b); overflow:hidden; }
.proof-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform var(--dur-med) var(--ease-out); }
.proof-tile:hover .proof-photo img{ transform:scale(1.05); }
.proof-body{ padding:var(--space-3) var(--space-4) var(--space-4); display:flex; flex-direction:column; gap:.45rem; flex:1; }
.proof-tag{ font-family:var(--font-display); font-weight:700; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--c-red-light); }
.proof-body h3{ font-size:1rem; color:var(--c-white); }
.proof-body p{ color:var(--c-gray-on-dark); font-size:.88rem; line-height:1.5; flex:1; }
.proof-body a.proof-link{
  font-family:var(--font-display); font-weight:600; font-size:.82rem; color:var(--c-white);
  display:inline-flex; align-items:center; gap:.35rem; transition:gap var(--dur-fast), color var(--dur-fast);
}
.proof-body a.proof-link:hover{ color:var(--c-red-light); gap:.6rem; }
.carousel-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:42px; height:42px; border-radius:999px;
  background:var(--c-red); border:1px solid var(--c-red); color:var(--c-white);
  display:flex; align-items:center; justify-content:center;
  transition:background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.carousel-nav:hover{ background:var(--c-red-dark); border-color:var(--c-red-dark); transform:translateY(calc(-50% - 2px)); }
.carousel-nav.prev{ left:0; }
.carousel-nav.next{ right:0; }
@media (max-width:700px){
  .proof-carousel-wrap{ padding-inline:0; }
  .carousel-nav{ display:none; }
}

/* ---- Testimonials-kop op de homepage (hergebruikt .testi-grid/.testi-card) --- */
.testi-head{ text-align:center; margin:var(--space-10) 0 var(--space-5); }
.testi-head h3{ font-family:var(--font-display); font-size:clamp(1.3rem,2.4vw,1.7rem); color:var(--c-white); }

/* ---- Prijsanker ------------------------------------------------------- */
.price-anchor{ max-width:640px; margin-inline:auto; text-align:center; }
.price-anchor .big{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(2rem,4.4vw,3rem); color:var(--c-white); margin-top:var(--space-2);
}
.price-anchor .big em{ font-style:normal; color:var(--c-red-light); }
.price-anchor p{ color:var(--c-gray-on-dark); margin-top:var(--space-2); font-size:1.02rem; }
.price-anchor .btn{ margin-top:var(--space-4); }
.section-light .price-anchor .big{ color:var(--c-black); }
.section-light .price-anchor p{ color:var(--c-gray-on-light); }

/* ---- Sectoren-kaarten — echte sectorfoto's met scrim, niet de vage art-textuur --- */
.sector-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-3); margin-top:var(--space-6); }
.sector-strip a{
  position:relative; overflow:hidden; border-radius:var(--radius);
  aspect-ratio:4/5; min-height:220px;
  display:flex; align-items:flex-end; padding:var(--space-4);
  font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--c-white);
  transition:transform var(--dur-fast) var(--ease-out);
}
.sector-strip a img{
  position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(.25);
  transition:transform var(--dur-med) var(--ease-out), filter var(--dur-med) var(--ease-out);
}
.sector-strip a::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(10,10,11,.05) 25%, rgba(10,10,11,.45) 60%, rgba(10,10,11,.85) 100%);
  transition:background var(--dur-med);
}
.sector-strip a span{ position:relative; z-index:2; display:inline-flex; align-items:center; gap:.4rem; }
.sector-strip a:hover{ transform:translateY(-4px); }
.sector-strip a:hover img{ transform:scale(1.06); filter:grayscale(0) saturate(1.05); }
.sector-strip a:hover::after{ background:linear-gradient(180deg, rgba(10,10,11,.05) 15%, rgba(200,16,46,.22) 55%, rgba(10,10,11,.85) 100%); }
@media (max-width:760px){
  .sector-strip{ grid-template-columns:1fr 1fr; }
  .sector-strip a{ aspect-ratio:4/3; min-height:150px; }
}
.sector-fallback{ text-align:center; margin-top:var(--space-5); color:var(--c-gray-on-dark); font-size:.95rem; }
.section-light .sector-fallback{ color:var(--c-gray-on-light); }

/* ---- Fact-rij bij "Wie is ohWAUW" (vervangt de oude nep-stat-rij) --- */
.fact-row{ display:flex; flex-direction:column; gap:.6rem; margin-top:var(--space-5); }
.fact-row li{ position:relative; color:var(--c-gray-on-light); font-size:.95rem; padding-left:1.2rem; }
.fact-row li::before{ content:""; position:absolute; left:0; top:.6em; width:6px; height:6px; border-radius:999px; background:var(--c-red); }

/* ---- "Wat kan er in een rondleiding" — hergebruikt .tech-pivot, met SVG-mockups --- */
#in-de-tour .tech-pivot-item{ background:var(--c-black); }
#in-de-tour .tech-pivot-item.is-active{ background:#1c1c1f; }
#in-de-tour .tech-pivot-text span{ font-size:.9rem; line-height:1.45; }
#in-de-tour .tech-pivot-visual{ min-height:380px; }
.feat-panel{ background:linear-gradient(160deg,#1c1c1f 0%, #0a0a0b 85%); }
.feat-illu{
  position:absolute; inset:0; z-index:0;
  display:flex; align-items:center; justify-content:center;
  padding:var(--space-6) var(--space-6) 104px;
}
.feat-illu svg{ width:100%; height:100%; max-width:440px; color:#fff; overflow:visible; }
.feat-illu .accent{ color:var(--c-red-light); }
.feat-illu .accent-fill{ fill:var(--c-red); stroke:none; }
.feat-illu .feat-t{
  font-family:var(--font-display); font-weight:700; font-size:15px;
  fill:rgba(255,255,255,.55); stroke:none; text-anchor:middle;
}
.feat-illu .feat-t-on{ fill:#fff; }
.feat-illu .feat-t-btn{ fill:#fff; font-size:16px; }
@media (max-width:860px){
  #in-de-tour .tech-pivot-visual{ min-height:300px; }
  .feat-illu{ padding:var(--space-5) var(--space-5) 96px; }
}