:root{
    --bruin:#88724E;
    --bruin-donker:#5f4f37;
    --bruin-licht:#f2ede4;
    --zwart:#000000;
    --zwart-zacht:rgba(0,0,0,.72);
    --zwart-mute:rgba(0,0,0,.5);
    --wit:#ffffff;
    --wit-mute:rgba(255,255,255,.7);
    --lijn:rgba(0,0,0,.12);
    --lijn-wit:rgba(255,255,255,.18);
    --font-display:'Excon',sans-serif;
    --font-body:'Excon', sans-serif;
    --font-mono:'IBM Plex Mono',monospace;
    --max:1180px;
    --ox:100%;
    --oy:0%;
  }


  *,*::before,*::after{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:var(--font-body);
    color:var(--zwart);
    background:var(--wit);
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  img,svg{display:block;max-width:100%;}
  a{color:inherit;}
  h1,h2,h3{font-family:var(--font-display);margin:0;line-height:1.05;font-weight:600;}
  p{margin:0;}
  ul{margin:0;padding:0;list-style:none;}
  *:focus-visible{outline:2px solid var(--bruin-donker);outline-offset:3px;}


.menu-contact-icons{display:flex;flex-direction:column;gap:1.75rem;}

  /* ---------- scroll lock zolang menu open staat ---------- */
  html.no-scroll,body.no-scroll{overflow:hidden;height:100%;}

  /* ---------- site header (hamburger-trigger) ---------- */
  .site-header{
    position:fixed;top:0;left:0;width:100%;z-index:60;
    background:rgba(255,255,255,.86);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--lijn);
    transition:background .3s ease, border-color .3s ease;
  }
  .site-header-inner{display:flex;align-items:center;justify-content:space-between;height:76px;}
  .logoo{font-family:var(--font-display);font-weight:700;font-size:1.25rem;letter-spacing:-.01em;text-decoration:none;color:var(--zwart);transition:color .3s ease;}
  .site-header.menu-open{background:transparent;border-color:transparent;}
  .site-header.menu-open .logoo{color:var(--wit);}


  .taal{font-family:var(--font-display);letter-spacing:-.01em;text-decoration:none;color:var(--zwart);transition:color .3s ease;}
  .site-header.menu-open .taal{color:var(--wit);}

  /* ---------- hamburger ---------- */
  .hamburger{position:relative;width:32px;height:24px;background:transparent;border:none;cursor:pointer;padding:0;z-index:5;}
  .hamburger-line{position:absolute;left:0;width:100%;height:2px;background:var(--zwart);transition:transform .3s ease,opacity .3s ease,top .3s ease,background .3s ease;}
  .hamburger-line:nth-child(1){top:0;}
  .hamburger-line:nth-child(2){top:11px;}
  .hamburger-line:nth-child(3){top:22px;}
  .hamburger:focus-visible{outline:2px solid var(--bruin-donker);outline-offset:6px;border-radius:2px;}
  .hamburger.is-active .hamburger-line{background:var(--bruin);}
  .hamburger.is-active .hamburger-line:nth-child(1){top:11px;transform:rotate(45deg);}
  .hamburger.is-active .hamburger-line:nth-child(2){opacity:0;}
  .hamburger.is-active .hamburger-line:nth-child(3){top:11px;transform:rotate(-45deg);}
  .site-header.menu-open .hamburger-line{background-color:var(--wit);}

  /* ---------- menu overlay: cirkel-reveal vanuit de hamburger ---------- */
  .menu-overlay{
    position:fixed;inset:0;z-index:55;
    background:var(--zwart);
    overflow:hidden;
    display:flex;align-items:stretch;justify-content:center;
    clip-path:circle(0% at var(--ox) var(--oy));
    transition:clip-path .7s cubic-bezier(.16,1,.3,1);
    pointer-events:none;
  }
  .menu-overlay.is-open{clip-path:circle(150% at var(--ox) var(--oy));pointer-events:auto;}
  @media (prefers-reduced-motion:reduce){
  .menu-overlay{clip-path:none;opacity:0;transition:opacity .25s ease;}
  .menu-overlay.is-open{clip-path:none;opacity:1;}
  .menu-list li a{transition:none;transform:none;}
  }

.menu-panel{flex:1 1 50%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.menu-panel-contact{border-left:1px solid var(--lijn-wit);}
.menu-list{position:relative;list-style:none;text-align:center;}
.menu-list li{margin:0.5rem 0;overflow:hidden;}
.menu-list li a{
    display:inline-block;color:var(--bruin);text-decoration:none;
    font-family:var(--font-display);font-weight:700;
    font-size:clamp(2rem,6vw,4.2rem);letter-spacing:-.02em;
    position:relative;transform:translateY(110%);
    transition:transform .6s cubic-bezier(.16,1,.3,1),color .2s ease;}
.menu-overlay.is-open .menu-list li a{transform:translateY(0);}
.menu-overlay.is-open .menu-list li:nth-child(1) a{transition-delay:.2s;}
.menu-overlay.is-open .menu-list li:nth-child(2) a{transition-delay:.26s;}
.menu-overlay.is-open .menu-list li:nth-child(3) a{transition-delay:.32s;}
.menu-overlay.is-open .menu-list li:nth-child(4) a{transition-delay:.38s;}
.menu-list li a:hover{color:var(--wit);}
.menu-list li a:focus-visible{color:var(--wit);outline:2px solid var(--zwart);outline-offset:8px;border-radius:6px;}
.menu-contact-inner{display:flex;flex-direction:column;align-items:flex-start;gap:1.75rem;padding:2rem;}
.menu-contact-title{font-family:var(--font-mono);color:var(--wit-mute);text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;}
.menu-contact-item{display:flex;align-items:center;gap:.9rem;color:var(--wit);text-decoration:none;font-size:1.1rem;transition:opacity .2s ease,transform .2s ease;}
.menu-contact-item:hover{opacity:.8;transform:translateX(4px);}
.menu-contact-item:focus-visible{outline:2px solid var(--bruin);outline-offset:4px;}
.menu-contact-item .contact-icon{width:24px;height:24px;flex-shrink:0;}



/* ============ TAAL + VLAGGEN ============ */
.header-right {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;

}
.lang-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
  opacity: 0.45;
  transition: opacity 0.2s ease;
}
.lang-link:hover,
.lang-link:focus-visible,
.lang-link.is-active {
  opacity: 1;
}
.lang-link:hover,
.lang-link:focus-visible {
  text-decoration: none;
}
.lang-link.is-active {
  font-weight: 600;
}

.lang-divider {
  opacity: 0.3;
}
 
.vlag {
  display: inline-block;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
}
.vlag svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media screen and (max-width:899px){
.menu-overlay{flex-direction:column;padding-top:76px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.menu-panel-nav{flex:0 0 auto;padding:56px 24px 40px;}
.menu-panel-contact{flex:0 0 auto;border-left:none;border-top:1px solid var(--lijn-wit);}
.menu-contact-inner{align-items:center;}
.menu-list li a{font-size:clamp(1.7rem,9vw,2.6rem);}
.menu-contact-icons{flex-direction:row;gap:1.75rem;}
.menu-contact-text{display:none;}
.menu-contact-item{padding:10px;}
	.vlag {
  display: inline-block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
}
}

/* ============================================================
   Hieronder: voormalige inhoud van vas.css
   ============================================================ */
* {margin: 0;padding: 0;box-sizing: border-box;}
body,p,h1,h2 {font-family: 'Excon', sans-serif;font-weight: 400;font-style: normal;}
body {background: #ffffff;}
 
.link {text-decoration: none;text-decoration-color: currentColor;text-underline-offset: 3px;text-decoration-thickness: 1px;transition: opacity .2s ease, text-decoration-thickness .2s ease;}
.link:visited { color: inherit; }
.link:hover, .link:focus-visible {text-decoration: underline;text-decoration-color: currentColor;text-underline-offset: 3px;opacity: .9;text-decoration-thickness: 2px;}
 
.container {width: 100%; margin: 0 auto;}
.container-1400 {max-width: 1400px; width: 90%; margin: 0 auto;}
.container-50 {max-width: 1400px; width: 90%; margin: 0 auto;}
.ruim {margin: 0 0 0 5%}
	
.thin {font-family: 'Excon', sans-serif;font-weight: 100;}
.dun {font-family: 'Excon', sans-serif;font-weight: 200;}
.bold {font-family: 'Excon', sans-serif;font-weight: 900;}
 
@font-face {
  font-family: 'Excon';
  src: url("https://dykz.nl/font/Excon-Thin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100;
  font-display: swap;
}
@font-face {
  font-family: 'Excon';
  src: url("https://dykz.nl/font/Excon-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Excon';
  src: url("https://dykz.nl/font/Excon-Black.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: 'Excon';
  src: url("https://dykz.nl/font/Excon.woff2") format("woff2");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url("https://dykz.nl/font/Mono.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
 
.line02{line-height: 0.2;}.line04{line-height: 0.4;}.line06{line-height: 0.6;} .line08{line-height: 0.8;} .line10{line-height: 1.0;} .line12{line-height: 1.2;} .line14{line-height: 1.4;} .line16{line-height: 1.6;} .line18{line-height: 1.8;}
 
.scroll-indicator2 {display: inline-flex; align-items: center; gap: 0.6rem; flex: 0 0 auto}
.scroll-indicator-arrow2 {display: block; width: 20px; height: 20px; transform: rotate(45deg); animation: scroll-arrow-sway 1.8s ease-in-out infinite}
.scroll-indicator-arrow2 svg { display: block; width: 100%; height: 100%; }
@keyframes scroll-arrow-sway {
  0%, 100% { transform: rotate(35deg); }
  50%      { transform: rotate(55deg); }
}	
	
.slide-in-wrapper {position: relative;height: 70vh}
.slide-in-container {position: relative;overflow: hidden}
.slide-in-container.is-stuck {position: sticky;top: 8rem;overflow: visible}
.slide-in-text {white-space: nowrap;display: block}

.caps {text-transform: uppercase}
 
:root {
--bruin: #88724E;
--zwart: #111111;
--zwarter: #000000;
--wit: #ffffff;
}
.zwart{background: var(--zwart)}
.zwarter{background: var(--zwarter)}
.wit{background: var(--wit)}
.t-bruin{color: var(--bruin)}
.t-zwart{color: var(--zwart)}
.t-wit{color: var(--wit)}
.scroll-color-text .word {color: var(--color-off)}
.variant-white-to-black {--color-off: #ffffff; --color-on: #000000}
.variant-white-to-brown {--color-off: #ffffff; --color-on: #88724E}
 

	  .stars{font-size:1.1rem;letter-spacing:.15em;color:var(--bruin-donker);margin-bottom:20px;}


	.bruin-donker{background: var(--bruin-donker)}
		.bruin-licht{background: var(--bruin-licht)}
	
		.t-bruin-licht{color: var(--bruin-licht)}
	
  .mono{
    font-family:var(--font-mono);
    letter-spacing:.02em;
  }
  .tagt{
    font-family:var(--font-mono);
  
    color:var(--bruin-donker);
    letter-spacing:.02em;
  }
  .tagt::before{content:"<";opacity:.55;}
  .tagt::after{content:">";opacity:.55;}
	
  .cta{display:flex;gap:16px;margin-top:38px;flex-wrap:wrap;}
  .btn{
    font-family:var(--font-mono);
    padding:15px 26px;border-radius:2px;text-decoration:none;
    display:inline-flex;align-items:center;gap:10px;
    transition:background .2s,color .2s,border-color .2s;
  }
.btn-primary{background:var(--bruin-donker);color:var(--wit);}
  .btn-primary:hover{background:var(--bruin);color:var(--zwart);}
  .btn-ghost{border:1px solid var(--zwart);color:var(--zwart);}
  .btn-ghost:hover{background:var(--zwart);color:var(--wit);}
	
	
.btn-zwart{border:1px solid var(--zwart);background:var(--zwart);color:var(--wit);}
  .btn-zwart:hover{border:1px solid var(--wit);background:var(--bruin-donker);color:var(--wit);}
  .btn-wit{border:1px solid var(--wit);background:var(--wit);color:var(--zwart);}
  .btn-wit:hover{background:var(--bruin-donker);color:var(--wit);}
	
	
	  .cta__contact{margin-top:52px;display:flex;gap:34px;flex-wrap:wrap;justify-content:left;font-family:var(--font-mono);font-size:.88rem;}
  .cta__contact a{text-decoration:none;color:var(--wit-mute);border-bottom:1px solid var(--lijn-wit);padding-bottom:2px;}
  .cta__contact a:hover{color:var(--wit);border-color:var(--wit);}
	
	
	  /* ---------- techniek vs cms ---------- */
  .vs{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px;}
  @media (max-width:560px){.vs{grid-template-columns:1fr;}}
  .vs__card{border:1px solid var(--lijn-wit);border-radius:8px;padding:26px 24px;}
  .vs__card h3{font-family:var(--font-mono);font-size:.85rem;font-weight:500;color:var(--wit-mute);margin-bottom:16px;text-transform:uppercase;letter-spacing:.06em;}
  .vs__card--dykz{border-color:var(--bruin);background:rgba(136,114,78,.08);}
  .vs__card--dykz h3{color:var(--bruin);}
  .vs li{display:flex;gap:10px;font-size:.94rem;padding:7px 0;color:var(--wit-mute);}
  .vs__card--dykz li{color:var(--wit);}
  .vs li .mark{font-family:var(--font-mono);flex-shrink:0;color:rgba(255,255,255,.35);}
  .vs__card--dykz li .mark{color:var(--bruin);}

	
.megaxl {font-size: 2.75rem; font-size: clamp(2.75rem, 1.79rem + 4.81vw, 6rem);}
.mega { font-size: 3.2rem; font-size: clamp(3.1rem, 2.53rem + 3.56vw, 5.5rem); }
h1, .groot { font-size: 2.1rem; font-size: clamp(2.0rem, 1.64rem + 1.78vw, 3.2rem); }
h2, .medium { font-size: 1.5rem; font-size: clamp(1.4rem, 1.25rem + 0.74vw, 1.9rem); }
p, .normaal { font-size: 1.3rem; font-size: clamp(1.2rem, 1.11rem + 0.44vw, 1.5rem); }
.klein  { font-size: 1.0rem; font-size: clamp(0.9rem, 0.81rem + 0.44vw, 1.2rem); }
 
.spacer-md {height: 1.5rem; height: clamp(1.5rem, 1rem + 3vw, 2.5rem)}
.spacer-lg {height: 5rem; height: clamp(2.5rem, 1.5rem + 3vw, 7.5rem)}
.h-mob {display: none}
.h-desk {display: block}
 
.row {display: flex;gap: 5%;flex-direction: column}
.col-70, .col-50, .col-25 {width: 100%}

.sticky-content {
  position: sticky;
  top: calc(var(--header-h, 50px) + 0.5rem);
}
	
.vert-links {writing-mode: vertical-rl;transform: rotate(180deg);white-space: nowrap}

.center {text-align: center}
.rechts {text-align: right}

/* ============ IMPACT: mega tekst die "eruit knalt" ============ */
.impact {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000000;
  color: #ffffff;
  padding: 4rem 1.5rem;
  text-align: center;
}
 
/* Zachte ambient gloed achter de tekst, blijft na binnenkomst rustig
   ademen — zelfde soort effect als de gloed in het hamburgermenu. */
.impact-glow {
  position: absolute;
  width: 50vmax;
  height: 50vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(136, 114, 78, .35), transparent 70%);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: blur(30px);
  opacity: 0;
  transition: opacity 1.2s ease;
}
.impact.is-in-view .impact-glow {
  opacity: 1;
  animation: impact-glow-breathe 6s ease-in-out 1.2s infinite;
}
@keyframes impact-glow-breathe {
  0%, 100% { opacity: .7; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;  transform: translate(-50%, -50%) scale(1.08); }
}
 
.impact-text {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 1400px;
  font-family: 'Excon', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.95;
  font-size: 2.75rem; font-size: clamp(2.75rem, 1.79rem + 4.81vw, 6rem);
}
.impact-word {
  display: inline-block;
  opacity: 0;
  filter: blur(22px);
  transform: scale(0.4);
  will-change: transform, filter, opacity;
}
.impact.is-in-view .impact-word {
  animation: impact-word-in 0.9s cubic-bezier(.16, 1.4, .4, 1) forwards;
}
@keyframes impact-word-in {
  0%   { opacity: 0; filter: blur(22px); transform: scale(0.4); }
  60%  { opacity: 1; filter: blur(0);    transform: scale(1.08); }
  100% { opacity: 1; filter: blur(0);    transform: scale(1); }
}
/* stagger: elk woord iets later, zodat de zin "opgebouwd" wordt i.p.v.
   in één keer te verschijnen */
.impact.is-in-view .impact-word:nth-child(1) { animation-delay: .05s; }
.impact.is-in-view .impact-word:nth-child(2) { animation-delay: .16s; }
.impact.is-in-view .impact-word:nth-child(3) { animation-delay: .27s; }
.impact.is-in-view .impact-word:nth-child(4) { animation-delay: .38s; }
.impact.is-in-view .impact-word:nth-child(5) { animation-delay: .49s; }
.impact.is-in-view .impact-word:nth-child(6) { animation-delay: .64s; }
 
.impact-word--accent { color: #88724E; }

.seal{
  width:50%;height:50%;border-radius:50%;
  border:2px dashed var(--bruin-donker);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--font-display);flex-shrink:0;background:var(--wit);margin: 0 auto;
}
.seal b{font-size:2.6rem;font-weight:700;line-height:1;}
.seal span{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;margin-top:6px;color:var(--zwart-zacht);text-align:center;text-transform:uppercase;}

.avatar{
  width:50%;height:50%;border-radius:50%;background:var(--bruin);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  overflow:hidden;margin: 0 auto;
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block;}
 
@media screen and (min-width: 900px) {
.ruim {margin: 0 0 0 20%}
.scroll-indicator-arrow2 {width: 40px; height: 40px;}
.container-50 {max-width: 1400px; width: 50%; margin: 0 auto;}
.h-mob {display: block}
.h-desk {display: none;}
.row {flex-direction: row}
.col-25 {width: 25%}
.col-50 {width: 50%}
.col-70 {width: 70%}
}

/* ============ FAQ ============ */
  .faq{
    max-width: 100%;
    margin: 0 auto;
  }
 
  .faq-item{
    border-bottom: 1px solid rgba(0,0,0,.12);
  }
  .faq-item:first-child{
    border-top: 1px solid rgba(0,0,0,.12);
  }
 
  /* de <summary> is de klikbare vraagregel — verberg de browser-eigen
     pijltjes/driehoekjes zodat alleen ons eigen plus/min-icoon overblijft */
  .faq-q{
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 4px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .faq-q::-webkit-details-marker{ display:none; }
  .faq-q::marker{ content:""; }
 
 
  .faq-item:hover .faq-q-text{
    color: var(--bruin);
  }
 
  /* plus/min-icoon: twee balkjes over elkaar. bij [open] schaalt de
     verticale balk naar 0 — een "+" morft zo zonder tekstwissel naar "–" */
  .faq-icon{
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--bruin);
  }
  .faq-icon::before,
  .faq-icon::after{
    content:"";
    position:absolute;
    top:50%; left:50%;
    background: currentColor;
    border-radius: 1px;
    transition: transform .28s cubic-bezier(.4,0,.2,1);
  }
  .faq-icon::before{ /* horizontale balk, altijd zichtbaar */
    width: 100%; height: 2px;
    transform: translate(-50%, -50%);
  }
  .faq-icon::after{ /* verticale balk, verdwijnt bij open */
    width: 2px; height: 100%;
    transform: translate(-50%, -50%) scaleY(1);
  }
  .faq-item[open] .faq-icon::after{
    transform: translate(-50%, -50%) scaleY(0);
  }
  .faq-item[open] .faq-icon{
    color: var(--zwart);
  }
 
  .faq-a{
    padding: 0 4px 24px;
  }

  .faq-q:focus-visible{
    outline: 2px solid var(--bruin);
    outline-offset: 4px;
    border-radius: 2px;
  }
 
  @media (prefers-reduced-motion: reduce){
    .faq-icon::before,
    .faq-icon::after{ transition: none; }
  }
 
  @media (max-width: 560px){
    .faq-q{ padding: 18px 2px; gap: 16px; }
    .faq-a{ padding: 0 2px 20px; }
  }