/* ============================================================
   Gracias — gedeelde site-stijl (warm-aarde)
   Gebruikt door index.html (home), makers.html, kerstpakketten.html.
   Type: Fraunces (serif) + DM Sans (body).
   ============================================================ */

:root{
  --bg:#faf6f0; --bg-soft:#f3ece0; --bg-deep:#e8dfd0; --surface:#ffffff;
  --ink:#1c1210; --body:#4a382c; --muted:#8c7b6b;
  --line:rgba(28,18,16,.10); --line-2:rgba(28,18,16,.16);
  --brand:#c4553d; --brand-dark:#a3432e; --brand-soft:#faddd6;
  --accent:#c4553d; --accent-soft:#faddd6;
  --gold:#b8881f; --gold-mark:#e0a52e; --gold-soft:#f5edd4;
  --sage:#5e7f5e; --sage-dark:#46663f; --sage-soft:#e3eddf;
  --footer-bg:#1c1210; --footer-surface:#2a1e16; --footer-ink:#efe5d8; --footer-muted:#a59685;
  --radius:18px; --maxw:1180px;
  --hero-wash:
    radial-gradient(900px 540px at 100% 0%, rgba(196,85,61,.12), transparent 60%),
    radial-gradient(720px 520px at 0% 100%, rgba(184,136,31,.10), transparent 60%),
    var(--bg);
  --dark-wash:
    radial-gradient(820px 520px at 82% 8%, rgba(196,85,61,.20), transparent 60%),
    radial-gradient(620px 440px at 8% 96%, rgba(184,136,31,.12), transparent 62%),
    linear-gradient(180deg,#1c1210 0%,#140e0c 100%);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--body);
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4{margin:0; color:var(--ink);}
p{margin:0;}
a{color:inherit; text-decoration:none;}
/* height:auto voorkomt vervorming zodra een <img> width/height-attributen heeft */
img{display:block; max-width:100%; height:auto;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 40px;}

/* ---- type ---- */
.serif{font-family:'Fraunces',Georgia,serif; font-weight:400; letter-spacing:-.02em; line-height:1.05;}
.serif em{font-style:normal; color:inherit; position:relative; white-space:nowrap; padding-bottom:.04em;
  background:linear-gradient(var(--gold-mark),var(--gold-mark)) no-repeat 0 100%/100% 3px;}
.eyebrow{font-size:12.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--brand);
  display:inline-flex; align-items:center; gap:10px;}
.eyebrow::before{content:''; width:26px; height:1.5px; background:currentColor; display:inline-block;}
.eyebrow.center{justify-content:center;}
.eyebrow.center::after{content:''; width:26px; height:1.5px; background:currentColor; display:inline-block;}

/* ---- buttons ---- */
.btn{display:inline-flex; align-items:center; gap:10px; font-family:'DM Sans',sans-serif;
  font-size:16px; font-weight:600; padding:14px 24px; border-radius:12px; border:1.5px solid transparent;
  cursor:pointer; transition:transform .18s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease; white-space:nowrap;}
.btn svg{width:18px; height:18px;}
.btn-primary{background:var(--brand); color:#fff; box-shadow:0 12px 26px -14px rgba(163,67,46,.8);}
.btn-primary:hover{background:var(--brand-dark); transform:translateY(-2px);}
.btn-primary[disabled]{opacity:.65; cursor:wait; transform:none;}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-2);}
.btn-ghost:hover{border-color:var(--ink); transform:translateY(-2px); background:rgba(28,18,16,.04);}
.btn-light{background:var(--surface); color:var(--ink); box-shadow:0 14px 30px -16px rgba(28,18,16,.4);}
.btn-light:hover{transform:translateY(-2px);}
.btn-on-dark-ghost{background:transparent; color:var(--footer-ink); border-color:rgba(239,229,216,.28);}
.btn-on-dark-ghost:hover{border-color:var(--footer-ink); background:rgba(239,229,216,.08);}
.btn-sm{padding:10px 18px; font-size:15px;}

/* ---- logo ---- */
.logo{display:inline-flex; align-items:center; gap:10px;}
.logo .word{font-family:'Fraunces',serif; font-weight:500; font-size:25px; color:var(--ink); letter-spacing:-.015em;}
.logo.on-dark .word{color:var(--footer-ink);}

/* ============================================================
   Navbar (gedeeld)
   ============================================================ */
.nav{position:sticky; top:0; z-index:50; background:rgba(250,246,240,.84);
  backdrop-filter:saturate(140%) blur(14px); -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .3s ease;}
.nav.scrolled{border-bottom-color:var(--line);}
.nav-inner{display:flex; align-items:center; justify-content:space-between; height:72px;}
.nav-links{display:flex; align-items:center; gap:32px;}
.nav-link{font-size:15.5px; font-weight:500; color:var(--ink); position:relative; padding:6px 0; opacity:.82; transition:opacity .18s ease;}
.nav-link::after{content:''; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--brand); transition:width .22s ease;}
.nav-link:hover{opacity:1;}
.nav-link:hover::after{width:100%;}
.nav-link.active{opacity:1;}
.nav-link.active::after{width:100%;}
.nav-cta{display:flex; align-items:center; gap:14px;}

/* hamburger — alleen zichtbaar op mobiel */
.nav-burger{display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  width:44px; height:44px; margin-right:-10px; padding:0; border:0; background:none; cursor:pointer; border-radius:10px; flex:none;}
.nav-burger span{display:block; width:22px; height:2px; background:var(--ink); border-radius:2px;
  transition:transform .25s ease, opacity .2s ease;}
.nav.menu-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav.menu-open .nav-burger span:nth-child(2){opacity:0;}
.nav.menu-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.nav-link.mobile-only{display:none;}

/* ============================================================
   Section helpers
   ============================================================ */
.section{padding:104px 0; position:relative;}
.bg-soft{background:var(--bg-soft);}
.section-head{max-width:680px;}
.section-head.center{margin:0 auto; text-align:center;}
.section-title{font-size:clamp(32px,4vw,48px); margin-top:16px;}
.section-sub{margin-top:18px; font-size:18px; color:var(--body);}

/* ============================================================
   Footer (gedeeld)
   ============================================================ */
.footer{background:var(--footer-bg); color:var(--footer-ink); padding:72px 0 34px;}
.footer-top{display:grid; grid-template-columns:1.5fr repeat(4,1fr); gap:36px;}
.footer-brand p{color:var(--footer-muted); margin-top:18px; font-size:15px; max-width:280px;}
.footer-col h4{font-size:13px; text-transform:uppercase; letter-spacing:.14em; color:var(--footer-muted); font-weight:600; margin-bottom:16px;}
.footer-col a{display:block; color:var(--footer-ink); opacity:.82; font-size:15px; padding:6px 0; transition:opacity .15s ease;}
.footer-col a:hover{opacity:1;}
.footer-bottom{margin-top:50px; padding-top:24px; border-top:1px solid rgba(239,229,216,.14);
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.footer-bottom span{color:var(--footer-muted); font-size:13.5px;}

/* ============================================================
   Forms (gedeeld) — leadformulieren
   ============================================================ */
.field{margin-bottom:18px;}
.field label{display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:7px;}
.field label .req{color:var(--brand);}
.field label .opt{color:var(--muted); font-weight:500;}
.field input,.field select,.field textarea{width:100%; font-family:'DM Sans',sans-serif; font-size:15.5px; color:var(--ink);
  background:var(--bg); border:1.5px solid var(--line-2); border-radius:11px; padding:13px 15px;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease; outline:none;}
.field input::placeholder,.field textarea::placeholder{color:#b3a596;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand); background:var(--surface); box-shadow:0 0 0 3px rgba(196,85,61,.14);}
.field textarea{resize:vertical; min-height:96px; line-height:1.5;}
.frow{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.field.full{grid-column:1/-1;}
/* honeypot */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.form-error{display:none; margin-top:14px; font-size:13.5px; color:var(--brand-dark);
  background:rgba(196,85,61,.08); border:1px solid rgba(196,85,61,.25); border-radius:10px; padding:11px 14px; text-align:center; line-height:1.45;}
.form-error.show{display:block;}
.form-note{font-size:12.5px; color:var(--muted); line-height:1.5;}

/* success state */
.form-success{display:none; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:36px 20px;}
.form-success.show{display:flex;}
.form-success .tick{width:64px; height:64px; border-radius:50%; background:var(--sage); color:#fff; display:grid; place-items:center; margin-bottom:20px;}
.form-success .tick svg{width:32px; height:32px;}
.form-success h3{font-family:'Fraunces',serif; font-weight:420; font-size:27px;}
.form-success p{margin-top:12px; font-size:15.5px; color:var(--body); max-width:380px;}

/* ============================================================
   Reveal
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);}
  .reveal.in{opacity:1; transform:none;}
}

/* ============================================================
   Responsive (gedeeld)
   ============================================================ */
/* met 5 nav-links wordt het net krap vlak boven de burger-breakpoint */
@media (max-width:1100px) and (min-width:981px){
  .nav-links{gap:24px;}
}
@media (max-width:980px){
  .wrap{padding:0 26px;}
  .footer-top{grid-template-columns:1fr 1fr;}
  .nav-burger{display:flex;}
  /* nav-links wordt een uitklapbaar paneel onder de balk */
  .nav-links{display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--bg);
    border-bottom:1px solid var(--line); padding:6px 26px 14px;
    box-shadow:0 30px 50px -30px rgba(28,18,16,.28);}
  .nav.menu-open{background:var(--bg);}
  .nav.menu-open .nav-links{display:flex;}
  .nav-links .nav-link{display:block; padding:14px 2px; font-size:17px; opacity:1; border-bottom:1px solid var(--line);}
  .nav-links .nav-link:last-child{border-bottom:0;}
  .nav-links .nav-link::after{display:none;}
  .nav-links .nav-link.active{color:var(--brand);}
  .nav-link.mobile-only{display:block;}
}
@media (max-width:620px){
  .wrap{padding:0 20px;}
  .section{padding:72px 0;}
  .frow{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr;}
  .nav-cta .nav-link{display:none;}
  .nav-links{padding:6px 20px 14px;}
}