.topbar{font-size:14px;letter-spacing:.01em}
.topbar__inner{justify-content:space-between;gap:24px;padding:0 48px 0 82px}
.topbar a{display:inline-flex;align-items:center;gap:8px;color:#e9ddd4;transition:color .25s}
.topbar svg{width:14px;height:14px;color:var(--copper);flex:none}
.topbar__links{display:flex;align-items:center;gap:28px}
.topbar__links a+a{position:relative}
.topbar__links a+a::before{content:"";position:absolute;left:-14px;top:50%;width:1px;height:12px;margin-top:-6px;background:rgba(255,255,255,.2)}
.nav__caret{width:11px;height:11px;transform:rotate(90deg);opacity:.75;transition:transform .3s}
.nav__drop,.nav__mobile-foot{display:none}
@media (min-width:981px){
.header:not(.header--solid):not(.is-stuck) .header__inner{border-bottom:1px solid rgba(255,255,255,.14)}
.nav{align-items:center;gap:34px;margin-left:auto;margin-right:auto;font-size:16.5px;letter-spacing:0}
.nav>a,.nav__parent{position:relative;display:inline-flex;align-items:center;gap:7px;padding:6px 0;transition:color .25s}
.nav>a::after,.nav .nav__parent::after{left:50%;right:auto;bottom:-7px;width:5px;height:5px;border-radius:50%;background:var(--copper);transform:translateX(-50%) scale(0);transition:transform .3s}
.nav>a:hover,.nav__item:hover .nav__parent,.nav a[aria-current=page]{color:var(--copper)}
.nav>a:hover::after,.nav .nav__item:hover .nav__parent::after,.nav a[aria-current=page]::after{transform:translateX(-50%) scale(1)}
.nav__item{position:relative;display:flex}
.nav__item:hover .nav__caret,.nav__item:focus-within .nav__caret{transform:rotate(-90deg)}
.nav__drop{display:block;position:absolute;top:100%;left:50%;padding-top:26px;opacity:0;visibility:hidden;transform:translate(-50%,10px);transition:opacity .3s,transform .3s,visibility .3s}
.nav__item:hover .nav__drop,.nav__item:focus-within .nav__drop{opacity:1;visibility:visible;transform:translate(-50%,0)}
.nav__drop-inner{position:relative;display:grid;grid-template-columns:repeat(3,auto);gap:4px 48px;width:max-content;padding:30px 36px 24px;background:var(--bg);border-radius:20px;box-shadow:0 26px 60px rgba(30,20,14,.25)}
.nav__drop-inner::before{content:"";position:absolute;top:-7px;left:50%;width:16px;height:16px;margin-left:-8px;background:var(--bg);border-radius:3px;transform:rotate(45deg)}
.nav__group h5{margin:0 0 8px;font-family:var(--sans);font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--tan)}
.nav__group a+h5{margin-top:20px}
.nav__group a{display:block;padding:5px 0;font-size:15.5px;line-height:1.4;color:var(--ink);white-space:nowrap;transition:color .2s,transform .2s}
.nav__group a::after{display:none}
.nav__group a:hover,.nav__group a[aria-current=page]{color:var(--brown);transform:translateX(4px)}
.nav__all{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--card);font-size:15px;font-weight:400;color:var(--brown)}
.nav__all svg{width:13px;height:13px;transition:transform .25s}
.nav__all:hover svg{transform:translateX(4px)}
.header__cta{margin-left:0}
.header.is-stuck{background:rgba(46,38,34,.9);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px)}
.header.is-stuck .nav__drop{padding-top:22px}
}
@media (max-width:1380px) and (min-width:981px){.nav{gap:24px;font-size:15.5px}.topbar__inner{padding:0 32px 0 var(--gutter)}}
@media (max-width:1180px) and (min-width:981px){.nav{margin-right:12px}}
@media (max-width:980px){
.topbar__inner{justify-content:center;padding:0 16px;font-size:13.5px}
.topbar__note{display:none!important}
.burger{background:rgba(46,38,34,.35);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.header--solid .burger,.header.is-stuck .burger{background:transparent}
.nav{margin:0!important;align-items:stretch;justify-content:flex-start;gap:0;padding:120px 32px 40px;overflow-y:auto;background:#2a221e}
.nav>a,.nav__parent{display:flex;align-items:center;justify-content:space-between;padding:14px 4px;border-bottom:1px solid rgba(255,255,255,.1);font-size:30px;line-height:1.2;transform:translateY(12px);opacity:0;transition:transform .45s,opacity .45s,color .25s}
.nav.is-open>a,.nav.is-open .nav__parent{transform:none;opacity:1}
.nav.is-open>*:nth-child(2) .nav__parent,.nav.is-open>a:nth-child(3){transition-delay:.05s}
.nav.is-open>a:nth-child(4){transition-delay:.1s}
.nav.is-open>a:nth-child(5){transition-delay:.15s}
.nav.is-open>a:nth-child(6){transition-delay:.2s}
.nav a[aria-current=page],.nav>a:hover,.nav__parent:hover{color:var(--copper)}
.nav__item{display:block}
.nav__caret{transform:none;width:16px;height:16px;color:var(--copper);opacity:1}
.nav__mobile-foot{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:auto;padding-top:36px}
.nav__mobile-foot .nav__cta-mobile{display:inline-flex;margin:0 0 10px;padding:14px 32px!important}
.nav__mobile-contact{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:16px;color:#e9ddd4}
.nav a.nav__parent{font-size:30px;padding:14px 4px}
body:has(.nav.is-open) .wa{display:none}
.nav__mobile-contact svg{width:15px;height:15px;color:var(--copper)}
}
@media (max-width:640px){.topbar__links{gap:22px}.topbar__links a:first-child{display:none}.topbar__links a+a::before{left:-11px}.topbar__links a:nth-child(2)::before{display:none}.nav{padding-top:104px}.nav>a,.nav a.nav__parent{font-size:26px;padding:12px 2px}}
/* Slim header: transparent/light at the top, solid light bar once you scroll */
:root{--hh:88px}
.topbar__inner{max-width:1240px;margin:0 auto;padding:0 32px}
.header,.header.is-stuck,.header--solid{position:sticky;top:0;z-index:40;background:transparent;box-shadow:none;animation:none;transition:background-color .35s,box-shadow .35s}
.header:not(.header--solid){margin-bottom:calc(-1*var(--hh))}
.header .header__inner,.header.is-stuck .header__inner,.header--solid .header__inner{max-width:1240px;margin:0 auto;height:var(--hh);align-items:center;padding:0 32px;transition:height .35s}
.header .logo{width:auto;transition:color .35s}
.header .logo__icon,.header.is-stuck .logo__icon{width:38px;height:26px;margin-bottom:-1px}
.header .logo__name,.header.is-stuck .logo__name{font-size:38px}
.header .logo__tag,.header.is-stuck .logo__tag{display:block;font-size:13.5px;margin-top:2px;transition:color .35s}
.header .nav,.header .header__cta{margin-top:0}
.header.is-stuck{background:rgba(249,246,241,.9);-webkit-backdrop-filter:saturate(140%) blur(14px);backdrop-filter:saturate(140%) blur(14px);box-shadow:0 1px 0 rgba(122,89,70,.1),0 10px 30px rgba(46,38,34,.08)}
.header.is-stuck{--hh:72px}
.header.is-stuck .logo__tag{display:none}
.header--solid .logo,.header.is-stuck .logo{color:var(--logo)}
.header--solid .logo__tag{color:var(--tan)}
.header--solid .header__inner{border-bottom:1px solid rgba(122,89,70,.12)}
.header.is-stuck .header__inner{border-bottom:0}
@media (min-width:981px){
.header--solid .nav,.header.is-stuck .nav{color:var(--ink)}
.header--solid .nav>a:hover,.header--solid .nav__item:hover .nav__parent,.header--solid .nav a[aria-current=page],.header.is-stuck .nav>a:hover,.header.is-stuck .nav__item:hover .nav__parent,.header.is-stuck .nav a[aria-current=page]{color:var(--brown)}
.header .nav__drop{padding-top:22px}
.header.is-stuck .nav__drop{padding-top:18px}
}
@media (max-width:1380px){.topbar__inner{padding:0 24px}.header .header__inner,.header.is-stuck .header__inner,.header--solid .header__inner{padding:0 24px}}
@media (max-width:980px){
:root{--hh:72px}
.header.is-stuck{--hh:64px}
.header .logo__icon,.header.is-stuck .logo__icon{width:34px;height:24px}
.header .logo__name,.header.is-stuck .logo__name{font-size:34px}
.header .logo__tag{font-size:12.5px}
.burger{width:44px;height:44px}
.header--solid .burger,.header.is-stuck .burger{background:transparent;border-color:rgba(35,27,23,.18)}
.header--solid .burger span,.header.is-stuck .burger span{background:var(--ink)}
.header .burger[aria-expanded=true]{border-color:rgba(255,255,255,.28)}
.header .burger[aria-expanded=true] span{background:#fff}
body:has(.nav.is-open) .header{-webkit-backdrop-filter:none;backdrop-filter:none}
body:has(.nav.is-open) .header .logo{position:relative;z-index:2;color:var(--copper)}
}
@media (max-width:640px){.header .header__inner,.header.is-stuck .header__inner,.header--solid .header__inner{padding:0 var(--gutter)}}
.header--solid.is-stuck{margin-bottom:16px}
@media (max-width:980px){.header--solid.is-stuck{margin-bottom:8px}}
@media (min-width:981px){.header .nav{gap:30px;padding:0 28px}.header .header__cta{margin-left:0}}
@media (max-width:1380px) and (min-width:981px){.header .nav{gap:22px;padding:0 20px}}
/* No thin line under the navigation at the top of the page */
.header .header__inner,.header:not(.header--solid):not(.is-stuck) .header__inner,.header--solid .header__inner{border-bottom:0}
/* Champagnepalet: logo overal zacht roze; hover op de lichte balk in bruin voor leesbaarheid */
.logo,.logo--footer{color:var(--logo)}
.header--solid .nav>a:hover,.header--solid .nav__item:hover .nav__parent,.header--solid .nav a[aria-current=page],.header.is-stuck .nav>a:hover,.header.is-stuck .nav__item:hover .nav__parent,.header.is-stuck .nav a[aria-current=page]{color:var(--brown)}
