/* Mega navigation — adapted from shadcn NavigationMenu
   Restored original card / catalogue styles; no item descriptions. */

.moxie-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  justify-content: flex-end;
}

.moxie-nav__desktop {
  display: none;
  position: relative;
}

@media (min-width: 1024px) {
  .moxie-nav__desktop {
    display: block;
  }
}

.moxie-nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.moxie-nav__item {
  position: static;
}

.moxie-nav__trigger,
.moxie-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.moxie-nav__trigger:hover,
.moxie-nav__link:hover,
.moxie-nav__item.is-open > .moxie-nav__trigger,
.moxie-nav__link.is-active,
.moxie-nav__trigger.is-active {
  color: var(--color-text);
  background: rgba(0, 0, 0, 0.04);
}

.moxie-nav__chevron {
  display: inline-flex;
  transition: transform 0.25s ease;
}

.moxie-nav__item.is-open .moxie-nav__chevron {
  transform: rotate(180deg);
}

.moxie-nav__cta {
  flex-shrink: 0;
  transition:
    background 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.moxie-nav__panel {
  position: absolute;
  top: calc(100% + 12px);
  left: auto;
  right: 0;
  transform: scale(0.96);
  transform-origin: top right;
  z-index: 60;
  width: min(920px, calc(100vw - 48px));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.moxie-nav__item.is-open > .moxie-nav__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
}

.moxie-nav__panel-inner {
  display: grid;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(15, 15, 15, 0.12);
  overflow: hidden;
}

.moxie-nav__panel-inner--services {
  grid-template-columns: 1fr;
}

.moxie-nav__panel--services {
  width: min(1040px, calc(100vw - 40px));
}

.moxie-nav__panel--ai {
  width: min(980px, calc(100vw - 40px));
}

.moxie-nav__panel--company,
.moxie-nav__panel--success,
.moxie-nav__panel--insights,
.moxie-nav__panel--careers {
  width: min(480px, calc(100vw - 40px));
}

.moxie-nav__panel-inner--catalogue {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}

.moxie-nav__services-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border-light);
  background: linear-gradient(180deg, #FFF8F3 0%, #fff 100%);
}

.moxie-nav__services-eyebrow {
  display: block;
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent, #F05A14);
}

.moxie-nav__services-hub {
  display: none !important;
}

.moxie-nav__services-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.moxie-nav__services-cols--ai {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.moxie-nav__services-cols--company,
.moxie-nav__services-cols--compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.moxie-nav__services-col {
  padding: 14px 10px 16px;
  border-right: 1px solid var(--color-border-light);
  min-width: 0;
}

.moxie-nav__services-col:last-child {
  border-right: 0;
}

.moxie-nav__services-col-title {
  margin: 0 0 8px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text, #3F2A1E);
}

.moxie-nav__services-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.moxie-nav__svc-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--color-text, #3F2A1E);
  transition: background 0.15s ease;
}

.moxie-nav__svc-link:hover {
  background: rgba(240, 90, 20, 0.08);
}

.moxie-nav__svc-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--color-text-muted, #8A6E5C);
}

.moxie-nav__svc-icon svg {
  width: 16px;
  height: 16px;
}

.moxie-nav__svc-title {
  font-size: 12.5px;
  font-weight: 550;
  line-height: 1.35;
}

.moxie-nav__panel-inner--success,
.moxie-nav__panel-inner--company {
  grid-template-columns: 1fr;
}

.moxie-nav__grid-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 16px;
}

.moxie-nav__grid-cards--2 {
  grid-template-columns: repeat(2, 1fr);
}

.moxie-nav__grid-cards--4 {
  grid-template-columns: repeat(4, 1fr);
}

.moxie-nav__grid-cards--5 {
  grid-template-columns: repeat(5, 1fr);
}

.moxie-nav__grid-cards--6 {
  grid-template-columns: repeat(3, 1fr);
}

.moxie-nav__grid-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 28px;
  min-height: 128px;
  height: 100%;
  padding: 16px 18px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color 0.15s ease;
}

.moxie-nav__grid-card--tall {
  min-height: 140px;
}

.moxie-nav__grid-card:hover {
  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border));
}

.moxie-nav__grid-card-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(225deg, rgba(240, 90, 20, 0.08), transparent 55%),
    linear-gradient(rgba(0, 0, 0, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.045) 1px, transparent 1px);
  background-size: auto, 28px 28px, 28px 28px;
  background-position: center, -1px -1px, -1px -1px;
  mask-image: linear-gradient(225deg, #000 20%, transparent 75%);
  opacity: 0.85;
  transform: translateY(6px) skewY(-6deg) scale(1.2);
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.moxie-nav__grid-card::after {
  content: '';
  position: absolute;
  inset: -20%;
  z-index: -1;
  opacity: 0;
  filter: blur(40px);
  background: conic-gradient(
    from 180deg,
    #F05A14 0deg,
    #F05A14 110deg,
    #ffb347 180deg,
    #E5520C 260deg,
    #F05A14 360deg
  );
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.moxie-nav__grid-card:hover .moxie-nav__grid-card-bg {
  transform: translateY(0) skewY(-6deg) scale(1.2);
}

.moxie-nav__grid-card:hover::after {
  opacity: 0.12;
}

.moxie-nav__grid-card-icon {
  color: rgba(17, 17, 17, 0.75);
}

.moxie-nav__grid-card-body {
  margin-top: auto;
}

.moxie-nav__grid-card-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(17, 17, 17, 0.88);
}

.moxie-nav__large-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0 16px 16px;
}

.moxie-nav__large-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.moxie-nav__large-item:hover {
  background: rgba(0, 0, 0, 0.02);
  border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border));
}

.moxie-nav__large-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.moxie-nav__large-icon {
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.moxie-nav__company-main {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Mobile toggle */
.site-header__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text);
}

@media (min-width: 1024px) {
  .site-header__toggle {
    display: none;
  }
}

.moxie-nav__sheet[hidden] {
  display: none !important;
}

.moxie-nav__sheet {
  position: fixed;
  inset: 0;
  z-index: 1200;
}

.moxie-nav__sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(40, 22, 12, 0.48);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.moxie-nav__sheet-panel {
  position: absolute;
  inset: 0 auto 0 0;
  width: min(100%, 400px);
  height: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-right: 1px solid rgba(240, 90, 20, 0.14);
  box-shadow: 12px 0 40px rgba(63, 42, 30, 0.16);
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.moxie-nav__sheet.is-open .moxie-nav__sheet-panel {
  transform: translateX(0);
}

.moxie-nav__sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  min-height: 64px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(240, 90, 20, 0.12);
  background: #FFF8F3;
}

.moxie-nav__sheet-brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  color: var(--color-text, #3F2A1E);
}

.moxie-nav__sheet-logo {
  display: block;
  height: 32px;
  width: auto;
}

.moxie-nav__sheet-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  color: var(--color-text, #3F2A1E);
}

.moxie-nav__sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px 24px;
  background: #ffffff;
}

.moxie-nav__accordion {
  border-bottom: 1px solid var(--color-border-light);
}

.moxie-nav__sheet-link {
  display: block;
  padding: 16px 4px;
  font-size: 15px;
  font-weight: 600;
  text-transform: capitalize;
  color: var(--color-text, #3F2A1E);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border-light);
}

.moxie-nav__sheet-link:hover,
.moxie-nav__sheet-link:focus-visible {
  color: var(--color-primary, #f05a14);
}

.moxie-nav__accordion summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 4px;
  font-size: 15px;
  font-weight: 600;
  text-transform: capitalize;
  color: var(--color-text, #3F2A1E);
}

.moxie-nav__accordion summary::-webkit-details-marker {
  display: none;
}

.moxie-nav__accordion summary::after {
  content: '';
  float: right;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.moxie-nav__accordion[open] summary::after {
  transform: rotate(-135deg);
  margin-top: 10px;
}

.moxie-nav__mobile-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 4px;
}

.moxie-nav__mobile-item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
}

.moxie-nav__mobile-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

.moxie-nav__mobile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: rgba(0, 0, 0, 0.02);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.moxie-nav__mobile-title {
  display: block;
  font-size: 14px;
  font-weight: 500;
}

.moxie-nav__sheet-foot {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(240, 90, 20, 0.12);
  background: #FFF8F3;
}

.moxie-nav__sheet-foot .moxie-lang {
  justify-content: center;
  font-size: 15px;
}

.moxie-nav__sheet-cta {
  width: 100%;
  justify-content: center;
}

@media (max-width: 1023px) {
  .moxie-nav__cta {
    display: none;
  }
}

@media (max-width: 1100px) {
  .moxie-nav__panel {
    width: min(860px, calc(100vw - 32px));
  }

  .moxie-nav__panel--services,
  .moxie-nav__panel--ai {
    width: min(720px, calc(100vw - 32px));
  }

  .moxie-nav__services-cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .moxie-nav__services-col:nth-child(3) {
    border-right: 0;
  }

  .moxie-nav__services-col:nth-child(n + 4) {
    border-top: 1px solid var(--color-border-light);
  }

  .moxie-nav__grid-cards--4,
  .moxie-nav__grid-cards--5 {
    grid-template-columns: repeat(2, 1fr);
  }
}
