/* ==========================================================================
   Mahieu&Merckx Woonatelier — stijlgids
   Warm, tijdloos, luxueus, persoonlijk. Editorial rust boven webshop-drukte.
   ========================================================================== */

:root {
  /* Kleurenpalet — warme aardetinten */
  --kalk: #F7F3EC;          /* warm wit, hoofdachtergrond */
  --linnen: #EFE7D8;        /* lichte sectie-achtergrond */
  --zand: #E3D5BC;          /* accentvlakken */
  --greige: #C9BBA3;        /* subtiele lijnen, borders */
  --taupe: #A68A6D;         /* secundaire accenten, hover */
  --bruin: #5B4632;         /* donkerbruin, knoppen, iconen */
  --bruin-donker: #3A2E22;  /* diepste bruin, tekst op licht */
  --zwartbruin: #24201B;    /* bijna zwart, hoofdtekst & donkere secties */
  --wit: #FFFDF9;

  --tekst: #2E2A24;
  --tekst-zacht: #6B5F4F;
  --tekst-licht: #F7F3EC;

  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --ruim: clamp(4rem, 8vw, 9rem);
  --transitie: 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--kalk);
  color: var(--tekst);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--bruin-donker);
  line-height: 1.15;
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 450; }
h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.75rem); }

p { margin: 0 0 1em; }

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 1.1em;
  font-weight: 500;
}

.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--tekst-zacht);
  max-width: 46em;
}

.groot-citaat {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  font-weight: 400;
  font-style: italic;
  color: var(--bruin-donker);
  line-height: 1.35;
  max-width: 34em;
}

/* --------------------------------------------------------------------- */
/* Layout helpers */

.wrap {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 4rem);
}

.sectie {
  padding: var(--ruim) 0;
}

.sectie--linnen { background: var(--linnen); }
.sectie--donker { background: var(--zwartbruin); color: var(--tekst-licht); }
.sectie--donker h1, .sectie--donker h2, .sectie--donker h3 { color: var(--kalk); }
.sectie--donker .eyebrow { color: var(--zand); }
.sectie--donker .lead { color: #D8CCBB; }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
}

.grid-asym {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-asym { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------- */
/* Knoppen */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 1em 2em;
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transitie);
  white-space: nowrap;
}

.btn--donker {
  background: var(--bruin-donker);
  color: var(--kalk);
  border-color: var(--bruin-donker);
}
.btn--donker:hover { background: var(--bruin); border-color: var(--bruin); }

.btn--rand {
  background: transparent;
  color: inherit;
  border-color: currentColor;
}
.btn--rand:hover { background: rgba(255,255,255,0.12); }

.btn--rand-donker {
  background: transparent;
  color: var(--bruin-donker);
  border-color: var(--bruin-donker);
}
.btn--rand-donker:hover { background: var(--bruin-donker); color: var(--kalk); }

.btn-groep { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }

/* --------------------------------------------------------------------- */
/* Header / navigatie */

.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1.6rem 0;
  transition: background var(--transitie), padding var(--transitie), box-shadow var(--transitie);
}

.header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header--transparant {
  background: linear-gradient(to bottom, rgba(0,0,0,0.32), transparent);
}
.header--transparant .navlink, .header--transparant .logo { color: var(--kalk); }

.header--vast {
  background: rgba(247, 243, 236, 0.94);
  backdrop-filter: blur(6px);
  padding: 1.1rem 0;
  box-shadow: 0 1px 0 rgba(58,46,34,0.08);
}
.header--vast .navlink, .header--vast .logo { color: var(--bruin-donker); }

.logo {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.02em;
}
.logo span { color: var(--taupe); }

.nav { display: flex; gap: 2.4rem; align-items: center; }
.navlink {
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  position: relative;
  padding: 0.3rem 0;
}
.navlink::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1px;
  background: currentColor;
  transition: width var(--transitie);
}
.navlink:hover::after, .navlink.actief::after { width: 100%; }

.nav-submenu { position: relative; }
.nav-submenu:hover .submenu-lijst { opacity: 1; visibility: visible; transform: translateY(0); }
.submenu-lijst {
  position: absolute;
  top: 140%; left: 50%;
  transform: translate(-50%, 6px);
  background: var(--wit);
  border: 1px solid var(--greige);
  padding: 0.8rem 0;
  min-width: 210px;
  opacity: 0; visibility: hidden;
  transition: all var(--transitie);
  box-shadow: 0 18px 40px rgba(36,32,27,0.12);
}
.submenu-lijst a {
  display: block;
  padding: 0.6rem 1.4rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--bruin-donker);
}
.submenu-lijst a:hover { background: var(--linnen); color: var(--taupe); }

.nav-toggle { display: none; }

@media (max-width: 980px) {
  .nav { display: none; }
  .nav-toggle { display: block; font-size: 1.6rem; background: none; border: none; cursor: pointer; }
}

/* --------------------------------------------------------------------- */
/* Hero */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: var(--kalk);
  overflow: hidden;
}

.hero-beeld {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-beeld img {
  width: 100%; height: 100%;
  object-fit: cover;
  animation: hero-in 9s ease-out forwards;
}
@keyframes hero-in {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}

.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(24,19,14,0.72) 0%, rgba(24,19,14,0.18) 55%, rgba(24,19,14,0.05) 100%);
  z-index: 1;
}

.hero-inhoud {
  position: relative;
  z-index: 2;
  padding: 0 clamp(1.5rem, 5vw, 4rem) clamp(3.5rem, 8vw, 6rem);
  max-width: 1360px;
  margin: 0 auto;
  width: 100%;
}

.hero-inhoud h1 { color: var(--kalk); margin-bottom: 0.3em; }
.hero-inhoud .lead { color: #EFE7D8; margin-bottom: 0; }

.hero-scroll {
  position: absolute;
  bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kalk);
  opacity: 0.75;
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
}
.hero-scroll::after {
  content: '';
  width: 1px; height: 32px;
  background: currentColor;
  animation: scroll-lijn 2.2s ease-in-out infinite;
}
@keyframes scroll-lijn {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  50.01% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* Kleinere sub-pagina hero */
.pagehero {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: flex-end;
  color: var(--kalk);
}
.pagehero .hero-inhoud { padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.pagehero h1 { color: var(--kalk); }

/* --------------------------------------------------------------------- */
/* Beeldkaders & fade-in */

.beeld-kader { overflow: hidden; }
.beeld-kader img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.beeld-kader:hover img { transform: scale(1.045); }

.fade-in {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s cubic-bezier(0.22,1,0.36,1), transform 1s cubic-bezier(0.22,1,0.36,1);
}
.fade-in.in-beeld { opacity: 1; transform: translateY(0); }

/* --------------------------------------------------------------------- */
/* Intro / tekstblokken */

.intro-blok { padding: var(--ruim) 0; }

/* --------------------------------------------------------------------- */
/* Sfeerkaarten (waarden) */

.sfeerkaart { text-align: left; }
.sfeerkaart .beeld-kader { aspect-ratio: 4/5; margin-bottom: 1.6rem; }
.sfeerkaart h3 { margin-bottom: 0.5rem; }
.sfeerkaart p { color: var(--tekst-zacht); font-size: 0.96rem; }
.sfeerkaart .nummer {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--taupe);
  font-size: 1rem;
  margin-bottom: 0.8rem;
  display: block;
}

/* --------------------------------------------------------------------- */
/* Merken */

.merk-rij { display: flex; flex-wrap: wrap; gap: 3.5rem; align-items: baseline; margin: 2.5rem 0; }
.merk-naam {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: var(--bruin-donker);
  font-style: italic;
  opacity: 0.55;
  transition: opacity var(--transitie);
}
.merk-naam:hover { opacity: 1; }

.merkkaart {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
}
.merkkaart img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.merkkaart:hover img { transform: scale(1.05); }
.merkkaart-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(24,19,14,0.78), transparent 60%);
  display: flex; align-items: flex-end;
  padding: 2rem;
}
.merkkaart-overlay .titel { color: var(--kalk); font-family: var(--font-display); font-size: 1.6rem; font-style: italic; }

/* --------------------------------------------------------------------- */
/* 3D / advies blok met slider */

.vergelijk-slider {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  cursor: ew-resize;
  border: 1px solid var(--greige);
}
.vergelijk-slider img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.vergelijk-na { clip-path: inset(0 0 0 50%); }
.vergelijk-handvat {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; background: var(--kalk);
  transform: translateX(-1px);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
}
.vergelijk-handvat::after {
  content: '⇔';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  background: var(--kalk);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: var(--bruin-donker);
}
.vergelijk-label {
  position: absolute; bottom: 1rem;
  font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase;
  background: rgba(24,19,14,0.55); color: var(--kalk);
  padding: 0.4rem 0.8rem;
}
.vergelijk-label--voor { left: 1rem; }
.vergelijk-label--na { right: 1rem; }

.stappen-lijst { counter-reset: stap; }
.stap {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.4rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--greige);
}
.stap:last-child { border-bottom: none; }
.stap-nummer {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--taupe);
}

/* --------------------------------------------------------------------- */
/* Kaarten algemeen (inspiratie / collectie) */

.kaart-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2rem; }
@media (max-width: 900px) { .kaart-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .kaart-grid { grid-template-columns: 1fr; } }

.kaart { display: flex; flex-direction: column; }
.kaart .beeld-kader { aspect-ratio: 4/5; margin-bottom: 1.2rem; }
.kaart .categorie { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--taupe); margin-bottom: 0.5rem; }
.kaart h3 { font-size: 1.25rem; margin-bottom: 0.4rem; }
.kaart p { color: var(--tekst-zacht); font-size: 0.92rem; margin-bottom: 1rem; }
.kaart-acties { display: flex; gap: 0.7rem; margin-top: auto; flex-wrap: wrap; }
.kaart-acties .btn { padding: 0.7em 1.3em; font-size: 0.72rem; }

.prijs { font-family: var(--font-display); font-style: italic; color: var(--bruin); font-size: 1.05rem; }

/* --------------------------------------------------------------------- */
/* Filters (collectie) */

.filter-balk { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 2.5rem 0 3rem; }
.filter-chip {
  padding: 0.55em 1.3em;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  border: 1px solid var(--greige);
  border-radius: 30px;
  background: transparent;
  cursor: pointer;
  transition: all var(--transitie);
}
.filter-chip:hover, .filter-chip.actief { background: var(--bruin-donker); color: var(--kalk); border-color: var(--bruin-donker); }

/* --------------------------------------------------------------------- */
/* Formulieren */

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.form-grid .volledige-breedte { grid-column: 1 / -1; }

.veld { display: flex; flex-direction: column; gap: 0.5rem; }
.veld label { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tekst-zacht); }
.veld input, .veld select, .veld textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.9em 1em;
  border: 1px solid var(--greige);
  background: var(--wit);
  color: var(--tekst);
  border-radius: 2px;
  transition: border-color var(--transitie);
}
.veld input:focus, .veld select:focus, .veld textarea:focus {
  outline: none;
  border-color: var(--taupe);
}
.veld textarea { resize: vertical; min-height: 120px; }

.upload-zone {
  border: 1.5px dashed var(--greige);
  padding: 2.2rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--tekst-zacht);
  cursor: pointer;
  transition: all var(--transitie);
}
.upload-zone:hover { border-color: var(--taupe); background: var(--linnen); }

.form-bericht {
  display: none;
  margin-top: 1.5rem;
  padding: 1.2rem 1.5rem;
  background: var(--linnen);
  border-left: 3px solid var(--taupe);
  font-size: 0.95rem;
}
.form-bericht.zichtbaar { display: block; }

/* --------------------------------------------------------------------- */
/* Quote / testimonial */

.citaat-blok {
  text-align: center;
  max-width: 44em;
  margin: 0 auto;
}
.citaat-blok .groot-citaat { margin: 0 auto 1.2rem; }
.citaat-auteur { font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--taupe); }

/* --------------------------------------------------------------------- */
/* Footer */

.footer { background: var(--zwartbruin); color: #D8CCBB; padding: 5rem 0 2rem; }
.footer h4 { color: var(--kalk); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; font-family: var(--font-body); font-weight: 600; margin-bottom: 1.2rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; margin-bottom: 3.5rem; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-grid a { display: block; margin-bottom: 0.7rem; font-size: 0.9rem; color: #D8CCBB; transition: color var(--transitie); }
.footer-grid a:hover { color: var(--kalk); }
.footer-logo { font-family: var(--font-display); font-size: 1.5rem; color: var(--kalk); margin-bottom: 1rem; }
.footer-onder {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  padding-top: 2rem; border-top: 1px solid rgba(216,204,187,0.18);
  font-size: 0.78rem; color: #A6957F;
}

/* --------------------------------------------------------------------- */
/* Breadcrumb / paginakop klein */

.kruimelpad { font-size: 0.78rem; letter-spacing: 0.05em; color: var(--taupe); margin-bottom: 1.5rem; text-transform: uppercase; }

/* --------------------------------------------------------------------- */
/* Utility */

.mt-0 { margin-top: 0; }
.center { text-align: center; margin-left: auto; margin-right: auto; }
.klein-label { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--taupe); }
.spatie-boven { margin-top: 2.5rem; }

@media (max-width: 700px) {
  :root { --ruim: 4.5rem; }
  .merk-rij { gap: 2rem; }
}