/* ================================
   Suykens Project Works — styles.css
   Opschoning: alle generieke nav-selectors verwijderd
   en vervangen door gescope’d .spw-* regels.
   ================================ */

/* ---------- Variabelen ---------- */
:root {
  /* Basiskleuren */
  --primary: #11172E;   /* Oxford blue */
  --accent:  #E2B345;   /* Gold */
  --accent2: #907338;   /* Golden brown */
  --light:   #f7f8fb;
  --text:    #11172E;

  /* Alias voor header/blokken (zelfde waarden) */
  --spw-blue:     var(--primary);
  --spw-blue-900: #0F152B; /* iets donkerder voor diepte */
  --spw-gold:     var(--accent);

  /* Schaduwen/overlays */
  --shadow-sm: 0 4px 10px rgba(0,0,0,.15);
  --shadow-md: 0 8px 24px rgba(0,0,0,.18);
  --shadow-lg: 0 14px 30px rgba(0,0,0,.28);
}

/* ---------- Reset & basics ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background-color: #ffffff;
  line-height: 1.6;
}

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

.container {
  width: min(1100px, 90%);
  margin: 0 auto;
}

/* Toegankelijkheids-utility */
.visually-hidden {
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 10px;
  font-weight: 800;
  text-decoration: none;
  transition: 0.25s ease;
  border: 0;
  cursor: pointer;
}

.btn:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--accent);
  color: var(--primary);
}
.btn-primary:hover { filter: brightness(1.06); }

.btn-outline {
  border: 2px solid currentColor;
  color: inherit;
  background: transparent;
}
.btn-outline:hover { background: rgba(0,0,0,0.08); }

.btn-gold {
  background: var(--spw-gold);
  color: var(--spw-blue);
}
.btn-gold:hover { filter: brightness(1.06); }

/* ======================================
   Header (gescope’d op .spw-*)
   ====================================== */
.spw-header {
  position: sticky; top: 0; z-index: 1000;
  background: var(--spw-blue-900);
  color: #fff;
  box-shadow: var(--shadow-md);
  border-bottom: 0; /* visuele lijn staat in accent-balk */
}
.spw-header__accent { height: 4px; background: var(--spw-gold); }

.spw-header__inner {
  max-width: 1200px; margin: 0 auto;
  padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

/* Brand */
.spw-brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:#fff; }
.spw-brand__logo {
  height: 48px; width:auto; border-radius: 10px;
  background:#fff; padding: 6px; box-shadow: var(--shadow-sm);
}
.spw-brand__name {
  font-weight: 900; letter-spacing:.6px; font-size: clamp(1rem, 1.2vw + .6rem, 1.25rem);
  text-wrap: balance;
}

/* Nav */
.spw-nav { position: relative; }
.spw-nav__list {
  list-style: none; display:flex; align-items:center; gap: 26px;
  margin: 0; padding: 0;
}
.spw-nav__list a {
  color:#fff; text-decoration:none; font-weight:800;
  position:relative; padding: 8px 0; display:inline-block;
}
.spw-nav__list a::after {
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px;
  background: var(--spw-gold); transform: scaleX(0); transform-origin:left; transition: .22s ease;
}
.spw-nav__list a:hover::after { transform: scaleX(1); }

/* Active link (JS zet .is-active) */
.spw-nav__list a.is-active::after { transform: scaleX(1); }

/* CTA item in nav */
.spw-nav__cta { margin-left: 6px; }

/* Toggle (hamburger) */
.spw-nav__toggle {
  display:none; width:44px; height:36px; border:0; background:transparent; cursor:pointer;
  align-items:center; justify-content:center; gap:4px;
}
.spw-nav__bar {
  display:block; width:22px; height:2px; background:#fff; border-radius:2px;
  transition: transform .18s ease, opacity .18s ease;
}
.spw-nav__toggle[aria-expanded="true"] .spw-nav__bar:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.spw-nav__toggle[aria-expanded="true"] .spw-nav__bar:nth-child(2) { opacity:0; }
.spw-nav__toggle[aria-expanded="true"] .spw-nav__bar:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }

/* Responsive nav */
@media (max-width: 900px) {
  .spw-nav__toggle { display:inline-flex; }
  .spw-nav__list {
    position:absolute; right:20px; top:calc(100% + 12px);
    background: var(--spw-blue);
    border:1px solid rgba(255,255,255,.08);
    box-shadow: var(--shadow-lg);
    border-radius: 12px; padding: 12px; min-width: 220px;
    display:none; flex-direction:column; align-items:flex-start; gap:10px;
  }
  .spw-nav__list.show { display:flex; }
  .spw-nav__list a::after { bottom:-2px; }
  .spw-nav__cta { width:100%; }
  .spw-nav__cta .btn { width:100%; text-align:center; }
}

/* ======================================
   Hero
   ====================================== */
.hero-logo {
  background: linear-gradient(180deg, var(--primary) 0%, #0a0f22 100%);
  color: white;
  text-align: center;
  padding: 100px 0 80px;
}

.hero-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.hero-big-logo {
  width: 180px;
  height: auto;
  margin-bottom: 10px;
  border-radius: 12px;
  border: 3px solid var(--accent);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.hero h1 {
  font-size: clamp(2rem, 3vw + 1rem, 3rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.hero p {
  max-width: 700px;
  font-size: 1.1rem;
  opacity: 0.95;
}

.hero-cta {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ======================================
   Secties
   ====================================== */
.section { padding: 70px 0; }

.section h2 {
  font-size: 2rem;
  font-weight: 900;
  margin-bottom: 16px;
  color: var(--primary);
  position: relative;
}
.section h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: var(--accent);
  margin-top: 6px;
}

.lead { font-size: 1.05rem; opacity: 0.9; max-width: 800px; }

.dark-section { background: var(--light); }

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

/* ======================================
   Feature cards
   ====================================== */
.features {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.feature-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  border-top: 5px solid var(--accent);
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
}
.feature-card h3 { color: var(--primary); margin-bottom: 10px; }
.feature-card p  { color: #444; }

/* ======================================
   Projecten grid/kaart
   ====================================== */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.project-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #ddd;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}
.project-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.project-card .content { padding: 16px; }
.project-card h3 { font-size: 1.1rem; color: var(--primary); margin-bottom: 6px; }
.project-card p  { font-size: 0.95rem; color: #555; }

.actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px 16px;
}
.tag {
  background: var(--accent);
  color: var(--primary);
  font-weight: 800;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
}

/* ======================================
   Project detail
   ====================================== */
.project-image {
  border-radius: 16px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

.two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.two-cols ul { list-style: none; padding-left: 0; }
.two-cols li::before { content: "• "; color: var(--accent); }

@media (max-width: 800px) {
  .two-cols { grid-template-columns: 1fr; }
}

/* ======================================
   Contact & formulier
   ====================================== */
.contact-section { background: var(--primary); color: #fff; }

.contact-wrap {
  display: grid;
  grid-template-columns: 1.4fr .9fr;
  gap: 28px;
}
@media (max-width: 980px) {
  .contact-wrap { grid-template-columns: 1fr; }
}

.contact-card, .contact-info .info-card, .map-card {
  background: #0F152B;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow-md);
}
.contact-card h2 { color:#fff; }
.contact-card .lead { color:#EAEAF0; }

/* compacter formulier */
.form-compact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
.form-compact .full { grid-column: 1 / -1; }
@media (max-width: 680px){ .form-compact { grid-template-columns: 1fr; } }

.field label { display:block; font-weight:800; margin-bottom:6px; color:#fff; }
.field .req { color: var(--accent); margin-left: 4px; }

.field input, .field textarea, input, textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #fff;
  font: inherit;
}
.field input::placeholder, .field textarea::placeholder { color: #cdd3ff7a; }

.field input:focus, .field textarea:focus, input:focus, textarea:focus {
  outline: 0; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(226,179,69,.25);
  background: rgba(255,255,255,.10);
}

.field .msg {
  display:none; margin-top:6px; font-size:.9rem; color:#ffd4a1;
}
.field.invalid .msg { display:block; }
.field.invalid input, .field.invalid textarea { border-color: #ffb37a; }

.form { /* generieke form grid (licht thema pagina's) */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
textarea { min-height: 140px; }
button.btn {
  grid-column: 1 / -1;
  justify-self: center;
  padding: 14px 28px;
}

/* Alerts */
.alert {
  border-radius: 12px; padding: 10px 12px; margin: 10px 0;
  font-weight: 700;
}
.alert.success { background: rgba(60,179,113,.18); border:1px solid rgba(60,179,113,.5); color:#d6ffe9; }
.alert.error   { background: rgba(220,20,60,.18);  border:1px solid rgba(220,20,60,.5);  color:#ffd7df; }

/* Info kolom */
.info-card h3 { color:#fff; margin-bottom:8px; }
.info-list { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.info-list li { display:flex; gap:10px; align-items:flex-start; }
.info-list a { color:#fff; text-decoration: underline; }
.info-list a:hover { color: var(--accent); }

/* Map */
.map-card iframe { width:100%; height:260px; border:0; border-radius: 10px; }

/* ======================================
   Footer
   ====================================== */
footer {
  background: var(--primary);
  color: white;
  text-align: center;
  padding: 30px 0;
  border-top: 3px solid var(--accent);
}
.footer-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
footer img {
  height: 40px;
  border-radius: 8px;
  border: 2px solid var(--accent);
}

/* Switch boven formulier */
.form-switch {
  display: inline-flex;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: 4px;
  margin: 12px 0 10px;
}
.form-switch .seg {
  appearance: none;
  background: transparent;
  color: #fff;
  border: 0;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 800;
  cursor: pointer;
}
.form-switch .seg.active {
  background: var(--spw-gold);
  color: var(--spw-blue);
}

/* Verborgen / utilities */
.hidden { display: none !important; }
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Consent/checkbox rij netjes uitlijnen */
.consent {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: center;     /* verticaal gecentreerd */
  margin-top: 6px;
}

.consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--spw-gold); /* mooi goud vinkje */
}

.consent label {
  line-height: 1.5;
  user-select: none;
}

/* kleine helper voor fouttoestand */
.field.invalid .consent label { color: #ffd4a1; }

/* ===== Selects dezelfde look als inputs ===== */
.field select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  padding: 12px 42px 12px 14px;   /* ruimte rechts voor pijl */
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background-color: rgba(255,255,255,.06);
  color: #fff;
  font: inherit;
  line-height: 1.4;
}

/* eigen pijl rechts (goud) */
.field select {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23E2B345' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
}

/* hover/focus exact zoals inputs */
.field select:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(226,179,69,.25);
  background-color: rgba(255,255,255,.10);
}

/* disabled/placeholder tint */
.field select:disabled { opacity: .6; cursor: not-allowed; }
/* toon placeholderkleur op required + lege value */
.field select:required:invalid { color: #cdd3ff7a; }

/* Safari/Chrome datum/maand picker-icoon zichtbaar op dark */
input[type="month"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(.8);
}

/* Zorg dat grid-cellen niet duwen op small screens */
.form-compact .field { min-width: 0; }

/* Zorg dat opties in het geopende menu donkere tekst hebben op de lichte achtergrond */
.field select option {
  color: #11172E;                 /* donkerblauw uit je palette */
  background-color: #ffffff;      /* wit menu */
}

/* Placeholder/disabled optie lichter tonen */
.field select option[disabled],
.field select option[value=""] {
  color: #A7AFC8;                 /* subtiele grijs */
}

/* (Optioneel) geselecteerde optie in het menu iets markeren */
.field select option:checked {
  background-color: #F3E5C4;      /* zacht goudachtig */
  color: #11172E;
}

/* ====== Locale switch rechtsboven ====== */
.locale-switch {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: 16px;              /* klein beetje ruimte t.o.v. de nav */
}

.locale-btn {
  appearance: none;
  border: 1px solid rgba(255,255,255,.25);
  background: transparent;
  color: #fff;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .3px;
  cursor: pointer;
  line-height: 1;
}

.locale-btn:hover { filter: brightness(1.1); }
.locale-btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset: 2px;
}

/* Actieve taal */
.locale-btn[aria-pressed="true"] {
  background: var(--spw-gold);
  color: var(--spw-blue);
  border-color: transparent;
}

/* Zorgt dat de switch naast het menu kan staan */
.spw-header__tools {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Mobiel: zet de switch onder de toggle voor consistentie */
@media (max-width: 900px) {
  .spw-header__tools {
    gap: 10px;
  }
}

/* Hero tekst = exact 2 regels op brede schermen */
.hero-text .hero-line { white-space: nowrap; }

/* Op small screens weer normale wrapping om overloop te vermijden */
@media (max-width: 700px) {
  .hero-text .hero-line { white-space: normal; }
}

.hero-text { max-width: 900px; }

/* --- Foto upload --- */
.spw-dropzone {
  border: 1px dashed rgba(255,255,255,.35);
  background: rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
  cursor: pointer;
  transition: .2s ease;
}
.spw-dropzone:hover { background: rgba(255,255,255,.10); }
.spw-dropzone.is-dragover { background: rgba(226,179,69,.18); border-color: var(--spw-gold); }

.spw-dropzone .dz-help {
  margin: 0 0 6px;
  color: #EAEAF0;
}
.spw-dropzone .dz-meta {
  margin: 0;
  font-size: .9rem;
  opacity: .9;
}

.spw-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.spw-thumb {
  position: relative;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 1/1;
}
.spw-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.spw-thumb .spw-remove {
  position: absolute; top: 6px; right: 6px;
  border: 0; border-radius: 999px;
  padding: 4px 8px; line-height: 1; cursor: pointer;
  background: rgba(15,21,43,.85);
  color: #fff; font-weight: 900; font-size: .8rem;
}
.spw-thumb .spw-remove:hover { filter: brightness(1.1); }

/* Kleine verbetering voor .btn in dropzone */
.spw-dropzone .btn { padding: 6px 10px; border-radius: 8px; }

/* --- Footer credit --- */
.footer-flex p { margin: 0; }

footer small {
  display: block;
  margin-top: 6px;
  font-size: 0.9rem;
  opacity: .85;                 /* iets subtieler dan hoofdtekst */
}

footer a {
  color: var(--spw-gold);       /* mooi goud accent */
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: .2s ease;
}

footer a:hover,
footer a:focus-visible {
  border-bottom-color: currentColor;
  filter: brightness(1.08);
  outline: none;                /* we gebruiken de border als hint */
}

/* optie: logo iets subtieler in de footer */
footer img {
  opacity: .95;
  transition: .2s ease;
}
footer img:hover { opacity: 1; }

/* 3-koloms footer: L = copy, M = credit, R = logo */
.footer-3col{
  display: grid;                       /* overschrijft eerdere flex */
  grid-template-columns: 1fr auto 1fr; /* midden compact, links/rechts flexibel */
  align-items: center;
  gap: 12px;
}

.footer-3col .footer-copy{
  justify-self: start;
  text-align: left;
  margin: 0;
}

.footer-3col .footer-credit{
  justify-self: center;
  text-align: center;
  margin: 0;
  opacity: .9;
  font-size: 0.95rem;
}

.footer-3col .footer-logo{
  justify-self: end;
  height: 40px;
  border-radius: 8px;
  border: 2px solid var(--spw-gold);
}

/* linkstijl blijft subtiel */
footer a{
  color: var(--spw-gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: .2s ease;
}
footer a:hover,
footer a:focus-visible{ border-bottom-color: currentColor; }

/* Responsief: onder elkaar en gecentreerd */
@media (max-width: 700px){
  .footer-3col{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer-3col .footer-copy,
  .footer-3col .footer-credit,
  .footer-3col .footer-logo{
    justify-self: center;
  }
}


/* Hoofdafbeelding: volledige foto tonen, niet croppen */
.project-image--fit {
  display: block;
  max-width: 100%;
  max-height: 380px;     /* pas aan naar smaak */
  width: auto;           /* behoud verhouding */
  height: auto;          /* behoud verhouding */
  object-fit: contain;   /* toon volledige image, geen uitsnede */
  background: #fff;      /* optioneel: canvas achter de foto */
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 4px;          /* klein kader rond volledige foto */
  margin: 0 auto 20px;   /* centreer en geef ondermarge */
}

/* Desktop iets compacter */
@media (min-width: 900px) {
  .project-image--fit { max-height: 340px; }
}

/* Mobiel wat ruimer */
@media (max-width: 600px) {
  .project-image--fit { max-height: 300px; }
}

/* Container centreert de image */
.project-media {
  display: flex;
  justify-content: center;
  margin: 18px auto 32px;
}

/* Basis: toon hele foto, geen uitsnede */
.project-image {
  display: block;
  width: auto;              /* behoud originele verhouding */
  height: auto;             /* behoud originele verhouding */
  max-width: min(100%, 1100px);
  max-height: clamp(260px, 58vh, 640px);  /* adaptief t.o.v. viewport */
  object-fit: contain;
  object-position: center;
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  background: #fff;
}

/* Landscape: breder, iets lagere max-hoogte voor balans */
.project-image.is-landscape {
  max-width: min(100%, 1100px);
  max-height: clamp(240px, 56vh, 600px);
}

/* Portrait: smaller max-breedte, mag hoger voor minder witruimte */
.project-image.is-portrait {
  max-width: min(100%, 780px);
  max-height: clamp(320px, 70vh, 840px);
}

/* Mobile: iets ruimer in hoogte */
@media (max-width: 600px) {
  .project-image {
    max-height: clamp(240px, 62vh, 680px);
    border-radius: 12px;
  }
}


/* === EXTRA: project-galerij en lightbox === */

/* Galerij raster */
.project-gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(10px, 2vw, 16px);
  margin-top: 2rem;
}

.project-gallery .pg-item {
  grid-column: span 6; /* 2 kolommen op mobiel */
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  cursor: zoom-in;
  padding: 0;
  border: 0;
  background: transparent;
}

@media (min-width: 768px) {
  .project-gallery .pg-item { grid-column: span 4; } /* 3 kolommen */
}
@media (min-width: 1200px) {
  .project-gallery .pg-item { grid-column: span 3; } /* 4 kolommen */
}

.project-gallery img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}

.project-gallery .pg-item:hover img {
  transform: scale(1.03);
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  z-index: 9999;
}

.lightbox[aria-hidden="false"] {
  display: grid;
}

.lb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.8);
  backdrop-filter: blur(2px);
  z-index: 1;
}

.lb-image {
  position: relative;
  z-index: 2; /* Zorgt dat de foto boven de backdrop komt */
  max-width: min(92vw, 1400px);
  max-height: 86vh;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.4);
}


.lb-image {
  position: relative;
  max-width: min(92vw, 1400px);
  max-height: 86vh;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.4);
}

.lb-close,
.lb-prev,
.lb-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: rgba(255,255,255,.15);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  backdrop-filter: blur(2px);
}

.lb-close {
  top: 20px;
  right: 20px;
  transform: none;
  background: rgba(0,0,0,.5);
  font-size: 24px;
  line-height: 1;
}

.lb-prev { left: 20px; font-size: 22px; }
.lb-next { right: 20px; font-size: 22px; }

.lb-close:hover,
.lb-prev:hover,
.lb-next:hover {
  background: rgba(255,255,255,.25);
}













/* ================================
   Suykens Project Works — styles.css
   Opschoning: alle generieke nav-selectors verwijderd
   en vervangen door gescope’d .spw-* regels.
   ================================ */

/* ---------- Variabelen ---------- */
:root {
  /* Basiskleuren */
  --primary: #11172E;   /* Oxford blue */
  --accent:  #E2B345;   /* Gold */
  --accent2: #907338;   /* Golden brown */
  --light:   #f7f8fb;
  --text:    #11172E;

  /* Alias voor header/blokken (zelfde waarden) */
  --spw-blue:     var(--primary);
  --spw-blue-900: #0F152B; /* iets donkerder voor diepte */
  --spw-gold:     var(--accent);

  /* Schaduwen/overlays */
  --shadow-sm: 0 4px 10px rgba(0,0,0,.15);
  --shadow-md: 0 8px 24px rgba(0,0,0,.18);
  --shadow-lg: 0 14px 30px rgba(0,0,0,.28);
}

/* ---------- Reset & basics ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background-color: #ffffff;
  line-height: 1.6;
}

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

.container {
  width: min(1100px, 90%);
  margin: 0 auto;
}

/* Toegankelijkheids-utility */
.visually-hidden {
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 10px;
  font-weight: 800;
  text-decoration: none;
  transition: 0.25s ease;
  border: 0;
  cursor: pointer;
}

.btn:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--accent);
  color: var(--primary);
}
.btn-primary:hover { filter: brightness(1.06); }

.btn-outline {
  border: 2px solid currentColor;
  color: inherit;
  background: transparent;
}
.btn-outline:hover { background: rgba(0,0,0,0.08); }

.btn-gold {
  background: var(--spw-gold);
  color: var(--spw-blue);
}
.btn-gold:hover { filter: brightness(1.06); }

/* ======================================
   Header (gescope’d op .spw-*)
   ====================================== */
.spw-header {
  position: sticky; top: 0; z-index: 1000;
  background: var(--spw-blue-900);
  color: #fff;
  box-shadow: var(--shadow-md);
  border-bottom: 0; /* visuele lijn staat in accent-balk */
}
.spw-header__accent { height: 4px; background: var(--spw-gold); }

.spw-header__inner {
  max-width: 1200px; margin: 0 auto;
  padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

/* Brand */
.spw-brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:#fff; }
.spw-brand__logo {
  height: 48px; width:auto; border-radius: 10px;
  background:#fff; padding: 6px; box-shadow: var(--shadow-sm);
}
.spw-brand__name {
  font-weight: 900; letter-spacing:.6px; font-size: clamp(1rem, 1.2vw + .6rem, 1.25rem);
  text-wrap: balance;
}

/* Nav */
.spw-nav { position: relative; }
.spw-nav__list {
  list-style: none; display:flex; align-items:center; gap: 26px;
  margin: 0; padding: 0;
}
.spw-nav__list a {
  color:#fff; text-decoration:none; font-weight:800;
  position:relative; padding: 8px 0; display:inline-block;
}
.spw-nav__list a::after {
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px;
  background: var(--spw-gold); transform: scaleX(0); transform-origin:left; transition: .22s ease;
}
.spw-nav__list a:hover::after { transform: scaleX(1); }

/* Active link (JS zet .is-active) */
.spw-nav__list a.is-active::after { transform: scaleX(1); }

/* CTA item in nav */
.spw-nav__cta { margin-left: 6px; }

/* Toggle (hamburger) */
.spw-nav__toggle {
  display:none; width:44px; height:36px; border:0; background:transparent; cursor:pointer;
  align-items:center; justify-content:center; gap:4px;
}
.spw-nav__bar {
  display:block; width:22px; height:2px; background:#fff; border-radius:2px;
  transition: transform .18s ease, opacity .18s ease;
}
.spw-nav__toggle[aria-expanded="true"] .spw-nav__bar:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.spw-nav__toggle[aria-expanded="true"] .spw-nav__bar:nth-child(2) { opacity:0; }
.spw-nav__toggle[aria-expanded="true"] .spw-nav__bar:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }

/* Responsive nav */
@media (max-width: 900px) {
  .spw-nav__toggle { display:inline-flex; }
  .spw-nav__list {
    position:absolute; right:20px; top:calc(100% + 12px);
    background: var(--spw-blue);
    border:1px solid rgba(255,255,255,.08);
    box-shadow: var(--shadow-lg);
    border-radius: 12px; padding: 12px; min-width: 220px;
    display:none; flex-direction:column; align-items:flex-start; gap:10px;
  }
  .spw-nav__list.show { display:flex; }
  .spw-nav__list a::after { bottom:-2px; }
  .spw-nav__cta { width:100%; }
  .spw-nav__cta .btn { width:100%; text-align:center; }
}

/* ======================================
   Hero
   ====================================== */
.hero-logo {
  background: linear-gradient(180deg, var(--primary) 0%, #0a0f22 100%);
  color: white;
  text-align: center;
  padding: 100px 0 80px;
}

.hero-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.hero-big-logo {
  width: 180px;
  height: auto;
  margin-bottom: 10px;
  border-radius: 12px;
  border: 3px solid var(--accent);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.hero h1 {
  font-size: clamp(2rem, 3vw + 1rem, 3rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.hero p {
  max-width: 700px;
  font-size: 1.1rem;
  opacity: 0.95;
}

.hero-cta {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ======================================
   Secties
   ====================================== */
.section { padding: 70px 0; }

.section h2 {
  font-size: 2rem;
  font-weight: 900;
  margin-bottom: 16px;
  color: var(--primary);
  position: relative;
}
.section h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: var(--accent);
  margin-top: 6px;
}

.lead { font-size: 1.05rem; opacity: 0.9; max-width: 800px; }

.dark-section { background: var(--light); }

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

/* ======================================
   Feature cards
   ====================================== */
.features {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.feature-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  border-top: 5px solid var(--accent);
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
}
.feature-card h3 { color: var(--primary); margin-bottom: 10px; }
.feature-card p  { color: #444; }

/* ======================================
   Projecten grid/kaart
   ====================================== */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.project-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #ddd;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}
.project-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.project-card .content { padding: 16px; }
.project-card h3 { font-size: 1.1rem; color: var(--primary); margin-bottom: 6px; }
.project-card p  { font-size: 0.95rem; color: #555; }

.actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px 16px;
}
.tag {
  background: var(--accent);
  color: var(--primary);
  font-weight: 800;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
}

/* ======================================
   Project detail
   ====================================== */
.project-image {
  border-radius: 16px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

.two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.two-cols ul { list-style: none; padding-left: 0; }
.two-cols li::before { content: "• "; color: var(--accent); }

@media (max-width: 800px) {
  .two-cols { grid-template-columns: 1fr; }
}

/* ======================================
   Contact & formulier
   ====================================== */
.contact-section { background: var(--primary); color: #fff; }

.contact-wrap {
  display: grid;
  grid-template-columns: 1.4fr .9fr;
  gap: 28px;
}
@media (max-width: 980px) {
  .contact-wrap { grid-template-columns: 1fr; }
}

.contact-card, .contact-info .info-card, .map-card {
  background: #0F152B;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow-md);
}
.contact-card h2 { color:#fff; }
.contact-card .lead { color:#EAEAF0; }

/* compacter formulier */
.form-compact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
.form-compact .full { grid-column: 1 / -1; }
@media (max-width: 680px){ .form-compact { grid-template-columns: 1fr; } }

.field label { display:block; font-weight:800; margin-bottom:6px; color:#fff; }
.field .req { color: var(--accent); margin-left: 4px; }

.field input, .field textarea, input, textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #fff;
  font: inherit;
}
.field input::placeholder, .field textarea::placeholder { color: #cdd3ff7a; }

.field input:focus, .field textarea:focus, input:focus, textarea:focus {
  outline: 0; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(226,179,69,.25);
  background: rgba(255,255,255,.10);
}

.field .msg {
  display:none; margin-top:6px; font-size:.9rem; color:#ffd4a1;
}
.field.invalid .msg { display:block; }
.field.invalid input, .field.invalid textarea { border-color: #ffb37a; }

.form { /* generieke form grid (licht thema pagina's) */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
textarea { min-height: 140px; }
button.btn {
  grid-column: 1 / -1;
  justify-self: center;
  padding: 14px 28px;
}

/* Alerts */
.alert {
  border-radius: 12px; padding: 10px 12px; margin: 10px 0;
  font-weight: 700;
}
.alert.success { background: rgba(60,179,113,.18); border:1px solid rgba(60,179,113,.5); color:#d6ffe9; }
.alert.error   { background: rgba(220,20,60,.18);  border:1px solid rgba(220,20,60,.5);  color:#ffd7df; }

/* Info kolom */
.info-card h3 { color:#fff; margin-bottom:8px; }
.info-list { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.info-list li { display:flex; gap:10px; align-items:flex-start; }
.info-list a { color:#fff; text-decoration: underline; }
.info-list a:hover { color: var(--accent); }

/* Map */
.map-card iframe { width:100%; height:260px; border:0; border-radius: 10px; }

/* ======================================
   Footer
   ====================================== */
footer {
  background: var(--primary);
  color: white;
  text-align: center;
  padding: 30px 0;
  border-top: 3px solid var(--accent);
}
.footer-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
footer img {
  height: 40px;
  border-radius: 8px;
  border: 2px solid var(--accent);
}

/* Switch boven formulier */
.form-switch {
  display: inline-flex;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: 4px;
  margin: 12px 0 10px;
}
.form-switch .seg {
  appearance: none;
  background: transparent;
  color: #fff;
  border: 0;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 800;
  cursor: pointer;
}
.form-switch .seg.active {
  background: var(--spw-gold);
  color: var(--spw-blue);
}

/* Verborgen / utilities */
.hidden { display: none !important; }
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Consent/checkbox rij netjes uitlijnen */
.consent {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: center;     /* verticaal gecentreerd */
  margin-top: 6px;
}

.consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--spw-gold); /* mooi goud vinkje */
}

.consent label {
  line-height: 1.5;
  user-select: none;
}

/* kleine helper voor fouttoestand */
.field.invalid .consent label { color: #ffd4a1; }

/* ===== Selects dezelfde look als inputs ===== */
.field select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  padding: 12px 42px 12px 14px;   /* ruimte rechts voor pijl */
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background-color: rgba(255,255,255,.06);
  color: #fff;
  font: inherit;
  line-height: 1.4;
}

/* eigen pijl rechts (goud) */
.field select {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23E2B345' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
}

/* hover/focus exact zoals inputs */
.field select:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(226,179,69,.25);
  background-color: rgba(255,255,255,.10);
}

/* disabled/placeholder tint */
.field select:disabled { opacity: .6; cursor: not-allowed; }
/* toon placeholderkleur op required + lege value */
.field select:required:invalid { color: #cdd3ff7a; }

/* Safari/Chrome datum/maand picker-icoon zichtbaar op dark */
input[type="month"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(.8);
}

/* Zorg dat grid-cellen niet duwen op small screens */
.form-compact .field { min-width: 0; }

/* Zorg dat opties in het geopende menu donkere tekst hebben op de lichte achtergrond */
.field select option {
  color: #11172E;                 /* donkerblauw uit je palette */
  background-color: #ffffff;      /* wit menu */
}

/* Placeholder/disabled optie lichter tonen */
.field select option[disabled],
.field select option[value=""] {
  color: #A7AFC8;                 /* subtiele grijs */
}

/* (Optioneel) geselecteerde optie in het menu iets markeren */
.field select option:checked {
  background-color: #F3E5C4;      /* zacht goudachtig */
  color: #11172E;
}

/* ====== Locale switch rechtsboven ====== */
.locale-switch {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: 16px;              /* klein beetje ruimte t.o.v. de nav */
}

.locale-btn {
  appearance: none;
  border: 1px solid rgba(255,255,255,.25);
  background: transparent;
  color: #fff;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .3px;
  cursor: pointer;
  line-height: 1;
}

.locale-btn:hover { filter: brightness(1.1); }
.locale-btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset: 2px;
}

/* Actieve taal */
.locale-btn[aria-pressed="true"] {
  background: var(--spw-gold);
  color: var(--spw-blue);
  border-color: transparent;
}

/* Zorgt dat de switch naast het menu kan staan */
.spw-header__tools {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Mobiel: zet de switch onder de toggle voor consistentie */
@media (max-width: 900px) {
  .spw-header__tools {
    gap: 10px;
  }
}

/* Hero tekst = exact 2 regels op brede schermen */
.hero-text .hero-line { white-space: nowrap; }

/* Op small screens weer normale wrapping om overloop te vermijden */
@media (max-width: 700px) {
  .hero-text .hero-line { white-space: normal; }
}

.hero-text { max-width: 900px; }

/* --- Foto upload --- */
.spw-dropzone {
  border: 1px dashed rgba(255,255,255,.35);
  background: rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
  cursor: pointer;
  transition: .2s ease;
}
.spw-dropzone:hover { background: rgba(255,255,255,.10); }
.spw-dropzone.is-dragover { background: rgba(226,179,69,.18); border-color: var(--spw-gold); }

.spw-dropzone .dz-help {
  margin: 0 0 6px;
  color: #EAEAF0;
}
.spw-dropzone .dz-meta {
  margin: 0;
  font-size: .9rem;
  opacity: .9;
}

.spw-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.spw-thumb {
  position: relative;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 1/1;
}
.spw-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.spw-thumb .spw-remove {
  position: absolute; top: 6px; right: 6px;
  border: 0; border-radius: 999px;
  padding: 4px 8px; line-height: 1; cursor: pointer;
  background: rgba(15,21,43,.85);
  color: #fff; font-weight: 900; font-size: .8rem;
}
.spw-thumb .spw-remove:hover { filter: brightness(1.1); }

/* Kleine verbetering voor .btn in dropzone */
.spw-dropzone .btn { padding: 6px 10px; border-radius: 8px; }

/* --- Footer credit --- */
.footer-flex p { margin: 0; }

footer small {
  display: block;
  margin-top: 6px;
  font-size: 0.9rem;
  opacity: .85;                 /* iets subtieler dan hoofdtekst */
}

footer a {
  color: var(--spw-gold);       /* mooi goud accent */
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: .2s ease;
}

footer a:hover,
footer a:focus-visible {
  border-bottom-color: currentColor;
  filter: brightness(1.08);
  outline: none;                /* we gebruiken de border als hint */
}

/* optie: logo iets subtieler in de footer */
footer img {
  opacity: .95;
  transition: .2s ease;
}
footer img:hover { opacity: 1; }

/* 3-koloms footer: L = copy, M = credit, R = logo */
.footer-3col{
  display: grid;                       /* overschrijft eerdere flex */
  grid-template-columns: 1fr auto 1fr; /* midden compact, links/rechts flexibel */
  align-items: center;
  gap: 12px;
}

.footer-3col .footer-copy{
  justify-self: start;
  text-align: left;
  margin: 0;
}

.footer-3col .footer-credit{
  justify-self: center;
  text-align: center;
  margin: 0;
  opacity: .9;
  font-size: 0.95rem;
}

.footer-3col .footer-logo{
  justify-self: end;
  height: 40px;
  border-radius: 8px;
  border: 2px solid var(--spw-gold);
}

/* linkstijl blijft subtiel */
footer a{
  color: var(--spw-gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: .2s ease;
}
footer a:hover,
footer a:focus-visible{ border-bottom-color: currentColor; }

/* Responsief: onder elkaar en gecentreerd */
@media (max-width: 700px){
  .footer-3col{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer-3col .footer-copy,
  .footer-3col .footer-credit,
  .footer-3col .footer-logo{
    justify-self: center;
  }
}


/* Hoofdafbeelding: volledige foto tonen, niet croppen */
.project-image--fit {
  display: block;
  max-width: 100%;
  max-height: 380px;     /* pas aan naar smaak */
  width: auto;           /* behoud verhouding */
  height: auto;          /* behoud verhouding */
  object-fit: contain;   /* toon volledige image, geen uitsnede */
  background: #fff;      /* optioneel: canvas achter de foto */
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 4px;          /* klein kader rond volledige foto */
  margin: 0 auto 20px;   /* centreer en geef ondermarge */
}

/* Desktop iets compacter */
@media (min-width: 900px) {
  .project-image--fit { max-height: 340px; }
}

/* Mobiel wat ruimer */
@media (max-width: 600px) {
  .project-image--fit { max-height: 300px; }
}

/* Container centreert de image */
.project-media {
  display: flex;
  justify-content: center;
  margin: 18px auto 32px;
}

/* Basis: toon hele foto, geen uitsnede */
.project-image {
  display: block;
  width: auto;              /* behoud originele verhouding */
  height: auto;             /* behoud originele verhouding */
  max-width: min(100%, 1100px);
  max-height: clamp(260px, 58vh, 640px);  /* adaptief t.o.v. viewport */
  object-fit: contain;
  object-position: center;
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  background: #fff;
}

/* Landscape: breder, iets lagere max-hoogte voor balans */
.project-image.is-landscape {
  max-width: min(100%, 1100px);
  max-height: clamp(240px, 56vh, 600px);
}

/* Portrait: smaller max-breedte, mag hoger voor minder witruimte */
.project-image.is-portrait {
  max-width: min(100%, 780px);
  max-height: clamp(320px, 70vh, 840px);
}

/* Mobile: iets ruimer in hoogte */
@media (max-width: 600px) {
  .project-image {
    max-height: clamp(240px, 62vh, 680px);
    border-radius: 12px;
  }
}


/* === EXTRA: project-galerij en lightbox === */

/* Galerij raster */
.project-gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(10px, 2vw, 16px);
  margin-top: 2rem;
}

.project-gallery .pg-item {
  grid-column: span 6; /* 2 kolommen op mobiel */
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  cursor: zoom-in;
  padding: 0;
  border: 0;
  background: transparent;
}

@media (min-width: 768px) {
  .project-gallery .pg-item { grid-column: span 4; } /* 3 kolommen */
}
@media (min-width: 1200px) {
  .project-gallery .pg-item { grid-column: span 3; } /* 4 kolommen */
}

.project-gallery img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}

.project-gallery .pg-item:hover img {
  transform: scale(1.03);
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  z-index: 9999;
}

.lightbox[aria-hidden="false"] {
  display: grid;
}

.lb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.8);
  backdrop-filter: blur(2px);
  z-index: 1;
}

.lb-image {
  position: relative;
  z-index: 2; /* Zorgt dat de foto boven de backdrop komt */
  max-width: min(92vw, 1400px);
  max-height: 86vh;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.4);
}


.lb-image {
  position: relative;
  max-width: min(92vw, 1400px);
  max-height: 86vh;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.4);
}

.lb-close,
.lb-prev,
.lb-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: rgba(255,255,255,.15);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  backdrop-filter: blur(2px);
}

.lb-close {
  top: 20px;
  right: 20px;
  transform: none;
  background: rgba(0,0,0,.5);
  font-size: 24px;
  line-height: 1;
}

.lb-prev { left: 20px; font-size: 22px; }
.lb-next { right: 20px; font-size: 22px; }

.lb-close:hover,
.lb-prev:hover,
.lb-next:hover {
  background: rgba(255,255,255,.25);
}













/* ================================
   Suykens Project Works — styles.css
   Opschoning: alle generieke nav-selectors verwijderd
   en vervangen door gescope’d .spw-* regels.
   ================================ */

/* ---------- Variabelen ---------- */
:root {
  /* Basiskleuren */
  --primary: #11172E;   /* Oxford blue */
  --accent:  #E2B345;   /* Gold */
  --accent2: #907338;   /* Golden brown */
  --light:   #f7f8fb;
  --text:    #11172E;

  /* Alias voor header/blokken (zelfde waarden) */
  --spw-blue:     var(--primary);
  --spw-blue-900: #0F152B; /* iets donkerder voor diepte */
  --spw-gold:     var(--accent);

  /* Schaduwen/overlays */
  --shadow-sm: 0 4px 10px rgba(0,0,0,.15);
  --shadow-md: 0 8px 24px rgba(0,0,0,.18);
  --shadow-lg: 0 14px 30px rgba(0,0,0,.28);
}

/* ---------- Reset & basics ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background-color: #ffffff;
  line-height: 1.6;
}

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

.container {
  width: min(1100px, 90%);
  margin: 0 auto;
}

/* Toegankelijkheids-utility */
.visually-hidden {
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 10px;
  font-weight: 800;
  text-decoration: none;
  transition: 0.25s ease;
  border: 0;
  cursor: pointer;
}

.btn:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--accent);
  color: var(--primary);
}
.btn-primary:hover { filter: brightness(1.06); }

.btn-outline {
  border: 2px solid currentColor;
  color: inherit;
  background: transparent;
}
.btn-outline:hover { background: rgba(0,0,0,0.08); }

.btn-gold {
  background: var(--spw-gold);
  color: var(--spw-blue);
}
.btn-gold:hover { filter: brightness(1.06); }

/* ======================================
   Header (gescope’d op .spw-*)
   ====================================== */
.spw-header {
  position: sticky; top: 0; z-index: 1000;
  background: var(--spw-blue-900);
  color: #fff;
  box-shadow: var(--shadow-md);
  border-bottom: 0; /* visuele lijn staat in accent-balk */
}
.spw-header__accent { height: 4px; background: var(--spw-gold); }

.spw-header__inner {
  max-width: 1200px; margin: 0 auto;
  padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

/* Brand */
.spw-brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:#fff; }
.spw-brand__logo {
  height: 48px; width:auto; border-radius: 10px;
  background:#fff; padding: 6px; box-shadow: var(--shadow-sm);
}
.spw-brand__name {
  font-weight: 900; letter-spacing:.6px; font-size: clamp(1rem, 1.2vw + .6rem, 1.25rem);
  text-wrap: balance;
}

/* Nav */
.spw-nav { position: relative; }
.spw-nav__list {
  list-style: none; display:flex; align-items:center; gap: 26px;
  margin: 0; padding: 0;
}
.spw-nav__list a {
  color:#fff; text-decoration:none; font-weight:800;
  position:relative; padding: 8px 0; display:inline-block;
}
.spw-nav__list a::after {
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px;
  background: var(--spw-gold); transform: scaleX(0); transform-origin:left; transition: .22s ease;
}
.spw-nav__list a:hover::after { transform: scaleX(1); }

/* Active link (JS zet .is-active) */
.spw-nav__list a.is-active::after { transform: scaleX(1); }

/* CTA item in nav */
.spw-nav__cta { margin-left: 6px; }

/* Toggle (hamburger) */
.spw-nav__toggle {
  display:none; width:44px; height:36px; border:0; background:transparent; cursor:pointer;
  align-items:center; justify-content:center; gap:4px;
}
.spw-nav__bar {
  display:block; width:22px; height:2px; background:#fff; border-radius:2px;
  transition: transform .18s ease, opacity .18s ease;
}
.spw-nav__toggle[aria-expanded="true"] .spw-nav__bar:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.spw-nav__toggle[aria-expanded="true"] .spw-nav__bar:nth-child(2) { opacity:0; }
.spw-nav__toggle[aria-expanded="true"] .spw-nav__bar:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }

/* Responsive nav */
@media (max-width: 900px) {
  .spw-nav__toggle { display:inline-flex; }
  .spw-nav__list {
    position:absolute; right:20px; top:calc(100% + 12px);
    background: var(--spw-blue);
    border:1px solid rgba(255,255,255,.08);
    box-shadow: var(--shadow-lg);
    border-radius: 12px; padding: 12px; min-width: 220px;
    display:none; flex-direction:column; align-items:flex-start; gap:10px;
  }
  .spw-nav__list.show { display:flex; }
  .spw-nav__list a::after { bottom:-2px; }
  .spw-nav__cta { width:100%; }
  .spw-nav__cta .btn { width:100%; text-align:center; }
}

/* ======================================
   Hero
   ====================================== */
.hero-logo {
  background: linear-gradient(180deg, var(--primary) 0%, #0a0f22 100%);
  color: white;
  text-align: center;
  padding: 100px 0 80px;
}

.hero-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.hero-big-logo {
  width: 180px;
  height: auto;
  margin-bottom: 10px;
  border-radius: 12px;
  border: 3px solid var(--accent);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.hero h1 {
  font-size: clamp(2rem, 3vw + 1rem, 3rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.hero p {
  max-width: 700px;
  font-size: 1.1rem;
  opacity: 0.95;
}

.hero-cta {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ======================================
   Secties
   ====================================== */
.section { padding: 70px 0; }

.section h2 {
  font-size: 2rem;
  font-weight: 900;
  margin-bottom: 16px;
  color: var(--primary);
  position: relative;
}
.section h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: var(--accent);
  margin-top: 6px;
}

.lead { font-size: 1.05rem; opacity: 0.9; max-width: 800px; }

.dark-section { background: var(--light); }

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

/* ======================================
   Feature cards
   ====================================== */
.features {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.feature-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  border-top: 5px solid var(--accent);
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
}
.feature-card h3 { color: var(--primary); margin-bottom: 10px; }
.feature-card p  { color: #444; }

/* ======================================
   Projecten grid/kaart
   ====================================== */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.project-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #ddd;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}
.project-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.project-card .content { padding: 16px; }
.project-card h3 { font-size: 1.1rem; color: var(--primary); margin-bottom: 6px; }
.project-card p  { font-size: 0.95rem; color: #555; }

.actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px 16px;
}
.tag {
  background: var(--accent);
  color: var(--primary);
  font-weight: 800;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
}

/* ======================================
   Project detail
   ====================================== */
.project-image {
  border-radius: 16px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

.two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.two-cols ul { list-style: none; padding-left: 0; }
.two-cols li::before { content: "• "; color: var(--accent); }

@media (max-width: 800px) {
  .two-cols { grid-template-columns: 1fr; }
}

/* ======================================
   Contact & formulier
   ====================================== */
.contact-section { background: var(--primary); color: #fff; }

.contact-wrap {
  display: grid;
  grid-template-columns: 1.4fr .9fr;
  gap: 28px;
}
@media (max-width: 980px) {
  .contact-wrap { grid-template-columns: 1fr; }
}

.contact-card, .contact-info .info-card, .map-card {
  background: #0F152B;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow-md);
}
.contact-card h2 { color:#fff; }
.contact-card .lead { color:#EAEAF0; }

/* compacter formulier */
.form-compact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
.form-compact .full { grid-column: 1 / -1; }
@media (max-width: 680px){ .form-compact { grid-template-columns: 1fr; } }

.field label { display:block; font-weight:800; margin-bottom:6px; color:#fff; }
.field .req { color: var(--accent); margin-left: 4px; }

.field input, .field textarea, input, textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #fff;
  font: inherit;
}
.field input::placeholder, .field textarea::placeholder { color: #cdd3ff7a; }

.field input:focus, .field textarea:focus, input:focus, textarea:focus {
  outline: 0; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(226,179,69,.25);
  background: rgba(255,255,255,.10);
}

.field .msg {
  display:none; margin-top:6px; font-size:.9rem; color:#ffd4a1;
}
.field.invalid .msg { display:block; }
.field.invalid input, .field.invalid textarea { border-color: #ffb37a; }

.form { /* generieke form grid (licht thema pagina's) */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
textarea { min-height: 140px; }
button.btn {
  grid-column: 1 / -1;
  justify-self: center;
  padding: 14px 28px;
}

/* Alerts */
.alert {
  border-radius: 12px; padding: 10px 12px; margin: 10px 0;
  font-weight: 700;
}
.alert.success { background: rgba(60,179,113,.18); border:1px solid rgba(60,179,113,.5); color:#d6ffe9; }
.alert.error   { background: rgba(220,20,60,.18);  border:1px solid rgba(220,20,60,.5);  color:#ffd7df; }

/* Info kolom */
.info-card h3 { color:#fff; margin-bottom:8px; }
.info-list { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.info-list li { display:flex; gap:10px; align-items:flex-start; }
.info-list a { color:#fff; text-decoration: underline; }
.info-list a:hover { color: var(--accent); }

/* Map */
.map-card iframe { width:100%; height:260px; border:0; border-radius: 10px; }

/* ======================================
   Footer
   ====================================== */
footer {
  background: var(--primary);
  color: white;
  text-align: center;
  padding: 30px 0;
  border-top: 3px solid var(--accent);
}
.footer-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
footer img {
  height: 40px;
  border-radius: 8px;
  border: 2px solid var(--accent);
}

/* Switch boven formulier */
.form-switch {
  display: inline-flex;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: 4px;
  margin: 12px 0 10px;
}
.form-switch .seg {
  appearance: none;
  background: transparent;
  color: #fff;
  border: 0;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 800;
  cursor: pointer;
}
.form-switch .seg.active {
  background: var(--spw-gold);
  color: var(--spw-blue);
}

/* Verborgen / utilities */
.hidden { display: none !important; }
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Consent/checkbox rij netjes uitlijnen */
.consent {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: center;     /* verticaal gecentreerd */
  margin-top: 6px;
}

.consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--spw-gold); /* mooi goud vinkje */
}

.consent label {
  line-height: 1.5;
  user-select: none;
}

/* kleine helper voor fouttoestand */
.field.invalid .consent label { color: #ffd4a1; }

/* ===== Selects dezelfde look als inputs ===== */
.field select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  padding: 12px 42px 12px 14px;   /* ruimte rechts voor pijl */
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background-color: rgba(255,255,255,.06);
  color: #fff;
  font: inherit;
  line-height: 1.4;
}

/* eigen pijl rechts (goud) */
.field select {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23E2B345' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
}

/* hover/focus exact zoals inputs */
.field select:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(226,179,69,.25);
  background-color: rgba(255,255,255,.10);
}

/* disabled/placeholder tint */
.field select:disabled { opacity: .6; cursor: not-allowed; }
/* toon placeholderkleur op required + lege value */
.field select:required:invalid { color: #cdd3ff7a; }

/* Safari/Chrome datum/maand picker-icoon zichtbaar op dark */
input[type="month"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(.8);
}

/* Zorg dat grid-cellen niet duwen op small screens */
.form-compact .field { min-width: 0; }

/* Zorg dat opties in het geopende menu donkere tekst hebben op de lichte achtergrond */
.field select option {
  color: #11172E;                 /* donkerblauw uit je palette */
  background-color: #ffffff;      /* wit menu */
}

/* Placeholder/disabled optie lichter tonen */
.field select option[disabled],
.field select option[value=""] {
  color: #A7AFC8;                 /* subtiele grijs */
}

/* (Optioneel) geselecteerde optie in het menu iets markeren */
.field select option:checked {
  background-color: #F3E5C4;      /* zacht goudachtig */
  color: #11172E;
}

/* ====== Locale switch rechtsboven ====== */
.locale-switch {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: 16px;              /* klein beetje ruimte t.o.v. de nav */
}

.locale-btn {
  appearance: none;
  border: 1px solid rgba(255,255,255,.25);
  background: transparent;
  color: #fff;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .3px;
  cursor: pointer;
  line-height: 1;
}

.locale-btn:hover { filter: brightness(1.1); }
.locale-btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset: 2px;
}

/* Actieve taal */
.locale-btn[aria-pressed="true"] {
  background: var(--spw-gold);
  color: var(--spw-blue);
  border-color: transparent;
}

/* Zorgt dat de switch naast het menu kan staan */
.spw-header__tools {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Mobiel: zet de switch onder de toggle voor consistentie */
@media (max-width: 900px) {
  .spw-header__tools {
    gap: 10px;
  }
}

/* Hero tekst = exact 2 regels op brede schermen */
.hero-text .hero-line { white-space: nowrap; }

/* Op small screens weer normale wrapping om overloop te vermijden */
@media (max-width: 700px) {
  .hero-text .hero-line { white-space: normal; }
}

.hero-text { max-width: 900px; }

/* --- Foto upload --- */
.spw-dropzone {
  border: 1px dashed rgba(255,255,255,.35);
  background: rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
  cursor: pointer;
  transition: .2s ease;
}
.spw-dropzone:hover { background: rgba(255,255,255,.10); }
.spw-dropzone.is-dragover { background: rgba(226,179,69,.18); border-color: var(--spw-gold); }

.spw-dropzone .dz-help {
  margin: 0 0 6px;
  color: #EAEAF0;
}
.spw-dropzone .dz-meta {
  margin: 0;
  font-size: .9rem;
  opacity: .9;
}

.spw-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.spw-thumb {
  position: relative;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 1/1;
}
.spw-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.spw-thumb .spw-remove {
  position: absolute; top: 6px; right: 6px;
  border: 0; border-radius: 999px;
  padding: 4px 8px; line-height: 1; cursor: pointer;
  background: rgba(15,21,43,.85);
  color: #fff; font-weight: 900; font-size: .8rem;
}
.spw-thumb .spw-remove:hover { filter: brightness(1.1); }

/* Kleine verbetering voor .btn in dropzone */
.spw-dropzone .btn { padding: 6px 10px; border-radius: 8px; }

/* --- Footer credit --- */
.footer-flex p { margin: 0; }

footer small {
  display: block;
  margin-top: 6px;
  font-size: 0.9rem;
  opacity: .85;                 /* iets subtieler dan hoofdtekst */
}

footer a {
  color: var(--spw-gold);       /* mooi goud accent */
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: .2s ease;
}

footer a:hover,
footer a:focus-visible {
  border-bottom-color: currentColor;
  filter: brightness(1.08);
  outline: none;                /* we gebruiken de border als hint */
}

/* optie: logo iets subtieler in de footer */
footer img {
  opacity: .95;
  transition: .2s ease;
}
footer img:hover { opacity: 1; }

/* 3-koloms footer: L = copy, M = credit, R = logo */
.footer-3col{
  display: grid;                       /* overschrijft eerdere flex */
  grid-template-columns: 1fr auto 1fr; /* midden compact, links/rechts flexibel */
  align-items: center;
  gap: 12px;
}

.footer-3col .footer-copy{
  justify-self: start;
  text-align: left;
  margin: 0;
}

.footer-3col .footer-credit{
  justify-self: center;
  text-align: center;
  margin: 0;
  opacity: .9;
  font-size: 0.95rem;
}

.footer-3col .footer-logo{
  justify-self: end;
  height: 40px;
  border-radius: 8px;
  border: 2px solid var(--spw-gold);
}

/* linkstijl blijft subtiel */
footer a{
  color: var(--spw-gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: .2s ease;
}
footer a:hover,
footer a:focus-visible{ border-bottom-color: currentColor; }

/* Responsief: onder elkaar en gecentreerd */
@media (max-width: 700px){
  .footer-3col{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer-3col .footer-copy,
  .footer-3col .footer-credit,
  .footer-3col .footer-logo{
    justify-self: center;
  }
}


/* Hoofdafbeelding: volledige foto tonen, niet croppen */
.project-image--fit {
  display: block;
  max-width: 100%;
  max-height: 380px;     /* pas aan naar smaak */
  width: auto;           /* behoud verhouding */
  height: auto;          /* behoud verhouding */
  object-fit: contain;   /* toon volledige image, geen uitsnede */
  background: #fff;      /* optioneel: canvas achter de foto */
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 4px;          /* klein kader rond volledige foto */
  margin: 0 auto 20px;   /* centreer en geef ondermarge */
}

/* Desktop iets compacter */
@media (min-width: 900px) {
  .project-image--fit { max-height: 340px; }
}

/* Mobiel wat ruimer */
@media (max-width: 600px) {
  .project-image--fit { max-height: 300px; }
}

/* Container centreert de image */
.project-media {
  display: flex;
  justify-content: center;
  margin: 18px auto 32px;
}

/* Basis: toon hele foto, geen uitsnede */
.project-image {
  display: block;
  width: auto;              /* behoud originele verhouding */
  height: auto;             /* behoud originele verhouding */
  max-width: min(100%, 1100px);
  max-height: clamp(260px, 58vh, 640px);  /* adaptief t.o.v. viewport */
  object-fit: contain;
  object-position: center;
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  background: #fff;
}

/* Landscape: breder, iets lagere max-hoogte voor balans */
.project-image.is-landscape {
  max-width: min(100%, 1100px);
  max-height: clamp(240px, 56vh, 600px);
}

/* Portrait: smaller max-breedte, mag hoger voor minder witruimte */
.project-image.is-portrait {
  max-width: min(100%, 780px);
  max-height: clamp(320px, 70vh, 840px);
}

/* Mobile: iets ruimer in hoogte */
@media (max-width: 600px) {
  .project-image {
    max-height: clamp(240px, 62vh, 680px);
    border-radius: 12px;
  }
}


/* === EXTRA: project-galerij en lightbox === */

/* Galerij raster */
.project-gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(10px, 2vw, 16px);
  margin-top: 2rem;
}

.project-gallery .pg-item {
  grid-column: span 6; /* 2 kolommen op mobiel */
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  cursor: zoom-in;
  padding: 0;
  border: 0;
  background: transparent;
}

@media (min-width: 768px) {
  .project-gallery .pg-item { grid-column: span 4; } /* 3 kolommen */
}
@media (min-width: 1200px) {
  .project-gallery .pg-item { grid-column: span 3; } /* 4 kolommen */
}

.project-gallery img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}

.project-gallery .pg-item:hover img {
  transform: scale(1.03);
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  z-index: 9999;
}

.lightbox[aria-hidden="false"] {
  display: grid;
}

.lb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.8);
  backdrop-filter: blur(2px);
  z-index: 1;
}

.lb-image {
  position: relative;
  z-index: 2; /* Zorgt dat de foto boven de backdrop komt */
  max-width: min(92vw, 1400px);
  max-height: 86vh;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.4);
}


.lb-image {
  position: relative;
  max-width: min(92vw, 1400px);
  max-height: 86vh;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.4);
}

.lb-close,
.lb-prev,
.lb-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: rgba(255,255,255,.15);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  backdrop-filter: blur(2px);
}

.lb-close {
  top: 20px;
  right: 20px;
  transform: none;
  background: rgba(0,0,0,.5);
  font-size: 24px;
  line-height: 1;
}

.lb-prev { left: 20px; font-size: 22px; }
.lb-next { right: 20px; font-size: 22px; }

.lb-close:hover,
.lb-prev:hover,
.lb-next:hover {
  background: rgba(255,255,255,.25);
}













/* ================================
   Suykens Project Works — styles.css
   Opschoning: alle generieke nav-selectors verwijderd
   en vervangen door gescope’d .spw-* regels.
   ================================ */

/* ---------- Variabelen ---------- */
:root {
  /* Basiskleuren */
  --primary: #11172E;   /* Oxford blue */
  --accent:  #E2B345;   /* Gold */
  --accent2: #907338;   /* Golden brown */
  --light:   #f7f8fb;
  --text:    #11172E;

  /* Alias voor header/blokken (zelfde waarden) */
  --spw-blue:     var(--primary);
  --spw-blue-900: #0F152B; /* iets donkerder voor diepte */
  --spw-gold:     var(--accent);

  /* Schaduwen/overlays */
  --shadow-sm: 0 4px 10px rgba(0,0,0,.15);
  --shadow-md: 0 8px 24px rgba(0,0,0,.18);
  --shadow-lg: 0 14px 30px rgba(0,0,0,.28);
}

/* ---------- Reset & basics ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background-color: #ffffff;
  line-height: 1.6;
}

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

.container {
  width: min(1100px, 90%);
  margin: 0 auto;
}

/* Toegankelijkheids-utility */
.visually-hidden {
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 10px;
  font-weight: 800;
  text-decoration: none;
  transition: 0.25s ease;
  border: 0;
  cursor: pointer;
}

.btn:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--accent);
  color: var(--primary);
}
.btn-primary:hover { filter: brightness(1.06); }

.btn-outline {
  border: 2px solid currentColor;
  color: inherit;
  background: transparent;
}
.btn-outline:hover { background: rgba(0,0,0,0.08); }

.btn-gold {
  background: var(--spw-gold);
  color: var(--spw-blue);
}
.btn-gold:hover { filter: brightness(1.06); }

/* ======================================
   Header (gescope’d op .spw-*)
   ====================================== */
.spw-header {
  position: sticky; top: 0; z-index: 1000;
  background: var(--spw-blue-900);
  color: #fff;
  box-shadow: var(--shadow-md);
  border-bottom: 0; /* visuele lijn staat in accent-balk */
}
.spw-header__accent { height: 4px; background: var(--spw-gold); }

.spw-header__inner {
  max-width: 1200px; margin: 0 auto;
  padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

/* Brand */
.spw-brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:#fff; }
.spw-brand__logo {
  height: 48px; width:auto; border-radius: 10px;
  background:#fff; padding: 6px; box-shadow: var(--shadow-sm);
}
.spw-brand__name {
  font-weight: 900; letter-spacing:.6px; font-size: clamp(1rem, 1.2vw + .6rem, 1.25rem);
  text-wrap: balance;
}

/* Nav */
.spw-nav { position: relative; }
.spw-nav__list {
  list-style: none; display:flex; align-items:center; gap: 26px;
  margin: 0; padding: 0;
}
.spw-nav__list a {
  color:#fff; text-decoration:none; font-weight:800;
  position:relative; padding: 8px 0; display:inline-block;
}
.spw-nav__list a::after {
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px;
  background: var(--spw-gold); transform: scaleX(0); transform-origin:left; transition: .22s ease;
}
.spw-nav__list a:hover::after { transform: scaleX(1); }

/* Active link (JS zet .is-active) */
.spw-nav__list a.is-active::after { transform: scaleX(1); }

/* CTA item in nav */
.spw-nav__cta { margin-left: 6px; }

/* Toggle (hamburger) */
.spw-nav__toggle {
  display:none; width:44px; height:36px; border:0; background:transparent; cursor:pointer;
  align-items:center; justify-content:center; gap:4px;
}
.spw-nav__bar {
  display:block; width:22px; height:2px; background:#fff; border-radius:2px;
  transition: transform .18s ease, opacity .18s ease;
}
.spw-nav__toggle[aria-expanded="true"] .spw-nav__bar:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.spw-nav__toggle[aria-expanded="true"] .spw-nav__bar:nth-child(2) { opacity:0; }
.spw-nav__toggle[aria-expanded="true"] .spw-nav__bar:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }

/* Responsive nav */
@media (max-width: 900px) {
  .spw-nav__toggle { display:inline-flex; }
  .spw-nav__list {
    position:absolute; right:20px; top:calc(100% + 12px);
    background: var(--spw-blue);
    border:1px solid rgba(255,255,255,.08);
    box-shadow: var(--shadow-lg);
    border-radius: 12px; padding: 12px; min-width: 220px;
    display:none; flex-direction:column; align-items:flex-start; gap:10px;
  }
  .spw-nav__list.show { display:flex; }
  .spw-nav__list a::after { bottom:-2px; }
  .spw-nav__cta { width:100%; }
  .spw-nav__cta .btn { width:100%; text-align:center; }
}

/* ======================================
   Hero
   ====================================== */
.hero-logo {
  background: linear-gradient(180deg, var(--primary) 0%, #0a0f22 100%);
  color: white;
  text-align: center;
  padding: 100px 0 80px;
}

.hero-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.hero-big-logo {
  width: 180px;
  height: auto;
  margin-bottom: 10px;
  border-radius: 12px;
  border: 3px solid var(--accent);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.hero h1 {
  font-size: clamp(2rem, 3vw + 1rem, 3rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.hero p {
  max-width: 700px;
  font-size: 1.1rem;
  opacity: 0.95;
}

.hero-cta {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ======================================
   Secties
   ====================================== */
.section { padding: 70px 0; }

.section h2 {
  font-size: 2rem;
  font-weight: 900;
  margin-bottom: 16px;
  color: var(--primary);
  position: relative;
}
.section h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: var(--accent);
  margin-top: 6px;
}

.lead { font-size: 1.05rem; opacity: 0.9; max-width: 800px; }

.dark-section { background: var(--light); }

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

/* ======================================
   Feature cards
   ====================================== */
.features {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.feature-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  border-top: 5px solid var(--accent);
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
}
.feature-card h3 { color: var(--primary); margin-bottom: 10px; }
.feature-card p  { color: #444; }

/* ======================================
   Projecten grid/kaart
   ====================================== */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.project-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #ddd;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}
.project-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.project-card .content { padding: 16px; }
.project-card h3 { font-size: 1.1rem; color: var(--primary); margin-bottom: 6px; }
.project-card p  { font-size: 0.95rem; color: #555; }

.actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px 16px;
}
.tag {
  background: var(--accent);
  color: var(--primary);
  font-weight: 800;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
}

/* ======================================
   Project detail
   ====================================== */
.project-image {
  border-radius: 16px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

.two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.two-cols ul { list-style: none; padding-left: 0; }
.two-cols li::before { content: "• "; color: var(--accent); }

@media (max-width: 800px) {
  .two-cols { grid-template-columns: 1fr; }
}

/* ======================================
   Contact & formulier
   ====================================== */
.contact-section { background: var(--primary); color: #fff; }

.contact-wrap {
  display: grid;
  grid-template-columns: 1.4fr .9fr;
  gap: 28px;
}
@media (max-width: 980px) {
  .contact-wrap { grid-template-columns: 1fr; }
}

.contact-card, .contact-info .info-card, .map-card {
  background: #0F152B;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow-md);
}
.contact-card h2 { color:#fff; }
.contact-card .lead { color:#EAEAF0; }

/* compacter formulier */
.form-compact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
.form-compact .full { grid-column: 1 / -1; }
@media (max-width: 680px){ .form-compact { grid-template-columns: 1fr; } }

.field label { display:block; font-weight:800; margin-bottom:6px; color:#fff; }
.field .req { color: var(--accent); margin-left: 4px; }

.field input, .field textarea, input, textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #fff;
  font: inherit;
}
.field input::placeholder, .field textarea::placeholder { color: #cdd3ff7a; }

.field input:focus, .field textarea:focus, input:focus, textarea:focus {
  outline: 0; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(226,179,69,.25);
  background: rgba(255,255,255,.10);
}

.field .msg {
  display:none; margin-top:6px; font-size:.9rem; color:#ffd4a1;
}
.field.invalid .msg { display:block; }
.field.invalid input, .field.invalid textarea { border-color: #ffb37a; }

.form { /* generieke form grid (licht thema pagina's) */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
textarea { min-height: 140px; }
button.btn {
  grid-column: 1 / -1;
  justify-self: center;
  padding: 14px 28px;
}

/* Alerts */
.alert {
  border-radius: 12px; padding: 10px 12px; margin: 10px 0;
  font-weight: 700;
}
.alert.success { background: rgba(60,179,113,.18); border:1px solid rgba(60,179,113,.5); color:#d6ffe9; }
.alert.error   { background: rgba(220,20,60,.18);  border:1px solid rgba(220,20,60,.5);  color:#ffd7df; }

/* Info kolom */
.info-card h3 { color:#fff; margin-bottom:8px; }
.info-list { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.info-list li { display:flex; gap:10px; align-items:flex-start; }
.info-list a { color:#fff; text-decoration: underline; }
.info-list a:hover { color: var(--accent); }

/* Map */
.map-card iframe { width:100%; height:260px; border:0; border-radius: 10px; }

/* ======================================
   Footer
   ====================================== */
footer {
  background: var(--primary);
  color: white;
  text-align: center;
  padding: 30px 0;
  border-top: 3px solid var(--accent);
}
.footer-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
footer img {
  height: 40px;
  border-radius: 8px;
  border: 2px solid var(--accent);
}

/* Switch boven formulier */
.form-switch {
  display: inline-flex;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: 4px;
  margin: 12px 0 10px;
}
.form-switch .seg {
  appearance: none;
  background: transparent;
  color: #fff;
  border: 0;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 800;
  cursor: pointer;
}
.form-switch .seg.active {
  background: var(--spw-gold);
  color: var(--spw-blue);
}

/* Verborgen / utilities */
.hidden { display: none !important; }
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Consent/checkbox rij netjes uitlijnen */
.consent {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: center;     /* verticaal gecentreerd */
  margin-top: 6px;
}

.consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--spw-gold); /* mooi goud vinkje */
}

.consent label {
  line-height: 1.5;
  user-select: none;
}

/* kleine helper voor fouttoestand */
.field.invalid .consent label { color: #ffd4a1; }

/* ===== Selects dezelfde look als inputs ===== */
.field select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  padding: 12px 42px 12px 14px;   /* ruimte rechts voor pijl */
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background-color: rgba(255,255,255,.06);
  color: #fff;
  font: inherit;
  line-height: 1.4;
}

/* eigen pijl rechts (goud) */
.field select {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23E2B345' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
}

/* hover/focus exact zoals inputs */
.field select:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(226,179,69,.25);
  background-color: rgba(255,255,255,.10);
}

/* disabled/placeholder tint */
.field select:disabled { opacity: .6; cursor: not-allowed; }
/* toon placeholderkleur op required + lege value */
.field select:required:invalid { color: #cdd3ff7a; }

/* Safari/Chrome datum/maand picker-icoon zichtbaar op dark */
input[type="month"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(.8);
}

/* Zorg dat grid-cellen niet duwen op small screens */
.form-compact .field { min-width: 0; }

/* Zorg dat opties in het geopende menu donkere tekst hebben op de lichte achtergrond */
.field select option {
  color: #11172E;                 /* donkerblauw uit je palette */
  background-color: #ffffff;      /* wit menu */
}

/* Placeholder/disabled optie lichter tonen */
.field select option[disabled],
.field select option[value=""] {
  color: #A7AFC8;                 /* subtiele grijs */
}

/* (Optioneel) geselecteerde optie in het menu iets markeren */
.field select option:checked {
  background-color: #F3E5C4;      /* zacht goudachtig */
  color: #11172E;
}

/* ====== Locale switch rechtsboven ====== */
.locale-switch {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: 16px;              /* klein beetje ruimte t.o.v. de nav */
}

.locale-btn {
  appearance: none;
  border: 1px solid rgba(255,255,255,.25);
  background: transparent;
  color: #fff;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .3px;
  cursor: pointer;
  line-height: 1;
}

.locale-btn:hover { filter: brightness(1.1); }
.locale-btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset: 2px;
}

/* Actieve taal */
.locale-btn[aria-pressed="true"] {
  background: var(--spw-gold);
  color: var(--spw-blue);
  border-color: transparent;
}

/* Zorgt dat de switch naast het menu kan staan */
.spw-header__tools {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Mobiel: zet de switch onder de toggle voor consistentie */
@media (max-width: 900px) {
  .spw-header__tools {
    gap: 10px;
  }
}

/* Hero tekst = exact 2 regels op brede schermen */
.hero-text .hero-line { white-space: nowrap; }

/* Op small screens weer normale wrapping om overloop te vermijden */
@media (max-width: 700px) {
  .hero-text .hero-line { white-space: normal; }
}

.hero-text { max-width: 900px; }

/* --- Foto upload --- */
.spw-dropzone {
  border: 1px dashed rgba(255,255,255,.35);
  background: rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
  cursor: pointer;
  transition: .2s ease;
}
.spw-dropzone:hover { background: rgba(255,255,255,.10); }
.spw-dropzone.is-dragover { background: rgba(226,179,69,.18); border-color: var(--spw-gold); }

.spw-dropzone .dz-help {
  margin: 0 0 6px;
  color: #EAEAF0;
}
.spw-dropzone .dz-meta {
  margin: 0;
  font-size: .9rem;
  opacity: .9;
}

.spw-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.spw-thumb {
  position: relative;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 1/1;
}
.spw-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.spw-thumb .spw-remove {
  position: absolute; top: 6px; right: 6px;
  border: 0; border-radius: 999px;
  padding: 4px 8px; line-height: 1; cursor: pointer;
  background: rgba(15,21,43,.85);
  color: #fff; font-weight: 900; font-size: .8rem;
}
.spw-thumb .spw-remove:hover { filter: brightness(1.1); }

/* Kleine verbetering voor .btn in dropzone */
.spw-dropzone .btn { padding: 6px 10px; border-radius: 8px; }

/* --- Footer credit --- */
.footer-flex p { margin: 0; }

footer small {
  display: block;
  margin-top: 6px;
  font-size: 0.9rem;
  opacity: .85;                 /* iets subtieler dan hoofdtekst */
}

footer a {
  color: var(--spw-gold);       /* mooi goud accent */
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: .2s ease;
}

footer a:hover,
footer a:focus-visible {
  border-bottom-color: currentColor;
  filter: brightness(1.08);
  outline: none;                /* we gebruiken de border als hint */
}

/* optie: logo iets subtieler in de footer */
footer img {
  opacity: .95;
  transition: .2s ease;
}
footer img:hover { opacity: 1; }

/* 3-koloms footer: L = copy, M = credit, R = logo */
.footer-3col{
  display: grid;                       /* overschrijft eerdere flex */
  grid-template-columns: 1fr auto 1fr; /* midden compact, links/rechts flexibel */
  align-items: center;
  gap: 12px;
}

.footer-3col .footer-copy{
  justify-self: start;
  text-align: left;
  margin: 0;
}

.footer-3col .footer-credit{
  justify-self: center;
  text-align: center;
  margin: 0;
  opacity: .9;
  font-size: 0.95rem;
}

.footer-3col .footer-logo{
  justify-self: end;
  height: 40px;
  border-radius: 8px;
  border: 2px solid var(--spw-gold);
}

/* linkstijl blijft subtiel */
footer a{
  color: var(--spw-gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: .2s ease;
}
footer a:hover,
footer a:focus-visible{ border-bottom-color: currentColor; }

/* Responsief: onder elkaar en gecentreerd */
@media (max-width: 700px){
  .footer-3col{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer-3col .footer-copy,
  .footer-3col .footer-credit,
  .footer-3col .footer-logo{
    justify-self: center;
  }
}


/* Hoofdafbeelding: volledige foto tonen, niet croppen */
.project-image--fit {
  display: block;
  max-width: 100%;
  max-height: 380px;     /* pas aan naar smaak */
  width: auto;           /* behoud verhouding */
  height: auto;          /* behoud verhouding */
  object-fit: contain;   /* toon volledige image, geen uitsnede */
  background: #fff;      /* optioneel: canvas achter de foto */
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 4px;          /* klein kader rond volledige foto */
  margin: 0 auto 20px;   /* centreer en geef ondermarge */
}

/* Desktop iets compacter */
@media (min-width: 900px) {
  .project-image--fit { max-height: 340px; }
}

/* Mobiel wat ruimer */
@media (max-width: 600px) {
  .project-image--fit { max-height: 300px; }
}

/* Container centreert de image */
.project-media {
  display: flex;
  justify-content: center;
  margin: 18px auto 32px;
}

/* Basis: toon hele foto, geen uitsnede */
.project-image {
  display: block;
  width: auto;              /* behoud originele verhouding */
  height: auto;             /* behoud originele verhouding */
  max-width: min(100%, 1100px);
  max-height: clamp(260px, 58vh, 640px);  /* adaptief t.o.v. viewport */
  object-fit: contain;
  object-position: center;
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  background: #fff;
}

/* Landscape: breder, iets lagere max-hoogte voor balans */
.project-image.is-landscape {
  max-width: min(100%, 1100px);
  max-height: clamp(240px, 56vh, 600px);
}

/* Portrait: smaller max-breedte, mag hoger voor minder witruimte */
.project-image.is-portrait {
  max-width: min(100%, 780px);
  max-height: clamp(320px, 70vh, 840px);
}

/* Mobile: iets ruimer in hoogte */
@media (max-width: 600px) {
  .project-image {
    max-height: clamp(240px, 62vh, 680px);
    border-radius: 12px;
  }
}


/* === EXTRA: project-galerij en lightbox === */

/* Galerij raster */
.project-gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(10px, 2vw, 16px);
  margin-top: 2rem;
}

.project-gallery .pg-item {
  grid-column: span 6; /* 2 kolommen op mobiel */
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  cursor: zoom-in;
  padding: 0;
  border: 0;
  background: transparent;
}

@media (min-width: 768px) {
  .project-gallery .pg-item { grid-column: span 4; } /* 3 kolommen */
}
@media (min-width: 1200px) {
  .project-gallery .pg-item { grid-column: span 3; } /* 4 kolommen */
}

.project-gallery img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}

.project-gallery .pg-item:hover img {
  transform: scale(1.03);
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  z-index: 9999;
}

.lightbox[aria-hidden="false"] {
  display: grid;
}

.lb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.8);
  backdrop-filter: blur(2px);
  z-index: 1;
}

.lb-image {
  position: relative;
  z-index: 2; /* Zorgt dat de foto boven de backdrop komt */
  max-width: min(92vw, 1400px);
  max-height: 86vh;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.4);
}


.lb-image {
  position: relative;
  max-width: min(92vw, 1400px);
  max-height: 86vh;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.4);
}

.lb-close,
.lb-prev,
.lb-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: rgba(255,255,255,.15);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  backdrop-filter: blur(2px);
}

.lb-close {
  top: 20px;
  right: 20px;
  transform: none;
  background: rgba(0,0,0,.5);
  font-size: 24px;
  line-height: 1;
}

.lb-prev { left: 20px; font-size: 22px; }
.lb-next { right: 20px; font-size: 22px; }

.lb-close:hover,
.lb-prev:hover,
.lb-next:hover {
  background: rgba(255,255,255,.25);
}













/* ================================
   Suykens Project Works — styles.css
   Opschoning: alle generieke nav-selectors verwijderd
   en vervangen door gescope’d .spw-* regels.
   ================================ */

/* ---------- Variabelen ---------- */
:root {
  /* Basiskleuren */
  --primary: #11172E;   /* Oxford blue */
  --accent:  #E2B345;   /* Gold */
  --accent2: #907338;   /* Golden brown */
  --light:   #f7f8fb;
  --text:    #11172E;

  /* Alias voor header/blokken (zelfde waarden) */
  --spw-blue:     var(--primary);
  --spw-blue-900: #0F152B; /* iets donkerder voor diepte */
  --spw-gold:     var(--accent);

  /* Schaduwen/overlays */
  --shadow-sm: 0 4px 10px rgba(0,0,0,.15);
  --shadow-md: 0 8px 24px rgba(0,0,0,.18);
  --shadow-lg: 0 14px 30px rgba(0,0,0,.28);
}

/* ---------- Reset & basics ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background-color: #ffffff;
  line-height: 1.6;
}

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

.container {
  width: min(1100px, 90%);
  margin: 0 auto;
}

/* Toegankelijkheids-utility */
.visually-hidden {
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 10px;
  font-weight: 800;
  text-decoration: none;
  transition: 0.25s ease;
  border: 0;
  cursor: pointer;
}

.btn:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--accent);
  color: var(--primary);
}
.btn-primary:hover { filter: brightness(1.06); }

.btn-outline {
  border: 2px solid currentColor;
  color: inherit;
  background: transparent;
}
.btn-outline:hover { background: rgba(0,0,0,0.08); }

.btn-gold {
  background: var(--spw-gold);
  color: var(--spw-blue);
}
.btn-gold:hover { filter: brightness(1.06); }

/* ======================================
   Header (gescope’d op .spw-*)
   ====================================== */
.spw-header {
  position: sticky; top: 0; z-index: 1000;
  background: var(--spw-blue-900);
  color: #fff;
  box-shadow: var(--shadow-md);
  border-bottom: 0; /* visuele lijn staat in accent-balk */
}
.spw-header__accent { height: 4px; background: var(--spw-gold); }

.spw-header__inner {
  max-width: 1200px; margin: 0 auto;
  padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

/* Brand */
.spw-brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:#fff; }
.spw-brand__logo {
  height: 48px; width:auto; border-radius: 10px;
  background:#fff; padding: 6px; box-shadow: var(--shadow-sm);
}
.spw-brand__name {
  font-weight: 900; letter-spacing:.6px; font-size: clamp(1rem, 1.2vw + .6rem, 1.25rem);
  text-wrap: balance;
}

/* Nav */
.spw-nav { position: relative; }
.spw-nav__list {
  list-style: none; display:flex; align-items:center; gap: 26px;
  margin: 0; padding: 0;
}
.spw-nav__list a {
  color:#fff; text-decoration:none; font-weight:800;
  position:relative; padding: 8px 0; display:inline-block;
}
.spw-nav__list a::after {
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px;
  background: var(--spw-gold); transform: scaleX(0); transform-origin:left; transition: .22s ease;
}
.spw-nav__list a:hover::after { transform: scaleX(1); }

/* Active link (JS zet .is-active) */
.spw-nav__list a.is-active::after { transform: scaleX(1); }

/* CTA item in nav */
.spw-nav__cta { margin-left: 6px; }

/* Toggle (hamburger) */
.spw-nav__toggle {
  display:none; width:44px; height:36px; border:0; background:transparent; cursor:pointer;
  align-items:center; justify-content:center; gap:4px;
}
.spw-nav__bar {
  display:block; width:22px; height:2px; background:#fff; border-radius:2px;
  transition: transform .18s ease, opacity .18s ease;
}
.spw-nav__toggle[aria-expanded="true"] .spw-nav__bar:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.spw-nav__toggle[aria-expanded="true"] .spw-nav__bar:nth-child(2) { opacity:0; }
.spw-nav__toggle[aria-expanded="true"] .spw-nav__bar:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }

/* Responsive nav */
@media (max-width: 900px) {
  .spw-nav__toggle { display:inline-flex; }
  .spw-nav__list {
    position:absolute; right:20px; top:calc(100% + 12px);
    background: var(--spw-blue);
    border:1px solid rgba(255,255,255,.08);
    box-shadow: var(--shadow-lg);
    border-radius: 12px; padding: 12px; min-width: 220px;
    display:none; flex-direction:column; align-items:flex-start; gap:10px;
  }
  .spw-nav__list.show { display:flex; }
  .spw-nav__list a::after { bottom:-2px; }
  .spw-nav__cta { width:100%; }
  .spw-nav__cta .btn { width:100%; text-align:center; }
}

/* ======================================
   Hero
   ====================================== */
.hero-logo {
  background: linear-gradient(180deg, var(--primary) 0%, #0a0f22 100%);
  color: white;
  text-align: center;
  padding: 100px 0 80px;
}

.hero-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.hero-big-logo {
  width: 180px;
  height: auto;
  margin-bottom: 10px;
  border-radius: 12px;
  border: 3px solid var(--accent);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.hero h1 {
  font-size: clamp(2rem, 3vw + 1rem, 3rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.hero p {
  max-width: 700px;
  font-size: 1.1rem;
  opacity: 0.95;
}

.hero-cta {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ======================================
   Secties
   ====================================== */
.section { padding: 70px 0; }

.section h2 {
  font-size: 2rem;
  font-weight: 900;
  margin-bottom: 16px;
  color: var(--primary);
  position: relative;
}
.section h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: var(--accent);
  margin-top: 6px;
}

.lead { font-size: 1.05rem; opacity: 0.9; max-width: 800px; }

.dark-section { background: var(--light); }

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

/* ======================================
   Feature cards
   ====================================== */
.features {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.feature-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  border-top: 5px solid var(--accent);
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
}
.feature-card h3 { color: var(--primary); margin-bottom: 10px; }
.feature-card p  { color: #444; }

/* ======================================
   Projecten grid/kaart
   ====================================== */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.project-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #ddd;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}
.project-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.project-card .content { padding: 16px; }
.project-card h3 { font-size: 1.1rem; color: var(--primary); margin-bottom: 6px; }
.project-card p  { font-size: 0.95rem; color: #555; }

.actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px 16px;
}
.tag {
  background: var(--accent);
  color: var(--primary);
  font-weight: 800;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
}

/* ======================================
   Project detail
   ====================================== */
.project-image {
  border-radius: 16px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

.two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.two-cols ul { list-style: none; padding-left: 0; }
.two-cols li::before { content: "• "; color: var(--accent); }

@media (max-width: 800px) {
  .two-cols { grid-template-columns: 1fr; }
}

/* ======================================
   Contact & formulier
   ====================================== */
.contact-section { background: var(--primary); color: #fff; }

.contact-wrap {
  display: grid;
  grid-template-columns: 1.4fr .9fr;
  gap: 28px;
}
@media (max-width: 980px) {
  .contact-wrap { grid-template-columns: 1fr; }
}

.contact-card, .contact-info .info-card, .map-card {
  background: #0F152B;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow-md);
}
.contact-card h2 { color:#fff; }
.contact-card .lead { color:#EAEAF0; }

/* compacter formulier */
.form-compact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
.form-compact .full { grid-column: 1 / -1; }
@media (max-width: 680px){ .form-compact { grid-template-columns: 1fr; } }

.field label { display:block; font-weight:800; margin-bottom:6px; color:#fff; }
.field .req { color: var(--accent); margin-left: 4px; }

.field input, .field textarea, input, textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #fff;
  font: inherit;
}
.field input::placeholder, .field textarea::placeholder { color: #cdd3ff7a; }

.field input:focus, .field textarea:focus, input:focus, textarea:focus {
  outline: 0; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(226,179,69,.25);
  background: rgba(255,255,255,.10);
}

.field .msg {
  display:none; margin-top:6px; font-size:.9rem; color:#ffd4a1;
}
.field.invalid .msg { display:block; }
.field.invalid input, .field.invalid textarea { border-color: #ffb37a; }

.form { /* generieke form grid (licht thema pagina's) */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
textarea { min-height: 140px; }
button.btn {
  grid-column: 1 / -1;
  justify-self: center;
  padding: 14px 28px;
}

/* Alerts */
.alert {
  border-radius: 12px; padding: 10px 12px; margin: 10px 0;
  font-weight: 700;
}
.alert.success { background: rgba(60,179,113,.18); border:1px solid rgba(60,179,113,.5); color:#d6ffe9; }
.alert.error   { background: rgba(220,20,60,.18);  border:1px solid rgba(220,20,60,.5);  color:#ffd7df; }

/* Info kolom */
.info-card h3 { color:#fff; margin-bottom:8px; }
.info-list { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.info-list li { display:flex; gap:10px; align-items:flex-start; }
.info-list a { color:#fff; text-decoration: underline; }
.info-list a:hover { color: var(--accent); }

/* Map */
.map-card iframe { width:100%; height:260px; border:0; border-radius: 10px; }

/* ======================================
   Footer
   ====================================== */
footer {
  background: var(--primary);
  color: white;
  text-align: center;
  padding: 30px 0;
  border-top: 3px solid var(--accent);
}
.footer-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
footer img {
  height: 40px;
  border-radius: 8px;
  border: 2px solid var(--accent);
}

/* Switch boven formulier */
.form-switch {
  display: inline-flex;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: 4px;
  margin: 12px 0 10px;
}
.form-switch .seg {
  appearance: none;
  background: transparent;
  color: #fff;
  border: 0;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 800;
  cursor: pointer;
}
.form-switch .seg.active {
  background: var(--spw-gold);
  color: var(--spw-blue);
}

/* Verborgen / utilities */
.hidden { display: none !important; }
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Consent/checkbox rij netjes uitlijnen */
.consent {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: center;     /* verticaal gecentreerd */
  margin-top: 6px;
}

.consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--spw-gold); /* mooi goud vinkje */
}

.consent label {
  line-height: 1.5;
  user-select: none;
}

/* kleine helper voor fouttoestand */
.field.invalid .consent label { color: #ffd4a1; }

/* ===== Selects dezelfde look als inputs ===== */
.field select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  padding: 12px 42px 12px 14px;   /* ruimte rechts voor pijl */
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background-color: rgba(255,255,255,.06);
  color: #fff;
  font: inherit;
  line-height: 1.4;
}

/* eigen pijl rechts (goud) */
.field select {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23E2B345' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
}

/* hover/focus exact zoals inputs */
.field select:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(226,179,69,.25);
  background-color: rgba(255,255,255,.10);
}

/* disabled/placeholder tint */
.field select:disabled { opacity: .6; cursor: not-allowed; }
/* toon placeholderkleur op required + lege value */
.field select:required:invalid { color: #cdd3ff7a; }

/* Safari/Chrome datum/maand picker-icoon zichtbaar op dark */
input[type="month"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(.8);
}

/* Zorg dat grid-cellen niet duwen op small screens */
.form-compact .field { min-width: 0; }

/* Zorg dat opties in het geopende menu donkere tekst hebben op de lichte achtergrond */
.field select option {
  color: #11172E;                 /* donkerblauw uit je palette */
  background-color: #ffffff;      /* wit menu */
}

/* Placeholder/disabled optie lichter tonen */
.field select option[disabled],
.field select option[value=""] {
  color: #A7AFC8;                 /* subtiele grijs */
}

/* (Optioneel) geselecteerde optie in het menu iets markeren */
.field select option:checked {
  background-color: #F3E5C4;      /* zacht goudachtig */
  color: #11172E;
}

/* ====== Locale switch rechtsboven ====== */
.locale-switch {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: 16px;              /* klein beetje ruimte t.o.v. de nav */
}

.locale-btn {
  appearance: none;
  border: 1px solid rgba(255,255,255,.25);
  background: transparent;
  color: #fff;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .3px;
  cursor: pointer;
  line-height: 1;
}

.locale-btn:hover { filter: brightness(1.1); }
.locale-btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset: 2px;
}

/* Actieve taal */
.locale-btn[aria-pressed="true"] {
  background: var(--spw-gold);
  color: var(--spw-blue);
  border-color: transparent;
}

/* Zorgt dat de switch naast het menu kan staan */
.spw-header__tools {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Mobiel: zet de switch onder de toggle voor consistentie */
@media (max-width: 900px) {
  .spw-header__tools {
    gap: 10px;
  }
}

/* Hero tekst = exact 2 regels op brede schermen */
.hero-text .hero-line { white-space: nowrap; }

/* Op small screens weer normale wrapping om overloop te vermijden */
@media (max-width: 700px) {
  .hero-text .hero-line { white-space: normal; }
}

.hero-text { max-width: 900px; }

/* --- Foto upload --- */
.spw-dropzone {
  border: 1px dashed rgba(255,255,255,.35);
  background: rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
  cursor: pointer;
  transition: .2s ease;
}
.spw-dropzone:hover { background: rgba(255,255,255,.10); }
.spw-dropzone.is-dragover { background: rgba(226,179,69,.18); border-color: var(--spw-gold); }

.spw-dropzone .dz-help {
  margin: 0 0 6px;
  color: #EAEAF0;
}
.spw-dropzone .dz-meta {
  margin: 0;
  font-size: .9rem;
  opacity: .9;
}

.spw-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.spw-thumb {
  position: relative;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 1/1;
}
.spw-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.spw-thumb .spw-remove {
  position: absolute; top: 6px; right: 6px;
  border: 0; border-radius: 999px;
  padding: 4px 8px; line-height: 1; cursor: pointer;
  background: rgba(15,21,43,.85);
  color: #fff; font-weight: 900; font-size: .8rem;
}
.spw-thumb .spw-remove:hover { filter: brightness(1.1); }

/* Kleine verbetering voor .btn in dropzone */
.spw-dropzone .btn { padding: 6px 10px; border-radius: 8px; }

/* --- Footer credit --- */
.footer-flex p { margin: 0; }

footer small {
  display: block;
  margin-top: 6px;
  font-size: 0.9rem;
  opacity: .85;                 /* iets subtieler dan hoofdtekst */
}

footer a {
  color: var(--spw-gold);       /* mooi goud accent */
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: .2s ease;
}

footer a:hover,
footer a:focus-visible {
  border-bottom-color: currentColor;
  filter: brightness(1.08);
  outline: none;                /* we gebruiken de border als hint */
}

/* optie: logo iets subtieler in de footer */
footer img {
  opacity: .95;
  transition: .2s ease;
}
footer img:hover { opacity: 1; }

/* 3-koloms footer: L = copy, M = credit, R = logo */
.footer-3col{
  display: grid;                       /* overschrijft eerdere flex */
  grid-template-columns: 1fr auto 1fr; /* midden compact, links/rechts flexibel */
  align-items: center;
  gap: 12px;
}

.footer-3col .footer-copy{
  justify-self: start;
  text-align: left;
  margin: 0;
}

.footer-3col .footer-credit{
  justify-self: center;
  text-align: center;
  margin: 0;
  opacity: .9;
  font-size: 0.95rem;
}

.footer-3col .footer-logo{
  justify-self: end;
  height: 40px;
  border-radius: 8px;
  border: 2px solid var(--spw-gold);
}

/* linkstijl blijft subtiel */
footer a{
  color: var(--spw-gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: .2s ease;
}
footer a:hover,
footer a:focus-visible{ border-bottom-color: currentColor; }

/* Responsief: onder elkaar en gecentreerd */
@media (max-width: 700px){
  .footer-3col{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer-3col .footer-copy,
  .footer-3col .footer-credit,
  .footer-3col .footer-logo{
    justify-self: center;
  }
}


/* Hoofdafbeelding: volledige foto tonen, niet croppen */
.project-image--fit {
  display: block;
  max-width: 100%;
  max-height: 380px;     /* pas aan naar smaak */
  width: auto;           /* behoud verhouding */
  height: auto;          /* behoud verhouding */
  object-fit: contain;   /* toon volledige image, geen uitsnede */
  background: #fff;      /* optioneel: canvas achter de foto */
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 4px;          /* klein kader rond volledige foto */
  margin: 0 auto 20px;   /* centreer en geef ondermarge */
}

/* Desktop iets compacter */
@media (min-width: 900px) {
  .project-image--fit { max-height: 340px; }
}

/* Mobiel wat ruimer */
@media (max-width: 600px) {
  .project-image--fit { max-height: 300px; }
}

/* Container centreert de image */
.project-media {
  display: flex;
  justify-content: center;
  margin: 18px auto 32px;
}

/* Basis: toon hele foto, geen uitsnede */
.project-image {
  display: block;
  width: auto;              /* behoud originele verhouding */
  height: auto;             /* behoud originele verhouding */
  max-width: min(100%, 1100px);
  max-height: clamp(260px, 58vh, 640px);  /* adaptief t.o.v. viewport */
  object-fit: contain;
  object-position: center;
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  background: #fff;
}

/* Landscape: breder, iets lagere max-hoogte voor balans */
.project-image.is-landscape {
  max-width: min(100%, 1100px);
  max-height: clamp(240px, 56vh, 600px);
}

/* Portrait: smaller max-breedte, mag hoger voor minder witruimte */
.project-image.is-portrait {
  max-width: min(100%, 780px);
  max-height: clamp(320px, 70vh, 840px);
}

/* Mobile: iets ruimer in hoogte */
@media (max-width: 600px) {
  .project-image {
    max-height: clamp(240px, 62vh, 680px);
    border-radius: 12px;
  }
}


/* === EXTRA: project-galerij en lightbox === */

/* Galerij raster */
.project-gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(10px, 2vw, 16px);
  margin-top: 2rem;
}

.project-gallery .pg-item {
  grid-column: span 6; /* 2 kolommen op mobiel */
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  cursor: zoom-in;
  padding: 0;
  border: 0;
  background: transparent;
}

@media (min-width: 768px) {
  .project-gallery .pg-item { grid-column: span 4; } /* 3 kolommen */
}
@media (min-width: 1200px) {
  .project-gallery .pg-item { grid-column: span 3; } /* 4 kolommen */
}

.project-gallery img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}

.project-gallery .pg-item:hover img {
  transform: scale(1.03);
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  z-index: 9999;
}

.lightbox[aria-hidden="false"] {
  display: grid;
}

.lb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.8);
  backdrop-filter: blur(2px);
  z-index: 1;
}

.lb-image {
  position: relative;
  z-index: 2; /* Zorgt dat de foto boven de backdrop komt */
  max-width: min(92vw, 1400px);
  max-height: 86vh;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.4);
}


.lb-image {
  position: relative;
  max-width: min(92vw, 1400px);
  max-height: 86vh;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.4);
}

.lb-close,
.lb-prev,
.lb-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: rgba(255,255,255,.15);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  backdrop-filter: blur(2px);
}

.lb-close {
  top: 20px;
  right: 20px;
  transform: none;
  background: rgba(0,0,0,.5);
  font-size: 24px;
  line-height: 1;
}

.lb-prev { left: 20px; font-size: 22px; }
.lb-next { right: 20px; font-size: 22px; }

.lb-close:hover,
.lb-prev:hover,
.lb-next:hover {
  background: rgba(255,255,255,.25);
}













/* ================================
   Suykens Project Works — styles.css
   Opschoning: alle generieke nav-selectors verwijderd
   en vervangen door gescope’d .spw-* regels.
   ================================ */

/* ---------- Variabelen ---------- */
:root {
  /* Basiskleuren */
  --primary: #11172E;   /* Oxford blue */
  --accent:  #E2B345;   /* Gold */
  --accent2: #907338;   /* Golden brown */
  --light:   #f7f8fb;
  --text:    #11172E;

  /* Alias voor header/blokken (zelfde waarden) */
  --spw-blue:     var(--primary);
  --spw-blue-900: #0F152B; /* iets donkerder voor diepte */
  --spw-gold:     var(--accent);

  /* Schaduwen/overlays */
  --shadow-sm: 0 4px 10px rgba(0,0,0,.15);
  --shadow-md: 0 8px 24px rgba(0,0,0,.18);
  --shadow-lg: 0 14px 30px rgba(0,0,0,.28);
}

/* ---------- Reset & basics ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background-color: #ffffff;
  line-height: 1.6;
}

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

.container {
  width: min(1100px, 90%);
  margin: 0 auto;
}

/* Toegankelijkheids-utility */
.visually-hidden {
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 10px;
  font-weight: 800;
  text-decoration: none;
  transition: 0.25s ease;
  border: 0;
  cursor: pointer;
}

.btn:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--accent);
  color: var(--primary);
}
.btn-primary:hover { filter: brightness(1.06); }

.btn-outline {
  border: 2px solid currentColor;
  color: inherit;
  background: transparent;
}
.btn-outline:hover { background: rgba(0,0,0,0.08); }

.btn-gold {
  background: var(--spw-gold);
  color: var(--spw-blue);
}
.btn-gold:hover { filter: brightness(1.06); }

/* ======================================
   Header (gescope’d op .spw-*)
   ====================================== */
.spw-header {
  position: sticky; top: 0; z-index: 1000;
  background: var(--spw-blue-900);
  color: #fff;
  box-shadow: var(--shadow-md);
  border-bottom: 0; /* visuele lijn staat in accent-balk */
}
.spw-header__accent { height: 4px; background: var(--spw-gold); }

.spw-header__inner {
  max-width: 1200px; margin: 0 auto;
  padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

/* Brand */
.spw-brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:#fff; }
.spw-brand__logo {
  height: 48px; width:auto; border-radius: 10px;
  background:#fff; padding: 6px; box-shadow: var(--shadow-sm);
}
.spw-brand__name {
  font-weight: 900; letter-spacing:.6px; font-size: clamp(1rem, 1.2vw + .6rem, 1.25rem);
  text-wrap: balance;
}

/* Nav */
.spw-nav { position: relative; }
.spw-nav__list {
  list-style: none; display:flex; align-items:center; gap: 26px;
  margin: 0; padding: 0;
}
.spw-nav__list a {
  color:#fff; text-decoration:none; font-weight:800;
  position:relative; padding: 8px 0; display:inline-block;
}
.spw-nav__list a::after {
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px;
  background: var(--spw-gold); transform: scaleX(0); transform-origin:left; transition: .22s ease;
}
.spw-nav__list a:hover::after { transform: scaleX(1); }

/* Active link (JS zet .is-active) */
.spw-nav__list a.is-active::after { transform: scaleX(1); }

/* CTA item in nav */
.spw-nav__cta { margin-left: 6px; }

/* Toggle (hamburger) */
.spw-nav__toggle {
  display:none; width:44px; height:36px; border:0; background:transparent; cursor:pointer;
  align-items:center; justify-content:center; gap:4px;
}
.spw-nav__bar {
  display:block; width:22px; height:2px; background:#fff; border-radius:2px;
  transition: transform .18s ease, opacity .18s ease;
}
.spw-nav__toggle[aria-expanded="true"] .spw-nav__bar:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.spw-nav__toggle[aria-expanded="true"] .spw-nav__bar:nth-child(2) { opacity:0; }
.spw-nav__toggle[aria-expanded="true"] .spw-nav__bar:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }

/* Responsive nav */
@media (max-width: 900px) {
  .spw-nav__toggle { display:inline-flex; }
  .spw-nav__list {
    position:absolute; right:20px; top:calc(100% + 12px);
    background: var(--spw-blue);
    border:1px solid rgba(255,255,255,.08);
    box-shadow: var(--shadow-lg);
    border-radius: 12px; padding: 12px; min-width: 220px;
    display:none; flex-direction:column; align-items:flex-start; gap:10px;
  }
  .spw-nav__list.show { display:flex; }
  .spw-nav__list a::after { bottom:-2px; }
  .spw-nav__cta { width:100%; }
  .spw-nav__cta .btn { width:100%; text-align:center; }
}

/* ======================================
   Hero
   ====================================== */
.hero-logo {
  background: linear-gradient(180deg, var(--primary) 0%, #0a0f22 100%);
  color: white;
  text-align: center;
  padding: 100px 0 80px;
}

.hero-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.hero-big-logo {
  width: 180px;
  height: auto;
  margin-bottom: 10px;
  border-radius: 12px;
  border: 3px solid var(--accent);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.hero h1 {
  font-size: clamp(2rem, 3vw + 1rem, 3rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.hero p {
  max-width: 700px;
  font-size: 1.1rem;
  opacity: 0.95;
}

.hero-cta {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ======================================
   Secties
   ====================================== */
.section { padding: 70px 0; }

.section h2 {
  font-size: 2rem;
  font-weight: 900;
  margin-bottom: 16px;
  color: var(--primary);
  position: relative;
}
.section h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: var(--accent);
  margin-top: 6px;
}

.lead { font-size: 1.05rem; opacity: 0.9; max-width: 800px; }

.dark-section { background: var(--light); }

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

/* ======================================
   Feature cards
   ====================================== */
.features {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.feature-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  border-top: 5px solid var(--accent);
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
}
.feature-card h3 { color: var(--primary); margin-bottom: 10px; }
.feature-card p  { color: #444; }

/* ======================================
   Projecten grid/kaart
   ====================================== */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.project-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #ddd;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}
.project-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.project-card .content { padding: 16px; }
.project-card h3 { font-size: 1.1rem; color: var(--primary); margin-bottom: 6px; }
.project-card p  { font-size: 0.95rem; color: #555; }

.actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px 16px;
}
.tag {
  background: var(--accent);
  color: var(--primary);
  font-weight: 800;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
}

/* ======================================
   Project detail
   ====================================== */
.project-image {
  border-radius: 16px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

.two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.two-cols ul { list-style: none; padding-left: 0; }
.two-cols li::before { content: "• "; color: var(--accent); }

@media (max-width: 800px) {
  .two-cols { grid-template-columns: 1fr; }
}

/* ======================================
   Contact & formulier
   ====================================== */
.contact-section { background: var(--primary); color: #fff; }

.contact-wrap {
  display: grid;
  grid-template-columns: 1.4fr .9fr;
  gap: 28px;
}
@media (max-width: 980px) {
  .contact-wrap { grid-template-columns: 1fr; }
}

.contact-card, .contact-info .info-card, .map-card {
  background: #0F152B;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow-md);
}
.contact-card h2 { color:#fff; }
.contact-card .lead { color:#EAEAF0; }

/* compacter formulier */
.form-compact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
.form-compact .full { grid-column: 1 / -1; }
@media (max-width: 680px){ .form-compact { grid-template-columns: 1fr; } }

.field label { display:block; font-weight:800; margin-bottom:6px; color:#fff; }
.field .req { color: var(--accent); margin-left: 4px; }

.field input, .field textarea, input, textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #fff;
  font: inherit;
}
.field input::placeholder, .field textarea::placeholder { color: #cdd3ff7a; }

.field input:focus, .field textarea:focus, input:focus, textarea:focus {
  outline: 0; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(226,179,69,.25);
  background: rgba(255,255,255,.10);
}

.field .msg {
  display:none; margin-top:6px; font-size:.9rem; color:#ffd4a1;
}
.field.invalid .msg { display:block; }
.field.invalid input, .field.invalid textarea { border-color: #ffb37a; }

.form { /* generieke form grid (licht thema pagina's) */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
textarea { min-height: 140px; }
button.btn {
  grid-column: 1 / -1;
  justify-self: center;
  padding: 14px 28px;
}

/* Alerts */
.alert {
  border-radius: 12px; padding: 10px 12px; margin: 10px 0;
  font-weight: 700;
}
.alert.success { background: rgba(60,179,113,.18); border:1px solid rgba(60,179,113,.5); color:#d6ffe9; }
.alert.error   { background: rgba(220,20,60,.18);  border:1px solid rgba(220,20,60,.5);  color:#ffd7df; }

/* Info kolom */
.info-card h3 { color:#fff; margin-bottom:8px; }
.info-list { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.info-list li { display:flex; gap:10px; align-items:flex-start; }
.info-list a { color:#fff; text-decoration: underline; }
.info-list a:hover { color: var(--accent); }

/* Map */
.map-card iframe { width:100%; height:260px; border:0; border-radius: 10px; }

/* ======================================
   Footer
   ====================================== */
footer {
  background: var(--primary);
  color: white;
  text-align: center;
  padding: 30px 0;
  border-top: 3px solid var(--accent);
}
.footer-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
footer img {
  height: 40px;
  border-radius: 8px;
  border: 2px solid var(--accent);
}

/* Switch boven formulier */
.form-switch {
  display: inline-flex;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: 4px;
  margin: 12px 0 10px;
}
.form-switch .seg {
  appearance: none;
  background: transparent;
  color: #fff;
  border: 0;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 800;
  cursor: pointer;
}
.form-switch .seg.active {
  background: var(--spw-gold);
  color: var(--spw-blue);
}

/* Verborgen / utilities */
.hidden { display: none !important; }
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Consent/checkbox rij netjes uitlijnen */
.consent {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: center;     /* verticaal gecentreerd */
  margin-top: 6px;
}

.consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--spw-gold); /* mooi goud vinkje */
}

.consent label {
  line-height: 1.5;
  user-select: none;
}

/* kleine helper voor fouttoestand */
.field.invalid .consent label { color: #ffd4a1; }

/* ===== Selects dezelfde look als inputs ===== */
.field select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  padding: 12px 42px 12px 14px;   /* ruimte rechts voor pijl */
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background-color: rgba(255,255,255,.06);
  color: #fff;
  font: inherit;
  line-height: 1.4;
}

/* eigen pijl rechts (goud) */
.field select {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23E2B345' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
}

/* hover/focus exact zoals inputs */
.field select:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(226,179,69,.25);
  background-color: rgba(255,255,255,.10);
}

/* disabled/placeholder tint */
.field select:disabled { opacity: .6; cursor: not-allowed; }
/* toon placeholderkleur op required + lege value */
.field select:required:invalid { color: #cdd3ff7a; }

/* Safari/Chrome datum/maand picker-icoon zichtbaar op dark */
input[type="month"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(.8);
}

/* Zorg dat grid-cellen niet duwen op small screens */
.form-compact .field { min-width: 0; }

/* Zorg dat opties in het geopende menu donkere tekst hebben op de lichte achtergrond */
.field select option {
  color: #11172E;                 /* donkerblauw uit je palette */
  background-color: #ffffff;      /* wit menu */
}

/* Placeholder/disabled optie lichter tonen */
.field select option[disabled],
.field select option[value=""] {
  color: #A7AFC8;                 /* subtiele grijs */
}

/* (Optioneel) geselecteerde optie in het menu iets markeren */
.field select option:checked {
  background-color: #F3E5C4;      /* zacht goudachtig */
  color: #11172E;
}

/* ====== Locale switch rechtsboven ====== */
.locale-switch {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: 16px;              /* klein beetje ruimte t.o.v. de nav */
}

.locale-btn {
  appearance: none;
  border: 1px solid rgba(255,255,255,.25);
  background: transparent;
  color: #fff;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .3px;
  cursor: pointer;
  line-height: 1;
}

.locale-btn:hover { filter: brightness(1.1); }
.locale-btn:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset: 2px;
}

/* Actieve taal */
.locale-btn[aria-pressed="true"] {
  background: var(--spw-gold);
  color: var(--spw-blue);
  border-color: transparent;
}

/* Zorgt dat de switch naast het menu kan staan */
.spw-header__tools {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Mobiel: zet de switch onder de toggle voor consistentie */
@media (max-width: 900px) {
  .spw-header__tools {
    gap: 10px;
  }
}

/* Hero tekst = exact 2 regels op brede schermen */
.hero-text .hero-line { white-space: nowrap; }

/* Op small screens weer normale wrapping om overloop te vermijden */
@media (max-width: 700px) {
  .hero-text .hero-line { white-space: normal; }
}

.hero-text { max-width: 900px; }

/* --- Foto upload --- */
.spw-dropzone {
  border: 1px dashed rgba(255,255,255,.35);
  background: rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
  cursor: pointer;
  transition: .2s ease;
}
.spw-dropzone:hover { background: rgba(255,255,255,.10); }
.spw-dropzone.is-dragover { background: rgba(226,179,69,.18); border-color: var(--spw-gold); }

.spw-dropzone .dz-help {
  margin: 0 0 6px;
  color: #EAEAF0;
}
.spw-dropzone .dz-meta {
  margin: 0;
  font-size: .9rem;
  opacity: .9;
}

.spw-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.spw-thumb {
  position: relative;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 1/1;
}
.spw-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.spw-thumb .spw-remove {
  position: absolute; top: 6px; right: 6px;
  border: 0; border-radius: 999px;
  padding: 4px 8px; line-height: 1; cursor: pointer;
  background: rgba(15,21,43,.85);
  color: #fff; font-weight: 900; font-size: .8rem;
}
.spw-thumb .spw-remove:hover { filter: brightness(1.1); }

/* Kleine verbetering voor .btn in dropzone */
.spw-dropzone .btn { padding: 6px 10px; border-radius: 8px; }

/* --- Footer credit --- */
.footer-flex p { margin: 0; }

footer small {
  display: block;
  margin-top: 6px;
  font-size: 0.9rem;
  opacity: .85;                 /* iets subtieler dan hoofdtekst */
}

footer a {
  color: var(--spw-gold);       /* mooi goud accent */
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: .2s ease;
}

footer a:hover,
footer a:focus-visible {
  border-bottom-color: currentColor;
  filter: brightness(1.08);
  outline: none;                /* we gebruiken de border als hint */
}

/* optie: logo iets subtieler in de footer */
footer img {
  opacity: .95;
  transition: .2s ease;
}
footer img:hover { opacity: 1; }

/* 3-koloms footer: L = copy, M = credit, R = logo */
.footer-3col{
  display: grid;                       /* overschrijft eerdere flex */
  grid-template-columns: 1fr auto 1fr; /* midden compact, links/rechts flexibel */
  align-items: center;
  gap: 12px;
}

.footer-3col .footer-copy{
  justify-self: start;
  text-align: left;
  margin: 0;
}

.footer-3col .footer-credit{
  justify-self: center;
  text-align: center;
  margin: 0;
  opacity: .9;
  font-size: 0.95rem;
}

.footer-3col .footer-logo{
  justify-self: end;
  height: 40px;
  border-radius: 8px;
  border: 2px solid var(--spw-gold);
}

/* linkstijl blijft subtiel */
footer a{
  color: var(--spw-gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: .2s ease;
}
footer a:hover,
footer a:focus-visible{ border-bottom-color: currentColor; }

/* Responsief: onder elkaar en gecentreerd */
@media (max-width: 700px){
  .footer-3col{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer-3col .footer-copy,
  .footer-3col .footer-credit,
  .footer-3col .footer-logo{
    justify-self: center;
  }
}


/* Hoofdafbeelding: volledige foto tonen, niet croppen */
.project-image--fit {
  display: block;
  max-width: 100%;
  max-height: 380px;     /* pas aan naar smaak */
  width: auto;           /* behoud verhouding */
  height: auto;          /* behoud verhouding */
  object-fit: contain;   /* toon volledige image, geen uitsnede */
  background: #fff;      /* optioneel: canvas achter de foto */
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 4px;          /* klein kader rond volledige foto */
  margin: 0 auto 20px;   /* centreer en geef ondermarge */
}

/* Desktop iets compacter */
@media (min-width: 900px) {
  .project-image--fit { max-height: 340px; }
}

/* Mobiel wat ruimer */
@media (max-width: 600px) {
  .project-image--fit { max-height: 300px; }
}

/* Container centreert de image */
.project-media {
  display: flex;
  justify-content: center;
  margin: 18px auto 32px;
}

/* Basis: toon hele foto, geen uitsnede */
.project-image {
  display: block;
  width: auto;              /* behoud originele verhouding */
  height: auto;             /* behoud originele verhouding */
  max-width: min(100%, 1100px);
  max-height: clamp(260px, 58vh, 640px);  /* adaptief t.o.v. viewport */
  object-fit: contain;
  object-position: center;
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  background: #fff;
}

/* Landscape: breder, iets lagere max-hoogte voor balans */
.project-image.is-landscape {
  max-width: min(100%, 1100px);
  max-height: clamp(240px, 56vh, 600px);
}

/* Portrait: smaller max-breedte, mag hoger voor minder witruimte */
.project-image.is-portrait {
  max-width: min(100%, 780px);
  max-height: clamp(320px, 70vh, 840px);
}

/* Mobile: iets ruimer in hoogte */
@media (max-width: 600px) {
  .project-image {
    max-height: clamp(240px, 62vh, 680px);
    border-radius: 12px;
  }
}


/* === EXTRA: project-galerij en lightbox === */

/* Galerij raster */
.project-gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(10px, 2vw, 16px);
  margin-top: 2rem;
}

.project-gallery .pg-item {
  grid-column: span 6; /* 2 kolommen op mobiel */
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  cursor: zoom-in;
  padding: 0;
  border: 0;
  background: transparent;
}

@media (min-width: 768px) {
  .project-gallery .pg-item { grid-column: span 4; } /* 3 kolommen */
}
@media (min-width: 1200px) {
  .project-gallery .pg-item { grid-column: span 3; } /* 4 kolommen */
}

.project-gallery img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}

.project-gallery .pg-item:hover img {
  transform: scale(1.03);
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  z-index: 9999;
}

.lightbox[aria-hidden="false"] {
  display: grid;
}

.lb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.8);
  backdrop-filter: blur(2px);
  z-index: 1;
}

.lb-image {
  position: relative;
  z-index: 2; /* Zorgt dat de foto boven de backdrop komt */
  max-width: min(92vw, 1400px);
  max-height: 86vh;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.4);
}


.lb-image {
  position: relative;
  max-width: min(92vw, 1400px);
  max-height: 86vh;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.4);
}

.lb-close,
.lb-prev,
.lb-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: rgba(255,255,255,.15);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  backdrop-filter: blur(2px);
}

.lb-close {
  top: 20px;
  right: 20px;
  transform: none;
  background: rgba(0,0,0,.5);
  font-size: 24px;
  line-height: 1;
}

.lb-prev { left: 20px; font-size: 22px; }
.lb-next { right: 20px; font-size: 22px; }

.lb-close:hover,
.lb-prev:hover,
.lb-next:hover {
  background: rgba(255,255,255,.25);
}