:root{
  --terracotta:#C87B5A; --soft-sand:#EADBC8; --ivory:#F8F5F0; --ink:#333333;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--ivory);color:var(--ink);
  font-family:Lato,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;line-height:1.4}
img{max-width:100%;display:block;height:auto}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--terracotta)}
.container{max-width:1080px;margin-inline:auto;
  padding-left:max(28px, calc(env(safe-area-inset-left) + 20px));
  padding-right:max(28px, calc(env(safe-area-inset-right) + 20px))}
@media(min-width:1200px){.container{padding-left:56px;padding-right:56px}}
h1{font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(35px,3.6vw,43px);line-height:1.2;color:var(--terracotta);margin:0 0 18px}
.subtitle{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(18px,2vw,23px);line-height:1.4;color:#5a5a5a;margin:0 0 16px}
body,p,li{font-size:clamp(14px,1.8vw,16px)}
.tiny{font-size:12px;color:#777}
.topbar{position:sticky;top:0;left:0;right:0;z-index:70;background:linear-gradient(180deg,rgba(248,245,240,.97),rgba(248,245,240,.9));border-bottom:1px solid rgba(0,0,0,.04)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px;position:relative}
.brand-home{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:10px 22px;       /* HIER wordt de knop breder */
    border-radius:999px;
    border:1px solid var(--terracotta);
    background:rgba(200,123,90,0.05); /* zachte vulling, subtiel */
    color:var(--terracotta);
    line-height:1;
}
.brand-home .mark{
    height:26px;
    width:auto;
    display:block;
    object-fit:contain;
}
.brand-home .word{font-family:'Playfair Display',serif;font-weight:700;font-size:18px}
.menu-btn{appearance:none;background:var(--terracotta);border:1px solid var(--terracotta);border-radius:999px;padding:10px 14px;font-family:'Playfair Display',serif;font-weight:700;font-size:18px;color:#fff;cursor:pointer;transition:.18s ease-in-out;box-shadow:0 8px 22px rgba(200,123,90,.18)}
.menu-btn:hover{filter:brightness(.96);transform:translateY(-1px)}
.menu-btn:active{transform:translateY(0)}
.menu-panel{position:absolute;top:64px;right:clamp(16px, calc(env(safe-area-inset-right) + 12px), 40px);background:#fff;border:1px solid #eee;border-radius:16px;box-shadow:0 18px 48px rgba(0,0,0,.12);padding:12px;display:none;min-width:270px}
.menu-panel.open{display:block}
.menu-panel a{display:block;padding:12px 14px;border-radius:10px}
.menu-panel a:hover{background:linear-gradient(180deg,var(--ivory),#fff);color:var(--terracotta)}
.hero-only{
  min-height:auto;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

.hero{
  position:relative;
  overflow:hidden;
  padding-top:clamp(60px,6vw,80px); /* minder witruimte maar nog mooi */
}

.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,var(--soft-sand),var(--ivory));
  opacity:.92;
  z-index:-1;
}

/* DESKTOP & TABLET: logo en tekst naast elkaar */
.hero-inner{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:40px;
  align-items:center;
  padding-block:48px; /* minder hoog dan eerst */
}

/* MOBIEL: onder elkaar */
@media(max-width:900px){
  .hero-inner{
    grid-template-columns:1fr;
    gap:28px;
  }
}
.card{border-radius:18px;overflow:hidden;border:1px solid #eee;box-shadow:0 10px 30px rgba(0,0,0,.08)}
.cta-row{display:flex;flex-wrap:wrap;gap:24px;margin-bottom:8px}
@media (max-width:480px){.cta-row{gap:28px}}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 20px;border-radius:999px;text-decoration:none;border:1px solid var(--terracotta);transition:.2s;background:transparent;color:var(--terracotta);cursor:pointer;min-height:44px}
.btn.primary{background:var(--terracotta);color:#fff}
.btn.primary:active{transform:scale(.99)}
.cta-caption{text-align:left;color:#5a5a5a;font-size:15px;margin-top:6px}
@media (max-width:640px){.cta-caption{text-align:center}}
.page-header{padding-top:clamp(94px,9vw,116px);padding-bottom:16px;background:linear-gradient(180deg,var(--soft-sand),transparent)}
.page{padding-block:32px 72px}
.panelish{background:#fff;border:1px solid #eee;border-radius:18px;box-shadow:0 10px 30px rgba(0,0,0,.1);padding:24px}
.embed{border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.06);margin-top:12px}
