:root{
  --papier:#f4efe7;
  --papier-licht:#faf7f2;
  --inkt:#2f2c27;
  --inkt-zacht:#6b655c;
  --salie:#8d9d87;
  --salie-donker:#6f8068;
  --salie-licht:#cfd6c8;
  --lijn:#e2dbd0;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  --script:'Sacramento',cursive;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--papier);color:var(--inkt);
  font-family:var(--sans);font-weight:300;font-size:18px;line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:300;letter-spacing:.01em;margin:0}
h1{font-size:clamp(3rem,7.4vw,5.8rem);line-height:1.06}
h2{font-size:clamp(2.1rem,4vw,3.2rem);line-height:1.15}
h3{font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1.2}
p{margin:0 0 1.15em}
.overslaan{position:absolute;left:-9999px}
.overslaan:focus{left:1rem;top:1rem;background:#fff;padding:.6rem 1rem;z-index:50}

.breed{max-width:1140px;margin:0 auto;padding:0 clamp(1.2rem,4vw,2.5rem)}
.smal{max-width:720px;margin:0 auto;padding:0 clamp(1.2rem,4vw,2.5rem)}
.midden{text-align:center}
.midden .loop{text-align:left}

/* balk */
.balk{position:sticky;top:0;z-index:30;background:rgba(244,239,231,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--lijn)}
.balk-in{max-width:1240px;margin:0 auto;padding:.8rem clamp(1.2rem,4vw,2.5rem);display:flex;align-items:center;gap:2rem}
.merk{text-decoration:none;line-height:1;display:block;flex:0 0 auto}
.merk-klein{display:block;font-family:var(--script);font-size:1.55rem;color:var(--salie-donker);margin-bottom:-.3rem}
.merk-groot{display:block;font-family:var(--script);font-size:2.9rem;color:var(--inkt)}
.nav{margin-left:auto;display:flex;gap:clamp(1rem,2.4vw,2.2rem)}
.nav a{text-decoration:none;font-size:1.03rem;letter-spacing:.02em;padding-bottom:2px;border-bottom:1px solid transparent}
.nav a:hover,.nav a.nu{border-bottom-color:var(--salie)}
.knop-rand{flex:0 0 auto;text-decoration:none;font-size:.9rem;letter-spacing:.04em;padding:.7rem 1.4rem;border:1px solid var(--salie);border-radius:999px;line-height:1.2;text-align:center}
.knop-rand:hover{background:var(--salie);color:#fff}

/* knop */
.knop{display:inline-block;text-decoration:none;font-size:.92rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.95rem 2.1rem;border:1px solid var(--inkt);border-radius:999px;background:none;color:var(--inkt);
  font-family:var(--sans);font-weight:400;cursor:pointer;transition:background .2s,color .2s}
.knop:hover{background:var(--inkt);color:var(--papier-licht)}

/* hero */
.hero{padding:clamp(4.5rem,12vw,9rem) 0 clamp(3.5rem,8vw,6rem);text-align:center}
.hero-in{max-width:860px;margin:0 auto;padding:0 clamp(1.2rem,4vw,2.5rem)}
.hero h1{margin-bottom:1.6rem}
.hero-onder{max-width:660px;margin:0 auto 2.4rem;color:var(--inkt-zacht);font-size:1.2rem}
.kop-band{padding:clamp(3.5rem,9vw,6rem) 0 clamp(1.5rem,4vw,2.5rem);text-align:center}
.kop-band h1{margin-bottom:1.2rem}
.kop-band .hero-onder{margin-bottom:0}

.band{padding:clamp(3rem,8vw,5.5rem) 0}
.band-licht{background:var(--papier-licht);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn)}
.lead{font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,1.75rem);color:var(--salie);margin-bottom:.6rem}
.onder-lead{color:var(--inkt-zacht);margin-bottom:1.8rem}
.lead-loop{font-family:var(--serif);font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.5;max-width:620px;margin:0 auto}
.loop{margin-top:1.8rem}
.band h2+.loop{margin-top:1.4rem}

/* citaat */
.citaatblok{margin:3rem 0 0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.citaatblok img{border-radius:3px;aspect-ratio:4/5;object-fit:cover;width:100%}
.citaatblok blockquote{margin:0}
.script{font-family:var(--script);font-size:clamp(2.2rem,4.2vw,3.4rem);line-height:1.3;color:var(--inkt);margin:0}
.script-klein{font-size:clamp(1.85rem,3.2vw,2.6rem);margin-bottom:2rem}

/* duo */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.duo-tekst h2{margin-bottom:2rem}
.duo-beeld img{border-radius:3px;aspect-ratio:4/5;object-fit:cover;width:100%}

/* werkwijze */
.blokken{margin-top:clamp(2.5rem,6vw,4rem);display:flex;flex-direction:column;gap:clamp(2.5rem,6vw,4.5rem)}
.blok{display:grid;grid-template-columns:5fr 6fr;gap:clamp(1.8rem,4vw,3.5rem);align-items:center}
.blok-om .blok-beeld{order:2}
.blok-beeld img{border-radius:3px;aspect-ratio:4/3;object-fit:cover;width:100%}
.blok-tekst h3{margin-bottom:1rem}
.blok-tekst p:last-child{margin-bottom:0}

/* over mij */
.over{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.over-beeld img{border-radius:3px;aspect-ratio:4/5;object-fit:cover;width:100%;position:sticky;top:7rem}
.over-tekst .loop{margin-top:0}

/* contact */
.contact{display:grid;grid-template-columns:7fr 5fr;gap:clamp(2.5rem,5vw,4rem);align-items:start}
.formulier h2,.zijkant h2{margin-bottom:1.4rem}
.zijkant h2{font-size:clamp(1.5rem,2.2vw,1.9rem)}
.velden{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1.4rem}
form label{display:block;margin-bottom:1.2rem}
.velden label{margin-bottom:0}
form span{display:block;font-size:.97rem;letter-spacing:.03em;color:var(--inkt-zacht);margin-bottom:.4rem}
form i{font-style:normal;opacity:.65}
input,textarea{width:100%;font-family:var(--sans);font-weight:300;font-size:1rem;color:var(--inkt);
  background:var(--papier-licht);border:1px solid var(--lijn);border-radius:3px;padding:.75rem .9rem}
input:focus,textarea:focus{outline:none;border-color:var(--salie)}
textarea{resize:vertical}
.vol{margin-top:1.2rem}
.formulier .knop{margin-top:.6rem}
.zijkant{background:var(--papier-licht);border:1px solid var(--lijn);border-radius:3px;padding:clamp(1.6rem,3vw,2.2rem)}
.zijkant p{color:var(--inkt-zacht)}
.gegevens{margin:2rem 0 0;display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.2rem;font-size:.95rem}
.gegevens dt{color:var(--inkt-zacht)}
.gegevens dd{margin:0}
.gegevens a{text-decoration:none;border-bottom:1px solid var(--salie-licht)}

/* slotknop onderaan elke pagina */
.slot{background:var(--papier);border-top:1px solid var(--lijn);padding:clamp(2.6rem,6vw,4rem) 0}
.band-licht+.slot{border-top:none}

/* balk onderaan op de telefoon */
.mobielbalk{display:none}
@media(max-width:700px){
  .mobielbalk{
    display:grid;grid-template-columns:1fr 1fr;gap:.6rem;
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    padding:.7rem clamp(.8rem,4vw,1.2rem) calc(.7rem + env(safe-area-inset-bottom));
    background:rgba(244,239,231,.96);backdrop-filter:blur(8px);border-top:1px solid var(--lijn);
  }
  .mobielknop{
    display:block;text-align:center;text-decoration:none;
    font-size:1rem;letter-spacing:.05em;text-transform:uppercase;
    padding:.85rem 1rem;border-radius:999px;border:1px solid var(--inkt);color:var(--inkt);
  }
  .mobielknop-wa{background:var(--salie-donker);border-color:var(--salie-donker);color:#fff}
  body{padding-bottom:5.2rem}
}

/* ------------------------------------------------------------- varianten
   Focus is de stand waarin de site al stond. Lively zet er de bewegende vormen
   in de hero en de reviews onder de kop bij. Alles staat in dezelfde pagina,
   de variant bepaalt alleen wat je ziet. */
html[data-var="focus"] .hero-sier,
html[data-var="focus"] .lint,
html[data-var="focus"] .streep{display:none}

/* Lively heeft iets meer kleur: een warme ondertoon in de lichte banden en een
   blos in de aanloopregels. De letters en de tekst blijven gelijk. */
html[data-var="lively"] .band-licht{background:linear-gradient(180deg,#fbf6ef,#f7f0e5)}
html[data-var="lively"] .lead{color:#c0826a}
html[data-var="lively"] .knop-rand{border-color:#d79c84}
html[data-var="lively"] .knop-rand:hover{background:#d79c84;border-color:#d79c84}

/* pijltje tegen de linkerrand */
.schakel{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:45;display:flex;align-items:center}
.schakel-tab{
  display:grid;place-items:center;width:1.7rem;height:3.2rem;padding:0;cursor:pointer;
  background:rgba(250,247,242,.55);color:var(--inkt-zacht);
  border:1px solid var(--lijn);border-left:none;border-radius:0 6px 6px 0;
  opacity:.35;transition:opacity .2s,background .2s;
}
.schakel-tab svg{width:14px;height:14px;transition:transform .25s}
.schakel-tab:hover,.schakel-tab:focus-visible{opacity:1;background:var(--papier-licht)}
.schakel.uit .schakel-tab{opacity:1;background:var(--papier-licht)}
.schakel.uit .schakel-tab svg{transform:rotate(180deg)}
.schakel-paneel[hidden]{display:none}
.schakel-paneel{
  display:flex;flex-direction:column;gap:.35rem;margin-left:.45rem;padding:.7rem .8rem;
  background:var(--papier-licht);border:1px solid var(--lijn);border-radius:8px;
  box-shadow:0 10px 30px rgba(47,44,39,.12);
}
.schakel-kop{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--inkt-zacht)}
.schakel-keus{
  font-family:var(--sans);font-weight:300;font-size:.92rem;text-align:left;cursor:pointer;
  padding:.3rem .7rem;border:1px solid transparent;border-radius:999px;background:none;color:var(--inkt);
}
.schakel-keus:hover{border-color:var(--lijn)}
.schakel-keus.nu{background:var(--salie-donker);border-color:var(--salie-donker);color:#fff}

/* hero in Lively */
.hero{position:relative;overflow:hidden}
.hero-in{position:relative;z-index:1}
.hero-sier{position:absolute;left:-5%;right:-5%;top:-10%;height:120%;pointer-events:none;
  --uitdoven:radial-gradient(60% 55% at 50% 42%,#000 35%,transparent 100%);
  -webkit-mask-image:var(--uitdoven);mask-image:var(--uitdoven)}
.sier-svg{width:100%;height:100%;display:block;opacity:.85}
html[data-var="lively"] .hero{padding-top:clamp(3rem,8vw,6rem)}
.stip{position:absolute;border-radius:50%;background:var(--salie-donker);opacity:.3;
  animation:zweef 11s ease-in-out infinite}
.stip-1{width:9px;height:9px;left:16%;top:26%}
.stip-2{width:6px;height:6px;right:19%;top:34%;background:#d79c84;opacity:.45;animation-duration:14s;animation-delay:-3s}
.stip-3{width:5px;height:5px;left:31%;bottom:18%;background:#cbae6e;opacity:.5;animation-duration:17s;animation-delay:-7s}
@keyframes zweef{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}}

.nadruk{position:relative;white-space:nowrap}
.streep{position:absolute;left:0;right:0;bottom:-.14em;width:100%;height:.22em;overflow:visible}
.streep path{stroke-dasharray:320;stroke-dashoffset:320;animation:trek 1.5s .35s ease-out forwards}
@keyframes trek{to{stroke-dashoffset:0}}

/* reviewlint onder de kop */
.lint{
  margin:0 0 2.6rem;position:relative;
  width:100vw;margin-left:calc(50% - 50vw);
  --rand:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-image:var(--rand);mask-image:var(--rand);
}
.spoor{display:flex;width:max-content;padding:.4rem 0;animation:schuif 70s linear infinite}
.lint:hover .spoor,.lint:focus-within .spoor,.lint.vast .spoor{animation-play-state:paused}
@keyframes schuif{to{transform:translateX(-50%)}}

.kaart{
  flex:0 0 auto;width:330px;margin-right:1.1rem;text-align:left;
  display:flex;flex-direction:column;
  background:var(--papier-licht);border:1px solid var(--lijn);border-radius:10px;
  padding:1.3rem 1.4rem 1.1rem;
}
.sterren{display:flex;gap:.18rem;margin-bottom:.8rem}
.ster{width:15px;height:15px;fill:#d9a43f}
.kaart-tekst{position:relative;overflow:hidden;height:10.5em;flex:0 0 auto}
.kaart-tekst p{margin:0;font-size:.95rem;line-height:1.62;color:var(--inkt)}
.kaart.lang .kaart-tekst::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:4.2em;pointer-events:none;
  background:linear-gradient(to bottom,rgba(250,247,242,0),var(--papier-licht) 78%);
}
.kaart.open .kaart-tekst{height:auto}
.kaart-voet{display:flex;align-items:center;gap:.8rem;margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--lijn)}
.kaart-naam{font-family:var(--serif);font-size:1.12rem;color:var(--inkt)}
.kaart-meer{
  margin-left:auto;display:none;place-items:center;flex:0 0 auto;
  width:1.9rem;height:1.9rem;padding:0;cursor:pointer;
  background:none;color:var(--inkt-zacht);border:1px solid var(--lijn);border-radius:50%;
}
.kaart.lang .kaart-meer,.kaart.open .kaart-meer{display:grid}
.kaart-meer svg{width:15px;height:15px;transition:transform .25s}
.kaart-meer:hover{color:var(--inkt);border-color:var(--salie)}
.kaart.open .kaart-meer svg{transform:rotate(180deg)}

@media(max-width:700px){
  .kaart{width:272px}
  .lint{margin-bottom:2.1rem}
  .schakel-tab{height:2.8rem}
}

/* Wie beweging uitzet krijgt een lint dat je zelf opzij schuift en stille vormen. */
@media(prefers-reduced-motion:reduce){
  .spoor{animation:none}
  .lint{-webkit-mask-image:none;mask-image:none;overflow-x:auto;scroll-snap-type:x mandatory}
  .kaart{scroll-snap-align:start}
  .stip{animation:none}
  .streep path{stroke-dashoffset:0;animation:none}
  .sier-svg animate{display:none}
}

/* voet */
.voet{background:var(--papier-licht);border-top:1px solid var(--lijn);padding:clamp(2.5rem,6vw,4rem) 0}
.voet-in{max-width:1140px;margin:0 auto;padding:0 clamp(1.2rem,4vw,2.5rem);
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem}
.voet-kolom{display:flex;flex-direction:column;gap:.5rem;font-size:.95rem;color:var(--inkt-zacht)}
.voet-kolom a{text-decoration:none}
.voet-kolom a:hover{color:var(--inkt)}

@media(max-width:900px){
  .citaatblok,.duo,.blok,.over,.contact{grid-template-columns:1fr}
  .blok-om .blok-beeld{order:0}
  .over-beeld img{position:static}
  .over-beeld{max-width:420px}
  .voet-in{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .balk-in{flex-wrap:wrap;gap:.8rem 1.2rem}
  .merk-klein{font-size:1.3rem}
  .merk-groot{font-size:2.4rem}
  .nav{order:3;width:100%;margin-left:0;justify-content:space-between;padding-top:.4rem;border-top:1px solid var(--lijn)}
  .nav a{font-size:.96rem}
  .knop-rand{margin-left:auto;font-size:.86rem;padding:.6rem 1.1rem}
  .velden{grid-template-columns:1fr}
  .voet-in{grid-template-columns:1fr}
}