/* CO Koffie — mobiel hamburger-menu. Namespace .cokmm. */
.cokmm, .cokmm * { box-sizing:border-box; }
.cokmm{
  --cokmm-espresso:#4B2D15; --cokmm-dark:#1f1109; --cokmm-cream:#F4ECE2;
  --cokmm-gold:#C79B4E; --cokmm-gold-deep:#A9772F;
  --cokmm-bg1:#3a2412; --cokmm-bg2:#1c1008;
  --cokmm-burger:#F4ECE2; --cokmm-burger-bg:rgba(244,236,226,.08); --cokmm-burger-bd:rgba(244,236,226,.24);
  --cokmm-display:'Gilmer','Gilroy','Montserrat',ui-sans-serif,system-ui,sans-serif;
  --cokmm-body:'Montserrat',ui-sans-serif,system-ui,sans-serif;
  --cokmm-ease:cubic-bezier(.16,1,.3,1);
  display:inline-flex;
}

/* hamburger-knop */
.cokmm__burger{
  width:2.9rem; height:2.9rem; border-radius:50%;
  border:1px solid var(--cokmm-burger-bd); background:var(--cokmm-burger-bg);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:grid; place-items:center; cursor:pointer; padding:0;
}
.cokmm__burger span, .cokmm__burger span::before, .cokmm__burger span::after{
  display:block; width:18px; height:1.7px; background:var(--cokmm-burger); border-radius:2px;
}
.cokmm__burger span{ position:relative; }
.cokmm__burger span::before, .cokmm__burger span::after{ content:""; position:absolute; left:0; }
.cokmm__burger span::before{ top:-5.5px; } .cokmm__burger span::after{ top:5.5px; }

/* full-width menu */
.cokmm__menu{
  position:fixed; inset:0; z-index:99990;
  background:linear-gradient(165deg, var(--cokmm-bg1), var(--cokmm-bg2));
  transform:translateX(100%); transition:transform .55s var(--cokmm-ease);
  display:flex; flex-direction:column; padding:1.6rem 1.5rem 2rem; visibility:hidden;
  font-family:var(--cokmm-body);
}
.cokmm__menu.is-open{ transform:translateX(0); visibility:visible; }

.cokmm__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:2.4rem; }
.cokmm__wordmark{ font-family:var(--cokmm-display); font-weight:700; font-size:1.25rem; letter-spacing:.14em; color:var(--cokmm-cream); }
.cokmm__logo{ max-width:170px; width:auto; height:auto; display:block; object-fit:contain; }
.cokmm__close{
  width:2.9rem; height:2.9rem; border-radius:50%; border:1px solid var(--cokmm-burger-bd);
  background:var(--cokmm-burger-bg); color:var(--cokmm-cream); display:grid; place-items:center; cursor:pointer;
}
.cokmm__close svg{ width:19px; height:19px; }

.cokmm__nav{ display:flex; flex-direction:column; gap:.1rem; max-width:560px; width:100%; margin:0 auto; }
.cokmm__nav a{
  font-family:var(--cokmm-display); font-weight:700; font-size:1.85rem; color:var(--cokmm-cream);
  text-decoration:none; padding:.7rem 0; border-bottom:1px solid rgba(244,236,226,.1);
  display:flex; align-items:center; justify-content:space-between;
  opacity:0; transform:translateX(24px); transition:color .2s;
}
.cokmm__menu.is-open .cokmm__nav a{ animation:cokmm-slidein .5s var(--cokmm-ease) forwards; }
.cokmm__nav a span{ color:var(--cokmm-gold); display:inline-flex; transition:transform .2s; }
.cokmm__nav a span svg{ width:20px; height:20px; display:block; }
.cokmm__nav a:hover{ color:var(--cokmm-gold); } .cokmm__nav a:hover span{ transform:translate(3px,-3px); }

.cokmm__cta{ margin-top:auto; max-width:560px; width:100%; margin-left:auto; margin-right:auto; }
.cokmm__cta a{
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  background:var(--cokmm-gold); color:var(--cokmm-dark); text-decoration:none;
  border-radius:999px; padding:1.1rem; font-family:var(--cokmm-body); font-weight:700;
  margin-bottom:60px; transition:background .2s, transform .15s;
}
.cokmm__cta a:hover{ background:var(--cokmm-gold-deep); } .cokmm__cta a:active{ transform:scale(.98); }

@keyframes cokmm-slidein{ to{ opacity:1; transform:translateX(0); } }
.cokmm__menu.is-open .cokmm__nav a:nth-child(1){animation-delay:.10s}
.cokmm__menu.is-open .cokmm__nav a:nth-child(2){animation-delay:.15s}
.cokmm__menu.is-open .cokmm__nav a:nth-child(3){animation-delay:.20s}
.cokmm__menu.is-open .cokmm__nav a:nth-child(4){animation-delay:.25s}
.cokmm__menu.is-open .cokmm__nav a:nth-child(5){animation-delay:.30s}
.cokmm__menu.is-open .cokmm__nav a:nth-child(6){animation-delay:.35s}
.cokmm__menu.is-open .cokmm__nav a:nth-child(7){animation-delay:.40s}
.cokmm__menu.is-open .cokmm__nav a:nth-child(8){animation-delay:.45s}

@media(prefers-reduced-motion:reduce){
  .cokmm__menu{ transition:none; } .cokmm__nav a{ opacity:1; transform:none; animation:none !important; }
}