/* Navigation component */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);

  padding:
    var(--space-4)
    var(--section-padding-x)
    var(--space-3);

  color: var(--text-primary);
  background: transparent;
  overflow: visible;

  /* The header band is full-bleed and taller than its content, so it must not
     intercept pointer events meant for the page beneath it. */
  pointer-events: none;

  transition:
    opacity var(--transition-base),
    transform var(--transition-base),
    color var(--transition-base);
}

.site-logo,
.site-nav,
.site-header-actions {
  position: relative;
  pointer-events: auto;
}

/* Logo and CTA sit above the nav plate. The nav itself stays at auto z-index
   so its overflowing ::before cannot cover the side chrome. */
.site-logo,
.site-header-actions {
  z-index: 1;
}

.site-header.is-hidden {
  /* Visibility toggled by theme-transition.js — see theme-transition/README.md */
  opacity: 0;
  transform: translateY(calc(var(--space-4) * -1));
  pointer-events: none;
}

/* Children use pointer-events:auto, which would otherwise keep catching
   clicks while the header is visually hidden. */
.site-header.is-hidden .site-logo,
.site-header.is-hidden .site-nav,
.site-header.is-hidden .site-header-actions {
  pointer-events: none;
}

/* Scroll-up reveal past the hero: keep the centered nav as the stationary
   axis and grow .site-nav::before into side wings for the existing logo + CTA.
   Desktop only — at ≤1160px the desktop nav is gone and the hamburger
   lives in .site-header-actions, so chrome-hide would strand the page. */
@media (min-width: 1161px) {
  .site-header {
    /* Locked 2026-08-14 — compact scroll-up plate. Do not retune without a visual pass. */
    --nav-only-logo-size: var(--space-5);
    --nav-only-inset-left: var(--space-5);
    --nav-only-inset-right: var(--space-2);
    --nav-only-gap: calc(-1 * var(--space-9-5));
    --nav-only-cta-slot: 8.75rem; /* compact "Start a project" + icon */
  }

  /* Pre-place compact chrome while hidden so scroll-up does not fly the
     logo/CTA in from the corners. Top-of-page (neither class) stays put. */
  .site-header.is-hidden .site-logo,
  .site-header.is-nav-only .site-logo {
    left: 100%;
    width: var(--nav-only-logo-size);
    height: var(--nav-only-logo-size);
    translate: calc(-100% - var(--nav-only-gap)) 0;
  }

  .site-header.is-hidden .logo-mark,
  .site-header.is-nav-only .logo-mark {
    width: var(--nav-only-logo-size);
    height: var(--nav-only-logo-size);
  }

  .site-header.is-hidden .site-header-actions,
  .site-header.is-nav-only .site-header-actions {
    right: 100%;
    translate: calc(100% + var(--nav-only-gap)) 0;
  }

  .site-header.is-hidden .site-header-cta,
  .site-header.is-nav-only .site-header-cta {
    min-height: var(--pill-min-height-sm);
    gap: var(--space-2);
    padding:
      var(--space-0-5)
      var(--space-0-5)
      var(--space-0-5)
      var(--space-3-5);
    font-size: var(--text-sm);
  }

  .site-header.is-hidden .site-header-cta .btn-icon,
  .site-header.is-nav-only .site-header-cta .btn-icon {
    width: var(--pill-icon-size-sm);
    height: var(--pill-icon-size-sm);
    font-size: 1.05rem;
  }

  .site-header.is-nav-only .site-nav::before {
    /* Header grid gap (--space-4) sits between the 1fr columns and the nav,
       so it is part of the wing math; otherwise the outer inset reads short. */
    left: calc(-1 * (var(--nav-only-inset-left) + var(--nav-only-logo-size) + var(--nav-only-gap) + var(--space-4)));
    right: calc(-1 * (var(--nav-only-inset-right) + var(--nav-only-cta-slot) + var(--nav-only-gap) + var(--space-4)));
  }
}

.site-logo {
  position: relative;
  display: block;
  justify-self: start;
  left: 0;

  width: var(--space-9-0);
  height: var(--space-9-0);
  color: currentColor;
  translate: 0 0;

  transition:
    left var(--transition-slow),
    width var(--transition-base),
    height var(--transition-base),
    color var(--transition-base),
    opacity var(--transition-base),
    translate var(--transition-slow);
}

.logo-mark {
  display: block;
  width: var(--space-9-0);
  height: var(--space-9-0);
  overflow: visible;
  color: currentColor;

  transition:
    width var(--transition-base),
    height var(--transition-base);
}

.logo-part {
  fill: currentColor;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--transition-base);
}

.site-logo:focus-visible .logo-part-1 {
  transform: translate(2px, 2px);
}

.site-logo:focus-visible .logo-part-2 {
  transform: translate(-2px, 2px);
}

.site-logo:focus-visible .logo-part-3 {
  transform: translate(-2px, -2px);
}

.site-logo:focus-visible .logo-part-4 {
  transform: translate(2px, -2px);
}

@media (hover: hover) and (pointer: fine) {
  .site-logo:hover .logo-part-1 {
    transform: translate(2px, 2px);
  }

  .site-logo:hover .logo-part-2 {
    transform: translate(-2px, 2px);
  }

  .site-logo:hover .logo-part-3 {
    transform: translate(-2px, -2px);
  }

  .site-logo:hover .logo-part-4 {
    transform: translate(2px, -2px);
  }
}

.site-nav {
  grid-column: 2;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);

  padding: var(--space-5) var(--space-8);

  overflow: visible;

  font-size: var(--text-base);
  line-height: var(--leading-heading);

  border-radius: var(--radius-pill);
}

/* Shared sliding hover pill — one element travels between items. */
.site-nav__pill {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 0;

  width: 0;
  height: var(--pill-min-height-sm);

  border-radius: var(--radius-pill);
  pointer-events: none;
  opacity: 0;

  transform: translate(0, -50%);

  transition:
    transform var(--transition-base),
    width var(--transition-base),
    opacity var(--transition-fast),
    background-color var(--transition-fast);
}

/* Jump without travel: first reveal + resize. */
.site-nav__pill.is-instant {
  transition: opacity var(--transition-fast);
}

.site-nav__pill.is-visible {
  opacity: 1;
}

.site-header.nav-on-light .site-nav__pill {
  background: rgba(23, 22, 27, 0.06);
}

.site-header.nav-on-dark .site-nav__pill {
  background: rgba(255, 255, 255, 0.1);
}

.site-header.is-nav-only .site-nav__pill {
  background: rgba(23, 22, 27, 0.1);
}

/* Compact scroll-up plate via ::before so the nav keeps its default padding
   (and therefore the same item position as the initial header). Starts at the
   tight central inset and expands into side wings under .is-nav-only.
   Always mounted so opacity / width can ease out when leaving is-nav-only. */
.site-header .site-nav::before {
  content: "";
  position: absolute;
  top: calc(var(--space-5) - var(--space-2));
  right: calc(var(--space-8) - var(--space-2));
  bottom: calc(var(--space-5) - var(--space-2));
  left: calc(var(--space-8) - var(--space-2));
  z-index: -1;

  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.95);
  opacity: 0;
  pointer-events: none;

  transition:
    opacity var(--transition-base),
    left var(--transition-slow),
    right var(--transition-slow);
}

.site-header.is-nav-only .site-nav::before {
  opacity: 1;
}

.site-header-actions {
  grid-column: 3;
  justify-self: end;
  right: 0;

  display: flex;
  align-items: center;
  gap: var(--space-4);
  translate: 0 0;

  transition:
    right var(--transition-slow),
    opacity var(--transition-base),
    translate var(--transition-slow);
}

/* Header CTA — same .btn--pill as the hero; compact scroll-up sizing is scoped
   to .is-nav-only and reverses back to the base pill at the top of the page. */
.btn--pill.site-header-cta {
  opacity: 1;

  transition:
    opacity var(--transition-base),
    min-height var(--transition-base),
    padding var(--transition-base),
    gap var(--transition-base),
    font-size var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base);
}

.site-header-cta .btn-icon {
  transition:
    width var(--transition-base),
    height var(--transition-base),
    font-size var(--transition-base),
    background-color var(--transition-base);
}

.site-header.nav-on-light .site-header-cta {
  border: var(--border-interactive-light);
}

.site-header.nav-on-light .site-header-cta .btn-icon {
  background: rgba(23, 22, 27, 0.06);
}

.site-header.nav-on-dark .site-header-cta {
  border: var(--border-interactive);
}

.site-header.nav-on-dark .site-header-cta .btn-icon {
  background: var(--control-surface-dark);
}

/* Light plate wins over environmental CTA chrome while the compact bar is up. */
@media (min-width: 1161px) {
  .site-header.is-nav-only .site-header-cta {
    color: var(--text-primary);
    border: 2px solid rgba(23, 22, 27, 0.22);
  }

  .site-header.is-nav-only .site-header-cta .btn-icon {
    background: rgba(23, 22, 27, 0.08);
  }
}

.site-nav a,
.site-nav button {
  font: inherit;
  color: inherit;
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;

  opacity: 1;

  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast),
    background-color var(--transition-fast);
}

.site-nav a {
  position: relative;
}

.site-nav > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--pill-min-height-sm);
  padding: var(--space-2) var(--space-4-5);

  border-radius: var(--radius-pill);
  z-index: 1;
}

/* Soft hover pill — lifts contrast when a link sits over a shifting theme band. */
.site-header.nav-on-light .site-nav:not(.has-pill) > a:focus-visible,
.site-header.nav-on-light .site-nav:not(.has-pill) > a.is-active {
  background: rgba(23, 22, 27, 0.06);
}

.site-header.nav-on-dark .site-nav:not(.has-pill) > a:focus-visible,
.site-header.nav-on-dark .site-nav:not(.has-pill) > a.is-active {
  background: rgba(255, 255, 255, 0.1);
}

.site-header.is-nav-only .site-nav:not(.has-pill) > a:focus-visible,
.site-header.is-nav-only .site-nav:not(.has-pill) > a.is-active {
  background: rgba(23, 22, 27, 0.1);
}

@media (hover: hover) and (pointer: fine) {
  .site-header.nav-on-light .site-nav:not(.has-pill) > a:hover {
    background: rgba(23, 22, 27, 0.06);
  }

  .site-header.nav-on-dark .site-nav:not(.has-pill) > a:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  .site-header.is-nav-only .site-nav:not(.has-pill) > a:hover {
    background: rgba(23, 22, 27, 0.1);
  }
}

.site-nav a:focus-visible,
.site-nav a.is-active {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .site-nav a:hover {
    opacity: 1;
  }
}

.mobile-menu-group__links .nav-link.is-disabled {
  opacity: 0.42;
  cursor: default;
  pointer-events: none;
}

.menu-toggle {
  display: none;

  width: var(--space-5);
  height: var(--space-5);

  position: relative;

  padding: 0;
  margin: 0;

  color: inherit;
  background: transparent;
  border: 0;

  cursor: pointer;
  z-index: var(--z-loader);
  pointer-events: auto;
}

.menu-toggle span {
  position: absolute;
  left: 0;

  width: var(--space-5);
  height: 2px;

  border-radius: var(--radius-pill);
  background: currentColor;

  transform-origin: 50% 50%;

  transition:
    transform var(--transition-base),
    top var(--transition-base);
}

.menu-toggle span:first-child {
  top: 7px;
}

.menu-toggle span:last-child {
  top: 15px;
}

.menu-toggle.is-open span:first-child {
  top: 11px;
  transform: rotate(45deg);
}

.menu-toggle.is-open span:last-child {
  top: 11px;
  transform: rotate(-45deg);
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-nav) - 1);

  display: none;
  flex-direction: column;

  min-height: 100svh;
  overflow: hidden;

  padding:
    var(--space-9)
    var(--section-padding-x)
    calc(var(--space-13-0) + var(--space-3));

  color: var(--text-inverse);
  background-color: var(--bg-dark);

  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(var(--space-2) * -1));

  transition:
    opacity var(--transition-base),
    transform var(--transition-slow);
}

.mobile-menu-inner {
  flex: 1 1 auto;
  min-height: 0;

  display: flex;
  flex-direction: column;
  justify-content: stretch;
  gap: 0;
  overflow: hidden;
}

.mobile-menu-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: none;
  contain: layout paint;
}

.mobile-menu-panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--space-5);
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  pointer-events: none;
}

.mobile-menu-panel.is-active {
  pointer-events: auto;
}

.mobile-menu-panel--root .mobile-menu-panel__links,
.mobile-menu-panel--sub .mobile-menu-back {
  margin-top: auto;
}

.mobile-menu-panel--root,
.mobile-menu-panel--sub {
  position: absolute;
  inset: 0;
  transition: transform var(--transition-base);
}

.mobile-menu-panel--root {
  z-index: 1;
  transform: translateX(0);
}

.mobile-menu-panel--sub {
  z-index: 2;
  transform: translateX(100%);
}

.mobile-menu-stage.is-drilled .mobile-menu-panel--root {
  transform: translateX(-100%);
}

.mobile-menu-panel--sub.is-active {
  transform: translateX(0);
}

.mobile-menu-stage.is-instant .mobile-menu-panel {
  transition: none;
}

.mobile-menu-panel__links {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--space-6), 4.5vh, var(--space-9));
}

.mobile-menu a {
  display: flex;
  align-items: center;
  min-height: var(--space-11-0);

  color: inherit;
  text-decoration: none;

  font-size: clamp(
    calc(42px * 0.8 - var(--space-2)),
    calc(11vw * 0.8 - var(--space-2)),
    calc(78px * 0.8 - var(--space-2))
  );
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--weight-medium);

  opacity: 0;
  transform: translateY(var(--space-3));

  transition:
    opacity var(--transition-base),
    transform var(--transition-slow);
}

.mobile-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--space-11-0);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;

  font-size: clamp(
    calc(42px * 0.8 - var(--space-2)),
    calc(11vw * 0.8 - var(--space-2)),
    calc(78px * 0.8 - var(--space-2))
  );
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--weight-medium);

  opacity: 0;
  transform: translateY(var(--space-3));

  transition:
    opacity var(--transition-base),
    transform var(--transition-slow);
}

.mobile-menu-item__hint {
  font-size: 0.42em;
  line-height: 1;
  letter-spacing: 0;
  opacity: 0.42;
  transform: translateY(-0.12em);
}

.mobile-menu-back {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  align-self: flex-start;
  min-height: var(--space-11-0);
  margin: 0;
  padding: 0 var(--space-4) 0 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: var(--text-sm);
  line-height: var(--leading-heading);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-body);
  opacity: 0;
  cursor: pointer;
  transform: translateY(var(--space-3));
  transition:
    opacity var(--transition-base),
    transform var(--transition-slow);
}

.mobile-menu-back::before {
  content: "";
  position: absolute;
  inset: calc(var(--space-2) * -1) calc(var(--space-3) * -1);
}

.mobile-menu-back__icon {
  font-size: 0.95em;
}

html:has(body.menu-open),
body.menu-open {
  overflow: hidden;
}

/* Mobile menu is always dark — match environmental bg during open transition. */
body.menu-open::before {
  background-color: var(--bg-dark);
}

/* When menu is open, force header chrome to inverse on dark menu bg. */
body.menu-open .site-header {
  color: var(--text-inverse);
  background: transparent;
}

body.menu-open .site-header .site-logo {
  color: var(--text-inverse);
}

body.menu-open .menu-toggle {
  color: var(--text-inverse);
}

body.menu-open .site-logo,
body.menu-open .site-header-cta {
  pointer-events: none;
}

body.menu-open .mobile-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

body.menu-open .mobile-menu a,
body.menu-open .mobile-menu-item,
body.menu-open .mobile-menu-back {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 70ms;
}

body.menu-open .mobile-menu-back {
  opacity: 0.52;
}

.site-header.nav-on-dark {
  color: var(--text-inverse);
}

.site-header.nav-on-light {
  color: var(--text-primary);
}

/* Scroll-up plate is always the light band — keep dark link color for contrast. */
.site-header.is-nav-only {
  color: var(--text-primary);
}

.site-header.nav-on-light .site-logo,
.site-header.is-nav-only .site-logo {
  color: var(--signal);
}

/* Focus */

.site-logo:focus-visible {
  outline: 1.5px solid currentColor;
  outline-offset: var(--motion-shift-subtle);
}

.menu-toggle:focus-visible,
.site-header-cta:focus-visible {
  outline: 1.5px solid currentColor;
  outline-offset: var(--motion-shift-subtle);
}

.menu-toggle,
.mobile-menu,
.mobile-menu a,
.mobile-menu button,
.mobile-menu span {
  -webkit-tap-highlight-color: transparent;
}

.menu-toggle,
.mobile-menu a,
.mobile-menu-item,
.mobile-menu-back {
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

.menu-toggle::selection,
.mobile-menu a::selection,
.mobile-menu button::selection,
.mobile-menu span::selection {
  background: transparent;
  color: inherit;
}

.menu-toggle:focus:not(:focus-visible),
.mobile-menu a:focus:not(:focus-visible),
.mobile-menu-item:focus:not(:focus-visible),
.mobile-menu-back:focus:not(:focus-visible) {
  outline: none;
}

.menu-toggle:active,
.mobile-menu a:active,
.mobile-menu-item:active,
.mobile-menu-back:active {
  background: transparent;
  background-color: transparent;
}

.mobile-menu a:focus-visible,
.mobile-menu-item:focus-visible,
.mobile-menu-back:focus-visible {
  outline: 1.5px solid currentColor;
  outline-offset: var(--motion-shift-subtle);
}

@media (hover: hover) and (pointer: fine) {
  .mobile-menu-back:hover {
    opacity: 0.8;
  }
}

/* Navigation collapses at ≤1160px. Flat desktop links + CTA need more width
   once type and pill sizing settled; 1161px+ keeps the full header. */
@media (max-width: 1160px) {
  .site-header {
    padding-top: var(--space-5);
    grid-template-columns: 1fr auto;
  }

  .site-nav {
    display: none;
  }

  /* The larger mark is a desktop step only. */
  .site-logo,
  .logo-mark {
    width: var(--space-6);
    height: var(--space-6);
  }

  .site-header-actions {
    grid-column: 2;
  }

  .site-header-cta {
    display: none;
  }

  .menu-toggle {
    display: block;
  }

  .mobile-menu {
    display: flex;
  }
}

@media (max-width: 1160px) and (max-height: 540px) {
  .mobile-menu {
    padding-top: var(--space-6);
    padding-bottom: var(--space-5);
  }

  .mobile-menu-panel {
    padding-top: var(--space-2);
  }

  .mobile-menu-panel--root .mobile-menu-panel__links,
  .mobile-menu-panel--sub .mobile-menu-back {
    margin-top: 0;
  }

  .mobile-menu-panel__links {
    gap: var(--space-4);
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-logo,
  .logo-mark,
  .site-nav a,
  .site-nav button,
  .site-nav__pill,
  .site-nav::before,
  .site-header-actions,
  .site-header-cta,
  .site-header-cta .btn-icon,
  .menu-toggle span,
  .mobile-menu,
  .mobile-menu a,
  .mobile-menu-item,
  .mobile-menu-back,
  .mobile-menu-panel {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  .logo-part {
    transition: none;
  }

  .site-logo:focus-visible .logo-part {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .site-logo:hover .logo-part {
    transform: none;
  }
}