/* Component 01 · Navigation bar
   A measured copy of palantir.com's navigation (checked 25 Sept 2026). Like theirs, it's three layers:
     1. .nav-bg       the frosted strip (sits underneath the menu panel)
     2. .nav-brand    the wordmark, using "difference" blending: white over dark areas, near-black over light ones
     3. .nav-buttons  the booking button plus the menu button (Palantir also has search; we don't need it)
   Every size, color and timing below is Palantir's own value (theirs are written in rem at an 18px base;
   converted to px here). Only the font (IBM Plex, not their licensed Alliance) and the wordmark differ. */

:root {
  --nav-white: #fff;
  --nav-black: #1e2124;         /* Palantir's near-black */
}
/* Spacing (--h-spacing, --v-gutter, --gutter, --contain) lives in base.css, shared with every section */


/* ---------- Layer 1 · frosted strip ---------- */

.nav-bg {
  position: fixed;
  z-index: 500;
  top: 0;
  left: 0;
  right: 0;
  height: 65px;
  background-color: rgba(171, 171, 171, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: rgba(0, 0, 0, 0.1) 0 2px 10px;
  opacity: 0.9;
  pointer-events: none;
}
@media (min-width: 560px) { .nav-bg { height: 82px; } }
@media (min-width: 960px) {
  .nav-bg {
    top: 16px;
    left: calc(var(--contain) - 20px);
    right: calc(var(--contain) - 20px);
    height: 70px;
    border-radius: 10px;
  }
}


/* ---------- Layer 2 · wordmark ---------- */

.nav-brand {
  position: fixed;
  z-index: 600;
  top: 0;
  left: var(--contain);
  padding-top: var(--v-gutter);
  mix-blend-mode: difference;   /* the trick behind Palantir's logo changing color as you scroll */
}

/* Wordmark stands in for Palantir's logo: same position, same 20px height */
.wordmark {
  display: block;
  color: #fff;
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-decoration: none;
}
@media (min-width: 560px) {
  .wordmark { display: flex; align-items: center; height: 40px; }
}
/* The wordmark is an image of "Modern Operations" set in Alliance No.2 Medium (licensed 3 Oct 2026;
   the font file itself is never on the site). It's drawn exactly like 20px text with -0.02em spacing:
   24px tall is the font's full height, and the -2px margins give it the same 20px line the text had,
   so it sits exactly where the text sat. */
.wordmark img { display: block; width: auto; height: 24px; margin: -2px 0; }


/* ---------- Layer 3 · buttons ---------- */

.nav-buttons {
  --btn-bg: var(--nav-white);
  --btn-text: var(--nav-black);

  /* Phones: a row pinned to the bottom of the screen, menu left, booking button right */
  position: fixed;
  z-index: 600;
  left: var(--h-spacing);
  right: var(--h-spacing);
  bottom: var(--v-gutter);
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.4286;
}
@media (min-width: 560px) {
  .nav-buttons {
    left: auto;
    bottom: auto;
    top: var(--v-gutter);
    right: var(--contain);
    flex-direction: row;
    justify-content: flex-end;
    height: 40px;
  }
}

/* With the menu open, the buttons switch to their dark version */
.menu-open .nav-buttons {
  --btn-bg: var(--nav-black);
  --btn-text: var(--nav-white);
}

/* Booking button: its width is two of Palantir's twelve grid columns */
.nav-cta-wrap {
  display: flex;
  min-width: calc((100vw - var(--h-spacing) * 2 - var(--gutter) * 11) / 12 * 2 + var(--gutter) * 3);
}
@media (min-width: 560px) {
  .nav-cta-wrap { margin-right: var(--h-spacing); }
}
@media (min-width: 960px) {
  .nav-cta-wrap { min-width: calc((100vw - var(--h-spacing) * 2 - var(--gutter) * 11) / 12 * 2 + var(--gutter)); }
}

.nav-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  padding: 10.2857px;
  background: var(--btn-bg);
  color: var(--btn-text);
  border: 1px solid currentColor;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: 0.25s ease-in-out;
}

/* Menu button: a 40px square */
.nav-icons { display: flex; }

.nav-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--btn-bg);
  color: var(--btn-text);
  border: 1px solid currentColor;
  cursor: pointer;
  transition: 0.25s ease-in-out;
}
.nav-icon:focus-visible {
  outline: none;
  background: var(--btn-text);
  border-color: var(--btn-bg);
  color: var(--btn-bg);
}

/* Hover colors: only on devices with a mouse, as on Palantir */
@media (hover: hover) and (pointer: fine) {
  .nav-cta:hover,
  .nav-cta:focus {
    background: var(--nav-black);
    border-color: transparent;
    color: var(--nav-white);
  }
  .nav-icon:hover,
  .nav-icon.is-active {
    background: var(--btn-text);
    border-color: var(--btn-text);
    color: var(--btn-bg);
  }
}

/* Hamburger icon: three 1px lines. Opening, the top and bottom lines slide out
   and swoop back in as an X (the "emphatic" style Palantir uses) */
.burger { display: flex; place-items: center; overflow: hidden; }
.burger-box { position: relative; display: inline-block; width: 20px; height: 13px; }
.burger-inner,
.burger-inner::before,
.burger-inner::after {
  position: absolute;
  width: 20px;
  height: 1px;
  background-color: currentColor;
  border-radius: 4px;
}
.burger-inner {
  display: block;
  top: 50%;
  margin-top: -0.5px;
  transition: background-color 0.125s ease-in 0.175s;
}
.burger-inner::before,
.burger-inner::after { content: ""; display: block; }
.burger-inner::before {
  top: -6px;
  left: 0;
  transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s linear 0.125s, left 0.125s ease-in 0.175s;
}
.burger-inner::after {
  top: 6px;
  right: 0;
  transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s linear 0.125s, right 0.125s ease-in 0.175s;
}
.is-active .burger-inner {
  background-color: transparent;
  transition-delay: 0s;
  transition-timing-function: ease-out;
}
.is-active .burger-inner::before {
  left: -40px;
  top: -40px;
  transform: translate3d(40px, 40px, 0) rotate(45deg);
  transition: left 0.125s ease-out, top 0.05s linear 0.125s, transform 0.125s cubic-bezier(0.075, 0.82, 0.165, 1) 0.175s;
}
.is-active .burger-inner::after {
  right: -40px;
  top: -40px;
  transform: translate3d(-40px, 40px, 0) rotate(-45deg);
  transition: right 0.125s ease-out, top 0.05s linear 0.125s, transform 0.125s cubic-bezier(0.075, 0.82, 0.165, 1) 0.175s;
}


/* ---------- Full-screen menu ("launchpad") ---------- */

/* Opens instantly (no fade); the wordmark and buttons stay on top of it, the frosted strip goes under */
.site-menu { display: none; }
.menu-open .site-menu {
  position: fixed;
  inset: 0;
  z-index: 590;
  display: flex;
  justify-content: center;
  overflow: auto;
  padding: var(--gutter) var(--h-spacing);
  background-color: var(--nav-black);
  color: var(--nav-white);
  font-family: var(--sans);
}
.menu-open body { overflow: hidden; }

.menu-wrapper {
  display: grid;
  grid-template-columns: repeat(12, minmax(10px, 1fr));
  column-gap: var(--gutter);
  align-content: start;
  width: 1440px;
  max-width: 1440px;
  padding: calc(var(--v-gutter) * 2 + 40px) var(--h-spacing);
}
@media (min-width: 560px) {
  .menu-wrapper { padding: calc(var(--v-gutter) * 2 + 40px) 0; }
}

/* Each column has a 1px white rule on top */
.menu-item {
  position: relative;
  grid-column: 1 / -1;
  padding: 20px 0;
}
.menu-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--nav-white);
}
@media (min-width: 760px) { .menu-item-left { grid-column: 1 / 5; } }
@media (min-width: 960px) { .menu-item { grid-column: span 4; } }

/* Small uppercase column labels */
.menu-label {
  margin: 0 0 var(--v-gutter);
  font-size: 10px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-variant-numeric: slashed-zero;
  color: #b9b9b9;
}

.menu-links {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 20px;
  line-height: 1.3;
}
@media (min-width: 960px) {
  .menu-links { font-size: 34px; line-height: 1.1765; }
}
.menu-links a {
  display: inline-block;
  padding: 10px 0;
  color: var(--nav-white);
  text-decoration: none;
  transition: color 0.25s ease-in-out;
}
.menu-links a:hover,
.menu-links a:focus,
.menu-links a:active { color: #8a8a8a; }

.menu-text {
  margin: 0;
  font-size: 18px;
  line-height: 25px;
}

.menu-more {
  display: inline-block;
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.4286;
  color: var(--nav-white);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color 0.25s ease-in-out;
}
.menu-more:hover,
.menu-more:focus { color: #8a8a8a; }

/* Opening animation, from Palantir's menu code (checked 25 Sept 2026). Everything starts together:
   - each column rises 10% and fades in over 0.5s, 0.2s apart (sine ease-out)
   - each link rises 20% and fades in over 0.5s, 0.14s apart (quad ease-out)
   - the small labels type on letter by letter, like the section headings
   Keyframe animations replay every time the menu opens. */
@keyframes menu-rise-10 {
  from { opacity: 0; transform: translateY(10%); }
  to   { opacity: 1; transform: none; }
}
@keyframes menu-rise-20 {
  from { opacity: 0; transform: translateY(20%); }
  to   { opacity: 1; transform: none; }
}
@keyframes menu-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes menu-letter-on { from { opacity: 0; } to { opacity: 1; } }

.menu-open .menu-item { animation: menu-rise-10 0.5s cubic-bezier(0.61, 1, 0.88, 1) both; }
.menu-open .menu-item:nth-child(2) { animation-delay: 0.2s; }
.menu-open .menu-item:nth-child(3) { animation-delay: 0.4s; }

.menu-open .menu-links li { animation: menu-rise-20 0.5s cubic-bezier(0.5, 1, 0.89, 1) both; }
.menu-open .menu-links li:nth-child(2) { animation-delay: 0.14s; }
.menu-open .menu-links li:nth-child(3) { animation-delay: 0.28s; }
.menu-open .menu-links li:nth-child(4) { animation-delay: 0.42s; }
.menu-open .menu-links li:nth-child(5) { animation-delay: 0.56s; }

.menu-open .menu-label { animation: menu-fade-in 0.5s cubic-bezier(0.5, 1, 0.89, 1) both; }
.menu-open .menu-label .tw-char {
  animation: menu-letter-on 1ms steps(1, end) calc(0.25s + var(--i) * 27ms) both;
}

@media (prefers-reduced-motion: reduce) {
  .menu-open .menu-item,
  .menu-open .menu-links li,
  .menu-open .menu-label,
  .menu-open .menu-label .tw-char { animation: none; }
}
}