/* About Fenix is the desktop header geometry source of truth for every page. */
html body.fenix-figma-shell-page .fenix-header[data-fenix-header] .fenix-header__button--layout-placeholder {
  width: 163px !important;
  min-width: 163px !important;
  flex: 0 0 163px !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (min-width: 1280px) {
  html body {
    --fenix-header-block-size: 94px;
  }

  html body:not(.home) .fenix-header[data-fenix-header],
  html body.home.fenix-figma-shell-page .fenix-header[data-fenix-header] {
    --fenix-header-desktop-width: min(1192px, calc(100% - 64px));
    --fenix-header-desktop-height: 94px;
    --fenix-header-nav-weight: 400;
    height: var(--fenix-header-desktop-height) !important;
    min-height: var(--fenix-header-desktop-height) !important;
  }

  html body:not(.home) .fenix-header[data-fenix-header] > .fenix-container.fenix-header__inner,
  html body.home.fenix-figma-shell-page .fenix-header[data-fenix-header] > .fenix-container.fenix-header__inner {
    width: var(--fenix-header-desktop-width) !important;
    max-width: none !important;
    height: var(--fenix-header-desktop-height) !important;
    min-height: var(--fenix-header-desktop-height) !important;
    margin-inline: auto !important;
  }

  html body:not(.home) .fenix-header[data-fenix-header] .fenix-header__brand,
  html body:not(.home) .fenix-header[data-fenix-header] .fenix-header__brand-fallback,
  html body:not(.home) .fenix-header[data-fenix-header] .custom-logo-link,
  html body:not(.home) .fenix-header[data-fenix-header] .fenix-header__brand img,
  html body:not(.home) .fenix-header[data-fenix-header] .fenix-header__brand .custom-logo,
  html body.home.fenix-figma-shell-page .fenix-header[data-fenix-header] .fenix-header__brand,
  html body.home.fenix-figma-shell-page .fenix-header[data-fenix-header] .fenix-header__brand-fallback,
  html body.home.fenix-figma-shell-page .fenix-header[data-fenix-header] .custom-logo-link,
  html body.home.fenix-figma-shell-page .fenix-header[data-fenix-header] .fenix-header__brand img,
  html body.home.fenix-figma-shell-page .fenix-header[data-fenix-header] .fenix-header__brand .custom-logo {
    height: 78px !important;
    min-height: 78px !important;
    max-height: 78px !important;
  }

  html body.fenix-figma-not-found-page .fenix-header[data-fenix-header] > .fenix-container.fenix-header__inner {
    padding-inline: 0 !important;
    gap: 24px !important;
  }
}

/* Keep localized EN/VI header labels on the same geometry as the Japanese baseline. */
@media (min-width: 1280px) {
  html body.fenix-figma-shell-page .fenix-header[data-fenix-header] > .fenix-container.fenix-header__inner {
    display: grid !important;
    grid-template-columns: 126px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: clamp(40px, 5vw, 72px) !important;
    padding-inline: 0 !important;
  }

  html body.fenix-figma-shell-page .fenix-header[data-fenix-header] .fenix-header__brand {
    position: static !important;
    top: auto !important;
    left: auto !important;
    grid-column: 1 !important;
    width: 126px !important;
    height: 78px !important;
    min-width: 126px !important;
  }

  html body.fenix-figma-shell-page .fenix-header[data-fenix-header] .fenix-header__cluster {
    position: static !important;
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: clamp(24px, 2.2vw, 36px) !important;
  }

  html body.fenix-figma-shell-page .fenix-header[data-fenix-header] .fenix-nav {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    justify-content: flex-end !important;
  }

  html body.fenix-figma-shell-page .fenix-header[data-fenix-header] .fenix-nav__list {
    width: 100% !important;
    justify-content: flex-end !important;
    gap: 32px !important;
  }

  html body.fenix-figma-shell-page .fenix-header[data-fenix-header] .fenix-nav__item {
    display: flex !important;
    justify-content: center !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
  }

  html body.fenix-figma-shell-page .fenix-header[data-fenix-header] .fenix-nav__item--company {
    width: auto !important;
  }

  html body.fenix-figma-shell-page .fenix-header[data-fenix-header] .fenix-nav__item--services {
    width: auto !important;
  }

  html body.fenix-figma-shell-page .fenix-header[data-fenix-header] .fenix-nav__item--case {
    width: auto !important;
  }

  html body.fenix-figma-shell-page .fenix-header[data-fenix-header] .fenix-nav__item--resources {
    width: auto !important;
  }

  html body.fenix-figma-shell-page .fenix-header[data-fenix-header] .fenix-nav__item--careers {
    width: auto !important;
  }

  html body.fenix-figma-shell-page .fenix-header[data-fenix-header] .fenix-nav a,
  html body.fenix-figma-shell-page .fenix-header[data-fenix-header] .fenix-nav__link {
    position: relative !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: max-content !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.32 !important;
    overflow: visible !important;
  }

  html body.fenix-figma-shell-page .fenix-header[data-fenix-header] .fenix-nav__item--has-menu {
    position: relative !important;
    overflow: visible !important;
    z-index: 2 !important;
  }

  html body.fenix-figma-shell-page .fenix-header[data-fenix-header] .fenix-nav__item--has-menu:hover,
  html body.fenix-figma-shell-page .fenix-header[data-fenix-header] .fenix-nav__item--has-menu:focus-within {
    z-index: 260 !important;
  }

  html body.fenix-figma-shell-page .fenix-header[data-fenix-header] .fenix-nav__item--company .fenix-nav__link,
  html body.fenix-figma-shell-page .fenix-header[data-fenix-header] .fenix-nav__item--case .fenix-nav__link {
    gap: 10px !important;
    padding-right: 2px !important;
  }

  html body.fenix-figma-shell-page .fenix-header[data-fenix-header] .fenix-nav__label {
    display: block !important;
    min-width: 0 !important;
    overflow-wrap: normal !important;
  }

  html body.fenix-figma-shell-page .fenix-header[data-fenix-header] .fenix-nav__chevron {
    width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    position: relative !important;
    z-index: 3 !important;
    display: block !important;
    overflow: visible !important;
    color: currentColor !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  html body.fenix-figma-shell-page .fenix-header[data-fenix-header] .fenix-header__actions {
    width: 399px !important;
    min-width: 399px !important;
    flex: 0 0 399px !important;
    gap: clamp(8px, 0.8vw, 12px) !important;
  }

  html body.fenix-figma-shell-page .fenix-header[data-fenix-header] .fenix-header__button {
    height: 46px !important;
    padding-inline: 22px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  html body.fenix-figma-shell-page .fenix-header[data-fenix-header] .fenix-header__button--ghost {
    min-width: 156px !important;
  }

  html body.fenix-figma-shell-page .fenix-header[data-fenix-header] .fenix-header__button--primary {
    min-width: 178px !important;
  }

  html body.fenix-figma-shell-page .fenix-header[data-fenix-header] .fenix-menu-card__item--language.is-active,
  html body.home.fenix-figma-shell-page .fenix-header[data-fenix-header].is-over-hero .fenix-menu-card__item--language.is-active {
    background: var(--fenix-primary-50) !important;
    color: var(--fenix-neutral-900) !important;
    text-shadow: none !important;
  }

  html body.fenix-figma-shell-page .fenix-header[data-fenix-header] .fenix-menu-card--case.fenix-menu-card--count-1 {
    min-height: 158px !important;
  }

  html:lang(ja) body.fenix-figma-shell-page .fenix-header[data-fenix-header] .fenix-nav__list {
    gap: 32px !important;
  }

  html:lang(ja) body.fenix-figma-shell-page .fenix-header[data-fenix-header] .fenix-nav__item--case {
    min-width: 62px !important;
  }

  html:lang(en) body.fenix-figma-shell-page .fenix-header[data-fenix-header] .fenix-nav__list,
  html:lang(vi) body.fenix-figma-shell-page .fenix-header[data-fenix-header] .fenix-nav__list {
    gap: 32px !important;
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  html body.fenix-figma-shell-page .fenix-header[data-fenix-header] .fenix-header__button {
    font-size: 14px !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }
}

@media (max-width: 767px) {
  html body.fenix-figma-shell-page .fenix-header[data-fenix-header] > .fenix-container.fenix-header__inner > .fenix-header__toggle {
    position: absolute !important;
    top: var(--fenix-header-mobile-toggle-top, 26px) !important;
    right: 16px !important;
    z-index: 940 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border: 1px solid var(--fenix-primary-600) !important;
    border-radius: 999px !important;
    background: var(--fenix-primary-50) !important;
    color: var(--fenix-primary-600) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  html body.fenix-figma-shell-page .fenix-header[data-fenix-header] > .fenix-container.fenix-header__inner > .fenix-header__toggle .fenix-header__toggle-icon {
    display: block !important;
    width: 42px !important;
    height: 42px !important;
    color: currentColor !important;
  }

  html body.fenix-figma-shell-page .fenix-header[data-fenix-header] > .fenix-container.fenix-header__inner > .fenix-header__toggle .fenix-header__toggle-icon path {
    opacity: 1 !important;
    stroke: currentColor !important;
  }

  html body.fenix-figma-shell-page .fenix-header[data-fenix-header].is-over-hero > .fenix-container.fenix-header__inner > .fenix-header__toggle {
    border-color: var(--fenix-primary-600) !important;
    background: var(--fenix-primary-50) !important;
    color: var(--fenix-primary-600) !important;
  }

  html body.fenix-figma-shell-page .fenix-header[data-fenix-header] .fenix-mobile-menu__section-toggle,
  html body.fenix-figma-shell-page .fenix-header[data-fenix-header] .fenix-mobile-menu__section-link,
  html body.fenix-figma-shell-page .fenix-header[data-fenix-header] .fenix-mobile-menu__item,
  html body.fenix-figma-shell-page .fenix-header[data-fenix-header] .fenix-mobile-menu__button {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html body.fenix-figma-shell-page .fenix-header[data-fenix-header] .fenix-language-options__item.is-active {
    color: var(--fenix-primary-500) !important;
    font-weight: var(--fenix-weight-bold) !important;
  }
}