/* Pagina-opmaak Technea, gescoopt onder .tn-project zodat het theme en deze pagina's
   elkaar niet overschrijven. Gegenereerd: bewerk css/style.css en draai
   build_projectpaginas.py opnieuw. */
/* Technea — huisstijl tokens + Variokomp landingspagina
   Bron huisstijl: Project Knowledge/001 Branding en huisstijl/000 Huisstijl Technea/Stijlgids Technea.pdf */@font-face{
  font-family: "Open Sans";
  src: url("../assets/fonts/OpenSans-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}@font-face{
  font-family: "Open Sans";
  src: url("../assets/fonts/OpenSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}@font-face{
  font-family: "Open Sans";
  src: url("../assets/fonts/OpenSans-Semibold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}@font-face{
  font-family: "Open Sans";
  src: url("../assets/fonts/OpenSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}@font-face{
  font-family: "Open Sans";
  src: url("../assets/fonts/OpenSans-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}:root{
  --bg-soft:#F7F7F6;      /* lichte achtergrond (hero) */
  --bg-alt:#EFEFED;       /* afwisselende sectie-achtergrond */
  --ink:#161616;          /* Technea zwart */
  --ink-soft:#5C5C5C;     /* gedempte tekstkleur */
  --orange:#F28D2D;       /* Technea oranje */
  --orange-deep:#D97A1F;  /* donkerder oranje, hover/actief */
  --navy:#1C2338;         /* tweede donkere kleur, i.p.v. zwart op grote donkere blokken */
  --navy-2:#2A3550;       /* navy gradient-stop */
  --white:#FFFFFF;
  --line:#E3E3E1;         /* neutrale randkleur */
  --radius:10px;
}.tn-project *{box-sizing:border-box;}.tn-project{scroll-behavior:smooth;}.tn-project{
  margin:0;
  font-family:'Open Sans',Arial,sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.55;
}.tn-project h1,.tn-project h2,.tn-project h3{
  font-family:'Open Sans',Arial,sans-serif;
  font-weight:800;
  margin:0;
  letter-spacing:-0.01em;
}.tn-project p{margin:0;}.tn-project img,.tn-project svg{display:block;}.tn-project .wrap{
  max-width:1280px;
  margin:0 auto;
  padding:0 28px;
}.tn-project .eyebrow{
  display:inline-block;
  font-family:'Open Sans',Arial,sans-serif;
  font-weight:700;
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:14px;
}.tn-project .btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--orange);
  color:var(--white);
  font-family:'Open Sans',Arial,sans-serif;
  font-weight:700;
  font-size:15px;
  padding:14px 26px;
  border-radius:6px;
  text-decoration:none;
  border:none;
  cursor:pointer;
  transition:background .18s ease, transform .18s ease;
}.tn-project .btn:hover{background:var(--orange-deep); transform:translateY(-1px);}.tn-project .btn:focus-visible{outline:3px solid var(--ink); outline-offset:3px;}.tn-project .btn-ghost{
  background:transparent;
  color:var(--ink);
  border:1.5px solid var(--line);
}.tn-project .btn-ghost:hover{background:var(--white); border-color:var(--orange); color:var(--orange);}/* ---------- HEADER ---------- */.tn-project header{
  padding:20px 0;
  border-bottom:1px solid var(--line);
}.tn-project header .wrap{display:flex; align-items:center; justify-content:space-between;}.tn-project .logo{
  display:flex;
  align-items:center;
}.tn-project header nav a{
  font-size:14px; color:var(--orange); text-decoration:none; font-weight:600;
}/* ---------- HERO ---------- */.tn-project .hero{
  background:linear-gradient(135deg,rgba(28,35,56,.87) 0%,rgba(42,53,80,.80) 100%),
             url("../assets/img/hero-bg.jpg") center/cover no-repeat;
  padding:72px 0 56px;
  overflow:hidden;
}.tn-project .hero .wrap{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:48px;
  align-items:center;
}.tn-project .hero h1{
  font-size:clamp(32px,4.2vw,46px);
  font-weight:700;
  line-height:1.08;
  margin-bottom:18px;
  color:var(--white);
}.tn-project .hero p.lede{
  font-size:17px;
  color:rgba(255,255,255,.75);
  max-width:46ch;
  margin-bottom:28px;
}.tn-project .hero-actions{display:flex; gap:12px; flex-wrap:wrap;}.tn-project .hero .btn-ghost{
  color:var(--white);
  border-color:rgba(255,255,255,.5);
}.tn-project .hero .btn-ghost:hover{
  background:rgba(255,255,255,.1);
  border-color:var(--white);
  color:var(--white);
}.tn-project .hero-video{
  position:relative;
  width:100%;
  padding-top:56.25%;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 18px 34px -18px rgba(0,0,0,0.45);
}.tn-project .hero-video iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}/* ---------- SECTION SHELL ---------- */.tn-project section.block{padding:76px 0;}.tn-project .block.alt{background:var(--bg-alt);}.tn-project .block-head{
  margin-bottom:44px;
}.tn-project .block-head h2{
  font-size:clamp(24px,3vw,32px);
  font-weight:700;
  margin-bottom:12px;
}.tn-project .block-head p{color:var(--ink-soft); font-size:16px;}/* ---------- PROJECTS ---------- */.tn-project .project-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}.tn-project .project-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}.tn-project .project-photo{
  height:220px;
  background:linear-gradient(135deg,#EDEDEC,#DFDFDD);
}.tn-project .project-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}.tn-project .project-body{padding:20px;}.tn-project .project-tag{
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--orange); margin-bottom:8px; display:block;
}.tn-project .project-body h3{font-size:17px; font-weight:700; margin-bottom:8px;}.tn-project .project-body p{font-size:14.5px; color:var(--ink-soft);}.tn-project .project-cta{
  margin-top:14px; font-size:13.5px; font-weight:700; color:var(--orange);
  text-decoration:none; display:inline-flex; align-items:center; gap:5px;
}/* ---------- INSTALLATIE STAPPEN ---------- */.tn-project .steps-block{padding:56px 0;}.tn-project .steps-block .block-head{margin-bottom:24px;}.tn-project .step-pills{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-bottom:28px;
}.tn-project .step-pill{
  display:flex; align-items:center; gap:8px;
  border:1.5px solid var(--line);
  background:var(--white);
  border-radius:999px;
  padding:6px 16px 6px 6px;
  cursor:pointer;
  font-family:'Open Sans',Arial,sans-serif;
  font-size:13.5px; font-weight:600; color:var(--ink-soft);
  transition:border-color .18s ease, background .18s ease, color .18s ease;
}.tn-project .step-pill .num{
  width:24px; height:24px; border-radius:50%;
  background:var(--bg-soft); color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; flex:none;
  transition:background .18s ease, color .18s ease;
}.tn-project .step-pill.active{border-color:var(--orange); color:var(--ink); background:#FDF1E4;}.tn-project .step-pill.active .num{background:var(--orange); color:var(--white);}.tn-project .step-pill:focus-visible{outline:2px solid var(--orange); outline-offset:2px;}.tn-project .step-pill .label{display:none;}@media (min-width:700px){.tn-project .step-pill .label{display:inline;} }.tn-project .steps-track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  cursor:grab;
  -ms-overflow-style:none;
  scrollbar-width:none;
}.tn-project .steps-track::-webkit-scrollbar{display:none;}.tn-project .steps-track.dragging{cursor:grabbing; scroll-behavior:auto; user-select:none;}.tn-project .step-slide{
  flex:0 0 100%;
  scroll-snap-align:start;
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:40px;
  align-items:center;
}.tn-project .step-photo{
  width:100%;
  height:280px;
  border-radius:12px;
  object-fit:cover;
  -webkit-user-drag:none;
}.tn-project .step-num{
  display:block;
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--orange); margin-bottom:10px;
}.tn-project .step-body h3{font-size:22px; font-weight:700; margin-bottom:12px;}.tn-project .step-body p{font-size:15px; color:var(--ink-soft); margin-bottom:24px;}.tn-project .step-arrows{display:flex; gap:10px;}.tn-project .step-arrows .rv-arrow{width:42px; height:42px;}.tn-project .step-arrows .rv-arrow svg{width:18px; height:18px;}/* ---------- REVIEWS ---------- */.tn-project .reviews-bg{
  background:linear-gradient(135deg,rgba(28,35,56,.87) 0%,rgba(42,53,80,.80) 100%),
             url("../assets/img/reviews-bg.jpg") center/cover no-repeat;
  color:var(--white);
}.tn-project .reviews-bg h2{color:var(--white);}.tn-project .review-carousel{
  display:flex;
  align-items:center;
  gap:16px;
}.tn-project .review-track{
  flex:1;
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  column-gap:24px;
  -ms-overflow-style:none;
  scrollbar-width:none;
}.tn-project .review-track::-webkit-scrollbar{display:none;}.tn-project .review-page{
  flex:0 0 100%;
  scroll-snap-align:start;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}.tn-project .rv-arrow{
  flex:none;
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--orange);
  border:none;
  color:var(--white);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .15s ease;
}.tn-project .rv-arrow svg{width:20px;height:20px;}.tn-project .rv-arrow:hover{background:var(--orange-deep);}.tn-project .review-card{
  background:var(--white);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
}.tn-project .review-kind{
  display:block;
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--orange); margin-bottom:12px;
}.tn-project .review-card blockquote{
  font-family:'Open Sans',Arial,sans-serif;
  font-size:16px;
  font-weight:600;
  line-height:1.45;
  margin:0 0 16px;
}.tn-project .review-name{font-size:14px; color:var(--ink); font-weight:700;}.tn-project .review-who{font-size:13px; color:var(--ink-soft); font-weight:600;}/* ---------- FAQ ---------- */.tn-project .faq-item{
  border-bottom:1px solid var(--line);
}.tn-project .faq-item:first-child{border-top:1px solid var(--line);}.tn-project .faq-q{
  width:100%;
  background:none;
  border:none;
  text-align:left;
  padding:22px 4px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  cursor:pointer;
  font-family:'Open Sans',Arial,sans-serif;
  font-size:16.5px;
  font-weight:600;
  color:var(--ink);
}.tn-project .faq-q .plus{
  flex:none; width:22px; height:22px; border-radius:50%;
  border:1.5px solid var(--orange); color:var(--orange);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; transition:transform .2s ease;
}.tn-project .faq-item[open] .plus{transform:rotate(45deg);}.tn-project .faq-a{padding:0 4px 22px; color:var(--ink-soft); font-size:15px;}.tn-project .faq-a p{margin:0;}.tn-project .faq-a p + p{margin-top:10px;}.tn-project .faq-a .faq-tip{color:var(--ink);}.tn-project .faq-a .faq-tip strong{color:var(--orange);}.tn-project .faq-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:28px;
}.tn-project .faq-tab{
  font-family:'Open Sans',Arial,sans-serif;
  font-size:13.5px;
  font-weight:700;
  padding:10px 18px;
  border-radius:6px;
  border:1.5px solid var(--line);
  background:var(--white);
  color:var(--ink);
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}.tn-project .faq-tab:hover{border-color:var(--orange); color:var(--orange);}.tn-project .faq-tab.active{background:var(--orange); border-color:var(--orange); color:var(--white);}.tn-project .faq-panel[hidden]{display:none;}/* ---------- OPBOUW (hergebruikt blok) ---------- */.tn-project .opbouw-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
}.tn-project .opbouw-list{list-style:none; margin:22px 0 0; padding:0;}.tn-project .opbouw-list li{
  display:flex; gap:10px; align-items:flex-start;
  font-size:15px; color:var(--ink); margin-bottom:12px;
}.tn-project .opbouw-list svg{flex:none; width:18px; height:18px; margin-top:2px; color:var(--orange);}.tn-project .opbouw-visual{
  position:relative;
  height:280px;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--bg-alt);
}.tn-project .opbouw-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .6s ease;
}.tn-project .opbouw-slide.active{opacity:1;}/* ---------- CLOSING CTA ---------- */.tn-project .closing{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 100%);
  color:var(--white);
  padding:64px 0 48px;
}.tn-project .closing-grid{
  display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:start;
}.tn-project .closing h2{font-size:clamp(24px,3vw,30px); font-weight:700; margin-bottom:12px;}.tn-project .closing p{color:rgba(255,255,255,.65); font-size:15.5px; max-width:48ch;}/* ---------- LEAD FORM (dummy) ---------- */.tn-project .lead-form{
  background:var(--white);
  color:var(--ink);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.45);
}.tn-project .form-tabs{
  display:flex;
  background:var(--bg-soft);
  border-radius:6px;
  padding:3px;
  gap:3px;
  margin-bottom:20px;
}.tn-project .form-tab{
  flex:1;
  padding:9px 8px;
  border:none;
  border-radius:4px;
  background:transparent;
  font-family:'Open Sans',Arial,sans-serif;
  font-weight:600;
  font-size:13.5px;
  color:var(--ink-soft);
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}.tn-project .form-tab.active{background:var(--navy); color:var(--white);}.tn-project .lead-form h3{font-size:19px; font-weight:700; margin-bottom:6px;}.tn-project .form-sub{font-size:13.5px; color:var(--ink-soft); margin-bottom:18px; line-height:1.5;}.tn-project .form-field{margin-bottom:14px;}.tn-project .form-field label{
  display:block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:6px;
}.tn-project .form-field .req{color:var(--orange);}.tn-project .form-field input,.tn-project .form-field select,.tn-project .form-field textarea{
  width:100%;
  padding:10px 14px;
  border:1.5px solid var(--line);
  border-radius:6px;
  font-family:'Open Sans',Arial,sans-serif;
  font-size:14.5px;
  color:var(--ink);
  background:var(--white);
}.tn-project .form-field textarea{resize:vertical; min-height:70px;}.tn-project .form-field input:focus,.tn-project .form-field select:focus,.tn-project .form-field textarea:focus{
  outline:none; border-color:var(--orange);
}.tn-project .form-toggle{
  width:100%;
  display:flex; align-items:center; justify-content:center; gap:6px;
  background:none; border:none;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:11px 0; margin:2px 0 16px;
  font-family:'Open Sans',Arial,sans-serif; font-size:13.5px; font-weight:600; color:var(--ink);
  cursor:pointer;
}.tn-project .form-toggle .chev{transition:transform .2s ease; font-size:13px;}.tn-project .form-toggle[aria-expanded="true"] .chev{transform:rotate(180deg);}.tn-project .form-extra{max-height:0; overflow:hidden; transition:max-height .35s ease;}.tn-project .form-extra.open{max-height:260px;}.tn-project .form-consent{
  display:flex; align-items:flex-start; gap:10px;
  margin-bottom:18px; cursor:pointer;
}.tn-project .form-consent input{margin-top:3px; accent-color:var(--orange); flex:none;}.tn-project .form-consent span{font-size:12.5px; color:var(--ink-soft); line-height:1.5;}.tn-project .form-consent a{color:var(--orange); font-weight:600;}.tn-project .form-submit{width:100%; justify-content:center;}.tn-project footer{
  background:var(--navy);
  color:rgba(255,255,255,.45);
  font-size:13px;
  padding:22px 0 30px;
  border-top:1px solid rgba(255,255,255,.1);
}.tn-project .note{
  background:#FDF1E4;
  border:1px dashed var(--orange);
  color:var(--orange-deep);
  font-size:13px;
  font-weight:600;
  padding:10px 16px;
  border-radius:10px;
  margin-bottom:18px;
  display:inline-block;
}/* ---------- PROJECT DETAIL PAGE ---------- */.tn-project .breadcrumb{
  padding:18px 0;
  font-size:13px;
  color:var(--ink-soft);
}.tn-project .breadcrumb a{color:var(--ink-soft); text-decoration:none;}.tn-project .breadcrumb a:hover{color:var(--orange);}.tn-project .breadcrumb .sep{margin:0 7px; color:var(--line);}.tn-project .breadcrumb .current{color:var(--ink); font-weight:600;}.tn-project .project-hero{
  position:relative;
  overflow:hidden;
  background:var(--navy);
  padding:60px 0 52px;
  color:var(--white);
}.tn-project .project-hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}/* Variant met vastgezette achtergrond: de foto blijft staan terwijl de
   pagina eroverheen scrollt. De URL staat inline in de HTML, omdat een
   url() in dit stylesheet relatief aan de css-map zou worden opgelost. */.tn-project .project-hero-vast{
  background-attachment:fixed;
  background-position:center top;
  background-size:cover;
  background-repeat:no-repeat;
  /* iets hoger dan de gewone hero: bij een vastgezette achtergrond wordt de
     foto op schermhoogte geschaald, dus een lage band toont te weinig beeld. */
  padding:96px 0 84px;
}.tn-project .project-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(28,35,56,.94) 0%,rgba(22,22,22,.66) 52%,rgba(22,22,22,.22) 100%);
}.tn-project .project-hero .wrap{position:relative; z-index:1;}.tn-project .project-hero h1{
  font-size:clamp(28px,4vw,42px);
  font-weight:700;
  line-height:1.14;
  /* 29ch komt op groot scherm uit op ongeveer de halve kolombreedte,
     gelijk met de lead eronder. */
  max-width:29ch;
  color:var(--white);
  margin-bottom:16px;
}.tn-project .project-meta{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px;}.tn-project .project-meta span{
  display:inline-flex; align-items:center;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.28);
  color:var(--white);
  font-size:12.5px; font-weight:600;
  padding:6px 14px; border-radius:999px;
}.tn-project .project-hero .lead{
  font-size:16.5px; font-weight:600; line-height:1.6;
  color:rgba(255,255,255,.85);
  max-width:66ch;
}.tn-project .hero-challenge{
  margin-top:18px;
  font-size:15.5px;
  line-height:1.5;
  color:rgba(255,255,255,.85);
  max-width:66ch;
}.tn-project .hero-challenge span{
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--orange);
  margin-right:6px;
}.tn-project .project-hero a{
  color:var(--white);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:var(--orange);
  text-decoration-thickness:2px;
}.tn-project .project-hero a:hover{color:var(--orange);}.tn-project .article{padding:56px 0 4px; position:relative;}.tn-project .article .wrap{
  max-width:1120px;
  display:grid;
  grid-template-columns:200px minmax(0,800px);
  gap:0 56px;
  justify-content:center;
}/* Buiten de rasterstroom gehouden, zodat de kolom altijd over de volle
   artikelhoogte loopt en het sticky-gedrag niet halverwege stopt.
   De 528px is de halve rasterbreedte (200 + 56 + 800). */.tn-project .article-toc{
  position:absolute;
  top:56px;
  bottom:0;
  left:calc(50% - 528px);
  width:200px;
  z-index:1;
}/* min-width:0 overschrijft de automatische minimumbreedte van een
   rasteritem; zonder dat duwt de productenslider de kolom breder dan
   het scherm op smalle viewports. */.tn-project .article-body,.tn-project .product-band{grid-column:2; min-width:0;}/* Drie duidelijke niveaus t.o.v. de lopende tekst van 16px:
   hoofdstuk 28px (1,75x), tussenkop 20px (1,25x). */.tn-project .article-body h2{font-size:28px; line-height:1.2; margin:60px 0 16px;}.tn-project .article-body > h2:first-child{margin-top:0;}.tn-project .article-body h3{font-size:20px; line-height:1.35; margin:38px 0 10px; color:var(--ink);}.tn-project .article-body h2,.tn-project .article-body h3{scroll-margin-top:28px;}.tn-project .article-body p{font-size:16px; color:var(--ink-soft); line-height:1.75;}.tn-project .article-body p + p{margin-top:16px;}.tn-project .article-body a:not(.btn){color:var(--orange); font-weight:600; text-decoration:none;}.tn-project .article-body a:not(.btn):hover{text-decoration:underline;}.tn-project .article-body img.banner{
  width:100%;
  border-radius:var(--radius);
  display:block;
}.tn-project .banner-zoom{
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:none;
  margin:28px 0 8px;
  cursor:zoom-in;
  border-radius:var(--radius);
}.tn-project .banner-figure{margin:28px 0 8px;}.tn-project .banner-figure .banner-zoom{margin:0;}.tn-project .banner-figure figcaption{
  margin-top:11px;
  font-size:13.5px;
  font-weight:600;
  line-height:1.5;
  color:var(--orange);
}.tn-project .banner-zoom:focus-visible{outline:3px solid var(--orange); outline-offset:3px;}/* ---------- LIGHTBOX ---------- */.tn-project .lightbox{
  position:fixed;
  inset:0;
  z-index:50;
  background:rgba(22,22,22,.93);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px;
  cursor:zoom-out;
}.tn-project .lightbox[hidden]{display:none;}.tn-project .lightbox img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border-radius:4px;
  cursor:default;
}.tn-project .lightbox-close{
  position:absolute;
  top:18px;
  right:22px;
  width:44px;
  height:44px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,.14);
  color:var(--white);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .15s ease;
}.tn-project .lightbox-close:hover{background:var(--orange);}.tn-project .lightbox-close svg{width:20px; height:20px;}/* ---------- INHOUDSOPGAVE ---------- */.tn-project .article-toc nav{position:sticky; top:28px;}.tn-project .article-toc a{
  display:block;
  padding:13px 0 13px 14px;
  border-top:1px solid var(--line);
  border-left:3px solid transparent;
  font-size:14px;
  font-weight:600;
  line-height:1.35;
  color:var(--ink-soft);
  text-decoration:none;
  transition:color .15s ease, border-color .15s ease;
}.tn-project .article-toc a:last-child{border-bottom:1px solid var(--line);}.tn-project .article-toc a:hover{color:var(--ink);}.tn-project .article-toc a.active{color:var(--ink); border-left-color:var(--orange);}/* ---------- CITAAT IN HET ARTIKEL ---------- */.tn-project .pull-quote{
  margin:30px 0;
  padding:4px 0 4px 22px;
  border-left:3px solid var(--orange);
}.tn-project .pull-quote p{
  margin:0;
  font-size:18.5px;
  font-weight:600;
  line-height:1.5;
  color:var(--ink);
}.tn-project .pull-quote cite{
  display:block;
  margin-top:10px;
  font-style:normal;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--orange);
}/* ---------- OPNAMEFORMULIEREN: TIJDLIJN NAAST DE FORMULIEREN ---------- */.tn-project .intake-layout{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:0 48px;
}/* min-width:0 voorkomt dat de stappenslider het raster breder duwt
   dan het scherm op smalle viewports. */.tn-project .intake-steps,.tn-project .intake-forms{min-width:0;}.tn-project .timeline{position:sticky; top:28px;}.tn-project .timeline-item{
  position:relative;
  padding:0 0 30px 46px;
}.tn-project .timeline-item:last-child{padding-bottom:0;}.tn-project .timeline-item .num{
  position:absolute;
  left:0; top:0;
  width:32px; height:32px; border-radius:50%;
  background:var(--orange); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700;
  z-index:1;
}/* het lijntje dat de stappen verbindt */.tn-project .timeline-item::before{
  content:"";
  position:absolute;
  left:15px; top:34px; bottom:0;
  width:2px;
  background:var(--line);
}.tn-project .timeline-item:last-child::before{display:none;}.tn-project .timeline-item h3{font-size:16px; line-height:1.3; margin:6px 0 6px;}.tn-project .timeline-item p{font-size:13.5px; color:var(--ink-soft); line-height:1.55;}/* ---------- PROJECTENOVERZICHT: FILTERS NAAST HET RASTER ---------- */.tn-project .catalog-layout{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:0 48px;
}.tn-project .catalog-filters,.tn-project .catalog-main{min-width:0;}.tn-project .filter-panel{position:sticky; top:28px;}.tn-project .filter-group{margin-bottom:26px;}.tn-project .filter-group > h3{
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft);
  margin:0 0 12px;
}.tn-project .filter-chips{display:flex; flex-wrap:wrap; gap:8px;}.tn-project .filter-chip{
  font-family:'Open Sans',Arial,sans-serif;
  font-size:13px; font-weight:600;
  padding:7px 14px;
  border-radius:999px;
  border:1.5px solid var(--line);
  background:var(--white);
  color:var(--ink-soft);
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}.tn-project .filter-chip:hover{border-color:var(--orange); color:var(--ink);}.tn-project .filter-chip[aria-pressed="true"]{
  background:var(--orange);
  border-color:var(--orange);
  color:var(--white);
}.tn-project .filter-chip:focus-visible{outline:2px solid var(--orange); outline-offset:2px;}/* ---------- UITGELICHTE PROJECTEN ---------- */.tn-project .project-photo{position:relative;}.tn-project .project-badge{
  position:absolute;
  top:12px; left:12px;
  background:var(--orange);
  color:var(--white);
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:5px 12px;
  border-radius:999px;
  box-shadow:0 2px 10px rgba(0,0,0,.28);
}.tn-project .project-card[data-uitgelicht="ja"]{
  border-color:var(--orange);
  box-shadow:0 10px 26px -18px rgba(242,141,45,.9);
}/* schakelaar "alleen uitgelicht" */.tn-project .toggle{display:flex; align-items:center; gap:10px; cursor:pointer;}.tn-project .toggle input{position:absolute; opacity:0; width:0; height:0;}.tn-project .toggle-track{
  position:relative;
  flex:none;
  width:42px; height:24px;
  border-radius:999px;
  background:var(--line);
  transition:background .18s ease;
}.tn-project .toggle-knop{
  position:absolute;
  top:3px; left:3px;
  width:18px; height:18px;
  border-radius:50%;
  background:var(--white);
  box-shadow:0 1px 3px rgba(0,0,0,.3);
  transition:transform .18s ease;
}.tn-project .toggle input:checked + .toggle-track{background:var(--orange);}.tn-project .toggle input:checked + .toggle-track .toggle-knop{transform:translateX(18px);}.tn-project .toggle input:focus-visible + .toggle-track{outline:2px solid var(--orange); outline-offset:3px;}.tn-project .toggle-label{font-size:13.5px; font-weight:600; color:var(--ink-soft); line-height:1.35;}.tn-project .toggle input:checked ~ .toggle-label{color:var(--ink);}.tn-project .catalog-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:22px;
}.tn-project .catalog-count{font-size:14.5px; font-weight:600; color:var(--ink-soft);}.tn-project .catalog-reset{
  background:none; border:none; padding:0;
  font-family:'Open Sans',Arial,sans-serif;
  font-size:13.5px; font-weight:700; color:var(--orange);
  cursor:pointer;
}.tn-project .catalog-reset[hidden]{display:none;}.tn-project .catalog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:22px;
}.tn-project .catalog-grid .project-card[hidden]{display:none;}.tn-project .catalog-grid .project-photo{height:190px;}.tn-project .catalog-empty{
  padding:40px 0;
  font-size:15.5px;
  color:var(--ink-soft);
}.tn-project .catalog-empty[hidden]{display:none;}/* ---------- PAGINERING ---------- */.tn-project .pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:40px;
}.tn-project .pagination[hidden]{display:none;}.tn-project .page-btn{
  min-width:42px;
  padding:9px 13px;
  border-radius:6px;
  border:1.5px solid var(--line);
  background:var(--white);
  font-family:'Open Sans',Arial,sans-serif;
  font-size:14px;
  font-weight:700;
  color:var(--ink-soft);
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}.tn-project .page-btn:hover:not(:disabled){border-color:var(--orange); color:var(--ink);}.tn-project .page-btn[aria-current="page"]{
  background:var(--orange);
  border-color:var(--orange);
  color:var(--white);
}.tn-project .page-btn:disabled{opacity:.35; cursor:default;}.tn-project .page-btn:focus-visible{outline:2px solid var(--orange); outline-offset:2px;}.tn-project .page-dots{padding:0 2px; color:var(--ink-soft); font-weight:700;}/* ---------- KENNISARTIKEL-KAARTEN ---------- *//* De kaart is dezelfde als op het projectoverzicht; alleen de metaregel en de
   melding voor artikelen zonder werkende link wijken af. */.tn-project .kennis-kaart{display:flex; flex-direction:column;}.tn-project .kennis-kaart .project-body{display:flex; flex-direction:column; flex:1;}/* De datum staat op dezelfde regel als de categorie, maar niet in kapitalen:
   dat houdt "24 juni 2024" leesbaar naast het oranje categorielabel. */.tn-project .kennis-kaart .project-tag time{
  text-transform:none;
  letter-spacing:0;
  font-size:12px;
  font-weight:600;
  color:var(--ink-soft);
}.tn-project .kennis-kaart .project-cta{margin-top:auto; padding-top:14px;}.tn-project .kennis-geenlink{
  margin-top:auto;
  padding-top:14px;
  font-size:13px;
  font-weight:600;
  color:var(--ink-soft);
  font-style:italic;
}/* ---------- MEESCROLLENDE FILTERBALK (smalle schermen) ----------
   Op desktop bestaat dit alles niet: de filters staan gewoon naast het raster.
   Vanaf 1112px en smaller passen ze daar niet meer, en dan verhuizen ze naar
   een lade die vanaf de onderkant omhoog schuift. Het is hetzelfde paneel als
   op desktop -- de chips staan dus maar één keer in de HTML en de filterlogica
   hoeft van deze hele constructie niets te weten.

   Alles hangt onder body.heeft-filterbalk, want die lade kan alleen open met
   de balk en het bijbehorende script. Pagina's zonder die balk (projecten.html)
   houden hun gewone gedrag: filters boven het raster. */.tn-project .filterbalk,.tn-project .filter-backdrop,.tn-project .filterlade-kop,.tn-project .filterlade-voet{display:none;}@media (max-width:1112px){/* --- de lade zelf --- */.tn-project .heeft-filterbalk .catalog-filters{
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:60;
    display:flex;
    flex-direction:column;
    max-height:min(82vh, 640px);
    background:var(--white);
    border-radius:16px 16px 0 0;
    box-shadow:0 -10px 34px rgba(0,0,0,.18);
    transform:translateY(101%);
    visibility:hidden;
    transition:transform .28s ease, visibility 0s linear .28s;
  }.tn-project .heeft-filterbalk .catalog-filters.is-open{
    transform:translateY(0);
    visibility:visible;
    transition:transform .28s ease, visibility 0s linear 0s;
  }.tn-project .filterlade-kop{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:18px 20px 14px;
    border-bottom:1px solid var(--line);
  }.tn-project .filterlade-kop h2{font-size:17px; font-weight:700;}.tn-project .filterlade-sluit{
    flex:0 0 auto;
    width:34px; height:34px;
    border:0; border-radius:50%;
    background:var(--bg-alt); color:var(--ink);
    font-size:21px; line-height:1; cursor:pointer;
  }.tn-project .filterlade-sluit:focus-visible{outline:2px solid var(--orange); outline-offset:2px;}/* alleen het middenstuk scrollt; kop en voet blijven staan */.tn-project .heeft-filterbalk .filter-panel{
    position:static;
    margin:0;
    flex:1;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:18px 20px 6px;
  }.tn-project .filterlade-voet{
    display:flex; align-items:center; gap:14px;
    padding:13px 20px;
    padding-bottom:calc(13px + env(safe-area-inset-bottom, 0px));
    border-top:1px solid var(--line);
  }.tn-project .filterlade-wis{
    border:0; background:none; padding:8px 2px;
    font-family:'Open Sans',Arial,sans-serif;
    font-size:13.5px; font-weight:700; color:var(--ink-soft);
    text-decoration:underline; cursor:pointer;
  }.tn-project .filterlade-wis:focus-visible{outline:2px solid var(--orange); outline-offset:2px;}.tn-project .filterlade-toon{flex:1; text-align:center;}.tn-project .filter-backdrop{
    display:block;
    position:fixed; inset:0;
    z-index:59;
    background:rgba(22,22,22,.45);
    opacity:0; pointer-events:none;
    transition:opacity .28s ease;
  }.tn-project .filter-backdrop.is-open{opacity:1; pointer-events:auto;}.tn-project{overflow:hidden;}/* --- de balk die met je meescrollt --- */.tn-project .filterbalk{
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    position:fixed; left:0; right:0; bottom:0;
    z-index:55;
    padding:11px 18px;
    padding-bottom:calc(11px + env(safe-area-inset-bottom, 0px));
    background:rgba(255,255,255,.95);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    border-top:1px solid var(--line);
    box-shadow:0 -6px 22px rgba(0,0,0,.08);
    /* pas in beeld zodra je bij de artikelen bent; zie de waarnemer in het
       script op kennisartikelen.html */
    transform:translateY(130%);
    transition:transform .25s ease, opacity .2s ease;
  }.tn-project .filterbalk.is-zichtbaar{transform:translateY(0);}/* terwijl de lade openstaat is de balk overbodig */.tn-project .filterbalk{opacity:0; pointer-events:none;}.tn-project .filterbalk-info{font-size:13.5px; font-weight:600; color:var(--ink-soft);}.tn-project .filterbalk-knop{
    display:inline-flex; align-items:center; gap:9px;
    border:0; border-radius:999px;
    padding:11px 20px;
    background:var(--orange); color:var(--white);
    font-family:'Open Sans',Arial,sans-serif;
    font-size:14px; font-weight:700;
    cursor:pointer;
  }.tn-project .filterbalk-knop:focus-visible{outline:2px solid var(--ink); outline-offset:2px;}.tn-project .filterbalk-badge{
    min-width:21px; height:21px; padding:0 6px;
    border-radius:999px;
    background:var(--white); color:var(--orange);
    font-size:12px; font-weight:700; line-height:21px; text-align:center;
  }.tn-project .filterbalk-badge[hidden]{display:none;}/* ruimte onder de footer, zodat de balk niets afdekt */.tn-project .heeft-filterbalk footer{padding-bottom:calc(30px + 68px + env(safe-area-inset-bottom, 0px));}
}@media (prefers-reduced-motion: reduce){.tn-project .catalog-filters,.tn-project .filterbalk,.tn-project .filter-backdrop{transition:none;}
}/* ---------- OPNAMEFORMULIEREN: KAARTEN ---------- */.tn-project .solution-group{margin-bottom:46px;}.tn-project .solution-group > h3{
  font-size:20px;
  margin:0 0 4px;
}.tn-project .solution-group > p{
  font-size:14.5px; color:var(--ink-soft); margin-bottom:20px;
}.tn-project .form-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}.tn-project .form-card{
  display:flex;
  flex-direction:column;
  background:var(--white);
  border:1px solid var(--line);
  border-left:3px solid var(--orange);
  border-radius:var(--radius);
  padding:20px 22px 18px;
  text-decoration:none;
  color:var(--ink);
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}.tn-project .form-card:hover{
  border-color:var(--orange);
  transform:translateY(-2px);
  box-shadow:0 14px 28px -18px rgba(0,0,0,.4);
}/* Productfoto boven op de formulierkaart. De negatieve marges trekken de foto
   door de padding van de kaart heen, zodat hij van rand tot rand loopt; de
   oranje linkerbalk van de kaart blijft daarbij staan. Beelden zijn vooraf op
   480x320 gezet (3:2), dus hier is geen bijsnijden meer nodig. Decoratief --
   de naam eronder benoemt de oplossing -- vandaar de lege alt in de HTML. */.tn-project .form-card .form-foto{
  display:block;
  margin:-20px -22px 16px;
  height:150px;
  overflow:hidden;
  background:var(--white);
  border-bottom:1px solid var(--line);
  border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}.tn-project .form-card .form-foto img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}.tn-project .form-card:hover .form-foto img{transform:scale(1.04);}@media (prefers-reduced-motion: reduce){.tn-project .form-card .form-foto img{transition:none;}.tn-project .form-card:hover .form-foto img{transform:none;}
}.tn-project .form-card .naam{font-size:16px; font-weight:700; margin-bottom:7px;}.tn-project .form-card .uitleg{font-size:14px; color:var(--ink-soft); line-height:1.55;}.tn-project .form-card .pijl{
  margin-top:14px;
  font-size:13px; font-weight:700; color:var(--orange);
}/* ---------- OPNAMEFORMULIEREN: HULPBLOK ---------- */.tn-project .help-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}.tn-project .help-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px 30px;
}/* Hulpblok op een donkere band: kop en introtekst moeten wit worden,
   de kaarten zelf blijven wit en steken daar juist tegen af. */.tn-project .cta-band.block{margin-top:0;}.tn-project .cta-band .block-head h2{color:var(--white);}.tn-project .cta-band .block-head p{color:rgba(255,255,255,.75);}.tn-project .help-card h3{font-size:19px; margin:0 0 10px;}.tn-project .help-card p{font-size:15px; color:var(--ink-soft); line-height:1.65; margin-bottom:18px;}.tn-project .help-card .btn{font-size:14.5px; padding:12px 22px;}/* ---------- KADER (zijstap naast het hoofdverhaal) ---------- */.tn-project .callout{
  background:#FDF1E4;
  border-left:4px solid var(--orange);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:26px 30px 28px;
  margin:40px 0;
}.tn-project .callout-label{
  display:block;
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--orange-deep);
  margin-bottom:8px;
}.tn-project .callout h2,.tn-project .callout h3{font-size:22px; line-height:1.25; margin:0 0 12px;}.tn-project .callout p{color:var(--ink);}.tn-project .callout .tt{border-bottom-color:var(--orange-deep);}/* ---------- TOOLTIP ---------- */.tn-project .tt{
  position:relative;
  font-weight:600;
  color:var(--ink);
  border-bottom:2px dotted var(--orange);
  cursor:help;
}.tn-project .tt::after{
  content:"\24D8";
  font-size:.85em;
  color:var(--orange);
  margin-left:3px;
}.tn-project .tt-bubble{
  position:absolute;
  left:50%;
  bottom:calc(100% + 12px);
  transform:translateX(-50%);
  width:290px;
  max-width:76vw;
  background:var(--navy);
  color:var(--white);
  font-size:13.5px;
  font-weight:400;
  line-height:1.55;
  text-align:left;
  padding:13px 15px;
  border-radius:8px;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.55);
  opacity:0;
  visibility:hidden;
  transition:opacity .15s ease;
  z-index:20;
}.tn-project .tt-bubble strong{display:block; margin-bottom:4px; color:var(--orange);}.tn-project .tt-bubble::after{
  content:"";
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  border:7px solid transparent;
  border-top-color:var(--navy);
}.tn-project .tt:hover .tt-bubble,.tn-project .tt:focus .tt-bubble,.tn-project .tt:focus-within .tt-bubble{opacity:1; visibility:visible;}.tn-project .tt:focus-visible{outline:2px solid var(--orange); outline-offset:2px;}.tn-project .checklist{list-style:none; margin:18px 0 0; padding:0;}.tn-project .checklist li{
  display:flex; gap:10px; align-items:flex-start;
  font-size:15.5px; color:var(--ink); margin-bottom:12px;
}.tn-project .checklist svg{flex:none; width:18px; height:18px; margin-top:3px; color:var(--orange);}/* ---------- CTA-BAND MET ACHTERGRONDFOTO ---------- */.tn-project .cta-band{
  position:relative;
  overflow:hidden;
  background:var(--navy);
  padding:96px 0;
  margin-top:72px;
}.tn-project .cta-band-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}.tn-project .cta-band::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(28,35,56,.87) 0%,rgba(42,53,80,.80) 100%);
}.tn-project .cta-band .wrap{position:relative; z-index:1;}.tn-project .cta-card{
  background:var(--white);
  border-radius:var(--radius);
  padding:36px;
  max-width:640px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.45);
}.tn-project .cta-card h2{font-size:24px; margin:0 0 12px; line-height:1.25;}.tn-project .cta-card p{color:var(--ink-soft); font-size:15px; line-height:1.7;}.tn-project .cta-card a:not(.btn){color:var(--orange); font-weight:600; text-decoration:none;}.tn-project .cta-card a:not(.btn):hover{text-decoration:underline;}.tn-project .cta-card .cta-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:22px;}.tn-project .cta-card .cta-more{margin-top:18px; font-size:13.5px;}/* ---------- PRODUCTENSLIDER (midden in het artikel) ---------- */.tn-project .product-band{margin:44px 0;}.tn-project .product-band .eyebrow{margin-bottom:18px;}.tn-project .tn-product-slider{display:flex; align-items:center; gap:14px; min-width:0;}/* min-width:0 is nodig: zonder dat duwt de inhoud van de slider het
   kolomraster breder dan het scherm op smalle viewports. */.tn-project .product-track{
  flex:1;
  min-width:0;
  display:flex;
  gap:16px;
  /* Ruimte boven en onder: de track knipt verticaal af (scroll-container),
     waardoor de kaartrand bij hover anders wegvalt. */
  padding:6px 0;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -ms-overflow-style:none;
  scrollbar-width:none;
}.tn-project .product-track::-webkit-scrollbar{display:none;}.tn-project .product-track .product-card{flex:0 0 calc(50% - 8px); scroll-snap-align:start;}.tn-project .tn-product-slider .rv-arrow{width:38px; height:38px;}.tn-project .tn-product-slider .rv-arrow svg{width:17px; height:17px;}.tn-project .product-card{
  display:block;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  color:var(--ink);
  text-decoration:none;
  transition:border-color .18s ease, transform .18s ease;
}.tn-project .product-card:hover{border-color:var(--orange); transform:translateY(-2px);}.tn-project .product-photo{
  height:180px;
  display:flex; align-items:center; justify-content:center;
  background:var(--white);
}.tn-project .product-photo img{max-width:80%; max-height:80%; object-fit:contain;}.tn-project .product-body{padding:16px 18px 20px; border-top:1px solid var(--line);}.tn-project .product-cat{
  display:block; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--orange); margin-bottom:6px;
}.tn-project .product-title{font-size:14.5px; font-weight:700;}/* Gerelateerde projecten onderaan: zelfde kaarten als op de overzichtspagina */.tn-project .project-grid-3{grid-template-columns:repeat(3,1fr);}/* Onder deze breedte past het driekolomsraster niet meer: de
   inhoudsopgave vervalt en het artikel wordt één kolom. */@media (max-width:1112px){.tn-project .article .wrap{grid-template-columns:1fr;}.tn-project .article-toc{display:none;}.tn-project .article-body,.tn-project .product-band{grid-column:auto;}.tn-project .form-grid{grid-template-columns:repeat(2,1fr);}/* Filters passen niet meer naast het raster: ze schuiven erboven. Op pagina's
     met een filterbalk (body.heeft-filterbalk) verhuizen ze in plaats daarvan
     naar de lade; zie "MEESCROLLENDE FILTERBALK" hierboven. */.tn-project .catalog-layout{grid-template-columns:1fr;}.tn-project .filter-panel{position:static; margin-bottom:30px;}.tn-project .filter-group{margin-bottom:18px;}/* Tijdlijn past niet meer naast de formulieren: de stappen worden een
     slider boven het formulierenblok. */.tn-project .intake-layout{grid-template-columns:1fr;}.tn-project .intake-steps{margin-bottom:36px;}.tn-project .timeline{
    position:static;
    display:flex;
    gap:16px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -ms-overflow-style:none;
    scrollbar-width:none;
  }.tn-project .timeline::-webkit-scrollbar{display:none;}.tn-project .timeline-item{
    flex:0 0 min(74%, 320px);
    scroll-snap-align:start;
    padding:20px 22px;
    background:var(--white);
    border:1px solid var(--line);
    border-left:3px solid var(--orange);
    border-radius:var(--radius);
  }.tn-project .timeline-item::before{display:none;}.tn-project .timeline-item .num{position:static; margin-bottom:12px;}
}@media (max-width:860px){.tn-project .hero .wrap{grid-template-columns:1fr; gap:36px;}.tn-project .project-grid{grid-template-columns:1fr;}.tn-project .review-page{grid-template-columns:1fr;}.tn-project .opbouw-grid{grid-template-columns:1fr;}.tn-project .opbouw-visual{order:-1; height:200px;}.tn-project .closing-grid{grid-template-columns:1fr;}.tn-project .step-slide{grid-template-columns:1fr;}.tn-project .step-photo{order:-1; height:220px;}.tn-project .project-grid-3{grid-template-columns:1fr;}.tn-project .product-track .product-card{flex:0 0 100%;}.tn-project .cta-band{padding:56px 0; margin-top:48px;}.tn-project .cta-card{max-width:100%; padding:26px;}.tn-project .form-grid{grid-template-columns:1fr;}.tn-project .steps-row{grid-template-columns:1fr; gap:22px;}.tn-project .help-grid{grid-template-columns:1fr;}
}/* ---------- PILLARPAGINA DROOGBOUW VLOERVERWARMING ----------
   Nieuwe klassen plus een paar overrides die onder .pillar hangen, zodat
   de bestaande pagina's ongemoeid blijven. *//* --- ritme, typografie en sectiehoogtes van deze pagina --- */.tn-project .pillar section[id]{scroll-margin-top:24px;}.tn-project .pillar .block-head{margin-bottom:40px;}.tn-project .pillar .block-head h2{font-size:clamp(28px,3.4vw,40px); line-height:1.15; max-width:26ch;}/* Een kop die in een tekst/beeld-raster staat in plaats van in een .block-head
   is net zo goed een sectiekop en moet dus even groot zijn. De kop op de
   donkerblauwe band houdt verderop zijn eigen, iets kleinere maat. */.tn-project .pillar .opbouw-grid h2{font-size:clamp(28px,3.4vw,40px); line-height:1.15;}.tn-project .pillar .block-head p{font-size:17px; max-width:64ch;}.tn-project .block-xl{padding:108px 0;}.tn-project .block-sm{padding:60px 0;}/* .alt hangt aan .block; de twee extra sectiematen krijgen hem hier ook */.tn-project .block-xl.alt,.tn-project .block-sm.alt{background:var(--bg-alt);}/* De fotoband (vloeropbouw) sluit aan op de secties eromheen */.tn-project .pillar .cta-band{margin-top:0;}/* Donkerblauw CTA-blok met brandingfoto eronder */.tn-project .cta-flat{
  position:relative; overflow:hidden;
  background:var(--navy); color:var(--white);
  padding:92px 0;
}.tn-project .cta-flat::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(28,35,56,.93) 0%,rgba(42,53,80,.87) 100%);
}.tn-project .cta-flat .wrap{position:relative; z-index:1;}.tn-project .cta-flat .block-head h2{color:var(--white);}.tn-project .cta-flat .block-head p{color:rgba(255,255,255,.75);}/* --- hero: extra ruimte onderin, omdat het kerncijferblok daar overheen valt --- */.tn-project .hero-pillar{padding:60px 0 92px;}/* De standaard heroverloop mengt navy met zwart en wordt daardoor grijzig.
   Hier alleen navy, zodat de hero in dezelfde blauwe familie valt als de
   Variokomp-band, het CTA-blok en het slot. */.tn-project .hero-pillar::after{
  background:linear-gradient(135deg,
    rgba(28,35,56,.95) 0%,
    rgba(28,35,56,.80) 46%,
    rgba(42,53,80,.52) 100%);
}.tn-project .project-hero .hero-sub{
  font-size:19px; font-weight:700; line-height:1.4;
  color:var(--white); margin-bottom:14px;
}.tn-project .project-hero .hero-actions{margin-top:26px;}/* De .project-hero-links krijgen standaard een oranje onderlijn;
   knoppen moeten die niet hebben. */.tn-project .project-hero a.btn{text-decoration:none;}.tn-project .project-hero a.btn:hover{color:var(--white);}.tn-project .project-hero .btn-ghost,.tn-project .closing .btn-ghost,.tn-project .dark-split .btn-ghost{color:var(--white); border-color:rgba(255,255,255,.5);}.tn-project .project-hero .btn-ghost:hover,.tn-project .closing .btn-ghost:hover,.tn-project .dark-split .btn-ghost:hover{
  background:rgba(255,255,255,.12); border-color:var(--white); color:var(--white);
}.tn-project .closing .hero-actions{margin-top:26px;}/* --- kerncijfers: wit blok dat over de onderrand van de hero valt --- */.tn-project .spec-overlap{position:relative; z-index:2; margin-top:-56px;}.tn-project .spec-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 24px 50px -28px rgba(0,0,0,.45);
}.tn-project .spec{background:var(--white); padding:22px 24px;}.tn-project .spec .fig{display:block; font-size:19px; font-weight:800; line-height:1.3; margin-bottom:3px;}.tn-project .spec .lbl{font-size:14px; color:var(--ink-soft); line-height:1.5;}/* --- compacte onderwerpnavigatie --- */.tn-project .nav-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}.tn-project .nav-card{
  display:flex; flex-direction:column;
  padding:20px 22px 18px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  text-decoration:none; color:var(--ink);
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}.tn-project .nav-card:hover{border-color:var(--orange); transform:translateY(-2px); box-shadow:0 14px 28px -20px rgba(0,0,0,.4);}.tn-project .nav-card:focus-visible{outline:3px solid var(--orange); outline-offset:3px;}.tn-project .nav-card .naam{font-size:16.5px; font-weight:700; margin-bottom:6px;}.tn-project .nav-card .uitleg{font-size:14px; color:var(--ink-soft); line-height:1.55;}/* margin-top:auto zet de pijlen van alle kaarten op dezelfde hoogte */.tn-project .nav-card .pijl{margin-top:auto; padding-top:14px; font-size:13px; font-weight:700; color:var(--orange);}/* --- genummerde redenen, zonder kaartachtergrond --- */.tn-project .reason-grid{display:grid; grid-template-columns:1fr 1fr; gap:52px 64px;}.tn-project .reason{border-top:1px solid var(--line); padding-top:22px;}.tn-project .reason .num{
  display:block; font-size:13px; font-weight:800; letter-spacing:.12em;
  color:var(--orange); margin-bottom:10px;
}.tn-project .reason h3{font-size:21px; line-height:1.3; margin-bottom:12px;}.tn-project .reason p{font-size:16px; color:var(--ink-soft); line-height:1.75;}.tn-project .reason p + p{margin-top:12px;}/* --- TIJDELIJKE BEELDPLAATSHOUDERS ---
   Staan op de plekken waar nog geen passend beeld beschikbaar is. Vervang
   het hele <div class="ph"> door een <img> met dezelfde klasse voor de
   hoogte (fig-img / feature-img / split-img). */.tn-project .ph{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; text-align:center; padding:28px;
  background:rgba(28,35,56,.05);
  border:1px dashed rgba(28,35,56,.28);
  border-radius:var(--radius);
  color:var(--ink-soft);
}.tn-project .ph svg{width:34px; height:34px; color:rgba(28,35,56,.38);}.tn-project .ph .ph-t{font-size:14px; font-weight:700; color:var(--navy);}.tn-project .ph .ph-s{font-size:12.5px; line-height:1.5; max-width:34ch;}/* op een donkere band draait de plaatshouder mee */.tn-project .dark-split .ph{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.28);
  color:rgba(255,255,255,.72);
}.tn-project .dark-split .ph svg{color:rgba(255,255,255,.45);}.tn-project .dark-split .ph .ph-t{color:var(--white);}/* plaatshouders met een vaste verhouding, zodat de opmaak al klopt */.tn-project .ph-16x9{aspect-ratio:16/9;}.tn-project .ph-4x3{aspect-ratio:4/3;}/* --- tekst/beeld en de laagopbouw naast de doorsnede --- */.tn-project .opbouw-grid figure{margin:0;}.tn-project .fig-img{width:100%; height:auto; border-radius:var(--radius);}.tn-project .opbouw-grid + .link-cta{margin-top:40px;}/* --- vloeropbouw op de donkerblauwe fotoband --- */.tn-project .pillar .cta-band{padding:76px 0;}/* iets meer ruimte voor de tekst, zodat elke laag op één regel past */.tn-project .pillar .cta-band .opbouw-grid{grid-template-columns:1.14fr 0.86fr; gap:44px;}.tn-project .pillar .cta-band h2{
  color:var(--white);
  font-size:clamp(26px,3.1vw,36px); line-height:1.15;
  margin-bottom:12px;
}.tn-project .pillar .cta-band .band-lead{
  color:rgba(255,255,255,.75);
  font-size:16.5px; line-height:1.6; max-width:46ch;
  margin-bottom:28px;
}.tn-project .cta-band .layer-list li::before{background:var(--white); color:var(--navy);}.tn-project .cta-band .layer-list li:not(:last-child)::after{background:rgba(255,255,255,.22);}.tn-project .cta-band .layer-list h3{color:var(--white);}.tn-project .cta-band .layer-list p{color:rgba(255,255,255,.72);}/* het bijschrift staat binnen het witte paneel en blijft dus oranje op wit *//* Compacte laagopbouw: naam en omschrijving op dezelfde regel, zodat de
   zes lagen samen ongeveer de helft van de hoogte innemen. */.tn-project .layer-list.compact li{padding:0 0 13px 40px;}.tn-project .layer-list.compact li::before{width:26px; height:26px; font-size:12px;}.tn-project .layer-list.compact li:not(:last-child)::after{left:12px; top:30px; bottom:3px;}/* padding-right werkt wel horizontaal op een inline element en geeft de
   omschrijving net wat lucht na de vette laagnaam */.tn-project .layer-list.compact h3{display:inline; font-size:15.5px; line-height:1.55; margin:0; padding-right:5px;}.tn-project .layer-list.compact p{display:inline; font-size:15.5px; line-height:1.55;}/* --- twee ondersteunende onderwerpen naast elkaar --- */.tn-project .support-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px;}.tn-project .support-grid h2{font-size:26px; line-height:1.2; margin-bottom:4px;}.tn-project .chips{display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 0; padding:0; list-style:none;}.tn-project .chips li{
  border:1px solid var(--line); border-radius:999px;
  padding:8px 16px;
  font-size:13.5px; font-weight:600; color:var(--ink); background:var(--white);
}/* --- toepassing met groot beeld --- */.tn-project .feature-split{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}.tn-project .feature-split h2{font-size:clamp(28px,3.4vw,40px); line-height:1.15;}.tn-project .feature-split .feature-img{width:100%; height:460px; object-fit:cover; border-radius:var(--radius);}/* een doorsnede-render wordt niet bijgesneden maar in z'n geheel getoond */.tn-project .feature-split .feature-img.natural{height:auto; object-fit:contain;}/* --- half tekst, half beeld: donkerblauwe en witte variant --- */.tn-project .dark-split .wrap,.tn-project .light-split .wrap{
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
}.tn-project .dark-split h2,.tn-project .light-split h2{font-size:clamp(28px,3.4vw,40px); line-height:1.15; margin-bottom:14px;}.tn-project .dark-split .sub,.tn-project .light-split .sub{font-size:18px; font-weight:700; margin-bottom:16px;}.tn-project .dark-split p,.tn-project .light-split p{font-size:16.5px; line-height:1.75; max-width:52ch;}.tn-project .dark-split .checklist,.tn-project .light-split .checklist{margin-top:26px;}.tn-project .dark-split .cta-actions,.tn-project .light-split .cta-actions{
  display:flex; gap:12px; flex-wrap:wrap; margin-top:30px;
}.tn-project .split-img{width:100%; height:480px; object-fit:cover; border-radius:var(--radius);}.tn-project .dark-split{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 100%); color:var(--white);}.tn-project .dark-split h2,.tn-project .dark-split .sub{color:var(--white);}.tn-project .dark-split p{color:rgba(255,255,255,.72);}.tn-project .dark-split .checklist li{color:rgba(255,255,255,.92); font-size:15.5px;}.tn-project .light-split .sub{color:var(--ink);}.tn-project .light-split p{color:var(--ink-soft);}/* --- praktijkvoorbeelden als slider ---
   De achtergrondfoto wisselt mee met de zichtbare slide. */.tn-project .project-slider{position:relative; overflow:hidden;}.tn-project .ps-bg{opacity:0; transition:opacity .6s ease;}.tn-project .ps-bg.is-active{opacity:1;}.tn-project .project-slider::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(28,35,56,.93) 0%,rgba(28,35,56,.87) 45%,rgba(42,53,80,.80) 100%);
}/* de wrap is hier geen raster meer; dat zit op de slide zelf */.tn-project .project-slider .wrap{position:relative; z-index:1; display:block;}.tn-project .ps-slide{
  display:none;
  grid-template-columns:1fr 1fr; gap:64px; align-items:center;
}.tn-project .ps-slide.is-active{display:grid;}.tn-project .ps-controls{display:flex; align-items:center; gap:12px; margin-top:44px;}.tn-project .ps-dots{display:flex; align-items:center; gap:9px; margin-left:10px;}.tn-project .ps-dot{
  width:9px; height:9px; padding:0;
  border:none; border-radius:50%;
  background:rgba(255,255,255,.35);
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}.tn-project .ps-dot.is-active{background:var(--orange); transform:scale(1.3);}.tn-project .ps-dot:hover{background:rgba(255,255,255,.6);}.tn-project .ps-dot.is-active:hover{background:var(--orange);}.tn-project .ps-dot:focus-visible{outline:2px solid var(--white); outline-offset:3px;}/* --- vervolgkeuze na de inhoud --- */.tn-project .choice-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}.tn-project .choice-card{
  display:flex; flex-direction:column;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:36px 38px 34px;
  /* de kaart staat op een donkere band; tekstkleur niet erven */
  color:var(--ink);
}.tn-project .choice-card.accent{border-color:var(--orange); box-shadow:0 22px 48px -30px rgba(0,0,0,.5);}.tn-project .choice-card h3{font-size:22px; line-height:1.25; margin:10px 0 12px;}.tn-project .choice-card p{font-size:16px; color:var(--ink-soft); line-height:1.7; flex:1;}.tn-project .choice-card .btn{margin-top:24px; align-self:flex-start;}.tn-project .choice-card .link-cta{margin-top:16px;}/* --- FAQ compacter: kop in de linkerkolom, accordeon rechts --- */.tn-project .pillar .faq-q{padding:18px 4px;}.tn-project .pillar .intake-layout{grid-template-columns:300px minmax(0,1fr);}.tn-project .pillar .intake-layout h2{font-size:26px; line-height:1.2;}/* --- slotblok --- *//* Laagopbouw: genummerde lagen naast de doorsnede */.tn-project .layer-list{list-style:none; counter-reset:layer; margin:0; padding:0;}.tn-project .layer-list li{position:relative; padding:0 0 20px 46px;}.tn-project .layer-list li:last-child{padding-bottom:0;}.tn-project .layer-list li::before{
  counter-increment:layer;
  content:counter(layer);
  position:absolute; left:0; top:0;
  width:30px; height:30px; border-radius:50%;
  background:var(--navy); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700;
}/* het lijntje dat de lagen verbindt */.tn-project .layer-list li:not(:last-child)::after{
  content:"";
  position:absolute; left:14px; top:34px; bottom:6px;
  width:2px; background:var(--line);
}.tn-project .layer-list h3{font-size:16px; line-height:1.3; margin:5px 0 5px;}.tn-project .layer-list p{font-size:14.5px; color:var(--ink-soft); line-height:1.6;}/* Bijschrift onder een losse afbeelding */.tn-project .fig-cap{margin-top:14px; font-size:13.5px; font-weight:600; line-height:1.5; color:var(--orange);}/* Lopende tekst in een gewoon contentblok (buiten .article-body) */.tn-project .prose{max-width:68ch; margin-top:14px;}.tn-project .prose p{font-size:17px; color:var(--ink-soft); line-height:1.8;}.tn-project .prose p + p{margin-top:18px;}.tn-project .prose a:not(.btn){color:var(--orange); font-weight:600; text-decoration:none;}.tn-project .prose a:not(.btn):hover{text-decoration:underline;}/* Twee kolommen als doorlopende tekstkolommen, niet als raster: bij een
   raster bepaalt het langste item de rijhoogte en ontstaan er gaten naast
   items die over twee regels lopen. */.tn-project .checklist.two-col{columns:2; column-gap:36px; max-width:70ch;}.tn-project .checklist.two-col li{break-inside:avoid;}.tn-project .link-cta{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:24px;
  font-size:15px; font-weight:700; color:var(--orange); text-decoration:none;
}.tn-project .link-cta:hover{text-decoration:underline;}.tn-project .link-cta:focus-visible{outline:2px solid var(--orange); outline-offset:3px;}@media (max-width:1112px){.tn-project .nav-grid{grid-template-columns:repeat(2,1fr);}
}@media (max-width:980px){.tn-project .dark-split .wrap,.tn-project .light-split .wrap{grid-template-columns:1fr; gap:40px;}.tn-project .ps-slide.is-active{grid-template-columns:1fr; gap:36px;}.tn-project .split-img{height:340px;}
}@media (prefers-reduced-motion: reduce){.tn-project .ps-bg{transition:none;}.tn-project .ps-dot{transition:none;}
}@media (max-width:860px){.tn-project .hero-pillar{padding:52px 0 76px;}.tn-project .block-xl{padding:64px 0;}.tn-project .block-sm{padding:48px 0;}.tn-project .spec-overlap{margin-top:-40px;}.tn-project .spec-row{grid-template-columns:repeat(2,1fr);}.tn-project .reason-grid{grid-template-columns:1fr; gap:34px;}.tn-project .support-grid{grid-template-columns:1fr; gap:46px;}.tn-project .feature-split{grid-template-columns:1fr; gap:30px;}.tn-project .feature-split .feature-img{height:320px;}.tn-project .choice-grid{grid-template-columns:1fr;}.tn-project .choice-card{padding:28px;}.tn-project .checklist.two-col{columns:1;}/* dezelfde specificiteit als de tweekolomsregel hierboven, anders blijft
     de vloeropbouw op smalle schermen naast elkaar staan */.tn-project .pillar .cta-band .opbouw-grid{grid-template-columns:1fr; gap:34px;}
}@media (max-width:520px){.tn-project .spec-overlap{margin-top:-28px;}.tn-project .spec-row{grid-template-columns:1fr;}.tn-project .nav-grid{grid-template-columns:1fr;}
}@media (prefers-reduced-motion: reduce){.tn-project{scroll-behavior:auto;}.tn-project .btn,.tn-project .plus,.tn-project .btn:hover{transition:none; transform:none;}
}/* ---------- BREADCRUMB IN DE HERO ----------
   De breadcrumb stond op een witte strook tussen de menubalk en de hero. Die strook is weg;
   de breadcrumb staat nu bovenin de donkere hero en heeft daarom lichte kleuren nodig. */.tn-project .project-hero .breadcrumb{
  padding:0 0 16px;
  color:rgba(255,255,255,.7);
}.tn-project .project-hero .breadcrumb a{
  color:rgba(255,255,255,.7);
  text-decoration:none;
}.tn-project .project-hero .breadcrumb a:hover{color:var(--white);}.tn-project .project-hero .breadcrumb .sep{color:rgba(255,255,255,.35);}.tn-project .project-hero .breadcrumb .current{color:var(--white); font-weight:600;}/* De hero sluit nu direct aan op de menubalk, dus iets minder lucht bovenin. */.tn-project .project-hero{padding-top:34px;}


/* ---------- LETTERTYPE OVER DE HELE PAGINA ----------
   Zie de toelichting in build_projectpaginas.py. Bewerk daar, niet hier. */
@font-face{font-family:'Cabin';src:url('/assets/fonts/OpenSans-Regular.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Cabin Bold';src:url('/assets/fonts/OpenSans-Bold.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Barlow';src:url('/assets/fonts/OpenSans-Light.ttf') format('truetype');
  font-weight:200;font-style:normal;font-display:swap;}

/* ---------- MENUBALK OP EEN REGEL HOUDEN ----------
   Open Sans is ongeveer tien procent breder dan Cabin. Het hoofdmenu heeft naast het logo
   920 pixels; met Cabin kost het 911, met Open Sans 964, dus viel het laatste item op een
   tweede regel. De letter gaat daarom van 16 naar 14 pixels en de tussenruimte van 10 naar
   8, samen ruim genoeg om het op een regel te houden. */
#desktop-navigation .navbar-nav > li > a{font-size:14px;letter-spacing:.3px;}
#desktop-navigation .navbar-nav > li + li{margin-left:8px;}

/* ---------- KOPPEN IN NORMALE SCHRIJFWIJZE ----------
   Het thema zet h1 tot en met h4 in kapitalen. Op deze pagina's is dat niet nodig.
   De labels (eyebrow, projecttag) blijven wel in kapitalen staan. */
.tn-project h1, .tn-project h2, .tn-project h3,
.tn-project h4, .tn-project h5, .tn-project h6{text-transform:none;}