:root{
    color-scheme:only light;
    --paper:#F6F2EB;
    --paper-soft:#EFE9DE;
    --ink:#26291F;
    --ink-soft:#5A5D50;
    --sage:#9DB392;
    --sage-wash:#C9D6C0;
    --moss:#57694B;
    --moss-deep:#46573C;
    --clay:#B4A08C;
    --clay-wash:#D8CCBE;
    --line:#D9D2C4;
    --card:#FCFAF5;
    --on-moss:#F6F2EB;
    --logo-card:transparent;
    --logo-pad:0;
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Outfit',system-ui,sans-serif;
    font-weight:300;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%;display:block}
  a{color:inherit}
  ::selection{background:var(--sage);color:#1D1F19}

  .wrap{max-width:1120px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}

  .script{font-family:'Ms Madi',cursive;font-weight:400}
  .eyebrow{
    font-family:'Ms Madi',cursive;
    font-size:clamp(1.5rem,2.4vw,1.9rem);
    color:var(--moss);
    display:block;
    margin-bottom:.35em;
  }
  h1,h2,h3{font-family:'Instrument Serif',Georgia,serif;font-weight:400;line-height:1.06;text-wrap:balance}
  h2{font-size:clamp(2.2rem,4.6vw,3.4rem);letter-spacing:-.01em}
  h2 em,h1 em{font-style:italic;color:var(--moss)}
  .label{
    font-family:'Outfit',sans-serif;font-weight:500;
    font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);
  }

  /* ---------- nav ---------- */
  header{
    position:fixed;inset:0 0 auto 0;z-index:50;
    background:color-mix(in srgb, var(--paper) 82%, transparent);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid color-mix(in srgb, var(--line) 55%, transparent);
  }
  .nav{
    display:flex;align-items:center;justify-content:space-between;gap:24px;
    height:66px;
  }
  .nav .mark{font-family:'Ms Madi',cursive;font-size:1.55rem;color:var(--ink);text-decoration:none;white-space:nowrap;line-height:1}
  .nav nav{display:flex;gap:clamp(14px,2.6vw,30px);align-items:center}
  .nav nav a{
    text-decoration:none;font-size:.8rem;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
    transition:color .2s;
  }
  .nav nav a:hover{color:var(--moss)}
  .btn{
    display:inline-flex;align-items:center;gap:10px;
    background:var(--moss);color:var(--on-moss);
    font-family:'Outfit',sans-serif;font-weight:500;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
    padding:13px 26px;border-radius:999px;text-decoration:none;border:1px solid transparent;
    transition:background .2s, transform .2s;
  }
  .btn:hover{background:var(--moss-deep);transform:translateY(-1px)}
  .btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink-soft)}
  .btn.ghost:hover{background:var(--paper-soft);transform:translateY(-1px)}
  .nav .btn{padding:10px 20px}
  @media (max-width:860px){.nav nav{display:none}}

  /* ---------- hero ---------- */
  .hero{position:relative;padding:clamp(120px,16vh,170px) 0 0}
  .hero .wrap{
    display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    gap:clamp(28px,5vw,72px);align-items:center;
  }
  .hero h1{
    font-size:clamp(2.9rem,6.6vw,5.2rem);
    margin:.15em 0 .3em;
  }
  .hero p.lede{max-width:34ch;font-size:clamp(1rem,1.4vw,1.15rem);color:var(--ink-soft)}
  .hero .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
  .hero .logo-wash{width:min(300px,60%);margin-bottom:6px;background:var(--logo-card);padding:var(--logo-pad);border-radius:16px}
  .portrait{position:relative;justify-self:center;width:min(360px,84vw)}
  .portrait .blob{
    position:absolute;inset:-14% -18% -10% -16%;z-index:0;pointer-events:none;
    background:
      radial-gradient(52% 46% at 30% 38%, color-mix(in srgb, var(--sage) 52%, transparent), transparent 70%),
      radial-gradient(46% 42% at 74% 68%, color-mix(in srgb, var(--clay) 42%, transparent), transparent 72%),
      radial-gradient(34% 30% at 60% 24%, color-mix(in srgb, var(--sage-wash) 60%, transparent), transparent 75%);
    filter:blur(2px);
  }
  .portrait img{
    position:relative;z-index:1;width:100%;aspect-ratio:2/3;object-fit:cover;
    border-radius:999px 999px 26px 26px;
    box-shadow:0 30px 60px -30px rgba(20,24,14,.45);
  }
  .portrait .stamp{
    position:absolute;z-index:2;right:-8%;bottom:10%;
    font-family:'Ms Madi',cursive;font-size:1.5rem;color:var(--ink);
    background:var(--card);border:1px solid var(--line);
    padding:10px 22px;border-radius:999px;transform:rotate(-6deg);
    box-shadow:0 12px 30px -18px rgba(20,24,14,.4);
  }
  @media (max-width:820px){
    .hero .wrap{grid-template-columns:1fr}
    .portrait{margin-top:16px}
  }

  /* ---------- marquee ---------- */
  .marquee{
    margin-top:clamp(56px,9vh,96px);
    border-block:1px solid var(--line);
    background:var(--paper-soft);
    overflow:hidden;white-space:nowrap;
    padding:16px 0;
  }
  .marquee .track{display:inline-block;animation:slide 34s linear infinite}
  .marquee span{
    font-family:'Instrument Serif',serif;font-style:italic;
    font-size:clamp(1.15rem,2vw,1.5rem);color:var(--ink-soft);
    margin:0 1.4em;
  }
  .marquee b{color:var(--moss);font-weight:400}
  @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @media (prefers-reduced-motion:reduce){
    .marquee .track{animation:none}
    html{scroll-behavior:auto}
  }

  /* ---------- sections ---------- */
  section{padding:clamp(72px,11vh,128px) 0}
  .sec-head{max-width:640px;margin-bottom:clamp(36px,5vh,56px)}

  /* over */
  .over .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,84px);align-items:start}
  .over figure{position:relative;width:min(340px,100%)}
  .over figure img{
    width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:26px;
    box-shadow:0 26px 54px -30px rgba(20,24,14,.45);
  }
  .over figure figcaption{
    position:absolute;left:-6%;bottom:-5%;transform:rotate(-4deg);
    font-family:'Ms Madi',cursive;font-size:1.35rem;color:var(--ink);
    background:var(--card);border:1px solid var(--line);border-radius:999px;
    padding:8px 20px;box-shadow:0 12px 30px -18px rgba(20,24,14,.4);
  }
  .over .body p{max-width:58ch;color:var(--ink-soft);margin-bottom:1.1em}
  .over .body p strong{font-weight:500;color:var(--ink)}
  .pull{
    font-family:'Instrument Serif',serif;font-style:italic;font-size:clamp(1.3rem,2vw,1.6rem);
    color:var(--ink);border-left:3px solid var(--sage);padding-left:20px;margin:1.6em 0;line-height:1.35;
    max-width:44ch;
  }
  @media (max-width:820px){.over .wrap{grid-template-columns:1fr}.over figure{margin-inline:auto}}

  /* diensten */
  .diensten{background:var(--paper-soft);border-block:1px solid var(--line)}
  .dienst-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
  .dienst{
    background:var(--card);border:1px solid var(--line);border-radius:22px;
    padding:30px 28px 28px;display:flex;flex-direction:column;gap:10px;
    transition:transform .25s, box-shadow .25s;
  }
  .dienst:hover{transform:translateY(-4px);box-shadow:0 22px 44px -28px rgba(20,24,14,.4)}
  .dienst .ini{
    font-family:'Ms Madi',cursive;font-size:2.1rem;color:var(--sage);line-height:1;
  }
  .dienst h3{font-size:1.5rem}
  .dienst p{font-size:.95rem;color:var(--ink-soft);flex:1}
  .dienst .va{font-family:'Outfit',sans-serif;font-weight:500;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--moss)}

  /* prijzen */
  .prijzen .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(24px,4vw,48px)}
  .plist h3{
    font-size:1.9rem;margin-bottom:18px;
    display:flex;align-items:baseline;gap:14px;
  }
  .plist h3::after{content:"";flex:1;height:1px;background:var(--line)}
  .plist ul{list-style:none}
  .plist li{
    display:flex;align-items:baseline;gap:10px;
    padding:9px 0;font-size:.97rem;
  }
  .plist li .dots{flex:1;border-bottom:1px dotted color-mix(in srgb, var(--ink-soft) 55%, transparent);transform:translateY(-4px)}
  .plist li .p{font-variant-numeric:tabular-nums;font-weight:400;white-space:nowrap}
  .plist li .p small{font-size:.72em;color:var(--ink-soft);margin-right:4px;letter-spacing:.05em}
  .prijs-note{margin-top:34px;font-size:.85rem;color:var(--ink-soft)}

  /* galerij */
  .galerij{background:var(--paper-soft);border-block:1px solid var(--line);overflow:hidden}
  .strip{
    display:flex;gap:18px;overflow-x:auto;padding:8px 4px 22px;
    scroll-snap-type:x mandatory;
  }
  .strip::-webkit-scrollbar{height:8px}
  .strip::-webkit-scrollbar-thumb{background:var(--clay-wash);border-radius:99px}
  .strip figure{
    flex:0 0 min(430px,82vw);scroll-snap-align:start;
    background:var(--card);border:1px solid var(--line);border-radius:20px;padding:10px 10px 14px;
    transition:transform .25s;
  }
  .strip figure:nth-child(odd){transform:rotate(-.6deg)}
  .strip figure:nth-child(even){transform:rotate(.6deg)}
  .strip figure:hover{transform:rotate(0) translateY(-4px)}
  .strip .foto-klik{cursor:zoom-in}
  .strip .foto-klik:focus-visible{outline:2px solid var(--moss);outline-offset:3px}
  .strip img{border-radius:12px;aspect-ratio:540/272;object-fit:cover;width:100%}
  .strip figcaption{font-family:'Ms Madi',cursive;font-size:1.15rem;color:var(--ink-soft);padding:8px 6px 0;text-align:center}

  /* contact */
  .contact .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,6vw,80px);align-items:start}
  .contact dl{display:grid;grid-template-columns:auto 1fr;gap:10px 26px;margin:26px 0 8px;font-size:.97rem}
  .contact dt{font-weight:500;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);padding-top:4px}
  .contact dd a{color:var(--moss);text-decoration:none;border-bottom:1px solid color-mix(in srgb, var(--moss) 40%, transparent)}
  .contact dd a:hover{border-bottom-color:var(--moss)}
  .hours{
    background:var(--card);border:1px solid var(--line);border-radius:22px;padding:30px 30px 26px;
  }
  .hours h3{font-size:1.7rem;margin-bottom:14px}
  .hours table{width:100%;border-collapse:collapse;font-size:.97rem}
  .hours td{padding:9px 0;border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent)}
  .hours tr:last-child td{border-bottom:none}
  .hours td:last-child{text-align:right;font-variant-numeric:tabular-nums}
  .hours .dicht td{color:var(--ink-soft)}
  .hours .note{margin-top:14px;font-size:.85rem;color:var(--ink-soft)}
  .contact .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
  @media (max-width:820px){.contact .wrap{grid-template-columns:1fr}}

  /* footer */
  footer{border-top:1px solid var(--line);padding:34px 0 40px;background:var(--paper)}
  footer .wrap{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
  footer .mark{font-family:'Ms Madi',cursive;font-size:1.4rem}
  footer p{font-size:.78rem;color:var(--ink-soft);letter-spacing:.05em}

  /* reveal */
  .rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s ease}
  .rv.in{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
  a:focus-visible,.btn:focus-visible{outline:2px solid var(--moss);outline-offset:3px}

/* ---------- boekingsoverlay ---------- */
.boek-overlay{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  padding:18px;
  background:color-mix(in srgb, #14160F 55%, transparent);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
}
.boek-overlay[hidden]{display:none}
.boek-dialog{
  position:relative;
  width:min(480px,100%);height:min(760px,94vh);
  background:#FFFFFF;border-radius:20px;overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(10,12,6,.6);
  animation:boek-in .25s ease;
}
.boek-dialog iframe{width:100%;height:100%;border:0;display:block;background:#FFFFFF}
.boek-sluit{
  position:absolute;top:10px;right:10px;z-index:2;
  width:38px;height:38px;border-radius:999px;border:none;cursor:pointer;
  background:#26291F;color:#F6F2EB;font-size:1.4rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s, background .15s;
}
.boek-sluit:hover{background:#57694B;transform:scale(1.06)}
.boek-sluit:focus-visible{outline:2px solid #9DB392;outline-offset:2px}
@keyframes boek-in{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.boek-dialog{animation:none}}

/* ---------- foto-lightbox ---------- */
.foto-overlay{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:16px;
  background:color-mix(in srgb, #14160F 78%, transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.foto-overlay[hidden]{display:none}
.foto-overlay figure{
  max-width:min(1100px,92vw);margin:0;
  animation:boek-in .25s ease;
}
.foto-overlay img{
  max-width:100%;max-height:80vh;display:block;margin:0 auto;
  border-radius:14px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7);
  background:#FFFFFF;
}
.foto-overlay figcaption{
  font-family:'Ms Madi',cursive;font-size:1.4rem;color:#EDE9DF;
  text-align:center;padding-top:14px;
}
.foto-sluit{
  position:absolute;top:14px;right:14px;z-index:2;
  width:42px;height:42px;border-radius:999px;border:none;cursor:pointer;
  background:#F6F2EB;color:#26291F;font-size:1.5rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s;
}
.foto-sluit:hover{transform:scale(1.06)}
.foto-pijl{
  flex:0 0 auto;
  width:46px;height:46px;border-radius:999px;border:none;cursor:pointer;
  background:color-mix(in srgb, #F6F2EB 18%, transparent);color:#F6F2EB;
  font-size:1.9rem;line-height:1;font-family:Georgia,serif;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s, transform .15s;
}
.foto-pijl:hover{background:color-mix(in srgb, #F6F2EB 32%, transparent);transform:scale(1.06)}
.foto-sluit:focus-visible,.foto-pijl:focus-visible{outline:2px solid #9DB392;outline-offset:2px}
@media (max-width:640px){
  .foto-overlay{gap:6px;padding:10px}
  .foto-pijl{width:38px;height:38px;font-size:1.5rem}
}

/* ---------- instagram-knop ---------- */
.btn-insta{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:999px;
  border:1px solid var(--ink-soft);color:var(--ink);
  transition:background .2s, color .2s, border-color .2s, transform .2s;
}
.btn-insta:hover{background:var(--moss);border-color:var(--moss);color:var(--on-moss);transform:translateY(-1px)}
.btn-insta:focus-visible{outline:2px solid var(--moss);outline-offset:3px}
.btn-insta svg{display:block}