.topbar {
  overflow: visible;
}

.topbar-inner {
  position: relative;
  min-height: 114px;
  overflow: visible;
}

.nav {
  margin-left: auto;
}

.brand {
  display: block;
  width: clamp(134px, 16.5vw, 189px);
  height: auto;
  margin-bottom: 0;
  position: absolute;
  left: 30px;
  top: 0;
  z-index: 2;
  line-height: 0;
  transform: translateX(50%);
}

.brand img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 14px rgba(72, 52, 24, 0.16));
}

@media (max-width: 900px) {
  .topbar-inner {
    align-items: center;
    gap: 6px;
    min-height: auto;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .nav {
    justify-content: center;
    margin-left: 0;
    width: 100%;
  }

  .brand {
    width: 152px;
    margin: 0 auto -10px;
    position: relative;
    left: auto;
    top: auto;
    transform: translateX(0);
  }

  .floating-social {
    top: 230px;
  }
}

@media (max-width: 600px) {
  .topbar-inner {
    gap: 4px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .brand {
    width: 136px;
    margin-bottom: -8px;
    transform: translateX(0);
  }

  .floating-social {
    top: 218px;
    right: 14px;
  }
}