header {
  position: fixed; /* blijft bovenaan */
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.795);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  transition: padding 0.3s ease;
  z-index: 9999; /* altijd boven content */
}

/* SHRINK CLASS: kleinere padding bij scroll */
header.shrink {
  padding: 8px 30px;
  background: rgba(255, 255, 255, 0.486);
}

/* LOGO: hoogte en overgang voor smooth verkleinen */
.logo img {
  height: 120px;
  transition: height 0.3s ease;
  
}

/* Logo kleiner bij scroll */
header.shrink .logo img {
  height: 40px;
}

/* NAVIGATIE: lijst horizontaal */
.main-nav ul {
  list-style: none;
  display:flex;
  gap: 30px;
}

/* Link stijl */
.main-nav a {
  color: rgb(0, 0, 0);
  text-decoration: none;
  font-size: 18px;
  font-weight: 600;
  transition: color 0.2s ease;
}

/* Hover kleur */
.main-nav a:hover {
  color: blue;
}

/* ===== Reset / basis ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

/* ===== Hero layout ===== */
:root {
  --hero-accent: #0a58ff;
  --hero-caption-bg: rgba(0,0,0,.42);
  --hero-caption-color: #fff;
  --hero-height: 100vh;
  --hero-height-mobile: 50vh;
}

.hero {
  position: relative;
  height: var(--hero-height);
  min-height: 520px;
  background: #000;
  overflow: hidden;
  isolation: isolate;
}
@supports (height: 100dvh) {
  .hero { height: 100dvh; }
}

.hero__slide {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease;
}
.hero__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Leesbaarheids-gradient onderin */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(to top, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 60%);
  pointer-events: none;
}

/* Caption */
.hero__caption {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;
  max-width: min(70ch, 70%);
  color: var(--hero-caption-color);
  background: var(--hero-caption-bg);
  padding: 16px 20px;
  border-radius: 12px;
  backdrop-filter: saturate(120%) blur(2px);
}
.hero__caption h2 {
  font-size: clamp(24px,4vw,44px);
  line-height: 1.1;
  margin: 0 0 .25em;
}
.hero__caption p {
  font-size: clamp(14px,1.5vw,18px);
  opacity: .95;
  margin: 0 0 .8em;
}
.hero__link {
  display: inline-block;
  text-decoration: none;
  font-weight: 700;
  background: #fff;
  color: #000;
  padding: 8px 14px;
  border-radius: 10px;
}

/* Navigatie */
.hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  cursor: pointer;
  font-size: 20px;
  z-index: 5;              /* boven slides + overlay */
  box-shadow: 0 6px 18px rgba(0,0,0,.3);
  display: grid;
  place-items: center;
  line-height: 1;
}
.hero__arrow.prev { left: 16px; }
.hero__arrow.next { right: 16px; }

.hero__dots {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 5;
}
.hero__dots .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,.7);
  cursor: pointer;
}
.hero__dots .dot.active {
  background: var(--hero-accent);
}

/* Reset basis marges/padding */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

/* Section hero: zelfde look & feel als de bovenste hero, maar statisch */
.section-hero{
  position: relative;
   height: 100vh;   /* desktop & fallback */
  height: 100dvh;  /* correcte mobile viewport */            
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  display: grid;
  align-items: end;               /* caption onderin zoals boven */
  padding: 24px;                  /* ruimte rondom */
  margin: 24px 0 0;               /* lucht boven volgende content */
  isolation: isolate;
}
.section-hero::before{
  /* subtiele donkerte voor leesbaarheid tekst */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 60%);
  z-index: 0;
}
.section-hero__caption{
  position: relative; z-index: 1;
  max-width: min(70ch, 70%);
  color: #fff;
  background: rgba(0,0,0,.42);
  padding: 16px 20px;
  border-radius: 12px;
}
.section-hero__caption h2{
  margin: 0 0 .25em;
  line-height: 1.1;
  font-size: clamp(22px, 4vw, 44px);
}
.section-hero__caption p{
  margin: 0;
  font-size: clamp(14px, 1.5vw, 18px);
  opacity: .95;
}

@media (max-width: 720px){
  .section-hero{ min-height: 56vh; padding: 16px; }
  .section-hero__caption{ max-width: 92%; }
}


/* === WSC Projects: basis === */
.wsc-projects { --gap: 28px; --padY: 48px; --maxW: 1100px; }
.wsc-projects .project-section{ padding: var(--padY) 0; }
.wsc-projects .project-heading{
  max-width: var(--maxW); margin: 0 auto 16px; padding: 0 24px;
  font-size: clamp(20px, 3vw, 34px);
}
.wsc-projects .block{
  max-width: var(--maxW); margin: 0 auto; padding: 16px 24px;
  display: grid; gap: var(--gap);
}
.wsc-projects .text h4{ font-size: clamp(18px, 2.4vw, 26px); margin: 0 0 6px; }
.wsc-projects .text p{ font-size: clamp(14px, 1.6vw, 18px); line-height: 1.6; margin: 0; color:#333; }
.wsc-projects .media img{ width: 100%; height: auto; display: block; border-radius: 12px; }
.wsc-projects .cta{ max-width: var(--maxW); margin: 10px auto 0; padding: 0 24px; }
.wsc-projects .btn{
  display:inline-block; background:#0a58ff; color:#fff; text-decoration:none;
  padding:10px 16px; border-radius:10px; font-weight:700;
}

/* e */
.wsc-projects.design-e{
  --gap:32px; --padY:56px; --maxW:1100px;
  --cardBg:#fff; --cardRadius:16px;
  --cardShadow:0 12px 30px rgba(0,0,0,.12);
  --cardBorder:1px solid rgba(0,0,0,.06);
}

.wsc-projects.design-e .project-section{ padding:var(--padY) 0; }

.wsc-projects.design-e .project-heading{
  max-width:var(--maxW); margin:0 auto 18px; padding:0 24px;
  font-size:clamp(26px,4vw,44px); line-height:1.1;
}

/* Kaart: zelfde 2-koloms verhouding als D, maar met kaart-styling */
.wsc-projects.design-e .block{
  max-width:var(--maxW);
  margin:0 auto 28px; padding:18px 20px;
  display:grid; gap:var(--gap); align-items:center;
  grid-template-columns:1.25fr 0.9fr; /* tekst breder, foto smaller (rechts) */
  background:var(--cardBg); border-radius:var(--cardRadius);
  box-shadow:var(--cardShadow); border:var(--cardBorder);
  overflow:hidden; transition:transform .2s ease, box-shadow .2s ease;
}
.wsc-projects.design-e .block:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 38px rgba(0,0,0,.16);
}

/* Om-en-om (foto links → kolommen omdraaien) */
.wsc-projects.design-e .project-section .block:nth-of-type(even){
  grid-template-columns:0.9fr 1.25fr;
}

/* Zelfde typografie als D */
.wsc-projects.design-e .text h4{ font-size:clamp(20px,2.6vw,28px); margin:0 0 8px; }
.wsc-projects.design-e .text p{ font-size:clamp(16px,1.7vw,20px); line-height:1.7; color:#1f2937; margin:0; }

/* Afbeelding in de kaart */
.wsc-projects.design-e .media{ border-radius:12px; overflow:hidden; }
.wsc-projects.design-e .media img{ width:100%; height:auto; display:block; }

/* Om-en-om volgorde zoals D (tekst↔foto) */
.wsc-projects.design-e .project-section .block:nth-of-type(odd)  .text{ order:0; }
.wsc-projects.design-e .project-section .block:nth-of-type(odd)  .media{ order:1; }
.wsc-projects.design-e .project-section .block:nth-of-type(even) .text{ order:1; }
.wsc-projects.design-e .project-section .block:nth-of-type(even) .media{ order:0; }

/* Responsief: stapelen op mobiel */
@media (max-width: 980px){
  .wsc-projects.design-e .block{ grid-template-columns:1fr; }
  .wsc-projects.design-e .media{ order:2; } /* eerst tekst, dan foto*/
}

/* Forceer altijd 2 kolommen op PC (boven 980px) */
@media (min-width: 981px){
  .wsc-projects.design-e .block{
    grid-template-columns: 1.25fr 0.9fr !important;
  }
  .wsc-projects.design-e .project-section .block:nth-of-type(even){
    grid-template-columns: 0.9fr 1.25fr !important;
  }
  /* desktop: volgorde zoals standaard, geen geforceerde 'order' */
  .wsc-projects.design-e .media{ order: initial; }
}

/*wegwijzer onderin*/

.mini-hero {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 40px;
  background: #f5f5f5;
}

.mini-card {
  flex: 1;
  height: 250px;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.3s, box-shadow 0.3s;
}

.mini-card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0,0,0,0.3);
}

.mini-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.5);
  color: white;
  padding: 15px;
  text-align: center;
}

.mini-overlay h2 {
  margin: 0;
  font-size: 1.5rem
}
/*footer*/
.site-footer {
  background: #222;
  color: #ccc;
  font-size: 0.9rem;
  margin-top: 40px;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 30px 20px;
  max-width: 1100px;
  margin: 0 auto;
}

.footer-info h3 {
  color: white;
  margin-bottom: 10px;
  font-size: 1.2rem;
}

.footer-info p,
.footer-contact p {
  margin: 5px 0;
}

.footer-bottom {
  text-align: center;
  padding: 15px;
  background: #111;
  border-top: 1px solid #333;
}
.footer-contact a {
  color: #ccc;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-contact a:hover {
  color: white;
  text-decoration: underline;
}

@media (max-width: 720px) {
  .hero {
    height: var(--hero-height-mobile);
    min-height: 0;
  }
  .hero__caption {
    max-width: 92%;
    left: 16px;
    right: 16px;
    bottom: 16px;
  }
  .logo img {
  height: 120px;
  transition: height 0.3s ease;
  }
  .main-nav ul {
  list-style: none;
  display:block;
  gap: 30px;
}
  

  /*oplossingsplek voor telefoon */
}

/* Standaard: verborgen */
.rotate-notice{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.75);
  color: #fff;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* Het “kaartje” */
.rotate-notice__box{
  max-width: 520px;
  width: 100%;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 14px;
  padding: 16px 18px;
  text-align: center;
  font-size: 16px;
  line-height: 1.35;
  backdrop-filter: blur(4px);
}

/* Alleen tonen op telefoonformaat én als hij STAAND staat */
@media (max-width: 900px) and (orientation: portrait) {
  .rotate-notice{ display: flex; }
}