/* algemeen */
:root{ --brand:#011623; --accent:#bfa37e; --neutral:#d3d4d6; --ink:#0b0f14; --paper:#ffffff; --shade:#f6f7f8; --line:#e6e8ec; --radius:12px; --shadow:0 6px 24px rgba(1,22,35,.08); }
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{ font-family: Arial, Helvetica, sans-serif; font-size:16px; line-height:1.6; color:var(--ink); background:var(--paper); }
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
.container{width:min(1100px,92%);margin-inline:auto;}

/* header*/
.site-header{
  position:sticky;
  top:0;
  left: 0;          /* volle breedte */
  right: 0;         /* volle breedte */
  background:#fff;
  border-bottom:1px solid var(--neutral);
  z-index:1000}
.header-inner{
  display:flex;
  align-items:center;
  gap:24px;
  padding:14px 0}
.logo{
  font-weight:800;
  letter-spacing:.4px;
  color:var(--brand)}


/* Desktop (basis) */
.main-nav { position: relative; }
.main-nav .nav-toggle { display: none; }
.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 18px;
  align-items: center;
}

/* Mobiel met animatie */
@media (max-width: 768px) {
  .main-nav .nav-toggle {
    display: inline-block;
    background: transparent;
    border: 1px solid var(--neutral);
    padding: .4rem .6rem;
    border-radius: 8px;
    color: var(--brand);
  }

  /* Paneel in gesloten toestand */
  .main-nav ul {
    position: absolute;
    right: 4%;
    top: 70px;
    flex-direction: column;
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--neutral);
    border-radius: 12px;
    padding: 12px;

    /* ── animatie setup ── */
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    box-shadow: var(--shadow);
    z-index: 1000;

    /* Gebruik zowel transform als opacity voor smoothness */
    transition:
      transform .22s ease,
      opacity .22s ease,
      visibility 0s linear .22s; /* verberg na fade-out */
  }

  /* Open toestand (geactiveerd via .open) */
  .main-nav ul.open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
      transform .22s ease,
      opacity .22s ease,
      visibility 0s; /* direct zichtbaar bij openen */
  }

  /* Optioneel: max-height voor extra 'slide' gevoel */
  .main-nav ul {
    overflow: hidden;
    max-height: 0;
    transition:
      transform .22s ease,
      opacity .22s ease,
      visibility 0s linear .22s,
      max-height .28s ease; /* hoogte animatie */
  }
  .main-nav ul.open {
    max-height: 60vh; /* voldoende ruimte voor menu-items */
  }

  /* Link-states in het paneel */
  .main-nav ul a {
    display: block;
    padding: 8px 6px;
    width: 100%;
  }
}

/* Active link styling (blijft gelden) */
.nav-links a.active {
  text-decoration: underline;
  font-weight: 600;
}

/* Respecteer toegankelijkheidsinstellingen */
@media (prefers-reduced-motion: reduce) {
  .main-nav ul,
  .main-nav ul.open {
    transition: none !important;
  }
}

@media (max-width:768px){
  .main-nav ul.open { box-shadow: 0 10px 24px rgba(0,0,0,.08); }
}
/* ----------------einde main nav---------------------*/

/* knoppen*/ 
.btn{display:inline-block;background:var(--accent);color:#111;padding:.85rem 1.1rem;border-radius:10px;font-weight:700;border:1px solid transparent}
.btn:hover{filter:brightness(.95)}
.btn-ghost{background:transparent;border-color:var(--accent);color:var(--accent)}
.btn-small{padding:.45rem .8rem;border:1px solid var(--accent);background:transparent;color:var(--accent);border-radius:999px}

/* hero sectie */
.hero {
  position: relative;
  background: url('../../images/Zebrha-tekentafel.webp') center center/cover no-repeat;
  color: #fff;
  isolation: isolate; /* voorkomt blending met buitenliggende elementen */
}

/* overlay toevoegen */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(16, 36, 52, 0.75); /* #102434 met 75% dekking */
  z-index: -1; /* zorgt dat overlay achter de tekst blijft */
}

.hero-inner {
  position: relative; /* zorgt dat de inhoud boven de overlay ligt */
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 36px;
  align-items: center;
  padding: 56px 0;
}

.hero h1 {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.15;
  margin: 0 0 12px;
}

.hero p {
  color: #e7ebef;
  margin: 0 0 18px;
}

.hero .btn {
  background: var(--accent);
  color: #101;
  border-color: var(--accent);
}

.hero .btn-ghost {
  border-color: #d3d4d6;
  color: #fff;
}

/* pillars sectie */
.pillars{padding:48px 0;background:var(--paper)}
.pillars h2{margin:0 0 12px}

/* kaarten */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:#fff;border:1px solid var(--neutral);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.card h3{margin:.2rem 0 .4rem;color:var(--brand)}
.card p{margin:0 0 .6rem}
.link{color:var(--brand);font-weight:700}

/* promo*/
.promo{background:var(--brand);color:#fff}
.promo-inner{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:26px 0}
.btn-invert{background:#fff;color:var(--brand);border-color:#fff}

/*highlight*/
.highlight{padding:48px 0;background:var(--shade)}
.highlight-inner{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center}
.highlight-copy h2{color:var(--brand)}
.highlight .btn-ghost{border-color:var(--brand);color:var(--brand)}

/*testominals*/
.testimonials{padding:48px 0;background:#fff}
.testimonials h2{margin-top:0;color:var(--brand)}
.quote{background:#fff;border:1px solid var(--neutral);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}

/* nieuws*/
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}
.news-item{border:1px solid var(--neutral);border-radius:10px;padding:12px}
.news-item time{display:block;color:#6c7682;font-size:.9rem}
.news-item h3{margin:.2rem 0 0}

/*partners*/
.partners{padding:40px 0;background:#fff}
.partners h2{color:var(--brand)}
.logos{list-style:none;display:flex;gap:26px;flex-wrap:wrap;align-items:center;margin:0;padding:0}
.logos li{filter:grayscale(1);opacity:.85}

/*over op index-pagina*/
.about{padding:48px 0;background:var(--paper)}
.about-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:24px}
.bullets{margin:0;padding-left:18px}
.bullets li{margin:.4rem 0}

/* contactformulier */
.contact{padding:48px 0;background:var(--shade)}
.contact-inner{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.contact address a{color:var(--brand)}
.contact-form{background:#fff;border:1px solid var(--neutral);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.contact-form label{display:block;font-weight:700;margin:.6rem 0 .2rem}
.contact-form input,.contact-form textarea{ width:100%;border:1px solid var(--neutral);border-radius:8px;padding:.7rem .8rem;font:inherit }
.contact-form button{margin-top:.6rem}

/* footer*/ 
.site-footer{background:#0a1520;color:#e9eef7;margin-top:40px}
.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:26px;
  padding:36px 0}
.site-footer a{color:#e9eef7cc}
.footer-bottom{border-top:1px solid #1f2430;padding:14px 0;text-align:center}

/* Map & route - contactpagina*/
.btn-map{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem .9rem;border:1px solid var(--accent);background:#fff;color:var(--brand);border-radius:10px;font-weight:700;text-decoration:none}
.btn-map:hover{filter:brightness(.98)}
.btn-map svg{width:18px;height:18px;flex:0 0 18px}
.map{border:1px solid var(--neutral);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.map iframe{display:block}

/* Checker + Intake + CAPTCHA note */
.checker{background:#fff;border:1px solid var(--neutral);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);margin-top:18px}
.checker form{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}
.checker label{display:block;font-weight:700;margin:.2rem 0;}
.checker select,
.checker input {
  width: 100%;
  border: 1px solid var(--neutral);
  border-radius: 8px;
  padding: .6rem .7rem;
  font: inherit;
  height: 2.8rem;          /* vaste hoogte */
  line-height: 1.4;
  box-sizing: border-box;
  background-color: #fff;
  appearance: none;        /* voorkomt afwijkende browserstijlen */
}
.checker .full{grid-column:1 / -1}
.checker .result{border:1px dashed var(--neutral);border-radius:10px;padding:12px;margin-top:8px;background:var(--shade)}
.checker .result strong{color:var(--brand)}
.checker .cta{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap}
.checker .note{font-size:.9rem;color:#6c7682;margin-top:6px}
.intake{background:#fff;border:1px solid var(--neutral);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);margin-top:18px}
.intake form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.intake label{display:block;font-weight:700;margin:.2rem 0}
.intake input,.intake textarea{width:100%;border:1px solid var(--neutral);border-radius:8px;padding:.6rem .7rem;font:inherit}
.intake textarea{min-height:120px;resize:vertical}
.intake .full{grid-column:1 / -1}
.intake .files{border:1px dashed var(--neutral);border-radius:10px;padding:10px;background:var(--shade)}
.intake .meta{font-size:.85rem;color:#6c7682;margin-top:6px}
.captcha-note{font-size:.8rem;color:#6c7682;margin-top:6px}

/* ------- Responsiveness:  media qeuries ------- */
/* Mobile Devices: 319px — 480px */
@media (min-width: 235px) AND (max-width: 480px){
  .hero-inner{grid-template-columns:1fr}
  .highlight-inner{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .news{grid-template-columns:1fr}
  .about-inner{grid-template-columns:1fr}
  .contact-inner{grid-template-columns:1fr}
    .footer-grid{
    grid-template-columns:1fr;
    gap:20px;
  }
    .highlight-inner {
    grid-template-columns:1fr;
  }
    .promo-inner{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

  /* iPads and Tablets: 481px — 1200px */
  @media (min-width: 481px) AND (max-width: 1200px){
  .hero-inner{grid-template-columns:1fr}
  .highlight-inner{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .news{grid-template-columns:1fr}
  .about-inner{grid-template-columns:1fr}
  .contact-inner{grid-template-columns:1fr}
  /* .footer-grid{
    grid-template-columns:1fr;
    gap:20px; 
  } */
  .highlight-inner {
    grid-template-columns:1fr;
  }
    .promo-inner{
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}

  /* Laptops: 1201px — 1600px */
 

  /* Desktops: 1601px and more */