/* ============================================================
   VALO PROJECTS — gedeeld design-systeem (brandbook)
   Gebruikt op elke pagina van de site.
   ============================================================ */
:root{
  --c-black:   #0c1519;  /* Chinese Black — hoofdachtergrond */
  --c-jungle:  #162127;  /* Dark Jungle Green — alt achtergrond */
  --c-jet:     #3a3534;  /* Jet — donker neutraal */
  --c-coffee:  #724b39;  /* warm bruin accent */
  --c-brass:   #cf9d7b;  /* Antique Brass — primair accent */
  --c-cream:   #ede3d6;  /* licht crème — tekst op donker */

  --c-cream-60: rgba(237,227,214,.60);
  --c-cream-35: rgba(237,227,214,.35);
  --c-cream-12: rgba(237,227,214,.12);
  --c-cream-07: rgba(237,227,214,.07);
  --c-brass-15: rgba(207,157,123,.15);

  --font-display: 'Italiana', Georgia, serif;   /* → Decalotype titel-serif zodra beschikbaar, zie FONT NOTE onderaan */
  --font-sans: 'Inter', -apple-system, sans-serif;

  --max-w: 1180px;
  --pad-x: clamp(20px, 5vw, 48px);
  --sec-y: clamp(88px, 12vw, 160px);

  --ease: cubic-bezier(.22,.61,.21,1);
}

/*
  FONT NOTE (voor Rob):
  Decalotype is geen Google Font. Zodra je de licentie-bestanden van de brandbook-designer hebt,
  vervang je alleen de twee variabelen --font-display en --font-logo in :root en voeg je een
  @font-face toe. Italiana staat er nu als stand-in: zelfde dunne, architecturale contrast-serif
  als het VALO-logotype. Inter is definitief (staat zo in de brandbook).
*/

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--c-black);
  color:var(--c-cream);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--c-brass);color:var(--c-black)}
img{max-width:100%;display:block}
a{color:inherit}

/* Skip-link + focus zichtbaar voor toetsenbord */
.skip-link{
  position:absolute;left:12px;top:-60px;z-index:200;
  background:var(--c-brass);color:var(--c-black);
  padding:10px 18px;border-radius:3px;font-size:13px;font-weight:700;
  text-decoration:none;transition:top .3s var(--ease);
}
.skip-link:focus{top:12px}
:focus-visible{outline:2px solid var(--c-brass);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--max-w);margin:0 auto;padding:0 var(--pad-x)}

/* ---------- Sectielabel met maatlat-streepjes (signatuur uit het logo) ---------- */
.sec-label{
  display:flex;align-items:center;gap:16px;
  font-size:12px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
  color:var(--c-brass);margin-bottom:28px;
}
.sec-label .ruler{flex:0 0 auto;height:14px;opacity:.9}
.sec-label .ruler line{stroke:var(--c-brass);stroke-width:1.5}

h2.sec-title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(34px,5vw,58px);
  line-height:1.12;
  letter-spacing:.01em;
  color:var(--c-cream);
  max-width:16ch;
}

/* ---------- Reveal on scroll ---------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease), transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.1s}.rv-d2{transition-delay:.2s}.rv-d3{transition-delay:.3s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .rv{opacity:1;transform:none}
}

/* ============================================================
   NAVIGATIE
   ============================================================ */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
  padding:22px 0;
}
header.solid{
  background:rgba(12,21,25,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--c-cream-07);
  padding:14px 0;
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo .logo-img{height:58px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:34px;list-style:none}
.nav-links a{
  font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--c-cream-60);text-decoration:none;transition:color .3s;
  padding:6px 0;position:relative;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--c-brass);transition:width .35s var(--ease);
}
.nav-links a:hover,.nav-links a.actief{color:var(--c-cream)}
.nav-links a:hover::after,.nav-links a.actief::after{width:100%}

.btn{
  display:inline-block;background:var(--c-brass);color:var(--c-black);
  font-family:var(--font-sans);font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  padding:14px 26px;border:1px solid var(--c-brass);border-radius:2px;
  cursor:pointer;transition:background .3s,color .3s,transform .3s var(--ease),box-shadow .3s;
}
.btn:hover{background:transparent;color:var(--c-brass);transform:translateY(-2px);box-shadow:0 12px 30px -12px rgba(207,157,123,.45)}
.btn:active{transform:translateY(0)}
.btn-ghost{background:transparent;color:var(--c-cream);border-color:var(--c-cream-35)}
.btn-ghost:hover{border-color:var(--c-brass);color:var(--c-brass);background:transparent}
.nav .btn{padding:11px 20px}

/* Hamburger */
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;z-index:110}
.burger span{display:block;width:26px;height:2px;background:var(--c-cream);margin:6px 0;transition:transform .35s var(--ease),opacity .3s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

@media (max-width:900px){
  .nav-links{
    position:fixed;inset:0;background:rgba(12,21,25,.98);
    flex-direction:column;justify-content:center;gap:30px;
    opacity:0;pointer-events:none;transition:opacity .35s var(--ease);
  }
  .nav-links.open{opacity:1;pointer-events:auto}
  .nav-links a{font-size:16px}
  .nav > .btn{display:none}
  .nav-links .btn{display:inline-block;margin-top:10px}
  .burger{display:block}
}
@media (min-width:901px){.nav-links .btn{display:none}}

/* ============================================================
   PAGINA-HEADER (voor subpagina's zonder volledige hero)
   ============================================================ */
.page-head{
  padding:calc(var(--sec-y) * .65) 0 var(--sec-y);
  padding-top:clamp(150px,20vw,190px);
  position:relative;overflow:hidden;
}
.page-head::before{
  content:"";position:absolute;right:-15%;top:-25%;width:55vw;height:55vw;
  max-width:700px;max-height:700px;border-radius:50%;
  background:radial-gradient(circle at center, rgba(207,157,123,.13) 0%, rgba(114,75,57,.08) 40%, transparent 68%);
  pointer-events:none;
}
.page-head .hero-eyebrow{margin-bottom:22px}
.page-head h1{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(42px,7vw,84px);line-height:1.05;color:var(--c-cream);max-width:16ch;
}
.page-head .sub{margin-top:24px;font-size:clamp(16px,2vw,19px);color:var(--c-cream-60);max-width:52ch}

/* ============================================================
   HERO (alleen index)
   ============================================================ */
.hero{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  position:relative;overflow:hidden;padding-top:90px;
}
/* blueprint-raster dat naar zwart vervaagt */
.hero-blueprint{
  position:absolute;inset:-14px; /* marge zodat parallax geen randen toont */
  pointer-events:none;
  will-change:transform;
  background-image:
    linear-gradient(rgba(237,227,214,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(237,227,214,.045) 1px, transparent 1px),
    linear-gradient(rgba(237,227,214,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(237,227,214,.028) 1px, transparent 1px);
  background-size:200px 200px, 200px 200px, 40px 40px, 40px 40px;
  -webkit-mask-image:radial-gradient(120% 90% at 65% 30%, #000 0%, rgba(0,0,0,.5) 45%, transparent 78%);
          mask-image:radial-gradient(120% 90% at 65% 30%, #000 0%, rgba(0,0,0,.5) 45%, transparent 78%);
}
/* architecturale lijntekening in het raster */
.hero-draft{
  position:absolute;right:0;top:0;width:min(62vw,860px);height:100%;
  pointer-events:none;opacity:.55;
}
.hero-draft path,.hero-draft line,.hero-draft circle{
  stroke:rgba(207,157,123,.22);stroke-width:1;fill:none;vector-effect:non-scaling-stroke;
}
.hero-draft .dim{stroke:rgba(237,227,214,.14);stroke-dasharray:4 6}
.hero-draft .dr{stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 3.2s var(--ease) .6s forwards}
/* decoratieve gekropte "V" — ademt mee met de gloed (9s) en draait tergend langzaam */
.hero-v{
  position:absolute;right:-4vw;bottom:-14vw;z-index:0;pointer-events:none;
  font-family:var(--font-display);font-size:clamp(340px,52vw,760px);line-height:.8;
  user-select:none;
  animation:vbreathe 9s ease-in-out infinite; /* zelfde duur/easing als .hero::before */
}
.hero-v .glyph{
  display:block;position:relative;
  color:transparent;
  -webkit-text-stroke:1px rgba(237,227,214,.07);
  animation:vspin 400s linear infinite; /* 0.015°/frame @60fps */
}
.hero-v .glyph::before{
  content:"V";position:absolute;inset:0;
  -webkit-text-stroke:0;
  color:rgba(207,157,123,.035);
}
@supports not (-webkit-text-stroke:1px #000){
  .hero-v .glyph{color:rgba(237,227,214,.05)}
}
@keyframes vbreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes vspin{to{transform:rotate(360deg)}}
.hero .wrap{position:relative;z-index:2}
@media (max-width:700px){
  .hero-draft{opacity:.3;width:100vw}
  .hero-v{right:-16vw;bottom:-8vh;font-size:110vw}
}
/* warme gloed rechtsonder */
.hero::before{
  content:"";position:absolute;right:-18%;bottom:-30%;width:70vw;height:70vw;
  max-width:900px;max-height:900px;border-radius:50%;
  background:radial-gradient(circle at center, rgba(207,157,123,.16) 0%, rgba(114,75,57,.10) 38%, transparent 68%);
  pointer-events:none;
  animation:breathe 9s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}

.hero-eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;
  color:var(--c-brass);margin-bottom:26px;display:flex;align-items:center;gap:16px;
}
.hero h1{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(56px,10vw,128px);
  line-height:1.02;letter-spacing:.005em;color:var(--c-cream);
  max-width:11ch;
}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.18em;margin-bottom:-.18em}
.hero h1 .line > span{display:inline-block;transform:translateY(110%);animation:riseUp 1s var(--ease) forwards}
.hero h1 .line:nth-child(2) > span{animation-delay:.12s}
@keyframes riseUp{to{transform:translateY(0)}}

.hero-sub{
  margin-top:30px;font-size:clamp(16px,2vw,19px);color:var(--c-cream-60);
  max-width:44ch;
  opacity:0;animation:fadeIn .9s var(--ease) .55s forwards;
}
.hero-sub strong{color:var(--c-brass);font-weight:600}
.hero-cta{margin-top:44px;opacity:0;animation:fadeIn .9s var(--ease) .75s forwards}
@keyframes fadeIn{to{opacity:1}}

/* maatlat onder de hero — tekent zichzelf */
.hero-ruler{
  margin-top:clamp(48px,7vh,84px);width:min(560px,72vw);height:20px;overflow:visible;
  opacity:0;animation:fadeIn 1s var(--ease) .9s forwards;
}
.hero-ruler .base{stroke:var(--c-cream-35);stroke-width:1.5;stroke-dasharray:560;stroke-dashoffset:560;animation:draw 1.6s var(--ease) 1s forwards}
.hero-ruler .tick{stroke:var(--c-cream-35);stroke-width:1.5;opacity:0;animation:fadeIn .4s forwards}
.hero-ruler .tick.brass{stroke:var(--c-brass)}
@keyframes draw{to{stroke-dashoffset:0}}

.scroll-hint{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  color:var(--c-cream-35);font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  text-decoration:none;transition:color .3s;
}
.scroll-hint:hover{color:var(--c-brass)}
.scroll-hint svg{animation:nudge 2.2s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* ============================================================
   OVER
   ============================================================ */
.sec{padding:var(--sec-y) 0;position:relative}
.over-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(40px,6vw,90px);align-items:center}

.portret{
  position:relative;aspect-ratio:4/5;border-radius:4px;overflow:hidden;
  background:
    linear-gradient(160deg, var(--c-jungle) 0%, var(--c-jet) 100%);
  border:1px solid var(--c-cream-12);
}
.portret::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 30% 20%, rgba(207,157,123,.10), transparent 60%);
}
.ph-tag{
  position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;
  align-items:center;justify-content:center;color:var(--c-cream-35);
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;text-align:center;padding:20px;
}
.ph-tag svg{width:44px;height:44px;stroke:var(--c-cream-35);fill:none;stroke-width:1.3}

/* meetlat-accent langs de foto */
.portret-frame{position:relative}
.portret-frame::before{
  content:"";position:absolute;left:-14px;top:8%;bottom:8%;width:1px;
  background:repeating-linear-gradient(to bottom, var(--c-brass) 0 10px, transparent 10px 22px);
  opacity:.5;
}

.over-copy p{color:var(--c-cream-60);margin-bottom:18px;max-width:56ch}
.over-copy p strong{color:var(--c-cream);font-weight:600}

.pills{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;list-style:none}
.pills li{
  background:var(--c-coffee);color:var(--c-cream);
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  padding:11px 20px;border-radius:100px;
  transition:transform .3s var(--ease), background .3s;
}
.pills li:hover{transform:translateY(-3px);background:var(--c-brass);color:var(--c-black)}

@media (max-width:820px){
  .over-grid{grid-template-columns:1fr}
  .portret{max-width:420px}
}

/* ============================================================
   DIENSTEN
   ============================================================ */
.sec-alt{background:var(--c-jungle)}
.diensten-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}
.dienst{
  background:var(--c-black);border:1px solid var(--c-cream-07);border-radius:4px;
  padding:clamp(28px,3vw,42px);position:relative;overflow:hidden;
  transition:transform .45s var(--ease), border-color .45s;
}
.dienst::before{ /* brass lijn die groeit bij hover */
  content:"";position:absolute;top:0;left:0;height:2px;width:0;background:var(--c-brass);
  transition:width .5s var(--ease);
}
.dienst:hover{transform:translateY(-6px);border-color:var(--c-brass-15)}
.dienst:hover::before{width:100%}
/* signatuur-interactie: technische detailtekening verschijnt achter de kaart */
.dienst .illu{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:0;transform:scale(1.07);
  transition:opacity .6s var(--ease), transform .9s var(--ease);
}
.dienst .illu svg{
  position:absolute;inset:0;width:100%;height:100%;margin:0;
  stroke:var(--c-brass);stroke-width:1;fill:none;stroke-linecap:round;
}
.dienst .illu .l1{opacity:.34}
.dienst .illu .l2{opacity:.18;stroke-dasharray:3 5}
.dienst .illu .l3{opacity:.5;stroke-width:1.4}
.dienst .illu::after{ /* leesbaarheid van de tekst bewaken */
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(12,21,25,.94) 22%, rgba(12,21,25,.55) 60%, rgba(12,21,25,.25) 100%);
}
.dienst:hover .illu,.dienst:focus-within .illu{opacity:1;transform:scale(1)}
.dienst > :not(.illu){position:relative;z-index:1}
.dienst > svg.icoon{width:44px;height:44px;stroke:var(--c-brass);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;margin-bottom:24px;transition:transform .5s var(--ease)}
.dienst:hover > svg.icoon{transform:translateY(-4px)}
.dienst h3{
  font-family:var(--font-display);font-weight:400;font-size:clamp(24px,2.4vw,30px);
  color:var(--c-cream);margin-bottom:14px;letter-spacing:.02em;
}
.dienst p{color:var(--c-cream-60);font-size:15px}
.dienst .num{
  position:absolute;top:26px;right:30px;font-size:11px;font-weight:700;
  letter-spacing:.2em;color:var(--c-cream-35);
}
@media (max-width:900px){.diensten-grid{grid-template-columns:1fr;max-width:520px}}

/* ============================================================
   WERKWIJZE — de maatlat als tijdlijn
   ============================================================ */
.stappen{margin-top:70px;position:relative}
.stappen-lijn{
  position:absolute;top:9px;left:0;right:0;height:2px;background:var(--c-cream-12);
}
.stappen-lijn .vul{
  display:block;height:100%;width:0;background:var(--c-brass);
  transition:width .2s linear;
}
.stappen-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;position:relative}
.stap{padding-top:38px;position:relative}
.stap::before{ /* meetpunt */
  content:"";position:absolute;top:2px;left:0;width:16px;height:16px;border-radius:50%;
  background:var(--c-black);border:2px solid var(--c-cream-35);
  transition:border-color .4s, background .4s, box-shadow .4s;
}
.stap.actief::before{border-color:var(--c-brass);background:var(--c-brass);box-shadow:0 0 0 6px var(--c-brass-15)}
/* pulserende ring rond actieve meetpunten */
.stap::after{
  content:"";position:absolute;top:2px;left:0;width:16px;height:16px;border-radius:50%;
  border:1.5px solid var(--c-brass);opacity:0;pointer-events:none;
}
.stap.actief::after{animation:pulsring 2.5s var(--ease) infinite}
@keyframes pulsring{
  0%{transform:scale(1);opacity:.7}
  70%,100%{transform:scale(2.5);opacity:0}
}
.stap .stapnum{font-size:11px;font-weight:700;letter-spacing:.24em;color:var(--c-brass);text-transform:uppercase}
.stap h3{font-family:var(--font-display);font-weight:400;font-size:26px;color:var(--c-cream);margin:8px 0 10px}
.stap p{font-size:14px;color:var(--c-cream-60)}

@media (max-width:820px){
  .stappen-lijn{top:0;bottom:0;left:7px;right:auto;width:2px;height:auto}
  .stappen-lijn .vul{width:100%!important;height:0;transition:height .2s linear}
  .stappen-grid{grid-template-columns:1fr;gap:44px}
  .stap{padding-top:0;padding-left:42px}
  .stap::before{top:4px;left:0}
  .stap::after{top:4px;left:0}
}

/* ============================================================
   PROJECTEN
   ============================================================ */
.quote-band{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(26px,4vw,44px);line-height:1.25;color:var(--c-cream);
  max-width:24ch;margin:0 auto 64px;text-align:center;
}
.quote-band em{font-style:normal;color:var(--c-brass)}

.projecten-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.project{
  position:relative;aspect-ratio:4/3;border-radius:4px;overflow:hidden;
  border:1px solid var(--c-cream-07);cursor:pointer;
}
.project .vis{
  position:absolute;inset:0;transition:transform .7s var(--ease);
}
.project:hover .vis{transform:scale(1.05)}
/* light-sweep: diagonale glans die bij hover één keer over het materiaal glijdt */
.project::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.08) 50%, transparent 60%);
  transform:translateX(-120%);
}
.project:hover::before,.project:focus-visible::before{
  animation:sweep .6s var(--ease) forwards;
}
@keyframes sweep{to{transform:translateX(120%)}}

/* kleine placeholder-chip i.p.v. groot label */
.project .chip{
  position:absolute;top:12px;left:12px;z-index:2;
  font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--c-cream-35);background:rgba(12,21,25,.55);
  padding:5px 10px;border-radius:100px;border:1px solid var(--c-cream-07);
  backdrop-filter:blur(4px);
}

/* --- CSS-materiaalstudies per project --- */
/* 1. Houten lattenwand (kantoor) */
.vis-hout{
  background:
    radial-gradient(90% 55% at 50% -10%, rgba(237,227,214,.14), transparent 60%),
    linear-gradient(rgba(12,21,25,.15), rgba(12,21,25,.55)),
    repeating-linear-gradient(90deg,
      #4d3728 0 13px, #2b1f16 13px 15px,
      #5a4130 15px 27px, #241a12 27px 29px,
      #453120 29px 42px, #2b1f16 42px 44px);
}
/* 2. Gewelfde lichtkoven (horeca) */
.vis-koof{
  background:
    radial-gradient(140% 46% at 50% -8%,  rgba(207,157,123,.55) 28%, rgba(114,75,57,.28) 46%, transparent 64%),
    radial-gradient(120% 40% at 18% 34%,  rgba(207,157,123,.34) 30%, transparent 58%),
    radial-gradient(130% 42% at 84% 60%,  rgba(207,157,123,.26) 28%, transparent 56%),
    radial-gradient(120% 38% at 30% 88%,  rgba(114,75,57,.30) 26%, transparent 55%),
    linear-gradient(#171310, #0c1519 80%);
}
/* 3. Wandpanelen / lambrisering (wonen) */
.vis-paneel{
  background:
    linear-gradient(115deg, transparent 42%, rgba(237,227,214,.06) 46% 55%, transparent 59%),
    repeating-linear-gradient(90deg,
      transparent 0 8px, rgba(0,0,0,.5) 8px 9px, rgba(237,227,214,.05) 9px 10px,
      transparent 10px 84px, rgba(237,227,214,.05) 84px 85px, rgba(0,0,0,.5) 85px 86px, transparent 86px 94px),
    linear-gradient(180deg, #22302c, #131d1a 70%, #0e1614);
}
/* 4. Gestucte wand met terrazzo-spikkels (zakelijk) */
.vis-stuc{
  background:
    radial-gradient(circle 1.5px at 8px 10px,  rgba(237,227,214,.16) 98%, transparent) 0 0/34px 41px,
    radial-gradient(circle 1px   at 22px 30px, rgba(207,157,123,.22) 98%, transparent) 0 0/38px 47px,
    radial-gradient(circle 2px   at 30px 8px,  rgba(114,75,57,.4)   98%, transparent) 0 0/52px 44px,
    radial-gradient(110% 90% at 25% 10%, rgba(237,227,214,.07), transparent 55%),
    linear-gradient(160deg, #6a5240, #46352a 55%, #322419);
}
/* 5. Geribbeld barfront met messing rand (horeca) */
.vis-bar{
  background:
    linear-gradient(rgba(207,157,123,.85) 0 3.5%, rgba(114,75,57,.6) 3.5% 5%, transparent 5%),
    radial-gradient(80% 45% at 50% 0%, rgba(237,227,214,.12), transparent 60%),
    repeating-linear-gradient(90deg,
      #1d3036 0 5px, #35525a 5px 7px, #122126 7px 11px),
    #122126;
}
/* 6. Beton met lichtinval (loft) */
.vis-beton{
  background:
    linear-gradient(112deg, transparent 30%, rgba(237,227,214,.10) 33% 45%, transparent 48%, transparent 56%, rgba(237,227,214,.06) 58% 66%, transparent 69%),
    radial-gradient(circle 1px at 12px 14px, rgba(0,0,0,.4) 98%, transparent) 0 0/29px 33px,
    linear-gradient(200deg, #3d3a37, #26241f 60%, #17150f);
}
.project .overlay{
  position:absolute;inset:0;display:flex;align-items:flex-end;
  background:linear-gradient(to top, rgba(207,157,123,.92) 0%, rgba(207,157,123,.4) 40%, transparent 70%);
  opacity:0;transition:opacity .45s var(--ease);
  padding:22px;
}
.project:hover .overlay,.project:focus-visible .overlay{opacity:1}
.project .overlay div{transform:translateY(10px);transition:transform .45s var(--ease)}
.project:hover .overlay div{transform:none}
.project .p-naam{font-family:var(--font-display);font-size:24px;color:var(--c-black);line-height:1.2}
.project .p-cat{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(12,21,25,.7)}
@media (max-width:900px){.projecten-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.projecten-grid{grid-template-columns:1fr}}

/* ============================================================
   REFERENTIES
   ============================================================ */
.refs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px}
.ref{
  background:var(--c-jungle);border:1px solid var(--c-cream-07);border-radius:4px;
  padding:clamp(28px,3vw,40px);display:flex;flex-direction:column;gap:20px;
  transition:transform .45s var(--ease), border-color .45s;
}
.ref:hover{transform:translateY(-5px);border-color:var(--c-brass-15)}
.ref .qmark{font-family:var(--font-display);font-size:64px;line-height:.6;color:var(--c-brass);margin-top:14px}
.ref p{color:var(--c-cream-60);font-size:15px;flex:1}
.ref .naam{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--c-cream)}
.ref .naam span{display:block;color:var(--c-cream-35);font-weight:500;letter-spacing:.14em;margin-top:4px}
@media (max-width:900px){.refs{grid-template-columns:1fr;max-width:560px}}

/* ============================================================
   CTA-BAND (tussen secties op subpagina's)
   ============================================================ */
.cta-band{
  background:var(--c-jungle);border-top:1px solid var(--c-cream-07);border-bottom:1px solid var(--c-cream-07);
  padding:var(--sec-y) 0;text-align:center;
}
.cta-band h2{
  font-family:var(--font-display);font-weight:400;font-size:clamp(28px,4vw,46px);
  color:var(--c-cream);max-width:20ch;margin:0 auto 20px;
}
.cta-band p{color:var(--c-cream-60);max-width:48ch;margin:0 auto 34px}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(44px,6vw,90px)}
.contact-info h2{margin-bottom:24px}
.contact-info p{color:var(--c-cream-60);max-width:44ch;margin-bottom:34px}
.contact-lijn{display:flex;flex-direction:column;gap:14px}
.contact-lijn a{
  display:flex;align-items:center;gap:14px;text-decoration:none;
  font-size:17px;color:var(--c-cream);transition:color .3s;width:fit-content;
}
.contact-lijn a:hover{color:var(--c-brass)}
.contact-lijn svg{width:20px;height:20px;stroke:var(--c-brass);fill:none;stroke-width:1.6;flex:0 0 auto}

form{display:flex;flex-direction:column;gap:18px}
.veld{display:flex;flex-direction:column;gap:8px}
.veld label{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--c-cream-60)}
.veld input,.veld textarea{
  background:var(--c-jungle);border:1px solid var(--c-cream-12);border-radius:3px;
  padding:15px 16px;color:var(--c-cream);font-family:var(--font-sans);font-size:15px;
  transition:border-color .3s, box-shadow .3s;
}
.veld input:focus,.veld textarea:focus{outline:none;border-color:var(--c-brass);box-shadow:0 0 0 3px var(--c-brass-15)}
.veld textarea{min-height:130px;resize:vertical}
.veld ::placeholder{color:var(--c-cream-35)}
.form-rij{display:grid;grid-template-columns:1fr 1fr;gap:18px}
form .btn{margin-top:6px;align-self:flex-start}
.form-succes{
  display:none;background:var(--c-brass-15);border:1px solid var(--c-brass);border-radius:4px;
  padding:16px 20px;font-size:14px;color:var(--c-brass);margin-top:4px;
}
.form-succes.actief{display:block}
@media (max-width:820px){
  .contact-grid{grid-template-columns:1fr}
  .form-rij{grid-template-columns:1fr}
}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--c-jet);padding:56px 0 40px}
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px}
.foot .tagline{font-size:13px;color:var(--c-cream-60);letter-spacing:.04em}
.foot-contact{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:13px}
.foot-contact a{color:var(--c-cream-60);text-decoration:none;transition:color .3s}
.foot-contact a:hover{color:var(--c-brass)}
.foot-meta{display:flex;align-items:center;gap:26px}
.foot-meta .kvk{font-size:12px;color:var(--c-cream-35);letter-spacing:.08em}
.socials{display:flex;gap:14px}
.socials a{
  display:flex;align-items:center;justify-content:center;width:38px;height:38px;
  border:1px solid var(--c-cream-12);border-radius:50%;transition:border-color .3s, background .3s;
}
.socials a:hover{border-color:var(--c-brass);background:var(--c-brass-15)}
.socials svg{width:16px;height:16px;stroke:var(--c-cream);fill:none;stroke-width:1.6}

/* ============================================================
   WHATSAPP FLOAT
   ============================================================ */
.wa-float{
  position:fixed;right:24px;bottom:24px;z-index:60;
  display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;
  background:var(--c-brass);border:1px solid var(--c-brass);
  box-shadow:0 12px 30px -10px rgba(0,0,0,.5);
  transition:transform .3s var(--ease),box-shadow .3s;
}
.wa-float:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 16px 36px -10px rgba(207,157,123,.55)}
.wa-float svg{width:26px;height:26px;fill:var(--c-black)}
@media (max-width:600px){.wa-float{right:16px;bottom:16px;width:50px;height:50px}.wa-float svg{width:22px;height:22px}}

/* ============================================================
   LEGAL CONTENT (privacybeleid e.d.)
   ============================================================ */
.legal-content{max-width:760px}
.legal-content h2{
  font-family:var(--font-display);font-weight:400;font-size:clamp(22px,3vw,30px);
  color:var(--c-cream);margin-top:48px;margin-bottom:14px;
}
.legal-content h2:first-child{margin-top:0}
.legal-content p{margin-bottom:14px;color:var(--c-cream-60)}
.legal-content ul{margin:0 0 14px 20px}
.legal-content li{margin-bottom:8px;color:var(--c-cream-60)}
.legal-content li::marker{color:var(--c-brass)}
.legal-content a{color:var(--c-brass);text-decoration:underline;text-underline-offset:2px}
.legal-content a:hover{color:var(--c-cream)}
.legal-content strong{color:var(--c-cream);font-weight:600}
.legal-updated{font-size:13px;color:var(--c-cream-35);margin-top:40px}
.form-privacy-note{font-size:12px;color:var(--c-cream-35);margin-top:14px}
.foot-onder{
  margin-top:36px;padding-top:22px;border-top:1px solid var(--c-cream-07);
  font-size:12px;color:var(--c-cream-35);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
}
.foot-links{display:flex;gap:18px;list-style:none}
.foot-links a{text-decoration:none;color:var(--c-cream-35);transition:color .3s}
.foot-onder a.credit{color:var(--c-cream-35);text-decoration:underline;text-underline-offset:2px;transition:color .3s}
.foot-onder a.credit:hover{color:var(--c-brass)}
.foot-links a:hover{color:var(--c-brass)}