/* ==========================================================================
   Floating pill navigation — shared by every page, including the blog.
   Overrides the full-width bar from vdim.webflow.css without touching it.
   Loaded after vdim.webflow.css; selectors are doubled up (.navbar-m.w-nav)
   to win on specificity rather than reaching for !important.
   ========================================================================== */

.navbar-m {
  --nav-pill: #1e2c30;
  --nav-hairline: rgba(232, 237, 238, .11);
  --nav-text: #c5d1d3;
  --nav-sand: #b29e84;
  --nav-teal: #4fd1c5;
}

/* Webflow's clearfix pseudo-elements would become phantom flex items
   and throw the pill's spacing off. */
.navbar-m.w-nav .container.w-container::before,
.navbar-m.w-nav .container.w-container::after {
  display: none;
}

/* No strip colour at all: theme.css puts the paper on the body, so the pill
   simply floats on the page. Avoids the coloured band that a solid strip
   left over the sections below it while scrolling. */
.navbar-m.w-nav {
  background-color: transparent;
  z-index: 1000;
}

.navbar-m.w-nav .container.w-container {
  background: var(--nav-pill);
  border: 1px solid var(--nav-hairline);
  border-radius: 999px;
  display: flex;
  align-items: center;
  box-shadow: 0 14px 34px -20px rgba(16, 26, 29, .55);
}

.navbar-m .brand-2.w-nav-brand {
  padding: 0;
  flex: none;
  display: flex;
  align-items: center;
}

/* The wordmark was still on DM Serif Display while the rest of the site moved
   to Archivo. Display face for the wordmark, body face for the links, mono for
   the button — the same three roles used everywhere else. */
.navbar-m .company-name-text {
  padding: 0 0 0 10px;
  font-family: "Archivo", "Inter", sans-serif;
  font-variation-settings: "wdth" 112;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .06em;
}

.navbar-m .nav-link.w-nav-link {
  font-family: "Inter", sans-serif;
}


/* --- call to action ----------------------------------------------------- */

.nav-cta {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(232, 237, 238, .28);
  border-radius: 999px;
  color: #fff;
  /* mono uppercase, matching every other button on the site */
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

/* a whisper of the logo's teal, the way the reference glows under its button */
.nav-cta::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  width: 62%;
  height: 12px;
  background: radial-gradient(50% 100% at 50% 100%,
      rgba(79, 209, 197, .5), transparent 70%);
  pointer-events: none;
}

.nav-cta:hover {
  background: var(--nav-sand);
  border-color: var(--nav-sand);
  color: #1c2a2e;
}

.nav-cta:focus-visible {
  outline: 2px solid var(--nav-teal);
  outline-offset: 3px;
}

/* --- desktop ----------------------------------------------------------- */

@media screen and (min-width: 992px) {
  .navbar-m.w-nav {
    padding: 20px 24px 0;
  }

  .navbar-m.w-nav .container.w-container {
    max-width: 1264px;
    padding: 13px 13px 13px 26px;
  }

  .navbar-m .brand-2.w-nav-brand {
    margin-right: 28px;
  }

  .navbar-m .brand-2.w-nav-brand img {
    width: 38px;
    height: auto;
  }

  .navbar-m .nav-menu.w-nav-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    float: none;
    gap: 2px;
  }

  .navbar-m .nav-link.w-nav-link {
    color: var(--nav-text);
    margin: 0;
    padding: 10px 17px;
    font-size: 15.5px;
    border-radius: 999px;
    transition: color .18s ease, background .18s ease;
  }

  .navbar-m .nav-link.w-nav-link:hover {
    color: #fff;
    background: rgba(232, 237, 238, .07);
  }

  .navbar-m .nav-link.w-nav-link.w--current {
    color: #fff;
  }

  .navbar-m .nav-link.w-nav-link:focus-visible {
    outline: 2px solid var(--nav-teal);
    outline-offset: 2px;
  }

  .nav-cta {
    margin-left: 26px;
    padding: 13px 26px;
  }
}

/* --- tablet and mobile -------------------------------------------------- */

@media screen and (max-width: 991px) {
  .navbar-m.w-nav {
    padding: 12px 16px 0;
  }

  .navbar-m.w-nav .container.w-container {
    justify-content: space-between;
    padding: 10px 10px 10px 18px;
    gap: 10px;
  }

  .navbar-m .brand-2.w-nav-brand img {
    width: 33px;
    height: auto;
  }

  .navbar-m .company-name-text {
    font-size: 15px;
    letter-spacing: 1px;
  }

  .nav-cta {
    margin-left: auto;
    padding: 10px 15px;
    font-size: 11px;
    letter-spacing: .08em;
    order: 2;
  }

  .navbar-m .menu-button-2.w-nav-button {
    order: 3;
    padding: 8px;
    color: #fff;
    border-radius: 12px;
  }

  .navbar-m .menu-button-2.w-nav-button.w--open {
    background: rgba(232, 237, 238, .1);
  }

  /* the collapsed menu drops out of the pill, so it needs its own surface */
  .navbar-m .nav-menu.w-nav-menu {
    background: var(--nav-pill);
    border: 1px solid var(--nav-hairline);
    border-radius: 20px;
    margin-top: 10px;
    padding: 8px;
    box-shadow: 0 20px 40px -24px rgba(16, 26, 29, .6);
  }

  .navbar-m .nav-link.w-nav-link {
    color: var(--nav-text);
    margin: 0;
    padding: 12px 16px;
    font-size: 15px;
    border-radius: 12px;
  }

  .navbar-m .nav-link.w-nav-link:hover,
  .navbar-m .nav-link.w-nav-link.w--current {
    color: #fff;
    background: rgba(232, 237, 238, .07);
  }
}

@media screen and (max-width: 479px) {
  .navbar-m .company-name-text {
    display: none;
  }

  .nav-cta {
    padding: 9px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-cta,
  .navbar-m .nav-link.w-nav-link {
    transition-duration: .01ms;
  }
}