/* Keep the enlarged mascot logo inside the navigation and give every control its own space. */
.ks-nav,
.ks-nav-inner { box-sizing: border-box !important; }

.ks-nav {
  top: 8px !important;
  width: calc(100% - 32px) !important;
  max-width: 1600px !important;
  height: 96px !important;
}
.ks-content { padding-top: 118px !important; }
.ks-nav-inner {
  display: flex !important;
  min-width: 0;
  padding: 0 16px !important;
  gap: 8px !important;
}
.ks-logo { flex: 0 0 auto; min-width: 0; gap: 8px !important; }
.ks-logo img { flex: 0 0 84px; width: 84px !important; height: 84px !important; object-fit: contain; }
.ks-logo-text { white-space: nowrap; }
.ks-nav-links {
  display: flex !important;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: space-evenly;
  gap: 0 !important;
  overflow: hidden;
}
.ks-nav-link {
  flex: 0 1 auto;
  min-width: 0;
  gap: 5px !important;
  padding-right: clamp(4px, .45vw, 8px) !important;
  padding-left: clamp(4px, .45vw, 8px) !important;
  font-size: 12px !important;
}
.ks-nav-link span { white-space: nowrap; }
.ks-nav-actions { flex: 0 0 auto; gap: 5px !important; }

@media (max-width: 1400px) and (min-width: 601px) {
  .ks-nav {
    left: 16px !important;
    right: 16px !important;
    transform: none !important;
    width: auto !important;
    height: 82px !important;
  }
  .ks-nav-inner { position: relative !important; padding: 0 14px !important; }
  .ks-logo img { flex-basis: 68px; width: 68px !important; height: 68px !important; }
  .ks-nav-links { display: none !important; }
  .ks-nav-actions {
    position: absolute !important;
    top: 50% !important;
    right: 14px !important;
    margin-left: 0 !important;
    transform: translateY(-50%) !important;
  }
  .ks-nav-support-text { display: none !important; }
  .ks-nav-actions .ks-nav-btn.primary {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    gap: 0 !important;
    justify-content: center;
    font-size: 0 !important;
    overflow: hidden !important;
  }
  .ks-nav-actions .ks-nav-btn.primary .ks-nav-lk-text { display: none !important; }
  .ks-content { padding-top: 104px !important; }
}

@media (max-width: 600px) {
  .ks-nav {
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    height: 78px !important;
    border-radius: 0 !important;
  }
  .ks-nav-inner { padding: 0 10px !important; gap: 8px !important; }
  .ks-logo { gap: 7px !important; }
  .ks-logo img { flex-basis: 64px; width: 64px !important; height: 64px !important; }
  .ks-logo-text { font-size: 16px !important; letter-spacing: .08em !important; }
  .ks-logo-text span { margin-top: 4px !important; font-size: 7px !important; letter-spacing: .35em !important; }
  .ks-nav-links { display: none !important; }
  .ks-nav-inner { position: relative !important; }
  .ks-nav-actions {
    position: absolute !important;
    top: 50% !important;
    right: 10px !important;
    margin-left: 0 !important;
    transform: translateY(-50%) !important;
    gap: 4px !important;
  }
  .ks-nav-btn { height: 32px !important; padding: 0 8px !important; font-size: 12px !important; }
  .ks-content { padding-top: 88px !important; }
}

@media (max-width: 370px) {
  .ks-nav { height: 72px !important; }
  .ks-nav-inner { padding: 0 7px !important; gap: 6px !important; }
  .ks-logo { gap: 6px !important; }
  .ks-logo img { flex-basis: 58px; width: 58px !important; height: 58px !important; }
  .ks-logo-text { font-size: 15px !important; letter-spacing: .05em !important; }
  .ks-nav-btn { padding-right: 7px !important; padding-left: 7px !important; }
  .ks-content { padding-top: 80px !important; }
}