/* ============================================================
   Studio Kavé — design system
   Kleuren & typografie 1:1 uit het Figma-ontwerp
   ============================================================ */

:root{
  --bg:        #F6F6F6;
  --dark:      #202020;
  --black:     #000000;
  --accent:    #6E45E9;
  --accent-600:#5a35d1;
  --muted:     #929292;
  --border:    #C9C9C9;
  --white:     #FFFFFF;

  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --maxw: 1440px;
  --gutter: clamp(20px, 4vw, 64px);
  --header-h: 96px;

  --ease: cubic-bezier(.16,1,.3,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--black);
  line-height:1.5;
  font-size:16px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.dark{ background:var(--dark); color:var(--white); }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; border:none; background:none; }
ul{ list-style:none; }

/* ---------- layout helpers ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(64px,9vw,140px); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ---------- typografie ---------- */
.display{
  font-weight:700;
  line-height:.92;
  letter-spacing:-.01em;
  text-transform:uppercase;
  font-size:clamp(56px, 9vw, 128px);
}
.h1{ font-weight:700; text-transform:uppercase; line-height:.95; font-size:clamp(40px,6vw,88px); letter-spacing:-.01em; }
.h2{ font-weight:700; text-transform:uppercase; line-height:1; font-size:clamp(30px,4vw,54px); letter-spacing:-.01em; }
.h3{ font-weight:700; line-height:1.05; font-size:clamp(22px,2.4vw,34px); }
.eyebrow{ font-weight:700; text-transform:uppercase; letter-spacing:.14em; font-size:13px; color:var(--muted); }
.lead{ font-size:clamp(15px,1.2vw,18px); color:var(--muted); max-width:46ch; }
.muted{ color:var(--muted); }

/* ---------- knoppen ---------- */
.btn{
  --c:var(--white);
  display:inline-flex; align-items:center; gap:.7em;
  background:var(--accent); color:var(--c);
  font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:14px;
  padding:16px 22px; border-radius:0;            /* rechte hoeken — keuze van Kurt */
  transition:background .35s var(--ease), transform .35s var(--ease);
}
.btn:hover{ background:var(--accent-600); transform:translateY(-2px); }
.btn .arw{ transition:transform .35s var(--ease); }
.btn:hover .arw{ transform:translate(3px,-3px); }
.btn--ghost{ background:transparent; color:var(--black); border:1px solid var(--black); }
.btn--ghost:hover{ background:var(--black); color:var(--white); }
body.dark .btn--ghost{ color:var(--white); border-color:var(--white); }

/* pijltje-icoon */
.arw{ width:1em; height:1em; display:inline-block; }

/* ============================================================
   HEADER  (fixed overlay, geïnjecteerd via site.js)
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  padding-inline:var(--gutter);
  pointer-events:none;
}
.site-header > *{ pointer-events:auto; }
.brand-mark{ width:34px; height:34px; display:block; }
.brand-mark svg{ width:100%; height:100%; }
.site-header .brand-mark path{ fill:var(--black); transition:fill .4s var(--ease); }
.header-light .brand-mark path{ fill:var(--white); }   /* over donkere hero */

.menu-btn{
  width:52px; height:52px; border-radius:50%;
  background:var(--accent); color:var(--white);
  display:grid; place-items:center;
  transition:transform .4s var(--ease), background .3s var(--ease);
}
.menu-btn:hover{ transform:scale(1.08); }
.menu-btn span{ position:relative; width:20px; height:2px; background:currentColor; transition:.3s var(--ease); }
.menu-btn span::before,.menu-btn span::after{ content:""; position:absolute; left:0; width:20px; height:2px; background:currentColor; transition:.3s var(--ease); }
.menu-btn span::before{ top:-6px; } .menu-btn span::after{ top:6px; }
body.nav-open .menu-btn span{ background:transparent; }
body.nav-open .menu-btn span::before{ top:0; transform:rotate(45deg); }
body.nav-open .menu-btn span::after{ top:0; transform:rotate(-45deg); }

/* ---------- overlay-navigatie (norris-menu) ---------- */
.nav-overlay{
  position:fixed; inset:0; z-index:55;
  background:var(--dark); color:var(--white);
  display:flex; flex-direction:column; justify-content:center;
  padding:var(--gutter);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .7s var(--ease);
  visibility:hidden;
}
body.nav-open .nav-overlay{ clip-path:inset(0 0 0 0); visibility:visible; }
.nav-overlay ul{ display:flex; flex-direction:column; gap:.1em; }
.nav-overlay a{
  font-weight:700; text-transform:uppercase; line-height:1.02;
  font-size:clamp(40px,8vw,96px); letter-spacing:-.01em;
  display:inline-block; color:var(--white);
  opacity:0; transform:translateY(40px);
  transition:color .3s var(--ease);
}
body.nav-open .nav-overlay a{ animation:navIn .6s var(--ease) forwards; }
.nav-overlay li:nth-child(1) a{ animation-delay:.15s; }
.nav-overlay li:nth-child(2) a{ animation-delay:.22s; }
.nav-overlay li:nth-child(3) a{ animation-delay:.29s; }
.nav-overlay li:nth-child(4) a{ animation-delay:.36s; }
.nav-overlay li:nth-child(5) a{ animation-delay:.43s; }
.nav-overlay a:hover{ color:var(--accent); }
@keyframes navIn{ to{ opacity:1; transform:none; } }
.nav-overlay .nav-meta{
  margin-top:clamp(32px,5vw,64px); display:flex; gap:40px; flex-wrap:wrap;
  font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.nav-overlay .nav-meta a:hover{ color:var(--white); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--dark); color:var(--white); padding-block:clamp(56px,7vw,90px) 40px; }
.footer-cta{ display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:start; padding-bottom:56px; }
.footer-cta .h2{ max-width:12ch; }
.footer-cta .side{ align-self:end; }
.footer-cta p{ color:#c9c9c9; max-width:40ch; margin-bottom:22px; }
.footer-logo{ display:flex; align-items:center; gap:10px; margin-bottom:34px; font-weight:700; font-size:22px; }
.footer-logo svg{ width:30px; height:30px; }
.footer-logo svg path{ fill:var(--white); }
.footer-logo b{ font-weight:700; } .footer-logo span{ font-weight:400; }

.footer-cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; padding-block:40px; border-top:1px solid #3a3a3a; }
.footer-cols h4{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; }
.footer-cols li+li{ margin-top:10px; }
.footer-cols a,.footer-cols address{ font-style:normal; color:#dcdcdc; font-size:14px; }
.footer-cols a:hover{ color:var(--accent); }

.newsletter{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding-block:36px; border-top:1px solid #3a3a3a; }
.newsletter .h3{ text-transform:uppercase; }
.news-form{ display:flex; border:1px solid var(--accent); min-width:min(420px,90vw); }
.news-form input{ flex:1; background:transparent; border:none; color:var(--white); padding:16px 18px; font:inherit; letter-spacing:.05em; text-transform:uppercase; font-size:13px; }
.news-form input::placeholder{ color:var(--muted); }
.news-form button{ background:transparent; color:var(--white); font-weight:700; text-transform:uppercase; font-size:13px; letter-spacing:.06em; padding:0 22px; display:flex; align-items:center; gap:8px; white-space:nowrap; }
.news-form button:hover{ color:var(--accent); }

.footer-bottom{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-top:32px; color:var(--muted); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }

/* ============================================================
   HERO — full-bleed beeld met grote titel onderaan
   ============================================================ */
.hero{ position:relative; height:min(100svh,900px); overflow:hidden; display:flex; align-items:flex-end; }
.hero__media{ position:absolute; inset:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; will-change:transform; }
.hero__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.05) 40%,rgba(0,0,0,.35)); }
.hero__title{ position:relative; z-index:2; color:var(--white); padding:0 var(--gutter) clamp(28px,4vw,54px); }
.hero__side{ position:absolute; right:16px; top:50%; z-index:2; color:var(--white);
  writing-mode:vertical-rl; text-transform:uppercase; letter-spacing:.2em; font-size:12px; opacity:.85; }

/* ============================================================
   PROJECTGRID (Projecten + Recente projecten)
   ============================================================ */
.filters{ display:flex; gap:22px; flex-wrap:wrap; padding-block:28px 8px; }
.filters button{ text-transform:uppercase; font-weight:700; letter-spacing:.04em; font-size:15px; color:var(--muted); padding-bottom:4px; border-bottom:2px solid transparent; transition:.25s var(--ease); }
.filters button:hover{ color:var(--black); }
.filters button.active{ color:var(--black); border-color:var(--accent); }

.proj-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:2px; }
.proj-card{ position:relative; background:var(--white); overflow:hidden; }
.proj-card--lg{ grid-column:span 3; }
.proj-card--sm{ grid-column:span 2; }
.proj-card__img{ aspect-ratio:3/2; overflow:hidden; }
.proj-card__img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.proj-card:hover .proj-card__img img{ transform:scale(1.05); }
.proj-card__body{ padding:20px 22px 26px; }
.proj-card__body h3{ text-transform:uppercase; font-weight:700; font-size:clamp(20px,1.8vw,26px); }
.proj-card__body p{ text-transform:uppercase; font-weight:700; font-size:13px; letter-spacing:.06em; color:var(--muted); margin-top:4px; }

/* ============================================================
   DIENSTEN-LIJST (accordeon met hover-beeld)
   ============================================================ */
.svc-list{ border-top:1px solid var(--border); }
.svc-row{ position:relative; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:clamp(20px,2.4vw,34px) 4px; transition:padding .4s var(--ease); }
.svc-row h3{ text-transform:uppercase; font-weight:700; font-size:clamp(24px,3vw,44px); letter-spacing:-.01em; transition:transform .4s var(--ease), color .3s var(--ease); }
.svc-row:hover h3{ transform:translateX(14px); }
.svc-row .arw{ color:var(--accent); width:26px; height:26px; transition:transform .4s var(--ease); }
.svc-row:hover .arw{ transform:translate(6px,-6px); }
.svc-row__img{ position:absolute; right:14%; top:50%; width:320px; aspect-ratio:16/9; transform:translateY(-50%) scale(.9); opacity:0; pointer-events:none; overflow:hidden; z-index:3; transition:opacity .4s var(--ease), transform .4s var(--ease); }
.svc-row:hover .svc-row__img{ opacity:1; transform:translateY(-50%) scale(1); }
.svc-row__img img{ width:100%; height:100%; object-fit:cover; }

/* ============================================================
   LOGO-SLIDER (marquee)
   ============================================================ */
.logos{ overflow:hidden; padding-block:36px; border-block:1px solid var(--border); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.logos__track{ display:flex; gap:clamp(40px,6vw,90px); width:max-content; animation:marquee 32s linear infinite; }
.logos:hover .logos__track{ animation-play-state:paused; }
.logos__track .logo{ font-weight:700; font-size:clamp(20px,2vw,30px); color:var(--muted); letter-spacing:.02em; white-space:nowrap; opacity:.7; transition:opacity .3s,color .3s; }
.logos__track .logo:hover{ opacity:1; color:var(--black); }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ============================================================
   STATS (count-up)
   ============================================================ */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding-block:20px; }
.stats .num{ font-weight:700; font-size:clamp(34px,4vw,56px); line-height:1; }
.stats .lbl{ color:var(--muted); font-size:14px; margin-top:8px; }

/* ============================================================
   QUOTE-REVEAL (à la landonorris)
   ============================================================ */
.quote{ background:var(--dark); color:var(--white); position:relative; text-align:center; padding-block:clamp(80px,12vw,180px); overflow:hidden; }
.quote .mark{ position:absolute; font-size:clamp(160px,26vw,380px); font-weight:700; color:#ffffff; opacity:.06; line-height:.7; }
.quote .mark--tl{ top:6%; left:6%; } .quote .mark--br{ bottom:2%; right:6%; }
.quote .eyebrow{ color:var(--muted); margin-bottom:18px; }
.quote .h1{ max-width:16ch; margin-inline:auto; }
.reveal-word{ display:inline-block; overflow:hidden; vertical-align:bottom; }
.reveal-word > span{ display:inline-block; transform:translateY(110%); transition:transform .9s var(--ease); }
[data-quote].is-in .reveal-word > span{ transform:none; }
[data-quote] .reveal-word:nth-child(1) > span{ transition-delay:.05s; }
[data-quote] .reveal-word:nth-child(2) > span{ transition-delay:.12s; }
[data-quote] .reveal-word:nth-child(3) > span{ transition-delay:.19s; }
[data-quote] .reveal-word:nth-child(4) > span{ transition-delay:.26s; }
[data-quote] .reveal-word:nth-child(5) > span{ transition-delay:.33s; }

/* ============================================================
   MISSIE / VISIE
   ============================================================ */
.mv{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,64px); align-items:center; }
.mv+.mv{ margin-top:clamp(40px,6vw,90px); }
.mv img{ width:100%; aspect-ratio:3/2; object-fit:cover; }
.mv .txt h3{ text-transform:uppercase; margin-bottom:14px; }
.mv .txt p{ color:var(--muted); max-width:44ch; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,96px); }
.contact-info .lead{ margin-block:18px 30px; }
.contact-info ul li{ display:flex; align-items:center; gap:14px; padding-block:12px; border-top:1px solid var(--border); font-weight:500; }
.contact-info ul li:last-child{ border-bottom:1px solid var(--border); }
.contact-info .ic{ color:var(--accent); width:22px; height:22px; flex:none; }
.field{ margin-bottom:26px; }
.field label{ display:block; text-transform:uppercase; font-weight:700; font-size:15px; letter-spacing:.03em; margin-bottom:10px; }
.field label .req{ color:var(--accent); }
.field input,.field textarea{ width:100%; background:transparent; border:none; border-bottom:1px solid var(--border); padding:10px 2px; font:inherit; font-size:18px; color:var(--black); transition:border-color .3s; }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--accent); }
.field textarea{ resize:vertical; min-height:90px; }
.field ::placeholder{ color:#b7b7b7; }

/* ============================================================
   RECENTE PROJECTEN — carousel op donkere sectie
   ============================================================ */
.recent{ background:var(--dark); color:var(--white); }
.recent .head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:34px; }
.recent .head p{ color:#c9c9c9; max-width:40ch; }
.carousel{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(min(70vw,640px),1fr); gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px; scrollbar-width:none; }
.carousel::-webkit-scrollbar{ display:none; }
.slide{ scroll-snap-align:start; position:relative; }
.slide img,.slide video{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.slide .cap{ position:absolute; left:18px; bottom:16px; font-weight:700; text-transform:uppercase; text-shadow:0 2px 12px rgba(0,0,0,.5); }
.dots{ display:flex; gap:8px; justify-content:center; margin-top:22px; }
.dots i{ width:7px; height:7px; border-radius:50%; background:#555; }
.dots i.on{ background:var(--white); }

/* ============================================================
   REEL / video
   ============================================================ */
.reel{ position:relative; aspect-ratio:16/9; overflow:hidden; background:#111; }
.reel img,.reel video{ width:100%; height:100%; object-fit:cover; }
.reel .play{ position:absolute; inset:0; margin:auto; width:96px; height:96px; border-radius:50%; background:rgba(255,255,255,.14); backdrop-filter:blur(6px); display:grid; place-items:center; color:#fff; transition:.3s; }
.reel .play:hover{ background:var(--accent); transform:scale(1.06); }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.tst-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.tst{ border:1px solid var(--border); padding:26px; }
.tst .q{ font-size:34px; font-weight:700; line-height:0; color:var(--accent); }
.tst h4{ font-weight:700; margin-block:14px 4px; }
.tst p{ color:var(--muted); font-size:14px; }

/* ============================================================
   HOME — hero met wordmark + masonry
   ============================================================ */
.hero-home{ padding-top:calc(var(--header-h) + clamp(20px,4vw,60px)); }
.hero-home__grid{ display:grid; grid-template-columns:minmax(300px,.85fr) 1.15fr; gap:clamp(30px,5vw,80px); align-items:start; }
.hero-home__intro{ position:sticky; top:calc(var(--header-h) + 30px); }
.wordmark{ font-size:clamp(40px,5.5vw,72px); line-height:1; margin-bottom:26px; letter-spacing:-.01em; }
.wordmark span{ font-weight:400; } .wordmark b{ font-weight:700; }
.hero-home__intro .lead{ margin-bottom:30px; max-width:42ch; }

.masonry{ columns:2; column-gap:16px; }
.masonry .m{ break-inside:avoid; margin-bottom:16px; overflow:hidden; }
.masonry .m img{ width:100%; object-fit:cover; }
.masonry .m2,.masonry .m4,.masonry .m6{ margin-top:0; }
.masonry .m1 img{ aspect-ratio:3/4; } .masonry .m2 img{ aspect-ratio:3/2; }
.masonry .m3 img{ aspect-ratio:16/10; } .masonry .m4 img{ aspect-ratio:3/4; }
.masonry .m5 img{ aspect-ratio:3/4; } .masonry .m6 img{ aspect-ratio:3/2; }
.masonry .m7 img{ aspect-ratio:4/5; } .masonry .m8 img{ aspect-ratio:3/4; }

.cta-banner{ text-align:left; }
.cta-banner .h2{ max-width:18ch; }

@media (max-width:900px){
  .hero-home__grid{ grid-template-columns:1fr; }
  .hero-home__intro{ position:static; }
  .masonry{ columns:2; }
}
@media (max-width:520px){ .masonry{ columns:1; } }

/* ============================================================
   PROJECT-DETAIL
   ============================================================ */
.proj-intro{ display:grid; grid-template-columns:260px 1fr 300px; gap:clamp(24px,4vw,64px); align-items:start; }
.proj-intro .pi-a{ width:100%; aspect-ratio:3/2; object-fit:cover; }
.proj-intro .pi-txt{ padding-top:6px; }
.pi-meta{ text-align:right; }
.pi-meta img{ width:100%; aspect-ratio:4/5; object-fit:cover; margin-bottom:18px; filter:grayscale(1); }
.pi-meta dl{ font-size:14px; }
.pi-meta dt{ font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-top:12px; }
.pi-meta dd{ color:var(--muted); }

.gallery{ display:flex; flex-direction:column; gap:2px; }
.g-row{ display:grid; gap:2px; }
.g-row img{ width:100%; height:100%; object-fit:cover; }
.g-2{ grid-template-columns:repeat(2,1fr); } .g-2 img{ aspect-ratio:3/2; }
.g-3{ grid-template-columns:repeat(3,1fr); } .g-3 img{ aspect-ratio:3/4; }
.g-4{ grid-template-columns:repeat(4,1fr); } .g-4 img{ aspect-ratio:3/4; }

/* ============================================================
   DIENST-DETAIL
   ============================================================ */
.svc-block{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,80px); align-items:center; margin-bottom:clamp(32px,5vw,70px); }
.svc-block img{ width:100%; aspect-ratio:16/11; object-fit:cover; }
.svc-block .txt h3{ text-transform:uppercase; margin-bottom:14px; }
.svc-block .txt p{ color:var(--muted); max-width:46ch; }
.svc-block--rev .txt{ order:-1; }

@media (max-width:900px){
  .proj-intro{ grid-template-columns:1fr; }
  .pi-meta{ text-align:left; }
  .pi-meta img{ max-width:220px; }
  .g-3,.g-4{ grid-template-columns:repeat(2,1fr); }
  .svc-block{ grid-template-columns:1fr; }
  .svc-block--rev .txt{ order:0; }
}

/* ---------- scroll-reveal util ---------- */
[data-reveal]{ opacity:0; transform:translateY(28px); }
.is-in[data-reveal],[data-reveal].is-in{ opacity:1; transform:none; transition:opacity .8s var(--ease), transform .8s var(--ease); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  :root{ --header-h:74px; }
  .proj-grid{ grid-template-columns:repeat(2,1fr); }
  .proj-card--lg,.proj-card--sm{ grid-column:span 1; }
  .footer-cta,.contact-grid,.mv{ grid-template-columns:1fr; }
  .footer-cols{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .tst-grid{ grid-template-columns:1fr; }
  .svc-row__img{ display:none; }
  .hero{ height:82svh; }
}
@media (max-width:520px){
  .proj-grid{ grid-template-columns:1fr; }
  .footer-cols{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr 1fr; }
  .newsletter{ flex-direction:column; align-items:flex-start; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms!important; transition-duration:.001ms!important; scroll-behavior:auto; }
  .logos__track{ animation:none; }
}