/* ══════════════════════ Mega Menu ══════════════════════ */
.dropdown-arrow {
  display: inline-flex;
  align-items: center;
  color: var(--color-text);
  transition: transform 0.3s ease, color 0.3s ease;
}

.menu-item.has-dropdown:hover .dropdown-arrow,
.menu-item.has-dropdown.active .dropdown-arrow {
  transform: rotate(180deg);
  color: var(--color-accent);
}

.menu-item.has-dropdown.current-page .dropdown-arrow {
  color: var(--color-accent);
}

/* Invisible hover-bridge: keeps .menu-item:hover active while the cursor
   crosses the gap between the nav link and the mega-menu panel below it,
   so the menu doesn't close before the mouse reaches it. */
.menu-item.has-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 20px;
}

.mega-menu {
  position: absolute;
  top: calc(100% + 20px);
  left: 0;
  min-width: 280px;
  background: var(--color-white);
  border: 1px solid var(--color-divider);
  border-radius: 16px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.14);
  padding: 28px;
  opacity: 0;
  visibility: hidden;
  max-width: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  z-index: 100;
}

.menu-item.has-dropdown:hover .mega-menu,
.menu-item.has-dropdown.active .mega-menu {
  opacity: 1;
  visibility: visible;
  max-width: none;
  max-height: none;
  overflow: visible;
  transform: translateY(0);
}

.mega-menu__inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mega-menu--services {position: fixed; width: 1300px; max-width: calc(100vw - 48px); top: calc(var(--header-height) - 16px); left: 50%; right: auto; margin-left: 0; transform: translateX(-50%) translateY(12px);}

.menu-item.has-dropdown:hover .mega-menu--services,
.menu-item.has-dropdown.active .mega-menu--services {
  transform: translateX(-50%) translateY(0);
}
.mega-menu--hire {position: fixed; width: 720px; max-width: calc(100vw - 48px); top: calc(var(--header-height) - 16px); left: 50%; right: auto; margin-left: 0; transform: translateX(-50%) translateY(12px);}

.menu-item.has-dropdown:hover .mega-menu--hire,
.menu-item.has-dropdown.active .mega-menu--hire {
  transform: translateX(-50%) translateY(0);
}
.mega-menu--company {width: 620px; left: 50%; right: auto; margin-left: -310px;}

/* ══════════════════════ Icon box (bordered square, shared) ══════════════════════ */
.mm-card__icon,
.mm-link__icon,
.mm-expertise__icon,
.mm-pill {
  border: 1.5px solid var(--color-surface-2);
  background: var(--color-mint-soft);
  color: var(--color-black);
}

/* ══════════════════════ Hire Team card ══════════════════════ */
.mm-card__icon {display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 10px; flex-shrink: 0;}
.mm-card__icon img, .mm-card__icon svg {width: 24px; height: 24px;}

.mm-card__title {flex: 1; margin: 0; font-family: var(--font-primary); font-size: 18px; font-weight: 600; letter-spacing: -0.32px; color: var(--color-dark);}

.mm-card__desc {margin: 0; font-size: 15px; line-height: 1.5; letter-spacing: -0.28px; color: var(--color-muted);}

/* ══════════════════════ Expertise ══════════════════════ */
.mm-expertise {display: grid; grid-template-columns: 0.9fr 1.2fr 0.9fr; gap: 0;}

.mm-expertise__col {display: flex; flex-direction: column; padding: 0 24px;}
.mm-expertise__col:first-child {padding-left: 0;}
.mm-expertise__col:last-child {padding-right: 0;}
.mm-expertise__col:not(:first-child) {border-left: 1px solid var(--color-divider);}

.mm-expertise__title {margin: 0 0 16px; font-family: var(--font-primary); font-weight: 700; font-size: 18px; letter-spacing: -0.32px; color: var(--color-dark);}

.mm-expertise__photo {display: flex; flex-direction: column; width: 100%; margin-bottom: 16px;}

.mm-expertise__photo-image {position: relative; width: 100%; height: 100px; border-radius: 12px; overflow: hidden;}
.mm-expertise__photo-image img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;}
.mm-expertise__photo:hover .mm-expertise__photo-image img {transform: scale(1.05);}
.mm-expertise__photo-image::after {content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(254, 109, 59, 0.45), rgba(38, 37, 40, 0.55)); mix-blend-mode: multiply;}

.mm-expertise__photo-label {position: absolute; left: 14px; bottom: 12px; z-index: 1; font-family: var(--font-primary); font-size: 16px; font-weight: 700; letter-spacing: -0.32px; color: var(--color-white);}

.mm-expertise__list {display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 14px;}

.mm-expertise__item {display: flex; align-items: center; gap: 8px; padding: 8px 6px; border-radius: 8px; transition: background 0.3s ease;}
.mm-expertise__item:hover,
.mm-expertise__item.current-page {background: var(--color-f3f3f3);}

.mm-expertise__list--plain .mm-expertise__item:hover,
.mm-expertise__list--plain .mm-expertise__item.current-page {background: none;}

.mm-expertise__icon {display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0; transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;}
.mm-expertise__icon svg {width: 18px; height: 18px;}
.mm-expertise__item:hover .mm-expertise__icon,
.mm-expertise__item.current-page .mm-expertise__icon {background: var(--color-mint); border-color: var(--color-mint); color: var(--color-black);}

.mm-expertise__label {font-family: var(--font-primary); font-size: 15px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.25; color: var(--color-dark); transition: color 0.3s ease;}
.mm-expertise__list--plain .mm-expertise__item:hover .mm-expertise__label,
.mm-expertise__list--plain .mm-expertise__item.current-page .mm-expertise__label {color: var(--color-accent);}

.mm-expertise__order.btn-order {width: fit-content; margin-top: 16px; background-color: var(--color-mint);}
.mm-expertise__order.btn-order .btn-order__text {color: var(--color-black);}
.mm-expertise__order.btn-order:hover {background-color: var(--color-accent);}
.mm-expertise__order.btn-order:hover .btn-order__text {color: var(--color-white);}

/* ══════════════════════ Hire Team ══════════════════════ */
.mm-hire__head {display: flex; align-items: center; gap: 10px; margin-bottom: 14px;}

.mm-pills {display: flex; flex-wrap: wrap; gap: 8px; margin: 15px 0 0;}

.mm-pill {display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px; background: transparent; font-family: var(--font-primary); font-size: 14px; font-weight: 600; letter-spacing: -0.26px; color: var(--color-dark); transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;}
.mm-pill:hover,
.mm-pill.current-page {background: rgba(100, 219, 174, 0.4); border-color: rgba(100, 219, 174, 0.4); color: var(--color-black);}

.mm-hire__cta {width: fit-content;}

/* ══════════════════════ Company ══════════════════════ */
.mm-company {display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; align-items: stretch;}

.mm-company__main {display: flex; flex-direction: column; gap: 4px;}

.mm-company__photo {margin-bottom: 12px;}
.mm-company__photo .mm-expertise__photo-image {height: 110px;}

.mm-company__links {display: flex; flex-direction: column; gap: 2px;}

.mm-link {display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-radius: 8px; font-family: var(--font-primary); font-size: 15px; font-weight: 600; letter-spacing: -0.28px; color: var(--color-dark); transition: background 0.3s ease;}
.mm-link:hover,
.mm-link.current-page {background: var(--color-f3f3f3);}

.mm-link__icon {display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0; transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;}
.mm-link__icon svg {width: 22px; height: 22px;}
.mm-link:hover .mm-link__icon,
.mm-link.current-page .mm-link__icon {background: var(--color-mint); border-color: var(--color-mint); color: var(--color-black);}

/* ══════════════════════ Company — Locate Us aside ══════════════════════ */
.mm-company__aside {display: flex; flex-direction: column; gap: 16px; padding-left: 28px; border-left: 1px solid var(--color-divider);}

.mm-aside__title {margin: 0; font-family: var(--font-primary); font-size: 16px; font-weight: 700; letter-spacing: -0.32px; color: var(--color-dark);}
.mm-aside__title--follow {margin-top: 8px;}

.mm-contact-card {display: flex; align-items: center; gap: 12px;}

.mm-contact-card__icon {display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: var(--color-mint); color: var(--color-black); flex-shrink: 0;}

.mm-contact-card__body {display: flex; flex-direction: column; gap: 2px;}
.mm-contact-card__label {font-family: var(--font-primary); font-size: 15px; font-weight: 700; letter-spacing: -0.28px; color: var(--color-dark);}
.mm-contact-card__value {font-family: var(--font-primary); font-size: 13px; letter-spacing: -0.26px; color: var(--color-muted); transition: color 0.3s ease;}
.mm-contact-card:hover .mm-contact-card__value {color: var(--color-accent);}

.mm-social {display: flex; gap: 10px;}
.mm-social__link {display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 9px; border: 1.5px solid var(--color-mint); color: var(--color-dark); transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;}
.mm-social__link:hover {background: var(--color-mint); border-color: var(--color-mint); color: var(--color-black);}


@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .mega-menu { padding: 18px;}
  .mm-expertise__col { padding: 0 15px;}
  .mega-menu--company {margin-left: -388px;}
  .mm-expertise__label { font-size: 14px;}
}