/* Monique de Aankoopmakelaar — vormgeving van de publieke pagina's.
   Eén stylesheet voor alle pagina's. Dezelfde familie als het oorspronkelijke
   ontwerp: goud, donker vlak, Playfair voor de grote koppen, Montserrat voor
   de rest. Warmer papier, dieper donker, meer lucht en meer beweging. */

/* --------------------------------------------------------------- tokens */
:root{
  --goud:#a5822b; --goud-diep:#856819; --goud-licht:#d9be7b;
  --inkt:#211e19; --inkt-zacht:#5b544b;
  --nacht:#1b1610;                 /* donkere banden, warmer dan de tekstkleur */
  --papier:#f8f5ef;                /* warm papier in plaats van puur wit */
  --papier-diep:#f1ebe0;           /* tweede tint voor afwisseling */
  --wit:#fffdfa;                   /* kaarten en formuliervelden */
  --lijn:#e0d8ca;
  --gut:clamp(1.25rem,5vw,4.5rem);
  --kop:"Playfair Display",Georgia,"Times New Roman",serif;
  --tekst:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --hoek:0;                        /* geen ronde hoeken, net als in het ontwerp */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:6rem}
body{margin:0;background:var(--papier);color:var(--inkt);font-family:var(--tekst);
  font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
p{max-width:36rem}
:focus-visible{outline:3px solid var(--goud);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--nacht);color:#fff;padding:.75rem 1rem}
.wrap{max-width:78rem;margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.smal{max-width:52rem}
.band{padding-block:clamp(4rem,9vw,8rem)}
.band--kort{padding-block:clamp(2.5rem,5vw,4rem)}
.papier-diep{background:var(--papier-diep)}
.donker{background:var(--nacht);color:#f4efe6}
.donker p{color:#ddd5c8}
.donker h2,.donker h1,.donker h3{color:#fff}
.streep{border-top:1px solid var(--lijn)}

/* ----------------------------------------------------------------- merk */
.mark{display:flex;align-items:center;gap:.85rem;text-decoration:none;position:relative}
.mark-icoon{height:40px;width:auto}
.mark-woord{height:26px;width:auto;transition:opacity .35s ease}
.mark-woord.wit{position:absolute;left:calc(40px * 0.594 + .85rem);opacity:0}
@media(max-width:600px){
  .mark-icoon{height:33px}
  .mark-woord{height:21px}
  .mark-woord.wit{left:calc(33px * 0.594 + .85rem)}
}

/* --------------------------------------------------------------- header */
header{position:fixed;top:0;left:0;right:0;z-index:40;
  background:rgba(248,245,239,0);border-bottom:1px solid transparent;
  transition:background .35s ease,border-color .35s ease,box-shadow .35s ease}
header[data-vast]{background:rgba(248,245,239,.97);border-bottom-color:var(--lijn);
  backdrop-filter:blur(8px);box-shadow:0 6px 24px rgba(33,30,25,.05)}
.headbar{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding-block:1.1rem;transition:padding .35s ease}
header[data-vast] .headbar{padding-block:.8rem}

/* Boven de videohero staat de header op donker beeld: witte letters. */
header:not([data-vast]) .mark-woord.donkerkleur{opacity:0}
header:not([data-vast]) .mark-woord.wit{opacity:1}
header:not([data-vast]) nav a{color:#fff}
header:not([data-vast]) .menuknop{color:#fff;border-color:rgba(255,255,255,.55)}
header:not([data-vast]) .knop--rand{color:#fff;border-color:rgba(255,255,255,.65)}
header:not([data-vast]) .knop--rand:hover{background:#fff;color:var(--inkt);border-color:#fff}

nav ul{display:flex;gap:1.9rem;list-style:none;margin:0;padding:0}
nav a{color:var(--inkt);text-decoration:none;font-size:.85rem;font-weight:500;
  letter-spacing:.02em;padding-bottom:3px;border-bottom:1px solid transparent;
  transition:color .25s ease,border-color .25s ease}
nav a:hover{border-bottom-color:var(--goud)}
nav a[aria-current="page"]{border-bottom-color:var(--goud);color:var(--goud-diep)}
@media(max-width:1120px){nav{display:none}}

/* ---------------------------------------------------------- mobiel menu */
.menuknop{display:none;background:none;border:1px solid var(--lijn);padding:.6rem .8rem;
  font:inherit;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--inkt);cursor:pointer;transition:color .25s ease,border-color .25s ease}
.menuknop:hover{border-color:var(--goud)}
@media(min-width:1121px){
  header nav,header nav[hidden]{display:block}
}
@media(max-width:1120px){
  .menuknop{display:inline-block}
  header nav{display:block;position:absolute;left:0;right:0;top:100%;
    background:var(--papier);border-bottom:1px solid var(--lijn);
    box-shadow:0 16px 32px rgba(27,22,16,.12)}
  header nav[hidden]{display:none}
  header nav ul{display:block;padding:.25rem var(--gut) 1.1rem}
  header nav li+li{border-top:1px solid var(--lijn)}
  header nav a,header:not([data-vast]) nav a{display:block;padding:1rem 0;font-size:1.02rem;
    border-bottom:none;color:var(--inkt)}
  header nav a:hover{border-bottom:none;color:var(--goud-diep)}
}

/* -------------------------------------------------------------- knoppen */
.knop{display:inline-block;background:var(--goud);color:#fff;text-decoration:none;
  font-weight:600;font-size:.9rem;letter-spacing:.02em;padding:1rem 1.9rem;
  border:1px solid var(--goud);cursor:pointer;border-radius:var(--hoek);
  transition:background .25s ease,border-color .25s ease,transform .25s ease}
.knop:hover{background:var(--goud-diep);border-color:var(--goud-diep);transform:translateY(-2px)}
.knop--rand{background:none;color:var(--inkt);border-color:var(--lijn)}
.knop--rand:hover{background:var(--inkt);color:#fff;border-color:var(--inkt)}
.donker .knop--rand{color:#fff;border-color:rgba(255,255,255,.4)}
.donker .knop--rand:hover{background:#fff;color:var(--inkt);border-color:#fff}
.tekstlink{color:var(--inkt);text-decoration:none;font-weight:500;font-size:.95rem;
  border-bottom:1px solid var(--goud);padding-bottom:4px;transition:color .25s ease}
.tekstlink:hover{color:var(--goud-diep)}
.donker .tekstlink{color:#fff}
.donker .tekstlink:hover{color:var(--goud-licht)}
.acties{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;margin-top:2.4rem}
@media(max-width:600px){
  .knop{padding:.9rem 1.5rem}
  /* op de telefoon staat de koffieknop al in de balk onderaan */
  .headbar > .knop{display:none}
  .bovenkop{font-size:.72rem;letter-spacing:.16em}
}

/* --------------------------------------------------------------- koppen */
h1,h2{letter-spacing:-.01em}
.bovenkop{display:block;font-size:.78rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--goud-diep);margin:0 0 1.2rem}
.donker .bovenkop{color:var(--goud-licht)}
h2{font-family:var(--kop);font-size:clamp(2rem,4.2vw,3.1rem);line-height:1.14;
  font-weight:700;margin:0 0 1rem;max-width:20ch}
h2 em{font-style:italic;color:var(--goud-diep);font-weight:700}
.donker h2 em{color:var(--goud-licht)}
h3{font-family:var(--tekst)}
.lead{font-size:clamp(1.05rem,1.6vw,1.22rem);font-weight:500;color:var(--goud-diep);
  margin:0 0 1.8rem;max-width:36rem;line-height:1.6}
.donker .lead{color:var(--goud-licht)}

/* ----------------------------------------------------------------- hero */
.hero{position:relative;min-height:min(92vh,56rem);display:flex;align-items:flex-end;
  /* de bovenruimte houdt de inhoud vrij van de vaste header */
  padding:clamp(7.5rem,13vw,10rem) 0 clamp(4.5rem,9vw,7rem);
  overflow:hidden;background:var(--nacht)}
.hero-beeld{position:absolute;inset:0;z-index:0}
.hero-beeld img,.hero-beeld video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;background:transparent}
/* De video ligt over de foto. Is er nog geen video, dan blijft de foto staan. */
.hero-beeld video{z-index:1}
/* Trage inzoom, zodat ook een stilstaande foto leeft. */
.hero-beeld img{animation:traagzoom 26s ease-out forwards}
@keyframes traagzoom{from{transform:scale(1.001)}to{transform:scale(1.09)}}
.hero-sluier{position:absolute;inset:0;z-index:1;
  background:linear-gradient(to right,rgba(19,15,11,.82) 0%,rgba(19,15,11,.62) 45%,rgba(19,15,11,.2) 100%),
             linear-gradient(to top,rgba(19,15,11,.7) 0%,rgba(19,15,11,0) 45%)}
/* width:100% is nodig omdat de hero een flexbox is: zonder dat krimpt de
   kolom tot de breedte van de tekst en centreert hij zichzelf, waardoor
   hij niet meer op het raster van de pagina staat. */
.hero-inhoud{position:relative;z-index:2;color:#fff;width:100%;max-width:78rem}
.hero-inhoud > *{max-width:40rem}
.hero .bovenkop{color:var(--goud-licht)}
.hero h1{font-family:var(--kop);font-weight:700;font-size:clamp(2.3rem,5.4vw,4.3rem);
  line-height:1.04;margin:0 0 1.4rem;color:#fff}
.hero h1 em{display:block;font-style:italic;color:var(--goud-licht)}
.hero p{color:#eee6d9;font-size:clamp(1rem,1.5vw,1.14rem);max-width:33rem}
.hero .sub{color:var(--goud-licht);font-size:clamp(1.1rem,2vw,1.35rem);font-weight:500;
  margin:0 0 1.4rem;max-width:28rem}
.hero .acties{margin-top:2.6rem}
/* op beeld moet ook de tweede knop wit blijven */
.hero .knop--rand{color:#fff;border-color:rgba(255,255,255,.6)}
.hero .knop--rand:hover{background:#fff;color:var(--inkt);border-color:#fff}
@media(max-width:700px){.hero{min-height:44rem}}

/* pijl die naar beneden wijst */
.scrolltip{position:absolute;left:auto;right:var(--gut);bottom:1.8rem;z-index:2;transform:translateX(-50%);
  color:rgba(255,255,255,.75);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.scrolltip span{display:block;width:1px;height:2.6rem;background:rgba(255,255,255,.5);
  animation:zakken 2.4s ease-in-out infinite}
@keyframes zakken{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}
@media(max-width:700px){.scrolltip{display:none}}

/* kleine kop bovenaan de binnenpagina's */
.paginakop{padding-top:clamp(7rem,12vw,11rem)}
.paginakop h1{font-family:var(--kop);font-weight:700;font-size:clamp(2.2rem,5vw,3.6rem);
  line-height:1.1;margin:0 0 1rem;max-width:24ch}
.paginakop h1 em{font-style:italic;color:var(--goud-diep)}

/* ------------------------------------------------------- twee kolommen */
.twee{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,6rem);align-items:center}
.twee--top{align-items:start}
.twee img{width:100%;object-fit:cover}
@media(max-width:920px){.twee{grid-template-columns:1fr;gap:2.5rem}}
/* beeld dat langzaam meeschuift bij het scrollen */
.beeldlijst{overflow:hidden}
.beeldlijst img{transition:transform 1.2s cubic-bezier(.2,.7,.3,1)}
.beeldlijst:hover img{transform:scale(1.04)}

/* -------------------------------------------------------------- pijlers */
.pijlers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,4vw,4rem);margin-top:3rem}
.pijler{border-top:2px solid var(--goud);padding-top:1.4rem}
.pijler h3{font-size:1.1rem;font-weight:600;margin:0 0 .7rem;color:#fff}
.pijler p{font-size:.96rem;color:#ccc3b4;margin:0;max-width:none}
@media(max-width:820px){.pijlers{grid-template-columns:1fr;gap:1.8rem}}

/* -------------------------------------------------------------- stappen */
.stappen{list-style:none;margin:3rem 0 0;padding:0;display:grid;
  grid-template-columns:1fr 1fr;gap:0 clamp(2.5rem,5vw,5rem)}
.stappen--drie{grid-template-columns:repeat(3,1fr)}
.stap{display:grid;grid-template-columns:3.2rem 1fr;gap:1.2rem;padding:1.6rem 0;
  border-top:1px solid var(--lijn)}
.stap .nr{font-family:var(--kop);font-size:1.4rem;font-weight:700;color:var(--goud);line-height:1}
.stap h3{margin:0 0 .4rem;font-size:1.02rem;font-weight:600}
.stap p{margin:0;font-size:.94rem;color:var(--inkt-zacht);max-width:none}
@media(max-width:920px){.stappen,.stappen--drie{grid-template-columns:1fr}}

/* ------------------------------------------------------------- beloftes */
.beloftes{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(2.5rem,5vw,5rem);margin-top:2.4rem}
.belofte{padding:1.7rem 0;border-top:1px solid rgba(255,255,255,.18)}
.belofte h3{margin:0 0 .45rem;font-size:1.05rem;font-weight:600;color:var(--goud-licht)}
.belofte p{margin:0;font-size:.96rem;max-width:none}
@media(max-width:760px){.beloftes{grid-template-columns:1fr}}

/* --------------------------------------------------------------- tarief */
.tarief-blok{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,5rem);
  align-items:start;margin-top:2rem}
.tarief-slot{border-left:3px solid var(--goud);padding-left:1.6rem;font-size:1.08rem;font-weight:500}
@media(max-width:920px){.tarief-blok{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- cases */
.bewijs{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2.5rem,5vw,5rem);
  align-items:center;margin-bottom:4rem}
.bewijs img{width:100%;aspect-ratio:3/4;object-fit:cover}
@media(max-width:920px){.bewijs{grid-template-columns:1fr}.bewijs img{aspect-ratio:4/3}}
.raster{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.8rem,3vw,3rem)}
@media(max-width:920px){.raster{grid-template-columns:1fr}}
.case{background:var(--wit);border:1px solid var(--lijn);
  transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s ease}
.case:hover{transform:translateY(-6px);box-shadow:0 18px 38px rgba(27,22,16,.1)}
.case img{width:100%;aspect-ratio:3/2;object-fit:cover}
.case .binnen{padding:1.5rem 1.6rem 1.8rem}
.case .adres{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--goud-diep);margin:0 0 .5rem}
.case h3{font-size:1.08rem;font-weight:600;margin:0 0 .5rem}
.case p{font-size:.93rem;color:var(--inkt-zacht);margin:0;max-width:none}
/* skelet tijdens het laden */
.skelet .vlak{width:100%;aspect-ratio:3/2;background:var(--papier-diep)}
.skelet .regel{height:.8rem;background:var(--papier-diep);margin:0 1.6rem 1rem}
.skelet .regel:first-of-type{margin-top:1.6rem}
.skelet .regel.kort{width:45%}
.skelet .regel.half{width:70%}

/* ----------------------------------------------------------------- blog */
.blogs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.8rem,3vw,3rem)}
@media(max-width:920px){.blogs{grid-template-columns:1fr}}
.blog{display:flex;flex-direction:column;background:var(--wit);border:1px solid var(--lijn);
  text-decoration:none;color:inherit;height:100%;
  transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s ease}
.blog:hover{transform:translateY(-6px);box-shadow:0 18px 38px rgba(27,22,16,.1)}
.blog .beeld{overflow:hidden}
.blog img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.3,1)}
.blog:hover img{transform:scale(1.05)}
.blog .binnen{padding:1.5rem 1.6rem 1.8rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.blog .datum{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--goud-diep)}
.blog h3{font-family:var(--kop);font-size:1.3rem;font-weight:700;line-height:1.25;margin:0}
.blog p{font-size:.94rem;color:var(--inkt-zacht);margin:0;max-width:none}
.blog .verder{margin-top:auto;font-size:.88rem;font-weight:600;color:var(--goud-diep);
  border-bottom:1px solid var(--goud);align-self:flex-start;padding-bottom:3px}

/* artikelpagina */
.artikel{max-width:44rem;margin:0 auto}
.artikel p,.artikel ul,.artikel ol{max-width:none}
.artikel h2{font-size:clamp(1.5rem,2.6vw,2rem);margin:2.8rem 0 .9rem;max-width:26ch}
.artikel h3{font-size:1.15rem;font-weight:600;margin:2rem 0 .6rem}
.artikel ul,.artikel ol{padding-left:1.3rem}
.artikel li{margin-bottom:.5rem}
.artikel .voorbeeld{background:var(--papier-diep);border-left:3px solid var(--goud);
  padding:1.2rem 1.5rem;font-size:.95rem}
.artikel-beeld{width:100%;aspect-ratio:16/9;object-fit:cover;margin:0 0 3rem}
.meta{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--goud-diep);margin:0 0 1rem}

/* ------------------------------------------------------------ instagram */
.insta-kop{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;
  flex-wrap:wrap;margin-bottom:2.5rem}
.insta-raster{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media(max-width:920px){.insta-raster{grid-template-columns:repeat(2,1fr)}}
.insta-raster a{display:block;overflow:hidden;position:relative;background:var(--papier-diep)}
.insta-raster img{width:100%;aspect-ratio:1;object-fit:cover;
  transition:transform 1s cubic-bezier(.2,.7,.3,1)}
.insta-raster a:hover img{transform:scale(1.06)}
/* Plek waar de widget van de feed in komt. Zolang die leeg is, blijft de
   vaste strip hierboven staan. */
#insta-feed:empty{display:none}
#insta-feed:not(:empty)+.insta-raster{display:none}

/* --------------------------------------------------------------- review */
.reviewslot{border:1px dashed var(--lijn);padding:clamp(2rem,5vw,3.5rem);text-align:center;
  color:var(--inkt-zacht);font-size:.95rem;margin-top:2rem;background:var(--wit)}

/* --------------------------------------------------------------- engels */
.engels{border:1px solid var(--lijn);border-left:3px solid var(--goud);
  padding:clamp(2rem,4vw,3rem);background:var(--wit)}
.engels h2{font-size:clamp(1.4rem,2.4vw,1.8rem);margin-bottom:.9rem}

/* ------------------------------------------------------------ formulier */
form{display:grid;gap:1.1rem}
label{display:block;font-size:.84rem;font-weight:600;letter-spacing:.04em;margin-bottom:.4rem}
input,textarea,select{width:100%;font:inherit;font-size:16px;padding:.85rem .95rem;
  border:1px solid var(--lijn);background:var(--wit);color:var(--inkt);border-radius:var(--hoek)}
.donker input,.donker textarea,.donker select{background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.22);color:#fff}
.donker ::placeholder{color:rgba(255,255,255,.45)}
input:focus,textarea:focus,select:focus{border-color:var(--goud);outline:2px solid rgba(165,130,43,.3)}
textarea{min-height:7rem;resize:vertical}
.rij{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media(max-width:620px){.rij{grid-template-columns:1fr}}
form .knop{justify-self:start;margin-top:.4rem}
.direct{margin-top:2.6rem;border-top:1px solid rgba(255,255,255,.18);padding-top:1.7rem}
.direct dl{display:grid;grid-template-columns:auto 1fr;gap:.6rem 1.6rem;margin:0;font-size:.96rem}
.direct dt{color:#a59b8c}
.direct dd{margin:0}
.direct a{color:#fff;text-decoration:none;border-bottom:1px solid var(--goud)}

/* --------------------------------------------------------------- footer */
footer{background:var(--nacht);color:#c9c0b1;padding:clamp(3.5rem,6vw,5rem) 0 0;font-size:.92rem}
.footcols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:2.5rem}
footer h3{color:#fff;font-size:.78rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;margin:0 0 1rem}
footer a{color:#c9c0b1;text-decoration:none;border-bottom:1px solid transparent}
footer a:hover{color:#fff;border-bottom-color:var(--goud)}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
@media(max-width:940px){.footcols{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.footcols{grid-template-columns:1fr}}
.merk-stapel{display:block;text-decoration:none;margin-bottom:1.4rem}
.merk-stapel .icoon{height:64px;width:auto;margin-bottom:1rem}
.merk-stapel .woord{height:30px;width:auto}
.sociaal{display:flex;gap:.8rem;margin-top:1.4rem}
.sociaal a{display:grid;place-items:center;width:2.6rem;height:2.6rem;
  border:1px solid rgba(255,255,255,.2);color:#fff;transition:background .25s ease,border-color .25s ease}
.sociaal a:hover{background:var(--goud);border-color:var(--goud)}
.sociaal svg{width:1.05rem;height:1.05rem;fill:currentColor}
.copy{margin-top:3.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.14);
  font-size:.8rem;color:#8b8274;padding-bottom:2.5rem}
.logostrip{background:var(--papier);padding:2rem 0}
.logostrip .inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(1.5rem,5vw,3.5rem)}
.logostrip img{height:38px;width:auto;opacity:.75;transition:opacity .3s ease}
.logostrip img:hover{opacity:1}
.logostrip img.vn{height:44px}

/* --------------------------------------------------------- mobiele balk */
.mobielbalk{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;
  background:var(--papier);border-top:1px solid var(--lijn)}
.mobielbalk a{flex:1;text-align:center;padding:1rem .5rem;font-size:.86rem;font-weight:600;
  text-decoration:none;color:var(--inkt)}
.mobielbalk a+a{border-left:1px solid var(--lijn)}
.mobielbalk a.prim{background:var(--goud);color:#fff}
@media(max-width:1020px){.mobielbalk{display:flex}body{padding-bottom:3.6rem}}

/* -------------------------------------------------------------- beweging */
/* Blokken komen rustig in beeld. De klasse js komt van een regeltje in de
   head van elke pagina. Laadt dat niet, dan staat alle inhoud gewoon aan en
   verdwijnt er dus nooit iets achter een mislukte animatie. */
.js .komop{opacity:0;transform:translateY(26px);
  transition:opacity .9s cubic-bezier(.2,.7,.3,1),transform .9s cubic-bezier(.2,.7,.3,1)}
.js .komop.zichtbaar{opacity:1;transform:none}
.js .komop.traag{transition-delay:.12s}
.js .komop.trager{transition-delay:.24s}

/* Wie liever geen beweging ziet, krijgt geen beweging. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js .komop{opacity:1;transform:none}
  .hero-beeld img{animation:none}
}

/* Het attribuut hidden moet winnen van de display-regels hierboven. */
.raster[hidden],.blogs[hidden],.knop[hidden],.case[hidden]{display:none}

/* ---------------------------------------------------------------------
   Beeldformaten. Een foto wordt nooit hoger dan hieronder staat, en de
   uitsnede is per foto in te stellen met --pos, zodat Monique niet half
   wegvalt. Staat er geen --pos, dan wordt er iets boven het midden
   uitgesneden; dat klopt voor de meeste portretten.
   --------------------------------------------------------------------- */
img.beeld--staand,img.beeld--liggend{width:100%;object-fit:cover;
  object-position:var(--pos,50% 35%)}
img.beeld--staand{aspect-ratio:4/5;max-height:28rem}
img.beeld--liggend{aspect-ratio:3/2;max-height:24rem}
@media(max-width:920px){
  img.beeld--staand{max-height:24rem}
  img.beeld--liggend{max-height:20rem}
}

/* Kolommen in een raster mogen krimpen. Zonder dit duwt een lang woord dat
   niet kan afbreken, zoals het e-mailadres onder Liever direct contact, de
   hele kolom breder dan het scherm van een telefoon. */
.twee > *{min-width:0}
.direct dd,.direct dd a{overflow-wrap:anywhere}

/* =====================================================================
   Terugkoppeling Monique, 9 oktober 2026
   ===================================================================== */

/* Meer lucht langs de rand. Op een telefoon plakte de tekst tegen de zijkant. */
:root{--gut:clamp(1.5rem,6vw,4.5rem)}

/* ------------------------------------------------------------ de hero
   Een staande foto schermvullend tonen betekent kiezen welk stuk je
   wegsnijdt, en dat verschilt per schermbreedte. Daarom per maat een eigen
   uitsnede, zodat de tekst nergens over haar gezicht valt. */
.hero-beeld img,.hero-beeld video{object-position:var(--pos,50% 32%)}

@media(min-width:1201px){
  /* De uitsnede blijft precies zoals hij altijd was. Wel wordt de kop hier
     iets smaller: op laptopbreedtes liep de langste regel tot net tegen de
     linkerrand van haar gezicht. Bijsnijden helpt hier niet, want een
     staande foto in een breed vak wordt alleen boven en onder afgesneden. */
  .hero-beeld img,.hero-beeld video{object-position:var(--pos-groot,50% 50%)}
  .hero .hero-inhoud > *{max-width:35rem}
  /* op de Engelse foto staat ze verder naar links */
  .hero--smal .hero-inhoud > *{max-width:30rem}
  /* En ze staat er van top tot teen op, met haar hoofd hoog in beeld. Met de
     standaard uitsnede midden uit de foto zie je op een groot scherm alleen
     haar middel. Daarom hier hoger uitsnijden, zodat kop en bovenlijf in
     beeld blijven. */
  .hero--smal .hero-beeld img,.hero--smal .hero-beeld video{object-position:50% 26%}
}
@media(min-width:769px) and (max-width:1200px){
  /* laptop: zij schuift naar rechts, de tekst wordt smaller en de sluier
     links wat dieper, zodat ze elkaar niet meer raken */
  .hero-beeld img,.hero-beeld video{object-position:var(--pos-laptop,50% 24%)}
  /* Smaller maken mag de kolom niet naar het midden schuiven, want dan komt
     hij precies over Monique heen. Daarom blijft de kolom staan waar hij
     staat en wordt alleen de inhoud smaller. */
  .hero .hero-inhoud > *{max-width:27rem}
  .hero h1{font-size:clamp(2.2rem,4.4vw,3.2rem)}
  .hero-sluier{background:
    linear-gradient(to right,rgba(19,15,11,.9) 0%,rgba(19,15,11,.72) 42%,rgba(19,15,11,.25) 100%),
    linear-gradient(to top,rgba(19,15,11,.75) 0%,rgba(19,15,11,0) 50%)}
}
@media(max-width:768px){
  /* Telefoon. Een staande foto in een smalle, hoge hero laat geen ruimte om
     bij te snijden: haar gezicht valt altijd op ongeveer 42 procent van de
     hoogte, precies waar de tekst staat. Daarom staat de foto hier boven de
     tekst in plaats van erachter. Zo valt er geen letter meer over haar
     gezicht. Op laptop en groot scherm verandert er niets. */
  .hero{display:block;min-height:0;padding:0}
  .hero-beeld{position:relative;inset:auto;width:100%;aspect-ratio:4/5;max-height:60vh}
  .hero-beeld img,.hero-beeld video{object-position:var(--pos-mobiel,50% 18%)}
  /* alleen nog een sluiertje bovenaan, zodat de doorzichtige header leesbaar blijft */
  .hero-sluier{inset:0 0 auto;height:7rem;
    background:linear-gradient(rgba(19,15,11,.6),rgba(19,15,11,0))}
  .hero-inhoud{padding-top:2.4rem;padding-bottom:3.2rem}
  .hero h1{font-size:clamp(2.1rem,8.5vw,2.9rem)}
}

/* ------------------------------------------------------- beeldformaten */
/* Een staande foto van top tot teen. De breedte is begrensd in plaats van de
   hoogte: begrens je de hoogte, dan wordt een staande foto horizontaal
   bijgesneden en vallen hoofd en voeten eraf. */
img.beeld--portret{width:100%;max-width:21rem;aspect-ratio:2/3;object-fit:cover;
  object-position:var(--pos,50% 30%)}
/* De hele foto in beeld, niets bijgesneden. */
img.beeld--heel{width:100%;max-width:24rem;height:auto}

/* ------------------------------------------------------------ reviews */
.reviews{margin-top:2rem}
.review{margin:0;background:var(--wit);border:1px solid var(--lijn);
  padding:clamp(1.8rem,4vw,3rem);text-align:center}
.review p{font-family:var(--kop);font-style:italic;font-size:clamp(1.1rem,2vw,1.45rem);
  line-height:1.5;margin:0 auto 1.3rem;max-width:40rem;color:var(--inkt)}
.review cite{font-style:normal;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--goud-diep)}
/* Draait er een carrousel, dan liggen de beoordelingen op elkaar en vervaagt
   er steeds een in beeld. Ze staan in hetzelfde rastervak, zodat het vak zo
   hoog is als de langste beoordeling en de sectie niet op en neer springt bij
   elke wissel. Onzichtbare beoordelingen staan op visibility:hidden, zodat een
   schermlezer ze ook overslaat. */
.reviews-spoor.draait{display:grid}
.reviews-spoor.draait .review{grid-area:1 / 1;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .7s ease,visibility .7s ease}
.reviews-spoor.draait .review.aan{opacity:1;visibility:visible;pointer-events:auto}
.reviews-stippen{display:flex;justify-content:center;gap:.55rem;margin-top:1.5rem}
.reviews-stippen button{width:.55rem;height:.55rem;padding:0;cursor:pointer;
  border:1px solid var(--goud);background:none}
.reviews-stippen button[aria-current]{background:var(--goud)}
@media (prefers-reduced-motion:reduce){
  .reviews-spoor.draait .review{transition:none}
}

/* Het merk in de voettekst: het huis met de sleutel gecentreerd boven het
   woordmerk, zoals het logo hoort te staan. */
.merk-stapel{display:inline-block;text-align:center}
.merk-stapel .icoon{margin-left:auto;margin-right:auto}

/* De foto's dragen width- en height-attributen mee, zodat de browser alvast
   ruimte reserveert. Dat attribuut zet echter ook de hoogte vast, waardoor
   een aspect-ratio hierboven niets deed en een liggende foto in een veel te
   hoog vak belandde. height:auto geeft de verhouding weer de doorslag. */
.case img,.blog img,
img.beeld--staand,img.beeld--liggend,img.beeld--portret{height:auto}

/* Netlify plakt op gratis projecten een eigen knop rechtsonder in beeld, via
   een iframe met dit id. Op een telefoon valt die precies over de knop Koffie
   in de balk onderaan, dus daar is hij ook nog eens in de weg.

   Eigenlijk hoort hij uit te staan in Netlify zelf: Project configuration,
   General, Powered by Netlify badge. Dat is een schakelaar in het account en
   daar kan ik niet bij. Zolang die niet omgezet is, houdt deze regel hem uit
   beeld. Zet je hem daar alsnog uit, dan kan deze regel weg. */
#nl-badge-frame{display:none!important}

/* Sterren boven een beoordeling, en wat rustiger letters bij een lange tekst. */
.review .sterren{display:block;color:var(--goud);font-size:1.05rem;letter-spacing:.22em;
  margin-bottom:1.1rem;font-style:normal}
.review--lang p{font-size:clamp(1rem,1.4vw,1.12rem);line-height:1.65;margin-bottom:1rem;
  text-align:left}
.review--lang p:last-of-type{margin-bottom:1.3rem}
@media(max-width:620px){.review--lang p{text-align:left}}