:root {
  --bg: #fdf7f7;
  --bg-alt: #f7eded;
  --pruim: #4a1f2e;
  --libel: #8f3649;
  --goud: #c4963a;
  --tekst: #4a3a3f;
  --licht: #f1e4e6;
  --pruim-zacht: #9a6e7b;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
  background: var(--bg);
  color: var(--tekst);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.75;
}

h1, h2 { font-family: var(--serif); font-weight: 400; color: var(--pruim); line-height: 1.15; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 7vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4.5vw, 2.75rem); margin-bottom: 1.25rem; }

a { color: inherit; }
a:focus-visible { outline: 2px solid var(--goud); outline-offset: 3px; }

.smal { max-width: 36rem; margin: 0 auto; display: flex; flex-direction: column; gap: 1.1rem; }
.smal h2 { margin-bottom: 0; }

/* Navigatie */
.nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .85rem clamp(1rem, 4vw, 3rem);
  background: rgba(253, 247, 247, .94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(196, 150, 58, .25);
}
.nav-merk { display: flex; flex-direction: column; text-decoration: none; line-height: 1.2; }
.nav-naam { font-family: var(--serif); font-size: 1.35rem; color: var(--pruim); }
.nav-sub { font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: var(--goud); font-weight: 400; }
.nav nav { display: flex; gap: 1.6rem; align-items: center; }
.nav nav a { text-decoration: none; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--pruim); font-weight: 400; }
.nav nav a:hover { color: var(--libel); }
.nav-cta { border: 1px solid var(--goud); padding: .45rem 1rem; }

/* Hero */
.hero { text-align: center; padding: 2.5rem 1rem 5rem; max-width: 46rem; margin: 0 auto; }
.hero-libel {
  width: min(260px, 62vw); height: auto;
  margin-bottom: 1.5rem;
  animation: zweef 7s ease-in-out infinite;
}
@keyframes zweef { 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .hero-libel { animation: none; } html { scroll-behavior: auto; } }

.hero h1 { font-weight: 600; font-size: clamp(2.8rem, 7.5vw, 5rem); line-height: 1.08; }
.hero-sub {
  font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 3.2vw, 1.85rem);
  color: var(--pruim-zacht); margin: 1rem 0 2rem;
}
.hero-intro { font-size: 1.15rem; max-width: 33rem; margin: 0 auto 2.25rem; }

.knop {
  display: inline-block;
  background: var(--pruim); color: var(--bg);
  text-decoration: none; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 400;
  padding: 1rem 2rem;
  transition: background .2s;
}
.knop:hover { background: var(--libel); }

/* Herkenning */
.herkenning { padding: 4.5rem 1rem; background: var(--bg-alt); }
.inleiding { font-family: var(--serif); font-size: 1.6rem; line-height: 1.35; color: var(--pruim); }
.patronen { list-style: none; }
.patronen li { padding: .85rem 0; border-top: 1px solid rgba(196, 150, 58, .35); font-size: 1.1rem; }
.patronen li:last-child { border-bottom: 1px solid rgba(196, 150, 58, .35); }
.patronen span { color: var(--libel); font-weight: 400; }
.herkenbaar { font-family: var(--serif); font-style: italic; font-size: 1.9rem; color: var(--goud); }

/* Kernzin */
.kern { background: var(--pruim); color: var(--licht); padding: 5rem 1rem; text-align: center; }
.kern-zin { font-family: var(--serif); font-size: clamp(1.8rem, 4.5vw, 2.6rem); line-height: 1.25; color: #fdf7f7; text-wrap: balance; }
.kern-zin::after { content: ""; display: block; width: 3rem; height: 1px; background: var(--goud); margin: 1.75rem auto .5rem; }

/* Inhoudsblokken */
.blok { padding: 5.5rem 1rem; }
.blok-alt { background: var(--bg-alt); }
.ondertitel { font-family: var(--serif); font-style: italic; font-size: 1.45rem; color: var(--goud); margin-top: -.75rem; }
.slotzin {
  font-family: var(--serif); font-size: 1.5rem; line-height: 1.4; color: var(--libel);
  padding-left: 1.25rem; border-left: 1px solid var(--goud); margin-top: .5rem;
}

/* Over mij */
.over { padding: 5.5rem 1rem; background: var(--bg-alt); }
.over-raster {
  max-width: 62rem; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 36rem); gap: 4rem;
  justify-content: center; align-items: start;
}
.over-raster .smal { margin: 0; }
.portret { position: sticky; top: 7rem; padding: .6rem; border: 1px solid var(--goud); border-radius: 999px 999px 0 0; }
.portret img { display: block; width: 100%; height: auto; border-radius: 999px 999px 0 0; }
.over-intro { font-family: var(--serif); font-size: 1.5rem; line-height: 1.4; color: var(--pruim); }
.opleidingen { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin-top: .5rem; }
.opleidingen li { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--pruim); font-weight: 400; display: flex; align-items: center; gap: .6rem; }
.opleidingen li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--goud); }

/* Ervaringen */
.ervaringen { padding: 5.5rem 1rem; text-align: center; border-bottom: 1px solid rgba(196, 150, 58, .25); }
.carrousel {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "links spoor rechts";
  align-items: center; gap: 1.25rem; max-width: 78rem; margin: 2rem auto 0;
}
.reviews {
  grid-area: spoor;
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4rem) / 3); gap: 2rem; align-items: start;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
  padding-top: 1.75rem;
}
.reviews::-webkit-scrollbar { display: none; }
.reviews:focus-visible { outline: 2px solid var(--goud); outline-offset: 4px; }
.review { position: relative; display: flex; flex-direction: column; scroll-snap-align: start; background: #fff; border: 1px solid rgba(196, 150, 58, .4); padding: 3.25rem clamp(1.5rem, 3vw, 2.25rem) 2.25rem; }
.review blockquote { flex: 1; }
.review blockquote p + p { margin-top: .8em; }

.pijl {
  width: 3rem; height: 3rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg); color: var(--pruim); border: 1px solid var(--goud);
  cursor: pointer; transition: background .2s, color .2s, opacity .2s;
}
.pijl svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pijl:hover:not(:disabled) { background: var(--pruim); color: var(--bg); }
.pijl:focus-visible { outline: 2px solid var(--goud); outline-offset: 3px; }
.pijl:disabled { opacity: .3; cursor: default; }
.pijl-links { grid-area: links; }
.pijl-rechts { grid-area: rechts; }

@media (max-width: 1000px) { .reviews { grid-auto-columns: calc((100% - 2rem) / 2); } }
@media (max-width: 640px) {
  .carrousel { grid-template-columns: 1fr 1fr; grid-template-areas: "spoor spoor" "links rechts"; gap: 1.5rem 1rem; }
  .reviews { grid-auto-columns: 100%; }
  .pijl-links { justify-self: end; }
  .pijl-rechts { justify-self: start; }
}
.review::before {
  content: "\201C"; position: absolute; top: -1.6rem; left: 50%; transform: translateX(-50%);
  width: 3.2rem; height: 3.2rem; background: var(--bg); border: 1px solid rgba(196, 150, 58, .4); border-radius: 50%;
  font-family: var(--serif); font-size: 3rem; line-height: 4.5rem; color: var(--goud);
}
.review blockquote { font-family: var(--serif); font-style: italic; font-size: 1.22rem; line-height: 1.55; color: var(--pruim); }
.review figcaption { display: flex; flex-direction: column; align-items: center; gap: .2rem; margin-top: 1.75rem; }
.review figcaption::before { content: ""; width: 2.5rem; height: 1px; background: var(--goud); margin-bottom: .9rem; }
.review-naam { font-family: var(--serif); font-size: 1.3rem; color: var(--pruim); }
.review-soort { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--goud); font-weight: 400; }

/* Contact */
.contact { padding: 6rem 1rem; text-align: center; }
.drieslag { font-family: var(--serif); font-style: italic; font-size: 1.5rem; line-height: 1.4; color: var(--libel); }
.contact-opties { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 2.5rem; }
.contact-kaart {
  display: flex; align-items: center; gap: .75rem;
  padding: 1rem 1.5rem; border: 1px solid rgba(196, 150, 58, .5);
  text-decoration: none; color: var(--pruim); transition: border-color .2s, background .2s;
}
.contact-kaart:hover { border-color: var(--goud); background: #fff; }
.contact-kaart svg { width: 22px; height: 22px; fill: none; stroke: var(--goud); stroke-width: 1.5; stroke-linejoin: round; }

footer { text-align: center; padding: 2rem 1rem; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--goud); border-top: 1px solid rgba(196, 150, 58, .25); }

@media (max-width: 760px) {
  .nav nav a:not(.nav-cta) { display: none; }
  .over-raster { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; justify-items: center; }
  .portret { position: static; width: min(15rem, 70vw); }
  .over-raster .smal { max-width: 36rem; }
}
@media (max-width: 480px) {
  .nav-sub { letter-spacing: .18em; }
}