/* Services mega menu (Figma 803:5357) */
.nav-mega,
.nav-mega-overlay {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .25s;
}

.nav-mega-overlay {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, .5); /* page dims behind the menu (Figma 803:5357) */
}

.nav-mega {
  top: 100%;
  left: 50%;
  width: min(1280px, calc(100% - 160px)); /* the page's 80px-padded 1280px frame, so its side lines run on through the menu */
  transform: translate(-50%, -8px);
  background: #fafafa;
  border: 1px solid rgba(0, 0, 0, .1);
  border-bottom: 0; /* at the top of the page only the inner box closes the panel (Figma); the floating state re-adds it */
  padding: 0 40px;
  box-sizing: border-box;
}

/* the header never changes shape: the panel just opens under it */

/* Once the header has become the floating pill, the panel attaches to it: same width, no gap, and the pill only
   squares off its bottom corners, so header and panel read as one card. The pill itself does not grow or move. */
.header-wrapper.is-scrolled .nav-mega {
  width: var(--pill-w, min(1118px, calc(100% - 64px))); /* js copies the pill's exact width */
  margin-top: -16px; /* the pill sits 16px above the bottom of the header wrapper */
  padding: 0;
  border-top: 0;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  border-radius: 0 0 28px 28px;
  overflow: hidden;
}

.header-wrapper.is-scrolled.mega-open .navbar {
  border-radius: 35px 35px 0 0;
  background-color: #fafafa;
}

.header-wrapper.is-scrolled .nav-mega::before { top: 0; height: 0; }
.header-wrapper.is-scrolled .nav-mega-rails { border: 0; max-height: calc(100vh - 140px); }
.header-wrapper.is-scrolled .nav-mega-grid { grid-template-columns: minmax(0, 1fr) 420px; }
.header-wrapper.is-scrolled .nav-mega-item { padding: 16px 28px; }
.header-wrapper.is-scrolled .nav-mega-feature { padding: 24px 28px; gap: 16px; }
.header-wrapper.is-scrolled .nav-mega-feature-title { font-size: 20px; }

/* invisible bridge so the pointer can cross the gap between the header and the panel */
.nav-mega::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -24px;
  height: 24px;
}

.header-wrapper.mega-open .nav-mega,
.header-wrapper.mega-open .nav-mega-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.header-wrapper.mega-open .nav-mega { transform: translate(-50%, 0); }

/* with a mouse the page behind must not catch the pointer, or the hover would never end */
@media (hover: hover) and (min-width: 769px) {
  .header-wrapper.mega-open .nav-mega-overlay { pointer-events: none; }
}

.nav-services-trigger { cursor: pointer; }
.header-wrapper.mega-open .nav-services-trigger { color: #0065f4; }

.nav-mega-rails {
  border-left: 1px solid rgba(0, 0, 0, .1);
  border-right: 1px solid rgba(0, 0, 0, .1);
  border-bottom: 1px solid rgba(0, 0, 0, .1); /* closes the rails only; the 40px margins outside them have no line (Figma) */
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

.nav-mega-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 536px;
  align-items: stretch;
}

.nav-mega-list { display: flex; flex-direction: column; }

.nav-mega-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 40px;
  border-right: 1px solid rgba(0, 0, 0, .1);
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  font: 600 16px/normal 'Manrope', sans-serif;
  letter-spacing: -.02em;
  color: #272727;
  text-decoration: none;
}

.nav-mega-item:last-child { border-bottom: 0; }

.nav-mega-icon {
  position: relative;
  display: flex;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #f2f2f2;
  transition: background-color .2s ease;
}

.nav-mega-icon img { position: absolute; width: 20px; height: 20px; transition: opacity .2s ease; }
.nav-mega-icon .is-blue { opacity: 0; }

.nav-mega-arrow {
  margin-left: auto;
  width: 20px;
  height: 20px;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .2s ease, transform .2s ease;
}

.nav-mega-item:hover .nav-mega-icon,
.nav-mega-item:focus-visible .nav-mega-icon { background: rgba(0, 101, 244, .1); }
.nav-mega-item:hover .is-grey,
.nav-mega-item:focus-visible .is-grey { opacity: 0; }
.nav-mega-item:hover .is-blue,
.nav-mega-item:focus-visible .is-blue { opacity: 1; }
.nav-mega-item:hover .nav-mega-arrow,
.nav-mega-item:focus-visible .nav-mega-arrow { opacity: 1; transform: none; }

.nav-mega-feature {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px 40px;
  text-decoration: none;
  color: inherit;
}

.nav-mega-tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 8px;
  background: rgba(0, 101, 244, .1);
  font: 700 14px/1.5 'Manrope', sans-serif;
  letter-spacing: .02em;
  color: #272727;
}

.nav-mega-tag i { width: 7.77px; height: 7.77px; background: #0065f4; }

.nav-mega-shot {
  display: flex;
  gap: 20px;
  padding: 0 20px;
  aspect-ratio: 1920 / 1080;
  overflow: hidden;
  background: #ce2827;
}

.nav-mega-shot-col { flex: 1; min-width: 0; display: flex; }
.nav-mega-shot-col.is-top { align-items: flex-start; padding-top: 20px; }
.nav-mega-shot-col.is-bottom { align-items: flex-end; padding-bottom: 20px; }
.nav-mega-shot img { display: block; width: 100%; height: auto; transition: transform .4s ease; }
.nav-mega-feature:hover .nav-mega-shot-col.is-top img { transform: translateY(-12px); }
.nav-mega-feature:hover .nav-mega-shot-col.is-bottom img { transform: translateY(12px); }

.nav-mega-feature-title {
  margin-top: -8px;
  font: 600 24px/1.2 'Manrope', sans-serif;
  letter-spacing: -.02em;
  color: #272727;
}

/* mobile accordion inside the hamburger menu */
.nav-sub { display: none; }

@media (max-width: 1100px) {
  .nav-mega { width: calc(100% - 32px); } /* the page frames use 16px side padding at this width */
  .nav-mega-grid { grid-template-columns: minmax(0, 1fr) 380px; }
  .nav-mega-item { padding: 20px 24px; }
  .nav-mega-feature { padding: 24px; }
  .nav-mega-feature-title { font-size: 20px; }
}

@media (max-width: 768px) {
  .nav-mega, .nav-mega-overlay { display: none; }

  .nav-links { max-height: calc(100vh - 76px); max-height: calc(100dvh - 76px); overflow-y: auto; }

  .nav-services-trigger {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
  }

  .nav-services-trigger::after {
    content: '';
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-right: 2px solid #272727;
    border-bottom: 2px solid #272727;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .25s ease;
  }

  .nav-sub-open > .nav-services-trigger { color: #0065f4; }
  .nav-sub-open > .nav-services-trigger::after { transform: rotate(-135deg); border-color: #0065f4; }

  .nav-sub {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s ease;
  }

  .nav-sub-open > .nav-sub { grid-template-rows: 1fr; }

  .nav-sub-inner {
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin-left: 4px;
    border-left: 1px solid rgba(0, 0, 0, .1);
  }

  .nav-sub-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0 12px 16px;
    font: 600 15px/normal 'Manrope', sans-serif;
    letter-spacing: -.02em;
    color: #272727;
    text-decoration: none;
  }

  .nav-sub-item:last-child { padding-bottom: 16px; }
  .nav-sub-item .nav-mega-icon { width: 36px; height: 36px; }
  .nav-sub-item:active .nav-mega-icon { background: rgba(0, 101, 244, .1); }
  .nav-sub-item:active .is-grey { opacity: 0; }
  .nav-sub-item:active .is-blue { opacity: 1; }
}