body.bubble-menu-ready{
  --bubble-menu-bg:#fff;
  --bubble-menu-ink:#18152f;
}

body.bubble-menu-ready nav#nav{
  top:1.1rem;
  height:auto;
  padding:0 clamp(1rem,3vw,2rem);
  background:transparent!important;
  border-bottom:0!important;
  backdrop-filter:none!important;
  pointer-events:none;
  z-index:300;
}

body.bubble-menu-ready nav#nav .nav-logo,
body.bubble-menu-ready nav#nav .ham{
  pointer-events:auto;
  color:var(--bubble-menu-ink);
}

body.bubble-menu-ready nav#nav .nav-logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  box-shadow:none;
  min-width:0;
  height:auto;
  padding:0;
  border-radius:0;
}

body.bubble-menu-ready nav#nav .nav-logo img{
  height:64px;
  max-width:150px;
  object-fit:contain;
  clip-path:inset(0 14% 0 0);
  margin-right:-14%;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.34));
}

body.bubble-menu-ready nav#nav .nav-links,
body.bubble-menu-ready nav#nav .nav-btn,
body.bubble-menu-ready nav#nav.open .nav-links{
  display:none!important;
}

body.bubble-menu-ready nav#nav .ham{
  background:var(--bubble-menu-bg);
  box-shadow:0 12px 34px rgba(0,0,0,.22);
  display:flex!important;
  width:56px;
  height:56px;
  border-radius:50%;
  border:0;
}

body.bubble-menu-ready nav#nav .ham span{
  width:26px;
  height:2px;
  background:var(--bubble-menu-ink);
}

body.bubble-menu-ready nav#nav .ham span:nth-child(3){
  display:none;
}

body.bubble-menu-ready nav#nav .ham span+span{
  margin-top:1px;
}

body.bubble-menu-ready nav#nav.bubble-open .ham span:nth-child(1){
  transform:translateY(4px) rotate(45deg);
}

body.bubble-menu-ready nav#nav.bubble-open .ham span:nth-child(2){
  opacity:1;
  transform:translateY(-4px) rotate(-45deg);
}

.bubble-menu-overlay{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:7rem clamp(1.25rem,4vw,3rem) 2rem;
  background:rgba(20,18,42,.78);
  backdrop-filter:blur(14px);
  pointer-events:none;
  z-index:250;
}

.bubble-menu-overlay.is-open{
  display:flex;
  pointer-events:auto;
}

.bubble-pill-list{
  width:min(100%,1500px);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.05rem;
  row-gap:0;
  list-style:none;
  margin:0;
  padding:0;
}

.bubble-pill-list li{
  position:relative;
}

.bubble-pill-list li:nth-child(4),
.bubble-pill-list li:nth-child(5),
.bubble-pill-list li:nth-child(6){
  margin-top:-1.15rem;
}

.bubble-pill-list li:nth-child(7){
  grid-column:1 / span 1;
  margin-top:-1.15rem;
}

.bubble-pill{
  min-height:clamp(116px,13vw,190px);
  border-radius:999px;
  background:var(--pill-bg,var(--bubble-menu-bg));
  color:var(--pill-color,var(--bubble-menu-ink));
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-family:var(--font-d,'Nunito',sans-serif);
  font-size:clamp(1.55rem,4.8vw,4.6rem);
  font-weight:900;
  line-height:1;
  box-shadow:0 16px 44px rgba(0,0,0,.18);
  transform:rotate(var(--item-rot,0deg)) scale(0);
  transform-origin:center;
  will-change:transform,opacity;
  overflow:hidden;
}

.bubble-pill span{
  display:block;
  transform:translateY(24px);
  opacity:0;
  will-change:transform,opacity;
}

.bubble-pill:hover{
  background:var(--hover-bg,var(--orange,#f07828));
  color:var(--hover-color,#fff);
}

.bubble-pill:active{
  transform:rotate(var(--item-rot,0deg)) scale(.96);
}

@keyframes bubbleShake{
  0%,100%{transform:rotate(var(--item-rot,0deg)) translateX(0) scale(1)}
  20%{transform:rotate(calc(var(--item-rot,0deg) + 5deg)) translateX(-4px) scale(1.03)}
  40%{transform:rotate(calc(var(--item-rot,0deg) - 5deg)) translateX(4px) scale(1.03)}
  60%{transform:rotate(calc(var(--item-rot,0deg) + 3deg)) translateX(-3px) scale(1.02)}
  80%{transform:rotate(calc(var(--item-rot,0deg) - 2deg)) translateX(2px) scale(1.01)}
}

.bubble-pill.is-shaking{
  animation:bubbleShake .34s ease both;
}

@media(max-width:899px){
  body.bubble-menu-ready nav#nav{
    top:.85rem;
  }

  body.bubble-menu-ready nav#nav .nav-logo{
    min-width:0;
    height:auto;
  }

  body.bubble-menu-ready nav#nav .nav-logo img{
    height:58px;
  }

  body.bubble-menu-ready nav#nav .ham{
    width:52px;
    height:52px;
  }

  .bubble-menu-overlay{
    align-items:flex-start;
    justify-content:center;
    padding-top:7rem;
    overflow-y:auto;
  }

  .bubble-pill-list{
    width:min(100%,430px);
    grid-template-columns:1fr;
    gap:.75rem;
  }

  .bubble-pill-list li,
  .bubble-pill-list li:nth-child(4),
  .bubble-pill-list li:nth-child(5),
  .bubble-pill-list li:nth-child(6),
  .bubble-pill-list li:nth-child(7){
    grid-column:auto;
    margin-top:0;
  }

  .bubble-pill{
    min-height:66px;
    transform:rotate(0deg) scale(0);
    font-size:clamp(1.2rem,6vw,1.85rem);
  }

  .bubble-pill:active{
    transform:rotate(0deg) scale(.96);
  }

  @keyframes bubbleShake{
    0%,100%{transform:rotate(0deg) translateX(0) scale(1)}
    20%{transform:rotate(2deg) translateX(-3px) scale(1.02)}
    40%{transform:rotate(-2deg) translateX(3px) scale(1.02)}
    60%{transform:rotate(1.5deg) translateX(-2px) scale(1.01)}
    80%{transform:rotate(-1deg) translateX(2px) scale(1.01)}
  }
}

@media(max-width:520px){
  .bubble-menu-overlay{
    padding-top:6.25rem;
  }

  .bubble-pill-list{
    grid-template-columns:1fr;
    width:min(100%,360px);
    gap:.65rem;
  }

  .bubble-pill{
    min-height:64px;
    font-size:clamp(1.25rem,8vw,1.85rem);
  }
}