/* Logo: alleen de naam, zonder ondertitel. */
.logo .word>span{display:none}

/* Banner op de voorpagina: kroonluchter in 16:9, de kop staat links op het donkere deel. */
.hb{--ink:#F6F1E6;--muted:#E6DDCB;--brass:#E2C47E;color:var(--ink);position:relative;display:flex;align-items:center;width:100%;min-height:clamp(440px,46vw,800px);background:linear-gradient(90deg,rgba(6,6,5,.86) 0%,rgba(6,6,5,.64) 30%,rgba(6,6,5,.2) 52%,rgba(6,6,5,0) 100%),linear-gradient(0deg,rgba(6,6,5,.3) 0%,rgba(6,6,5,0) 28%),url("banner.webp") center 45%/cover no-repeat #0b0705;border-bottom:1px solid var(--gold)}
.hb .hb-in{width:100%;max-width:none;margin:0;padding-block:clamp(40px,6vw,96px);padding-left:max(clamp(20px,5vw,110px),env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.hb .eyebrow{color:#E2C47E}
.hb h1{font-size:clamp(2.2rem,4.8vw,4.1rem);line-height:1.1;margin:18px 0 22px;max-width:16ch;color:var(--ink);text-shadow:0 2px 24px rgba(0,0,0,.5)}
.hb h1 em{font-style:italic;font-weight:400;color:#E2C47E}
.hb .lead{max-width:40ch;color:var(--muted);font-weight:300;font-size:1.05rem;margin:0 0 34px;text-shadow:0 1px 14px rgba(0,0,0,.6)}
.hb .cta{display:flex;gap:14px;flex-wrap:wrap}
.hb .btn.ghost{color:var(--ink);border-color:rgba(246,241,230,.6);background:rgba(6,6,5,.25)}
.hb .btn.ghost:hover{border-color:#E2C47E;color:#E2C47E;background:rgba(6,6,5,.25)}
@media (max-width:860px){.hb{min-height:460px;background:linear-gradient(0deg,rgba(6,6,5,.64),rgba(6,6,5,.52)),url("banner.webp") 62% center/cover no-repeat #0b0705}}

/* Zwarte balk: logo en menu lopen op dezelfde lijn als de tekst in de banner. */
.top .wrap{max-width:none;padding-left:max(clamp(20px,5vw,110px),env(safe-area-inset-left,0px));padding-right:max(clamp(20px,5vw,110px),env(safe-area-inset-right,0px))}
@media (max-width:640px){.top .wrap{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}}

/* Voorpagina: de balk bovenaan is doorzichtig over de banner en wordt zwart zodra de banner voorbij is. */
.top.over{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);background:transparent;border-bottom-color:transparent;transition:background-color .4s ease,border-color .4s ease}
.top.over::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,6,5,.6) 0%,rgba(6,6,5,0) 100%);pointer-events:none;transition:opacity .4s ease}
.top.over .wrap{position:relative}
.top.over .logo,.top.over .nav a{text-shadow:0 1px 14px rgba(0,0,0,.55)}
.top.over.solid{background:#060605;border-bottom-color:var(--gold)}
.top.over.solid::before{opacity:0}
.top.over.solid .logo,.top.over.solid .nav a{text-shadow:none}
.hb{min-height:calc(clamp(440px,46vw,800px) + var(--hh,84px))}
.hb .hb-in{padding-top:calc(var(--hh,84px) + clamp(20px,4vw,56px))}
@media (max-width:860px){.hb{min-height:calc(460px + var(--hh,84px))}}

/* Beter leesbaar menu over de kroonluchter: langere, donkerdere schaduw bovenin en iets stevigere letters. */
.top.over::before{inset:0 0 -70px 0;background:linear-gradient(180deg,rgba(6,6,5,.86) 0%,rgba(6,6,5,.7) 45%,rgba(6,6,5,.32) 75%,rgba(6,6,5,0) 100%)}
.top.over .nav a{font-weight:500;text-shadow:0 0 12px rgba(0,0,0,.95),0 1px 3px rgba(0,0,0,.9)}
.top.over .logo{text-shadow:0 0 12px rgba(0,0,0,.95),0 1px 3px rgba(0,0,0,.9)}
.top.over.solid .nav a{font-weight:400;text-shadow:none}
.top.over.solid .logo{text-shadow:none}