/* ===========================================
   DTI MAIN CSS — DroneTech Inspecties
   =========================================== */

/* -------------------------------------------
   CSS VARIABELEN
   ------------------------------------------- */
:root {
  --dti-navy:      #0B1F33;
  --dti-darkblue:  #0E2A47;
  --dti-accent1:   #1FA3FF;
  --dti-accent2:   #00C2FF;
  --dti-lightgrey: #E6EDF3;
  --dti-white:     #FFFFFF;
  --dti-gradient:  linear-gradient(135deg, #1FA3FF 0%, #00C2FF 100%);
  --dti-overlay:   rgba(11, 31, 51, 0.65);
  --dti-green:     #16A34A;
}

/* -------------------------------------------
   BASIS
   ------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  color: var(--dti-navy);
  margin: 0;
}

/* Voorkom horizontale overflow: rijen met grote gutters (bv. g-5) hebben
   negatieve marges (-24px) die groter zijn dan de container-padding (12px).
   Clip alleen de horizontale overhang; verticaal (dropdowns) blijft zichtbaar,
   en de sticky-nav blijft werken (die staat buiten .container). */
.container {
  overflow-x: clip;
}

a {
  text-decoration: none;
  color: inherit;
}

address {
  font-style: normal;
}

img {
  max-width: 100%;
  height: auto;
}

/* -------------------------------------------
   TYPOGRAFIE
   ------------------------------------------- */
h1 {
  font-size: clamp(36px, 5vw, 54px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

h2 {
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

h3 {
  font-size: clamp(20px, 3vw, 24px);
  font-weight: 500;
  line-height: 1.25;
  margin-bottom: 12px;
}

h4 {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}

/* -------------------------------------------
   SECTIE PADDING
   ------------------------------------------- */
.dti-section {
  padding: 100px 0;
}

.dti-section-sm {
  padding: 48px 0;
}

/* -------------------------------------------
   ACHTERGRONDKLEUREN
   ------------------------------------------- */
.dti-bg-lightgrey {
  background-color: var(--dti-lightgrey);
}

.dti-bg-white {
  background-color: var(--dti-white);
}

.dti-bg-navy {
  background-color: var(--dti-navy);
}

/* -------------------------------------------
   KNOPPEN
   ------------------------------------------- */
.btn-dti-primary {
  background: var(--dti-gradient);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 500;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  transition: opacity 0.2s ease;
  cursor: pointer;
}

.btn-dti-primary:hover,
.btn-dti-primary:focus {
  color: #fff;
  opacity: 0.88;
}

.btn-dti-secondary {
  background: transparent;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 4px;
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 500;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  transition: background 0.2s ease;
  cursor: pointer;
}

.btn-dti-secondary:hover,
.btn-dti-secondary:focus {
  background: var(--dti-green);
  border-color: var(--dti-green);
  color: #fff;
}

.btn-dti-secondary-dark {
  background: transparent;
  color: var(--dti-navy);
  border: 1px solid var(--dti-navy);
  border-radius: 4px;
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 500;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  transition: background 0.2s ease, color 0.2s ease;
  cursor: pointer;
}

.btn-dti-secondary-dark:hover,
.btn-dti-secondary-dark:focus {
  background: var(--dti-green);
  border-color: var(--dti-green);
  color: #fff;
}

/* -------------------------------------------
   TOPBALK
   ------------------------------------------- */
.dti-topbar {
  background-color: var(--dti-darkblue);
  padding: 7px 0;
}

.dti-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}

.dti-topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.2s ease;
}

.dti-topbar-item:hover {
  color: #fff;
}

.dti-topbar-item svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.5;
  flex-shrink: 0;
}

.dti-topbar-linkedin {
  width: 16px;
  height: 16px;
  stroke: none;
}

/* -------------------------------------------
   NAVIGATIE
   ------------------------------------------- */
.dti-nav {
  background-color: var(--dti-navy);
  padding: 16px 0;
  z-index: 1030;
  border: none !important;
  box-shadow: none !important;
}

.dti-logo {
  width: 150px;
  height: auto;
  display: block;
}

.dti-nav-naam {
  display: block;
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.70);
  margin-top: 2px;
  line-height: 1;
}

.dti-nav .btn-dti-primary {
  padding: 10px 24px;
}

.dti-nav .nav-link {
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  font-weight: 400;
  padding: 8px 14px;
  transition: color 0.2s ease;
}

.dti-nav .nav-link:hover,
.dti-nav .nav-link:focus {
  color: #fff;
}

.dti-nav .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.28);
  padding: 6px 10px;
}

.dti-nav .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255%2C255%2C255%2C0.78%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.dti-dropdown {
  background-color: var(--dti-navy);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  padding: 8px 0;
  margin-top: 6px;
  min-width: 240px;
}

.dti-dropdown .dropdown-item {
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  font-weight: 400;
  padding: 9px 20px;
  transition: background 0.15s ease, color 0.15s ease;
}

.dti-dropdown .dropdown-item:hover,
.dti-dropdown .dropdown-item:focus {
  background-color: rgba(255, 255, 255, 0.08);
  color: #fff;
}

/* -------------------------------------------
   HERO — VIDEO (blok 1 home)
   ------------------------------------------- */
.dti-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 560px;
  overflow: hidden;
}

.dti-hero-video {
  height: 85vh;
}

.dti-hero-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Videoachtergrond binnen een bestaande (foto)hero, gecentreerd en dekkend */
.dti-hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.dti-hero-overlay {
  position: absolute;
  inset: 0;
  background: var(--dti-overlay);
  z-index: 1;
}

.dti-hero .container {
  position: relative;
  z-index: 2;
}

.dti-hero-content {
  color: #fff;
  padding: 48px 0;
}

#dtiWisselwoord {
  color: var(--dti-accent1);
  transition: opacity 0.4s ease;
}

.dti-subkop {
  color: rgba(255, 255, 255, 0.80);
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 32px;
}

.dti-hero-cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

/* -------------------------------------------
   HERO — SCROLL INDICATOR
   ------------------------------------------- */
.dti-hero-scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dti-hero-scroll svg {
  width: 26px;
  height: 26px;
  stroke-width: 1.5;
  color: rgba(255, 255, 255, 0.55);
  display: block;
  margin-top: -10px;
  animation: dtiScrollBounce 2s ease-in-out infinite;
}

.dti-hero-scroll svg:nth-child(1) { animation-delay: 0s; }
.dti-hero-scroll svg:nth-child(2) { animation-delay: 0.22s; }
.dti-hero-scroll svg:nth-child(3) { animation-delay: 0.44s; }

@keyframes dtiScrollBounce {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50%       { opacity: 1;    transform: translateY(5px); }
}

/* -------------------------------------------
   HERO — FOTO (standaard paginahero's)
   ------------------------------------------- */
.dti-hero-foto .dti-hero-content {
  max-width: 640px;
}

/* Pagina-specifieke hero achtergronden */
.dti-hero-watwijdoen  { background-image: url('../IMG/dti-watwijdoen-blok1-hero-bg-001_pexels-marc-coenen-298185-3675403.jpg'); background-position: center 50%; }
.dti-hero-sectoren    { background-image: url('../IMG/dti-sectoren-blok1-hero-bg-001_pexels-lemmer-18387773.jpg'); background-position: center 50%; }
.dti-hero-infra       { background-image: url('../IMG/dti-infra-blok1-hero-bg-001_pexels-indigo-blackwood-762724-1625876.jpg'); background-position: center 50%; }
.dti-hero-vastgoed    { background-image: url('../IMG/dti-vastgoed-blok1-hero-bg-001_pexels-bodi-3361667-5201634.jpg'); background-position: center 50%; }
.dti-hero-industrial  { background-image: url('../IMG/dti-industrial-blok1-hero-bg-001_sk-6060191.jpg'); background-position: center 50%; }
.dti-hero-energie     { background-image: url('../IMG/dti-energie-blok1-hero-bg-001_pexels-weickmann-32661184.jpg'); background-position: center 50%; }
.dti-hero-natuur      { background-image: url('../IMG/dti-natuur-hero-001.jpg'); background-position: center 80%; }
.dti-hero-landbouw    { background-image: url('../IMG/dti-landbouw-blok1-hero-bg-001_pexels-matthiasgroeneveld-17881053.jpg'); background-position: center 50%; }
.dti-hero-werkwijze   { background-image: url('../IMG/dti-werkwijze-blok1-hero-bg-001_pexels-thisisengineering-3862628.jpg'); background-position: center 50%; }
.dti-hero-projecten   { background-image: url('../IMG/dti-projecten-blok1-hero-bg-001_pexels-tom-de-decker-463640997-24243607.jpg'); background-position: center 50%; }
.dti-hero-overdti     { background-image: url('../IMG/dti-overdti-blok1-hero-bg-001.jpg'); background-position: center 50%; }
.dti-hero-contact     { background-image: url('../IMG/dti-contact-blok1-hero-bg-001.jpg'); background-position: center 50%; }

/* Testimonial achtergronden per sector */
.dti-testimonial-bg-infra      { background-image: url('../IMG/dti-infra-blok4-case-001_pexels-vividcafe-681347.jpg'); }
.dti-testimonial-bg-vastgoed   { background-image: url('../IMG/dti-vastgoed-blok5-case-001_pexels-jan-van-der-wolf-11680885-14493179.jpg'); }
.dti-testimonial-bg-industrial { background-image: url('../IMG/dti-industrial-blok5-case-001_pexels-berndt-akesson-426035276-15514971.jpg'); }
.dti-testimonial-bg-energie    { background-image: url('../IMG/dti-energie-blok4-case-001_-4320480.jpg'); }
.dti-testimonial-bg-natuur     { background-image: url('../IMG/dti-natuur-blok4-case-001_pexels-vladimirsrajber-28603623.jpg'); }
.dti-testimonial-bg-landbouw   { background-image: url('../IMG/dti-landbouw-blok4-case-001_pexels-weickmann-32661196.jpg'); }

/* Actieve nav-link */
.dti-nav .nav-link.active {
  color: #ffffff;
}

/* -------------------------------------------
   WAT WIJ DOEN — positioneringstekst
   ------------------------------------------- */
.dti-niet-tekst {
  font-size: 17px;
  color: var(--dti-darkblue);
  line-height: 1.7;
  margin-bottom: 16px;
}

/* -------------------------------------------
   SECTOR REFERENTIEKAARTEN (compact)
   ------------------------------------------- */
.dti-sector-ref-kaart {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid #D8E3EC;
  border-radius: 2px;
  background: #fff;
  color: var(--dti-navy);
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  height: 100%;
}

.dti-sector-ref-kaart:hover {
  border-color: var(--dti-accent1);
  box-shadow: 0 4px 16px rgba(31, 163, 255, 0.10);
  color: var(--dti-navy);
}

.dti-sector-ref-icon {
  color: var(--dti-accent1);
  flex-shrink: 0;
}

.dti-sector-ref-icon svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.5;
}

.dti-sector-ref-tekst {
  flex-grow: 1;
}

.dti-sector-ref-kaart h4 {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 2px;
  line-height: 1.3;
}

.dti-sector-ref-kaart p {
  font-size: 13px;
  color: rgba(14, 42, 71, 0.70);
  margin-bottom: 0;
  line-height: 1.4;
}

.dti-sector-ref-pijl {
  color: var(--dti-accent1);
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

/* -------------------------------------------
   HERO — FORMULIER (callback kaart) — glazen stijl
   ------------------------------------------- */
.dti-hero-form {
  background: rgba(11, 31, 51, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  padding: 36px 32px;
  color: #fff;
}

.dti-form-kop {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 20px;
}

/* Basisstijl invoervelden — geldt ook op contactpagina */
.dti-form-input {
  border: 1px solid #D0D9E3;
  border-radius: 4px;
  font-size: 15px;
  padding: 12px 16px;
  height: auto;
  color: var(--dti-navy);
  font-family: 'Inter', sans-serif;
}

.dti-form-input::placeholder {
  color: rgba(11, 31, 51, 0.45);
}

.dti-form-input:focus {
  border-color: var(--dti-accent1);
  box-shadow: 0 0 0 3px rgba(31, 163, 255, 0.15);
  outline: none;
}

/* Hero-specifieke override — donker/glas, scoped zodat contactpagina onaangetast blijft */
.dti-hero-form .dti-form-input,
.dti-hero-form .form-control {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.20);
  color: #fff;
}

.dti-hero-form .dti-form-input::placeholder,
.dti-hero-form .form-control::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.dti-hero-form .dti-form-input:focus,
.dti-hero-form .form-control:focus {
  background: rgba(255, 255, 255, 0.15);
  border-color: #1FA3FF;
  box-shadow: 0 0 0 3px rgba(31, 163, 255, 0.20);
  outline: none;
  color: #fff;
}

/* -------------------------------------------
   HERO — STANDAARD (foto achtergrond)
   ------------------------------------------- */
.dti-hero-foto {
  background-size: cover;
  /* background-position wordt per hero gezet (.dti-hero-natuur etc.) */
}

/* Vimeo-achtergrondvideo in een hero (vult het vlak als cover, foto blijft fallback) */
.dti-hero-video-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.dti-hero-video-wrap iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 56.25vw;        /* 16:9 op basis van breedte */
  min-height: 100%;
  min-width: 177.78vh;    /* 16:9 op basis van hoogte: garandeert cover */
  pointer-events: none;
  border: 0;
}

/* Zelf-gehoste hero-achtergrondvideo (mp4 in /video/), vervangt de Vimeo-iframe */
.dti-hero-video-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  border: 0;
}

/* ===== Cookie-consent (Consent Mode v2): zwevend icoon + voorkeuren-modal ===== */
/* Zwevend vingerafdruk-icoon linksonder */
.dti-cookie-fab {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 1030;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--dti-navy);
  color: #fff;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease, background 0.2s ease;
}

.dti-cookie-fab:hover { transform: scale(1.06); }
.dti-cookie-fab svg { width: 22px; height: 22px; }

/* Voorkeuren-modal */
.dti-cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 1090;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.dti-cookie-modal[hidden] { display: none; }

.dti-cookie-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(11, 31, 51, 0.55);
}

.dti-cookie-modal-dialog {
  position: relative;
  z-index: 1;
  background: #fff;
  color: var(--dti-navy);
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 10px;
  padding: 28px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.dti-cookie-modal-sluit {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: 0;
  color: #64748b;
  cursor: pointer;
  padding: 4px;
  line-height: 0;
}

.dti-cookie-modal-sluit svg { width: 20px; height: 20px; }

.dti-cookie-modal-titel {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
}

.dti-cookie-modal-intro {
  margin: 0 0 4px;
  font-size: 14px;
  color: #475569;
  line-height: 1.6;
}

.dti-cookie-cat {
  padding: 16px 0;
  border-top: 1px solid #e2e8f0;
}

.dti-cookie-cat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dti-cookie-cat-naam {
  font-weight: 700;
  font-size: 15px;
}

.dti-cookie-cat-badge {
  font-size: 12px;
  color: #64748b;
  background: #f1f5f9;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.dti-cookie-cat-uitleg {
  margin: 6px 0 0;
  font-size: 13px;
  color: #475569;
  line-height: 1.5;
}

.dti-cookie-modal-link {
  display: inline-block;
  margin: 8px 0 20px;
  font-size: 13px;
  color: var(--dti-accent1);
  text-decoration: underline;
}

.dti-cookie-modal-knoppen {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.dti-cookie-modal-knoppen .btn {
  flex: 1;
  white-space: nowrap;
  font-size: 14px;
  padding: 10px 14px;
}

/* Toggle-switch */
.dti-cookie-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.dti-cookie-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.dti-cookie-slider {
  position: absolute;
  inset: 0;
  background: #cbd5e1;
  border-radius: 24px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.dti-cookie-slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.dti-cookie-switch input:checked + .dti-cookie-slider { background: var(--dti-accent1); }
.dti-cookie-switch input:checked + .dti-cookie-slider::before { transform: translateX(20px); }
.dti-cookie-switch input:disabled + .dti-cookie-slider { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 575.98px) {
  .dti-cookie-modal-knoppen .btn { flex: 1 1 100%; }
}

/* Hero met video: hoger zodat de spreker volledig in beeld komt */
.dti-hero-heeft-video {
  min-height: 80vh;
}

@media (max-width: 767.98px) {
  .dti-hero-heeft-video { min-height: 70vh; }
}

/* Ghost-knop (bv. video openen) — lichter dan de primaire/secundaire CTA's */
.btn-dti-ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 4px;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 500;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.btn-dti-ghost:hover,
.btn-dti-ghost:focus {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

.btn-dti-ghost svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.75;
  color: #fff;
}

/* Video-overlay (lightbox) */
.dti-video-modal .modal-content {
  background: #000;
  border: none;
  border-radius: 6px;
  overflow: hidden;
}

.dti-video-modal .btn-close-video {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: rgba(0, 0, 0, 0.55);
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}

.dti-video-modal .btn-close-video:hover {
  background: rgba(0, 0, 0, 0.85);
}

.dti-video-modal .btn-close-video svg {
  width: 22px;
  height: 22px;
  stroke-width: 2;
}

/* Contact-pop-up (mobiel) */
.dti-contact-modal .modal-content {
  border: none;
  border-radius: 6px;
}

.dti-contact-modal .modal-header {
  border-bottom: none;
  padding: 24px 24px 4px;
}

.dti-contact-modal .modal-title {
  font-size: 20px;
  font-weight: 500;
  color: var(--dti-navy);
  margin: 0;
}

.dti-contact-modal .modal-body {
  padding: 12px 24px 28px;
}

/* -------------------------------------------
   SECTIEKOP
   ------------------------------------------- */
.dti-sectie-kop {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.dti-intro-tekst {
  color: var(--dti-darkblue);
  font-size: 17px;
  max-width: 620px;
  margin: 0 auto;
}

/* -------------------------------------------
   LABEL (caption boven kop)
   ------------------------------------------- */
.dti-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--dti-accent1);
  text-transform: uppercase;
  margin-bottom: 16px;
}

.dti-col-tekst h2 {
  font-size: clamp(28px, 4vw, 40px);
}

/* -------------------------------------------
   PILAREN — BLOK 2
   ------------------------------------------- */
.dti-pillar {
  border-top: 3px solid #1FA3FF;
  padding-top: 24px;
}

.dti-pillar-icon {
  color: #1FA3FF;
  margin-bottom: 16px;
}

.dti-pillar-icon svg {
  width: 40px;
  height: 40px;
  stroke-width: 1.5;
}

.dti-pillar h3 {
  color: var(--dti-navy);
}

.dti-pillar p {
  color: var(--dti-darkblue);
  margin-bottom: 0;
}

/* -------------------------------------------
   PIJLERS — BLOK 2 (donkere kaarten)
   ------------------------------------------- */
.dti-pijlers {
  background: var(--dti-navy);
  padding: 120px 0;
}

.dti-blok2-logo {
  width: 520px;
  height: auto;
  margin-bottom: 24px;
}

.dti-pijler-sectietitel {
  color: #ffffff;
  text-align: center;
  margin-bottom: 48px;
  letter-spacing: 0.08em;
  font-weight: 300;
  font-size: clamp(20px, 3vw, 28px);
}

.dti-pijler-kaart {
  background: var(--dti-darkblue);
  border-top: 3px solid #1FA3FF;
  border-radius: 2px;
  padding: 36px 28px;
  height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dti-pijler-kaart:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(31, 163, 255, 0.15);
}

.dti-pijler-kaart h3 {
  color: #ffffff;
  margin: 16px 0 12px;
}

.dti-pijler-kaart p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 0;
}

/* -------------------------------------------
   SECTORCARDS — BLOK 3
   ------------------------------------------- */
.dti-sector-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 32px 24px;
  border: 1px solid #E6EDF3;
  border-radius: 2px;
  color: var(--dti-navy);
  text-decoration: none;
  transition: all 0.2s ease;
}

.dti-sector-card:hover {
  background-color: var(--dti-lightgrey);
  border-color: #1FA3FF;
  box-shadow: 0 4px 20px rgba(31, 163, 255, 0.10);
  color: var(--dti-navy);
}

.dti-sector-icon {
  color: var(--dti-green);
  margin-bottom: 16px;
}

.dti-sector-icon svg {
  width: 36px;
  height: 36px;
  stroke-width: 1.5;
}

.dti-sector-card h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.dti-sector-card p {
  font-size: 16px;
  color: var(--dti-darkblue);
  margin-bottom: 16px;
  flex-grow: 1;
}

.dti-sector-link {
  font-size: 14px;
  font-weight: 500;
  color: #1FA3FF;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
}

.dti-sector-link svg {
  width: 15px;
  height: 15px;
  stroke-width: 2;
}

/* -------------------------------------------
   SECTORCARDS — BLOK 3 (foto achtergrond)
   ------------------------------------------- */
.dti-sector-kaart {
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.dti-sector-kaart:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(31, 163, 255, 0.20);
}

.dti-sector-kaart-foto {
  position: relative;
  height: 180px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
}

.dti-sector-kaart-foto::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(11, 31, 51, 0.10) 0%,
    rgba(11, 31, 51, 0.72) 100%
  );
  transition: background 0.2s ease;
}

.dti-sector-kaart:hover .dti-sector-kaart-foto::before {
  background: linear-gradient(
    to bottom,
    rgba(31, 163, 255, 0.15) 0%,
    rgba(11, 31, 51, 0.82) 100%
  );
}

.dti-sector-kaart-titel {
  position: relative;
  z-index: 2;
  padding: 14px 20px;
}

.dti-sector-kaart h3 {
  color: #ffffff;
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 0;
}

.dti-sector-kaart-tekst {
  border: 1px solid #D8E3EC;
  border-top: none;
  padding: 18px 20px 20px;
  background: #ffffff;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.dti-sector-kaart p {
  color: var(--dti-darkblue);
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 12px;
  flex-grow: 1;
}

.dti-meer-info {
  color: #1FA3FF;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.dti-meer-info:hover {
  color: #00C2FF;
}

/* -------------------------------------------
   RESULTATEN — BLOK 3b
   ------------------------------------------- */
.dti-resultaten {
  background: var(--dti-darkblue);
  padding: 72px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dti-resultaat-item {
  padding: 24px 32px;
  border-right: 1px solid rgba(255, 255, 255, 0.10);
}

.dti-resultaat-item:last-child {
  border-right: none;
}

.dti-resultaat-getal {
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 500;
  background: var(--dti-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
  margin-bottom: 12px;
}

.dti-resultaat-label {
  font-size: 15px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.70);
  line-height: 1.5;
}

@media (max-width: 767px) {
  /* 3 naast elkaar, compacter en kleiner */
  .dti-resultaat-item {
    padding: 22px 6px;
  }
  .dti-resultaat-getal {
    font-size: 24px;
    margin-bottom: 6px;
  }
  .dti-resultaat-label {
    font-size: 11px;
    line-height: 1.35;
  }
}

/* -------------------------------------------
   CONTENT AFBEELDING
   ------------------------------------------- */
.dti-content-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* Inline mini-video op contentplek (zelfde verhouding als .dti-content-img) */
.dti-content-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

/* Video die de volledige kolomhoogte vult (naast lange tekstkolom) */
.dti-content-fill {
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
  object-position: 68% center;
  display: block;
}

@media (max-width: 991.98px) {
  .dti-content-fill {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
}

/* Voordelenlijst in twee kolommen (kortere tekstkolom) */
.dti-voordelen-lijst-2kol {
  column-count: 2;
  column-gap: 36px;
}

.dti-voordelen-lijst-2kol li {
  break-inside: avoid;
}

@media (max-width: 575.98px) {
  .dti-voordelen-lijst-2kol {
    column-count: 1;
  }
}

/* Verdieping-paneel (donkere CTA-kaart die de kolom vult) */
.dti-verdieping-kaart {
  background: var(--dti-navy);
  border-top: 3px solid var(--dti-accent1);
  border-radius: 4px;
  padding: 32px 28px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dti-verdieping-kaart:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(11, 31, 51, 0.20);
}

.dti-verdieping-kaart .dti-verdieping-icoon {
  color: var(--dti-accent1);
  margin-bottom: 14px;
}

.dti-verdieping-kaart .dti-verdieping-icoon svg {
  width: 34px;
  height: 34px;
  stroke-width: 1.5;
}

.dti-verdieping-kaart h3 {
  color: #fff;
  margin-bottom: 18px;
}

.dti-verdieping-kaart .dti-verdieping-intro {
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  margin-bottom: 16px;
}

.dti-verdieping-lijst {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
}

.dti-verdieping-lijst li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 14px;
  line-height: 1.5;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dti-verdieping-lijst li:last-child {
  border-bottom: none;
}

.dti-verdieping-lijst li svg {
  width: 16px;
  height: 16px;
  color: var(--dti-accent1);
  flex-shrink: 0;
  margin-top: 3px;
  stroke-width: 2;
}

.dti-verdieping-kaart .btn {
  margin-top: auto;
}

/* Praktijkfoto in staand formaat — reële DTI-projectbeelden */
.dti-foto-praktijk {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

.dti-foto-caption {
  margin-top: 12px;
  font-size: 13px;
  color: rgba(11, 31, 51, 0.60);
  line-height: 1.5;
}

/* Merk-tagline onder een slogan (bv. asset intelligence, Industrial) */
.dti-tagline {
  color: var(--dti-accent1);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-top: 4px;
  margin-bottom: 24px;
}

/* -------------------------------------------
   TESTIMONIAL — BLOK 5
   ------------------------------------------- */
.dti-testimonial {
  position: relative;
  overflow: hidden;
  background-color: var(--dti-navy);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding: 80px 0;
}

@media (max-width: 768px) {
  .dti-testimonial {
    background-attachment: scroll; /* fixed werkt niet goed op mobiel */
  }
}

.dti-testimonial-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  z-index: 0;
}

@media (max-width: 768px) {
  .dti-testimonial-bg {
    background-attachment: scroll;
  }
}

.dti-testimonial-overlay {
  position: absolute;
  inset: 0;
  background: rgba(11, 31, 51, 0.82);
  z-index: 1;
}

.dti-testimonial-inner {
  position: relative;
  z-index: 2;
}

/* Sector-testimonials: container altijd boven de overlay */
.dti-testimonial .container {
  position: relative;
  z-index: 2;
}

.dti-case-label {
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.60);
  text-transform: uppercase;
  margin-bottom: 20px;
}

.dti-case-cijfer {
  font-size: 88px;
  font-weight: 500;
  line-height: 1;
  background: var(--dti-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 24px;
}

.dti-case-tekst {
  color: #fff;
  font-size: 18px;
  line-height: 1.7;
  font-weight: 400;
  max-width: 680px;
  margin: 0 auto 16px;
}

.dti-case-sector {
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.60);
  text-transform: uppercase;
  margin-bottom: 0;
}

/* Paginaspecifieke achtergrond testimonial */
.dti-testimonial-bg-home {
  background-image: url('../IMG/dti-home-blok5-case-002_aardebevingsschade.jpg');
}

/* -------------------------------------------
   CTA BANNER — BLOK 6
   ------------------------------------------- */
.dti-cta-banner {
  background: var(--dti-gradient);
  padding: 60px 0;
  min-height: 160px;
  display: flex;
  align-items: center;
}

.dti-cta-banner h2 {
  color: #fff;
  margin-bottom: 32px;
}

.dti-cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}

.btn-dti-cta-primary {
  background: #fff;
  color: var(--dti-navy);
  border: none;
  border-radius: 4px;
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 500;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  transition: opacity 0.2s ease;
  cursor: pointer;
}

.btn-dti-cta-primary:hover,
.btn-dti-cta-primary:focus {
  background: var(--dti-navy);
  color: #fff;
  opacity: 1;
}

.btn-dti-cta-secondary {
  background: transparent;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 4px;
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 500;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  transition: background 0.2s ease;
  cursor: pointer;
}

.btn-dti-cta-secondary:hover,
.btn-dti-cta-secondary:focus {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* -------------------------------------------
   FOOTER
   ------------------------------------------- */
.dti-footer {
  background-color: var(--dti-navy);
  padding: 60px 0 32px;
}

.dti-footer-logo {
  height: 72px;
  width: auto;
  display: block;
  margin: 0 auto 12px;
}

.dti-footer-kolom-logo {
  text-align: center;
}

.dti-footer-slogan {
  font-size: 13px;
  font-weight: 300;
  font-style: italic;
  color: rgba(255, 255, 255, 0.60);
  line-height: 1.6;
  margin-top: 12px;
  max-width: 240px;
  margin-left: auto;
  margin-right: auto;
}

.dti-footer-top {
  padding-bottom: 48px;
}

.dti-footer-heading {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 16px;
}

.dti-footer-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dti-footer-nav li {
  margin-bottom: 9px;
}

.dti-footer-nav a {
  color: rgba(255, 255, 255, 0.68);
  font-size: 15px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.dti-footer-nav a:hover {
  color: #fff;
}

.dti-footer-address {
  color: rgba(255, 255, 255, 0.68);
  font-size: 15px;
}

.dti-footer-address p {
  margin-bottom: 7px;
}

.dti-footer-address a {
  color: rgba(255, 255, 255, 0.68);
  text-decoration: none;
  transition: color 0.2s ease;
}

.dti-footer-address a:hover {
  color: #fff;
}

.dti-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.dti-linkedin svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.5;
}

.dti-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.48);
}

.dti-footer-legal {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.dti-footer-legal a,
.dti-footer-legal button {
  color: rgba(255, 255, 255, 0.48);
  font-size: 14px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.dti-footer-legal button {
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}

.dti-footer-legal a:hover,
.dti-footer-legal button:hover {
  color: rgba(255, 255, 255, 0.85);
}


/* ===========================================
   AANVULLENDE KLASSEN — SECTOR- EN DETAILPAGINA'S
   =========================================== */

/* -------------------------------------------
   ROW-FLIP (beeld links, tekst rechts)
   HTML-volgorde: beeld (col 1) staat altijd eerst → Bootstrap
   plaatst het van nature links op desktop. Mobile-order
   wordt afgehandeld in dti-responsive.css.
   ------------------------------------------- */
.dti-row-flip {
  /* desktop-layout via HTML-volgorde; geen flex-direction override nodig */
}

/* -------------------------------------------
   COL-TEKST
   ------------------------------------------- */
.dti-col-tekst {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;  /* voorkomt dat knoppen de volledige kolombreedte vullen */
}

/* -------------------------------------------
   SECTIE-LABELS EN INTRO
   ------------------------------------------- */
.dti-sectie-label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dti-accent1);
  margin-bottom: 12px;
  display: block;
}

.dti-sectie-titel {
  color: #fff;
  text-align: center;
  margin-bottom: 48px;
}

.dti-sectie-intro {
  font-size: 17px;
  color: rgba(11, 31, 51, 0.70);
  max-width: 620px;
  margin: 0 auto;
}

/* Linksuitgelijnde variant van de sectie-intro (margin-auto uitschakelen) */
.dti-sectie-intro-links {
  margin-left: 0;
  max-width: 720px;
}

/* Sectie-intro op volle breedte (geen max-width-beperking) */
.dti-sectie-intro-vol {
  margin-left: 0;
  max-width: none;
}

/* -------------------------------------------
   TESTIMONIAL — SECTOR BLOKKEN
   Padding en background-size staan in het hoofdblok hierboven.
   ------------------------------------------- */
.dti-testimonial-getal {
  font-size: clamp(52px, 8vw, 88px);
  font-weight: 500;
  line-height: 1;
  color: #fff;                          /* fallback voor browsers zonder clip-text */
  background: var(--dti-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 24px;
}

.dti-testimonial-tekst {
  color: #fff;
  font-size: 18px;
  line-height: 1.7;
  font-weight: 400;
  max-width: 680px;
  margin: 0 auto 16px;
}

.dti-testimonial-label {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
}

/* -------------------------------------------
   TOEPASSINGEN GRID
   ------------------------------------------- */
.dti-toepassing-kaart {
  background: #fff;
  border-radius: 2px;
  border: 1px solid #D8E3EC;
  padding: 28px 24px;
  height: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dti-toepassing-kaart:hover {
  border-color: var(--dti-accent1);
  box-shadow: 0 6px 20px rgba(31, 163, 255, 0.10);
}

.dti-toepassing-kaart h3 {
  font-size: 17px;
  font-weight: 500;
  color: var(--dti-navy);
  margin: 14px 0 8px;
}

.dti-toepassing-kaart p {
  font-size: 15px;
  color: rgba(11, 31, 51, 0.70);
  line-height: 1.6;
  margin-bottom: 0;
}

.dti-toepassing-icoon {
  color: var(--dti-accent1);
  line-height: 1;
}

.dti-toepassing-icoon svg {
  width: 32px;
  height: 32px;
  stroke-width: 1.5;
}

/* -------------------------------------------
   INDUSTRIAL — TECH GRID
   ------------------------------------------- */
.dti-tech-grid {
  background: var(--dti-navy);
  padding: 100px 0;
}

.dti-tech-kaart {
  background: var(--dti-darkblue);
  border-top: 2px solid rgba(31, 163, 255, 0.40);
  border-radius: 2px;
  padding: 28px 24px;
  height: 100%;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.dti-tech-kaart:hover {
  border-top-color: #1FA3FF;
  transform: translateY(-3px);
}

.dti-tech-kaart h3 {
  color: #fff;
  font-size: 17px;
  margin: 14px 0 8px;
}

.dti-tech-kaart p {
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
  line-height: 1.6;
}

/* -------------------------------------------
   INDUSTRIAL — VOORDELEN
   ------------------------------------------- */
.dti-voordelen-lijst {
  list-style: none;
  padding: 0;
  margin-top: 20px;
}

.dti-voordelen-lijst li {
  padding: 6px 0 6px 24px;
  position: relative;
  font-size: 15px;
  color: var(--dti-navy);
}

.dti-voordelen-lijst li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 8px;
  height: 2px;
  background: #1FA3FF;
}

/* Merk-bullet variant: vervangt het streepje door het DTI-merkteken */
.dti-voordelen-lijst.dti-lijst-merk li {
  padding-left: 30px;
}

.dti-voordelen-lijst.dti-lijst-merk li::before {
  top: 9px;
  width: 18px;
  height: 18px;
  background: url('/IMG/dti-bullet-001.svg') no-repeat center / contain;
}

.dti-voordelen-licht li {
  color: rgba(255, 255, 255, 0.80);
}

.dti-voordelen-licht li::before {
  background: #1FA3FF;
}

.dti-voordelen-kaart {
  background: #fff;
  border-top: 2px solid #1FA3FF;
  border-radius: 2px;
  padding: 28px 24px;
  height: 100%;
}

.dti-voordelen-kaart h3 {
  color: var(--dti-navy);
  font-size: 17px;
  margin: 14px 0 8px;
}

.dti-voordelen-kaart p {
  color: rgba(11, 31, 51, 0.70);
  font-size: 14px;
  line-height: 1.6;
}

/* -------------------------------------------
   INDUSTRIAL — HERO LABEL + TAGS
   ------------------------------------------- */
.dti-hero-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: #1FA3FF;
  text-transform: uppercase;
  margin-bottom: 16px;
  display: block;
}

.dti-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.dti-hero-tags span {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.60);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 2px;
  padding: 4px 12px;
  letter-spacing: 0.04em;
}

.dti-hero-overlay-deep {
  position: absolute;
  inset: 0;
  background: rgba(11, 31, 51, 0.75);
  z-index: 1;
}

/* -------------------------------------------
   WERKWIJZE — STAPPEN
   ------------------------------------------- */
.dti-stap-kaart {
  background: #fff;
  border: 1px solid #D8E3EC;
  border-radius: 2px;
  border-left: 4px solid var(--dti-accent1);
  padding: 28px 24px;
  height: 100%;
  transition: box-shadow 0.2s ease;
}

.dti-stap-kaart:hover {
  box-shadow: 0 6px 20px rgba(31, 163, 255, 0.10);
}

.dti-stap-nummer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--dti-gradient);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  border-radius: 50%;
  margin-bottom: 16px;
}

.dti-stap-kaart h3 {
  font-size: 18px;
  font-weight: 500;
  color: var(--dti-navy);
  margin-bottom: 10px;
}

.dti-stap-kaart p {
  font-size: 15px;
  color: rgba(11, 31, 51, 0.70);
  margin-bottom: 0;
}

/* -------------------------------------------
   PROJECTEN — FILTER
   ------------------------------------------- */
.dti-filter-balk {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dti-filter-knop {
  background: #fff;
  border: 1px solid #D8E3EC;
  border-radius: 2px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 400;
  color: var(--dti-navy);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.dti-filter-knop:hover {
  border-color: var(--dti-accent1);
  color: var(--dti-accent1);
}

.dti-filter-knop.active {
  background: var(--dti-navy);
  border-color: var(--dti-navy);
  color: #fff;
}

/* -------------------------------------------
   PROJECTEN — CASE KAARTEN
   ------------------------------------------- */
.dti-project-kaart {
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid #D8E3EC;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dti-project-kaart:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(31, 163, 255, 0.15);
}

.dti-project-foto {
  height: 200px;
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: flex-end;
}

.dti-project-foto::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(11, 31, 51, 0.15) 0%, rgba(11, 31, 51, 0.75) 100%);
}

.dti-project-label {
  position: relative;
  z-index: 2;
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.80);
  background: rgba(31, 163, 255, 0.60);
  border-radius: 2px;
  margin: 12px;
}

.dti-project-tekst {
  padding: 20px;
  background: #fff;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.dti-project-tekst h3 {
  font-size: 17px;
  font-weight: 500;
  color: var(--dti-navy);
  margin-bottom: 10px;
  line-height: 1.3;
}

.dti-project-tekst p {
  font-size: 14px;
  color: rgba(11, 31, 51, 0.70);
  line-height: 1.6;
  flex-grow: 1;
}

.dti-project-resultaat {
  font-size: 14px;
  color: var(--dti-navy);
  margin-bottom: 10px;
  font-weight: 400;
}

.dti-project-cijfer {
  font-weight: 600;
  color: var(--dti-accent1);
}

/* -------------------------------------------
   CONTACT PAGINA
   ------------------------------------------- */
.dti-contact-gegevens {
  background: var(--dti-lightgrey);
  border-radius: 2px;
  padding: 36px 32px;
}

.dti-contact-gegevens h3 {
  font-size: 20px;
  font-weight: 500;
  color: var(--dti-navy);
  margin-bottom: 24px;
}

.dti-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
  font-size: 15px;
  color: var(--dti-navy);
}

.dti-contact-item a {
  color: var(--dti-navy);
  text-decoration: none;
  transition: color 0.2s ease;
}

.dti-contact-item a:hover {
  color: var(--dti-accent1);
}

.dti-contact-icoon {
  color: var(--dti-accent1);
  width: 20px;
  height: 20px;
  stroke-width: 1.5;
  flex-shrink: 0;
  margin-top: 2px;
}

.dti-form-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--dti-navy);
  margin-bottom: 6px;
}

.dti-form-required {
  color: var(--dti-accent1);
}

/* -------------------------------------------
   OVER DTI — PORTRET
   ------------------------------------------- */
.dti-portret-foto {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top;
  border-radius: 2px;
  display: block;
}

.dti-portret-naam {
  font-size: 18px;
  font-weight: 600;
  color: var(--dti-navy);
}

.dti-portret-rol {
  font-size: 14px;
  color: rgba(11, 31, 51, 0.65);
  margin-top: 4px;
}

.dti-portret-linkedin {
  font-size: 14px;
  color: var(--dti-accent1);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.dti-portret-linkedin:hover {
  opacity: 0.75;
}

/* -------------------------------------------
   JURIDISCHE TEKST PAGINA'S
   ------------------------------------------- */
.dti-hero-compact {
  min-height: 320px !important;
}

.dti-hero-juridisch {
  background-color: var(--dti-darkblue);
  background-image: none;
}

.dti-tekst-blok h2 {
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 500;
  color: var(--dti-navy);
  margin-top: 40px;
  margin-bottom: 14px;
}

.dti-tekst-blok h2:first-child {
  margin-top: 0;
}

.dti-tekst-blok h3 {
  font-size: 17px;
  font-weight: 500;
  color: var(--dti-navy);
  margin-top: 24px;
  margin-bottom: 10px;
}

.dti-tekst-blok p,
.dti-tekst-blok li {
  font-size: 16px;
  color: rgba(11, 31, 51, 0.80);
  line-height: 1.75;
}

.dti-tekst-blok ul {
  padding-left: 20px;
  margin-bottom: 16px;
}

.dti-tekst-blok a {
  color: var(--dti-accent1);
  text-decoration: underline;
}

.dti-datum-wijziging {
  font-size: 14px;
  color: rgba(11, 31, 51, 0.50);
  margin-top: 8px;
}

/* -------------------------------------------
   JURIDISCH COMPLIANCE — ANKERNAVIGATIE
   ------------------------------------------- */
.dti-anker-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dti-anker-link {
  display: inline-block;
  background: #fff;
  border: 1px solid #D8E3EC;
  border-radius: 2px;
  padding: 8px 16px;
  font-size: 14px;
  color: var(--dti-navy);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.dti-anker-link:hover {
  border-color: var(--dti-accent1);
  color: var(--dti-accent1);
}

/* -------------------------------------------
   CTA BANNER — SUBKOP
   ------------------------------------------- */
.dti-cta-sub {
  color: rgba(255, 255, 255, 0.85);
  font-size: 17px;
  margin-bottom: 28px;
}

/* -------------------------------------------
   SECTOREN PAGINA — SECTOR KAART NAAM LABEL
   ------------------------------------------- */
.dti-sector-kaart-naam {
  position: relative;
  z-index: 2;
  padding: 16px 20px;
  color: #fff;
  font-size: 17px;
  font-weight: 500;
}

/* -------------------------------------------
   CONTACT FORM
   ------------------------------------------- */
.dti-contact-form textarea.dti-form-input {
  resize: vertical;
  min-height: 140px;
}

/* Honeypot-veld: onzichtbaar voor mensen, wel aanwezig voor bots */
.dti-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  height: 0;
  width: 0;
  overflow: hidden;
}

/* Feedback na versturen van een formulier */
.dti-form-feedback {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
}

.dti-form-feedback-succes {
  color: var(--dti-green);
}

.dti-form-feedback-fout {
  color: #DC2626;
}

/* Bedankt-pagina (na formulierverzending) */
.dti-bedankt-inhoud {
  max-width: 640px;
  margin: 0 auto;
}

.dti-bedankt-icoon {
  color: var(--dti-green);
  margin-bottom: 20px;
}

.dti-bedankt-icoon svg {
  width: 64px;
  height: 64px;
  stroke-width: 1.5;
}

/* ===========================================
   FAQ — ACCORDION
   =========================================== */
.dti-faq {
  background: var(--dti-lightgrey);
  padding: 80px 0;
}

.dti-faq-header {
  margin-bottom: 48px;
}

.dti-faq-header h2 {
  color: var(--dti-navy);
}

.dti-accordion .accordion-item {
  background: #fff;
  border: 1px solid #D8E3EC;
  border-radius: 2px;
  margin-bottom: 8px;
}

.dti-accordion .accordion-button {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--dti-navy);
  background: #fff;
  border-radius: 2px;
  padding: 20px 24px;
}

.dti-accordion .accordion-button:not(.collapsed) {
  color: #1FA3FF;
  background: #fff;
  box-shadow: none;
  border-bottom: 1px solid #D8E3EC;
}

.dti-accordion .accordion-button::after {
  content: '+';
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
  color: #1FA3FF;
  background-image: none;
  width: auto;
  height: auto;
  transform: none !important;
  flex-shrink: 0;
}

.dti-accordion .accordion-button:not(.collapsed)::after {
  content: '×';
  font-size: 24px;
  font-weight: 300;
  color: #1FA3FF;
  transform: none !important;
}

.dti-accordion .accordion-body {
  font-size: 15px;
  line-height: 1.70;
  color: var(--dti-darkblue);
  padding: 20px 24px;
}

.dti-accordion .accordion-button:focus {
  box-shadow: 0 0 0 3px rgba(31, 163, 255, 0.12);
}

@media (max-width: 768px) {
  .dti-accordion .accordion-button { font-size: 15px; padding: 16px 20px; }
  .dti-accordion .accordion-body   { padding: 16px 20px; }
}

/* ===========================================
   PROJECT DETAIL — BREADCRUMB, TERUG-LINK, KETEN, NAVIGATIEBALK
   =========================================== */

/* Breadcrumb-balk (onder sticky nav, boven hero) */
.dti-breadcrumb-balk {
  background: var(--dti-lightgrey);
  border-bottom: 1px solid #D8E3EC;
  padding: 10px 0;
}

.dti-breadcrumb-balk .breadcrumb {
  margin-bottom: 0;
  font-size: 13px;
  background: none;
  padding: 0;
}

.dti-breadcrumb-balk .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(11, 31, 51, 0.35);
}

.dti-breadcrumb-balk .breadcrumb-item a {
  color: var(--dti-accent1);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.dti-breadcrumb-balk .breadcrumb-item a:hover {
  opacity: 0.75;
}

.dti-breadcrumb-balk .breadcrumb-item.active {
  color: var(--dti-navy);
  font-weight: 500;
}

/* Project navigatiebalk (na FAQ, voor footer) */
.dti-project-nav {
  background: #fff;
  border-top: 1px solid #D8E3EC;
  padding: 24px 0;
}

.dti-project-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.dti-project-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--dti-navy);
  text-decoration: none;
  transition: color 0.2s ease;
}

.dti-project-nav-link:hover {
  color: var(--dti-accent1);
}

.dti-project-nav-link svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.5;
  flex-shrink: 0;
}

.dti-project-nav-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(11, 31, 51, 0.45);
  display: block;
  margin-bottom: 3px;
}

@media (max-width: 576px) {
  .dti-project-nav-inner { flex-direction: column; align-items: flex-start; }
  .dti-project-nav-link:last-child { align-self: flex-end; }
}

/* ===========================================
   PROJECT DETAIL — TERUG-LINK EN KETEN
   =========================================== */
.dti-terug-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
  text-decoration: none;
  margin-bottom: 20px;
  transition: color 0.2s ease;
}

.dti-terug-link:hover {
  color: #fff;
}

.dti-terug-link svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.5;
}

.dti-keten {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 48px;
}

.dti-keten-stap {
  flex: 1;
  min-width: 130px;
  max-width: 190px;
  text-align: center;
  padding: 0 10px;
}

.dti-keten-stap-titel {
  font-size: 15px;
  font-weight: 500;
  color: var(--dti-navy);
  margin: 10px 0 6px;
}

.dti-keten-stap p {
  font-size: 13px;
  color: rgba(11, 31, 51, 0.65);
  line-height: 1.55;
  margin-bottom: 0;
}

.dti-keten-pijl {
  color: var(--dti-accent1);
  padding-top: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  padding-left: 4px;
  padding-right: 4px;
}

.dti-keten-pijl svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.5;
}

@media (max-width: 767px) {
  .dti-keten { flex-direction: column; align-items: center; gap: 0; }
  .dti-keten-stap { max-width: 280px; padding: 0; }
  .dti-keten-pijl { transform: rotate(90deg); padding-top: 8px; padding-bottom: 4px; }
}

/* ===========================================
   CHECKLIST MET ICONEN (tracémetingen, PV-inspectie)
   =========================================== */
.dti-checklist {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
}

.dti-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #E5EBF0;
  font-size: 15px;
  color: var(--dti-darkblue);
  line-height: 1.55;
}

.dti-checklist li:last-child {
  border-bottom: none;
}

.dti-checklist-icoon {
  flex-shrink: 0;
  color: var(--dti-accent1);
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

.dti-checklist-icoon svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.5;
}

.dti-checklist strong {
  display: block;
  color: var(--dti-navy);
  font-weight: 500;
  margin-bottom: 2px;
}

/* ===========================================
   VIDEO BLOK (exoten natuur use case)
   =========================================== */
.dti-video-blok {
  background: var(--dti-navy);
  padding: 80px 0;
}

.dti-video-blok h2 {
  color: #fff;
}

.dti-video-blok p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 16px;
  line-height: 1.7;
}

.dti-video-blok .dti-sectie-label {
  color: #1FA3FF;
}

.dti-video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45);
  background: #000;
}

.dti-video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* PV-inspectie defectenlijst */
.dti-defect-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 20px;
}

.dti-defect-item {
  background: var(--dti-lightgrey);
  border-left: 3px solid var(--dti-accent1);
  border-radius: 2px;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--dti-navy);
  font-weight: 400;
}

@media (max-width: 576px) {
  .dti-defect-grid { grid-template-columns: 1fr; }
}

/* ===========================================
   ECOLOGICAL INTELLIGENCE — IN-PAGE NAV, PIJLERS, CHIPS
   =========================================== */

/* Sticky in-page navigatie, plakt onder de hoofd-nav (96px) */
.dti-paginanav {
  position: sticky;
  top: 96px;
  z-index: 1019;
  background: var(--dti-darkblue);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.dti-paginanav-inner {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 9px 0;
}

.dti-paginanav-inner::-webkit-scrollbar {
  display: none;
}

.dti-paginanav a {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 8px 16px;
  border-radius: 4px;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.dti-paginanav a:hover,
.dti-paginanav a:focus {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

/* Pijler-sectie: anker vrijhouden onder de sticky balken */
.dti-pijler-sectie {
  scroll-margin-top: 160px;
}

.dti-pijler-subkop {
  font-size: 15px;
  font-weight: 600;
  color: var(--dti-navy);
  letter-spacing: 0.02em;
  margin: 0 0 8px;
}

.dti-voordelen-licht ~ .dti-pijler-subkop,
.dti-pijler-subkop-licht {
  color: rgba(255, 255, 255, 0.92);
}

/* Doelsoorten / exoten als chips */
.dti-soort-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.dti-soort-chips span {
  font-size: 13px;
  color: var(--dti-darkblue);
  background: var(--dti-lightgrey);
  border: 1px solid #D8E3EC;
  border-radius: 40px;
  padding: 5px 14px;
}

.dti-soort-chips.dti-soort-chips-licht span {
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
}

/* Uitgelicht highlight-paneel (bv. Thermische Controleverklaring) */
.dti-highlight-box {
  background: var(--dti-lightgrey);
  border-left: 3px solid var(--dti-accent1);
  border-radius: 4px;
  padding: 24px 28px;
  margin-top: 28px;
}

.dti-highlight-box h3 {
  font-size: 18px;
  color: var(--dti-navy);
  margin-bottom: 8px;
}

.dti-highlight-box p {
  font-size: 15px;
  color: rgba(11, 31, 51, 0.75);
  margin-bottom: 0;
}

.dti-highlight-box ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

.dti-highlight-box li {
  font-size: 14px;
  color: rgba(11, 31, 51, 0.75);
  line-height: 1.6;
}

/* Opsomming met groen vinkje (vervangt de chips) */
.dti-check-groen {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 28px;
}

.dti-check-groen li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--dti-darkblue);
  line-height: 1.5;
}

.dti-check-groen li svg {
  width: 18px;
  height: 18px;
  color: var(--dti-green);
  flex-shrink: 0;
  margin-top: 3px;
  stroke-width: 2.5;
}

@media (max-width: 575.98px) {
  .dti-check-groen { grid-template-columns: 1fr; }
}

/* Soortenlijst met dier-icoon, 3 kolommen (kolomsgewijs gevuld) */
.dti-soortenlijst {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  column-count: 3;
  column-gap: 28px;
}

.dti-soortenlijst li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--dti-darkblue);
  line-height: 1.5;
  padding: 5px 0;
  break-inside: avoid;
}

.dti-soortenlijst li svg {
  width: 18px;
  height: 18px;
  color: var(--dti-accent1);
  flex-shrink: 0;
  stroke-width: 1.75;
}

@media (max-width: 767.98px) { .dti-soortenlijst { column-count: 2; } }
@media (max-width: 479.98px) { .dti-soortenlijst { column-count: 1; } }

/* AI-pijler: lichte kaarten op de donkere sectie */
.dti-ai-kaart {
  background: var(--dti-lightgrey);
  border-radius: 4px;
  padding: 32px 30px;
}

.dti-ai-kaart .dti-pijler-subkop {
  color: var(--dti-navy);
  font-size: 16px;
  margin-bottom: 12px;
}

.dti-ai-kaart .dti-voordelen-lijst {
  margin-top: 8px;
}

.dti-ai-kaart .dti-voordelen-lijst li {
  color: var(--dti-darkblue);
}

/* Voor wie — prominent audience-blok */
.dti-voorwie-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.dti-voorwie-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #D8E3EC;
  border-radius: 40px;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 500;
  color: var(--dti-navy);
}

.dti-voorwie-item svg {
  width: 20px;
  height: 20px;
  color: var(--dti-accent1);
  stroke-width: 1.75;
  flex-shrink: 0;
}

/* Korte crossfade-animatie (opvolgende beelden) */
.dti-eco-slideshow {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  background: var(--dti-navy);
}

.dti-eco-slideshow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.dti-eco-slideshow img:nth-child(1) { animation: dtiFadeA 8s infinite; }
.dti-eco-slideshow img:nth-child(2) { animation: dtiFadeB 8s infinite; }

@keyframes dtiFadeA {
  0%   { opacity: 1; }
  42%  { opacity: 1; }
  50%  { opacity: 0; }
  92%  { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes dtiFadeB {
  0%   { opacity: 0; }
  42%  { opacity: 0; }
  50%  { opacity: 1; }
  92%  { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dti-eco-slideshow img { animation: none; }
  .dti-eco-slideshow img:nth-child(1) { opacity: 1; }
}