:root{
  --maanlicht:#F5F0EA; --zand:#E6DCD1; --taupe:#9A8778; --mokka:#4E3F35;
  --nachtinkt:#2F2824; --blush:#D9BFB6; --nachtpruim:#4B3644; --wit:#FFFDFA;
  --serif:'Cormorant Garamond', Georgia, serif; --sans:'Jost','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--maanlicht);color:var(--nachtinkt);font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.narrow{max-width:720px}

/* top bar */
.notice{background:var(--mokka);color:var(--maanlicht);text-align:center;font-size:13px;letter-spacing:.12em;text-transform:uppercase;padding:9px 16px}
header.site{position:sticky;top:0;z-index:20;background:rgba(245,240,234,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--zand)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand img{height:34px;width:auto}
nav.main{display:flex;gap:34px;align-items:center}
nav.main a{text-decoration:none;font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:400;color:var(--mokka);padding:6px 0;border-bottom:1px solid transparent}
nav.main a:hover,nav.main a[aria-current="page"]{border-color:var(--taupe)}
.menu-toggle{display:none;background:none;border:0;font:inherit;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--mokka);cursor:pointer}

/* buttons */
.btn{display:inline-block;background:var(--mokka);color:var(--maanlicht);text-decoration:none;font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:.2em;text-transform:uppercase;padding:16px 30px;border:1px solid var(--mokka);border-radius:0;cursor:pointer;transition:background .2s,color .2s}
.btn:hover{background:transparent;color:var(--mokka)}
.btn.ghost{background:transparent;color:var(--mokka)}
.btn.ghost:hover{background:var(--mokka);color:var(--maanlicht)}
.btn.light{background:var(--maanlicht);color:var(--mokka);border-color:var(--maanlicht)}
.btn.light:hover{background:transparent;color:var(--maanlicht)}

/* type */
.eyebrow{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--taupe);font-weight:500;margin-bottom:14px;display:block}
h1,h2,h3{font-family:var(--serif);font-weight:500;color:var(--mokka);line-height:1.08}
h1{font-size:clamp(42px,6.4vw,78px)}
h2{font-size:clamp(32px,4.4vw,50px);margin-bottom:18px}
h3{font-size:26px;margin-bottom:8px}
.lead{font-size:clamp(18px,2vw,21px);max-width:560px}
section{padding:110px 0}
section.tight{padding:72px 0}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;min-height:calc(100vh - 116px);align-items:stretch}
.hero .text{display:flex;flex-direction:column;justify-content:center;padding:72px 64px 72px max(24px,calc((100vw - 1160px)/2 + 24px))}
.hero .text p{margin:22px 0 34px}
.hero .visual{position:relative;background:var(--zand);overflow:hidden}
.ph{position:relative;background:linear-gradient(160deg,#D9CBBE 0%,#B9A697 55%,#9A8778 100%);display:flex;align-items:center;justify-content:center;overflow:hidden}
.ph::after{content:attr(data-label);position:absolute;bottom:16px;left:16px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--maanlicht);opacity:.9}
.ph img.mono{width:28%;max-width:150px;opacity:.55}
.hero .visual .ph{position:absolute;inset:0}
.moonglow{position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(245,240,234,.55),rgba(245,240,234,0) 70%);top:-80px;right:-80px}

/* usp */
.usps{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:56px}
.usp .icon{width:44px;height:44px;margin-bottom:18px;color:var(--taupe)}
.usp p{font-size:16px}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.split .ph{aspect-ratio:4/5}

/* products */
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:48px}
.product{text-decoration:none;display:block}
.product .ph{aspect-ratio:3/4;margin-bottom:18px}
.badge{position:absolute;top:16px;left:16px;background:var(--maanlicht);color:var(--mokka);font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:6px 12px;font-weight:500;z-index:2}
.product h3{font-size:24px;margin-bottom:2px}
.product .meta{font-size:15px;color:var(--taupe)}
.product .price{font-size:16px;color:var(--mokka);margin-top:6px}
.product .desc{font-size:15px;margin-top:10px}

/* band */
.band{background:var(--mokka);color:var(--maanlicht);text-align:center}
.band h2{color:var(--maanlicht)}
.band p{margin:0 auto 30px;max-width:560px;opacity:.9}
.quote{font-family:var(--serif);font-style:italic;font-size:clamp(26px,3.4vw,38px);color:var(--mokka);max-width:820px;margin:0 auto;text-align:center;line-height:1.3}

/* forms */
.formcard{background:var(--wit);padding:44px;max-width:620px}
label{display:block;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mokka);font-weight:500;margin:22px 0 8px}
input[type=text],input[type=email],input[type=tel],select,textarea{width:100%;font:inherit;font-size:16px;color:var(--nachtinkt);background:var(--maanlicht);border:1px solid var(--zand);padding:14px 16px;border-radius:0;appearance:none}
input:focus,select:focus,textarea:focus{outline:2px solid var(--taupe);outline-offset:1px}
.check{display:flex;gap:12px;align-items:flex-start;margin-top:22px;font-size:15px;text-transform:none;letter-spacing:0;font-weight:300;color:var(--nachtinkt)}
.check input{margin-top:5px;accent-color:var(--mokka);width:18px;height:18px;flex:none}
.formcard .btn{margin-top:30px;width:100%}
.thanks{display:none;background:var(--zand);padding:28px;margin-top:24px}
.small{font-size:13px;color:var(--taupe)}
.steps{counter-reset:s;list-style:none;margin-top:28px}
.steps li{counter-increment:s;position:relative;padding-left:52px;margin-bottom:22px}
.steps li::before{content:counter(s);position:absolute;left:0;top:-2px;font-family:var(--serif);font-size:30px;color:var(--taupe)}

/* footer */
footer.site{background:var(--zand);padding:64px 0 36px;font-size:15px}
footer.site .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px}
footer.site img{height:30px;width:auto;margin-bottom:16px}
footer.site h4{font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--mokka);margin-bottom:12px}
footer.site a{text-decoration:none;display:block;margin-bottom:6px}
footer.site .legal{margin-top:48px;padding-top:20px;border-top:1px solid rgba(78,63,53,.15);font-size:13px;color:var(--mokka);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

@media (max-width:900px){
  nav.main{display:none;position:absolute;top:76px;left:0;right:0;background:var(--maanlicht);flex-direction:column;gap:0;border-bottom:1px solid var(--zand);padding:8px 24px 20px}
  nav.main.open{display:flex}
  nav.main a{padding:14px 0;width:100%}
  .menu-toggle{display:block}
  .hero{grid-template-columns:1fr;min-height:auto}
  .hero .text{padding:56px 24px}
  .hero .visual{min-height:420px}
  .usps,.products{grid-template-columns:1fr;gap:36px}
  .split{grid-template-columns:1fr;gap:40px}
  section{padding:72px 0}
  footer.site .cols{grid-template-columns:1fr}
  .formcard{padding:28px 22px}
}
nav.main a.lang{border:1px solid var(--taupe);padding:5px 11px;border-radius:20px;letter-spacing:.12em}
nav.main a.lang:hover{background:var(--mokka);color:var(--maanlicht);border-color:var(--mokka)}
@media (max-width:900px){nav.main a.lang{width:auto;align-self:flex-start;margin-top:10px;padding:6px 14px}}
.hero .visual img.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 40%}