/*
 * ════════════════════════════════════════════════════════════
 *  PIXELTHIS — Design System v2026.2
 *  pixelthis-style.css
 *
 *  Gebruik: <link rel="stylesheet" href="pixelthis-style.css">
 *  Voor /en/ map: <link rel="stylesheet" href="../pixelthis-style.css">
 * ════════════════════════════════════════════════════════════
 */

/* ── 1. RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--black);color:var(--white);
  font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;
}

/* ── 2. KLEURVARIABELEN ── */
:root{
  --black:#000000;
  --near-black:#1A1A1A;
  --white:#FFFFFF;
  --off-white:#F5F5F5;
  --blue:#00BFFF;
  --blue-dark:#0099CC;
  --green:#C9F31D;
  --gray-1:#2A2A2A;
  --gray-2:#444444;
  --gray-line:rgba(255,255,255,0.08);
  --text-dim:rgba(255,255,255,0.4);
  --text-mid:rgba(255,255,255,0.65);
  --lt-line:#E0E0E0;
  --lt-gray:#F5F5F5;
  --lt-mid:#666666;
  --lt-text:#333333;
  --space-xs:8px;--space-sm:16px;--space-md:32px;
  --space-lg:64px;--space-xl:90px;--space-2xl:140px;
  --max-w:1280px;--max-w-narrow:860px;--max-w-text:760px;
}

/* ── 3. KLEUR UTILITIES ── */
.text-blue{color:var(--blue)}.text-green{color:var(--green)}
.text-dim{color:var(--text-dim)}.text-mid{color:var(--text-mid)}
.text-white{color:var(--white)}.text-black{color:var(--black)}
.text-lt-mid{color:var(--lt-mid)}
.bg-black{background:var(--black)}.bg-near-black{background:var(--near-black)}
.bg-white{background:var(--white);color:var(--black)}
.bg-off-white{background:var(--off-white);color:var(--black)}
.bg-blue{background:var(--blue);color:var(--black)}
.bg-green{background:var(--green);color:var(--black)}

/* ── 4. TYPOGRAFIE ── */
.serif{font-family:Georgia,serif}
.serif-italic{font-family:Georgia,serif;font-style:italic}
h1,.h1{font-family:Georgia,serif;font-size:clamp(40px,6vw,72px);font-weight:400;line-height:1.05;letter-spacing:-.02em}
h2,.h2{font-family:Georgia,serif;font-size:clamp(28px,4vw,46px);font-weight:400;line-height:1.15;letter-spacing:-.02em}
h3,.h3{font-family:Georgia,serif;font-size:clamp(22px,3vw,32px);font-weight:400;line-height:1.25}
h4,.h4{font-size:14px;font-weight:700;letter-spacing:.01em}

.eyebrow{
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue);display:flex;align-items:center;gap:14px;margin-bottom:20px;
}
.eyebrow::before{content:'';display:block;width:28px;height:1px;background:var(--blue);flex-shrink:0}
.eyebrow.green{color:var(--green)}.eyebrow.green::before{background:var(--green)}
.eyebrow.no-line::before{display:none}

.lead{font-size:16px;color:var(--text-mid);line-height:1.8;max-width:62ch}
.lead.large{font-size:18px}
.body-text{font-size:14.5px;color:var(--text-mid);line-height:1.85}
.body-text.light{color:var(--lt-mid)}
.quote-text{font-family:Georgia,serif;font-style:italic;font-size:clamp(18px,2.5vw,26px);line-height:1.5;color:var(--text-mid)}
.accent-blue{color:var(--blue)}.accent-green{color:var(--green)}
.text-xs{font-size:11px}.text-sm{font-size:13px}.text-base{font-size:15px}
.text-lg{font-size:17px}.text-xl{font-size:20px}

/* ── 5. KNOPPEN ── */
.btn{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;text-decoration:none;padding:13px 26px;
  border:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s;
  font-family:inherit;white-space:nowrap;
}
.btn-primary{background:var(--blue);color:var(--black)}
.btn-primary:hover{background:#33CFFF}
.btn-dark{background:var(--black);color:var(--white)}
.btn-dark:hover{background:var(--blue);color:var(--black)}
.btn-outline{background:transparent;border:1px solid var(--blue);color:var(--blue)}
.btn-outline:hover{background:var(--blue);color:var(--black)}
.btn-ghost{background:transparent;border:1px solid var(--gray-line);color:var(--text-mid)}
.btn-ghost:hover{border-color:var(--white);color:var(--white)}
.btn-green{background:var(--green);color:var(--black)}
.btn-green:hover{opacity:.85}

/* ── 6. LAYOUT ── */
.container{max-width:var(--max-w);margin:0 auto;padding:0 var(--space-lg)}
.container.narrow{max-width:var(--max-w-narrow)}
.container.text{max-width:var(--max-w-text)}
.section{padding:var(--space-xl) var(--space-lg)}
.section.sm{padding:var(--space-md) var(--space-lg)}
.section.lg{padding:120px var(--space-lg)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2px}
.flex{display:flex}.flex-center{display:flex;align-items:center;justify-content:center}
.flex-between{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}
.flex-col{display:flex;flex-direction:column}
.gap-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}.gap-lg{gap:var(--space-lg)}
.text-center{text-align:center}.text-left{text-align:left}

/* ── 7. DIVIDERS & ACCENTEN ── */
.divider{border:none;border-top:1px solid var(--gray-line);margin:0}
.divider.light{border-color:var(--lt-line)}
.accent-line{width:40px;height:3px;background:var(--blue);margin-bottom:var(--space-md)}
.accent-line.green{background:var(--green)}
.accent-line.center{margin-left:auto;margin-right:auto}

/* ── 8. NAVIGATIE ── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;padding:0 48px;height:56px;
  background:rgba(0,0,0,.92);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--gray-line);
}
.nav-logo{display:flex;align-items:center;flex-shrink:0}
.nav-logo img{height:22px;width:auto;display:block;transition:opacity .2s}
.nav-logo:hover img{opacity:.7}
.nav-links{display:flex;gap:32px;margin:0 auto;list-style:none;align-items:center}
.nav-links>li{position:relative}
.nav-links a{
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-dim);text-decoration:none;transition:color .2s;
  display:flex;align-items:center;gap:5px;
}
.nav-links a:hover{color:var(--white)}
.nav-links a.current{color:var(--blue)}
.nav-links a.green-link{color:var(--green)}
.nav-caret{font-size:9px;transition:transform .2s;text-transform:none}
.nav-links li:hover .nav-caret{transform:rotate(180deg)}
.nav-dropdown{
  position:absolute;top:100%;left:50%;
  transform:translateX(-50%) translateY(-6px);
  margin-top:18px;width:260px;background:#0D0D0D;
  border:1px solid var(--gray-line);opacity:0;visibility:hidden;
  transition:opacity .2s,transform .2s,visibility .2s;padding:8px 0;z-index:60;
}
.nav-links li:hover .nav-dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dd-item{display:block;padding:13px 20px;text-decoration:none;border-bottom:1px solid var(--gray-line);text-transform:none}
.dd-item:last-child{border-bottom:none}
.dd-item:hover{background:rgba(255,255,255,.04)}
.dd-name{font-size:12.5px;font-weight:700;color:var(--white);margin-bottom:3px;letter-spacing:normal}
.dd-desc{font-size:11px;color:var(--text-dim);line-height:1.5;letter-spacing:normal;font-weight:400}
.nav-cta{
  background:transparent;border:1px solid var(--blue);color:var(--blue);
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:8px 18px;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background .2s,color .2s;
}
.nav-cta:hover{background:var(--blue);color:var(--black)}

/* ── 9. HERO ── */
.hero{
  padding:140px 64px 80px;border-bottom:1px solid var(--gray-line);
  position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;top:56px;left:0;right:0;height:2px;
  background:linear-gradient(to right,var(--blue),transparent 60%);
}
.hero.green-line::before{background:linear-gradient(to right,var(--green),transparent 60%)}

/* ── 10. FOTO ZONES ── */
/*
  Gebruik .photo-full voor een fullscreen-breed beeldmoment.
  Vervang de inhoud van .photo-inner door een <img> tag.
  Aanbevolen: breedte minimaal 2400px, hoogte minimaal 900px.
  Object-fit:cover zorgt dat het altijd goed past.
*/
.photo-full{
  width:100%;
  position:relative;
  overflow:hidden;
  background:var(--near-black);
}
.photo-full.tall{height:70vh;min-height:500px}
.photo-full.medium{height:55vh;min-height:400px}
.photo-full.short{height:40vh;min-height:300px}
.photo-full img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  display:block;
  transition:transform .6s ease;
}
.photo-full:hover img{transform:scale(1.02)}

/* Donkere overlay over foto (voor tekst leesbaarheid) */
.photo-overlay{
  position:absolute;inset:0;
  background:rgba(0,0,0,.45);
  display:flex;align-items:flex-end;
  padding:40px 64px;
}
.photo-overlay.center{align-items:center;justify-content:center;text-align:center}
.photo-caption{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5)}

/* Placeholder styling (zichtbaar zolang er nog geen foto is) */
.photo-placeholder{
  width:100%;height:100%;min-height:inherit;
  background:var(--near-black);
  border:2px dashed rgba(0,191,255,.2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:40px;text-align:center;
}
.photo-placeholder-icon{opacity:.25;color:var(--blue)}
.photo-placeholder-label{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);opacity:.6}
.photo-placeholder-hint{font-size:11px;color:var(--text-dim);max-width:40ch;line-height:1.6}

/* ── 11. CEL / KAART ── */
.cell{background:var(--black);padding:32px 28px;transition:background .2s}
.cell:hover{background:var(--near-black)}
.cell.light{background:var(--white)}.cell.light:hover{background:var(--lt-gray)}
.cell.bordered{border:1px solid var(--gray-line)}
.cell-top-blue{border-top:2px solid var(--blue)}
.cell-top-green{border-top:2px solid var(--green)}
.cell-top-dim{border-top:2px solid var(--gray-line)}

/* ── 12. STATISTIEKEN ── */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);background:var(--near-black)}
.stat-block{padding:44px 40px;text-align:center;border-right:1px solid var(--gray-line)}
.stat-block:last-child{border-right:none}
.stat-num{font-family:Georgia,serif;font-size:clamp(40px,5vw,56px);color:var(--blue);line-height:1;margin-bottom:10px;font-weight:400}
.stat-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);line-height:1.5}

/* ── 13. TESTIMONIALS ── */
.testi-card{background:var(--near-black);padding:40px 36px;border-top:2px solid var(--gray-line)}
.testi-card.blue{border-top-color:var(--blue)}
.testi-card.green{border-top-color:var(--green)}
.testi-quote{font-family:Georgia,serif;font-style:italic;font-size:14px;color:var(--text-mid);line-height:1.8;margin-bottom:24px}
.testi-name{font-size:13px;font-weight:700;color:var(--white)}
.testi-role{font-size:11px;color:var(--text-dim);margin-top:2px}

/* ── 14. PLEDGE1% STRIP ── */
.pledge-strip{background:var(--off-white);color:var(--black);padding:64px}
.pledge-strip-inner{max-width:960px;margin:0 auto;display:flex;gap:40px;align-items:flex-start;flex-wrap:wrap}
.pledge-badge{flex-shrink:0;font-size:32px}
.pledge-strip-title{font-family:Georgia,serif;font-size:20px;font-weight:400;margin-bottom:10px;line-height:1.35}
.pledge-strip-text{font-size:13.5px;color:var(--lt-mid);line-height:1.75;max-width:58ch;margin-bottom:12px}
.pledge-strip-link{font-size:12px;font-weight:700;color:var(--blue-dark);text-decoration:none}
.pledge-strip-link:hover{text-decoration:underline}

/* ── 15. MOOD / QUOTE BOX ── */
.mood-box{border-left:2px solid var(--blue);background:var(--near-black);padding:32px 36px}
.mood-box.green{border-left-color:var(--green)}
.mood-box p{font-family:Georgia,serif;font-style:italic;font-size:15px;color:var(--text-mid);line-height:1.85;margin-bottom:10px}
.mood-box p:last-child{margin-bottom:0}

/* ── 16. CTA SECTIE ── */
.cta-section{padding:var(--space-xl) var(--space-lg);text-align:center}
.cta-section.dark{background:var(--near-black);border-top:1px solid var(--gray-line)}
.cta-section.black{background:var(--black);border-top:1px solid var(--gray-line)}
.cta-section.light{background:var(--off-white);color:var(--black)}
.cta-section h2{margin-bottom:14px}
.cta-section p{font-size:14px;color:var(--text-dim);margin-bottom:28px}
.cta-section.light p{color:var(--lt-mid)}
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}

/* ── 17. FOOTER ── */
footer{
  background:var(--near-black);padding:48px 64px 28px;
  border-top:1px solid var(--gray-line);
  display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;
}
.footer-logo-row{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--white);margin-bottom:12px}
.footer-logo-row span{color:var(--blue)}
.footer-tag-row{font-size:12px;color:var(--text-dim);line-height:1.7}
.footer-col h4{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);font-weight:700;margin-bottom:14px}
.footer-col a{display:block;font-size:12.5px;color:rgba(255,255,255,.5);text-decoration:none;margin-bottom:9px;transition:color .2s}
.footer-col a:hover{color:var(--white)}
.footer-col a.pledge{color:var(--green)}
.footer-bottom-row{grid-column:1/-1;border-top:1px solid var(--gray-line);padding-top:18px;margin-top:8px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.footer-bottom-row p{font-size:11px;color:var(--text-dim)}
.legal-links{display:flex;gap:16px;flex-wrap:wrap}
.legal-links a{font-size:11px;color:var(--text-dim);text-decoration:none}
.legal-links a:hover{color:var(--white)}

/* ── 18. FORMULIER ── */
.form-box{background:var(--near-black);border:1px solid var(--gray-line);padding:40px}
.form-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);margin-bottom:8px;display:block}
.form-input,.form-textarea{width:100%;background:var(--black);border:1px solid var(--gray-2);padding:13px 16px;font-size:14px;font-family:inherit;color:var(--white);outline:none;transition:border-color .2s}
.form-input:focus,.form-textarea:focus{border-color:var(--blue)}
.form-input::placeholder,.form-textarea::placeholder{color:var(--text-dim)}
.form-textarea{resize:vertical;min-height:120px}
.form-field{margin-bottom:20px}
.form-submit{width:100%;background:var(--blue);color:var(--black);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:14px;border:none;cursor:pointer;transition:background .2s;font-family:inherit}
.form-submit:hover{background:#33CFFF}

/* ── 19. VIMEO MODAL ── */
.modal{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.94);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;padding:24px}
.modal.open{opacity:1;visibility:visible}
.modal-inner{width:100%;max-width:1020px;background:var(--black);border:1px solid var(--gray-line)}
.modal-header{display:flex;justify-content:space-between;align-items:flex-start;padding:18px 24px 14px;border-bottom:1px solid var(--gray-line)}
.modal-title{font-family:Georgia,serif;font-size:17px;font-style:italic;color:var(--white);max-width:70%}
.modal-meta{font-size:11px;color:var(--text-dim);margin-top:4px}
.modal-close{background:none;border:1px solid var(--gray-line);color:var(--text-dim);width:32px;height:32px;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color .2s,color .2s}
.modal-close:hover{border-color:var(--white);color:var(--white)}
.modal-video{position:relative;padding-bottom:56.25%;height:0}
.modal-video iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}
.modal-footer{padding:14px 24px;border-top:1px solid var(--gray-line);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.modal-vimeo{font-size:11px;color:var(--blue);text-decoration:none}
.modal-vimeo:hover{text-decoration:underline}

/* ── 20. RESPONSIVE ── */
@media(max-width:900px){
  nav{padding:0 24px}.nav-links{display:none}
  .hero{padding:120px 24px 60px}
  .container{padding:0 24px}
  .section{padding:var(--space-xl) 24px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr 1fr}
  .stat-row{grid-template-columns:1fr}
  .stat-block{border-right:none;border-bottom:1px solid var(--gray-line)}
  .stat-block:last-child{border-bottom:none}
  .pledge-strip{padding:48px 24px}
  .cta-section{padding:64px 24px}
  .photo-overlay{padding:28px 24px}
  footer{grid-template-columns:1fr 1fr;padding:36px 24px 24px;gap:28px}
  .form-box{padding:28px}
}
@media(max-width:560px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════
   HAMBURGER MENU — mobiel
   Werkt op alle pagina's die pixelthis-style.css laden.
   De nav-HTML heeft een .hamburger knop nodig (zie template.html).
   ══════════════════════════════════════════════════════════ */

/* Knop zelf */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  margin-left: auto;
  flex-shrink: 0;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--white);
  transition: transform 0.25s, opacity 0.2s;
  transform-origin: center;
}

/* Open-staat: X */
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobiel menu — schuift neer */
.mobile-menu {
  display: none;
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.97);
  z-index: 150;
  overflow-y: auto;
  padding: 32px 28px 60px;
  flex-direction: column;
  gap: 0;
  opacity: 0;
  pointer-events: none;        /* ← menu onderschept geen klikken als het dicht is */
  transform: translateY(-8px);
  transition: opacity 0.2s, transform 0.2s;
}
.mobile-menu.open {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}

/* Menu items */
.mob-item {
  display: block;
  padding: 18px 0;
  border-bottom: 1px solid var(--gray-line);
  font-size: 22px;
  font-family: Georgia, serif;
  font-weight: 400;
  color: var(--white);
  text-decoration: none;
  transition: color 0.2s;
}
.mob-item:hover { color: var(--blue); }
.mob-item.green { color: var(--green); }

/* Sub-items (portfolio, expertises etc) */
.mob-sub {
  display: block;
  padding: 12px 0 12px 16px;
  border-bottom: 1px solid var(--gray-line);
  font-size: 14px;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.2s;
}
.mob-sub:hover { color: var(--white); }
.mob-sub-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 24px 0 10px;
  display: block;
}

/* CTA in het menu */
.mob-cta {
  display: inline-block;
  margin-top: 32px;
  background: var(--blue);
  color: var(--black);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 28px;
  text-decoration: none;
}

@media (max-width: 900px) {
  .hamburger { display: flex; }
  .mobile-menu { display: flex; }
  /* desktop nav-links blijven hidden op mobiel */
  .nav-links { display: none !important; }
  .nav-cta { display: none; }
}