/* 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; }
}

/* At the top of the page the header is transparent, so the dim would grey it out. While the menu is open a white
   (#fafafa) strip sits behind it, as wide as the panel. It is its own layer, so it does not depend on the navbar's
   size (which animates between the top bar and the floating pill) and nothing in the header moves. */
.header-wrapper:not(.is-scrolled)::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(1280px, calc(100% - 160px));
  transform: translateX(-50%);
  background: #fafafa;
  border-left: 1px solid rgba(0, 0, 0, .1);
  border-right: 1px solid rgba(0, 0, 0, .1);
  box-sizing: border-box;
  z-index: 0; /* above the dim layer (z-index -1), below the navbar (later in the DOM) */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility 0s linear .25s;
}

.header-wrapper:not(.is-scrolled).mega-open::before {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.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 */
  .header-wrapper:not(.is-scrolled)::before { width: calc(100% - 32px); }
  .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; }
}