/* Reusable components: glass, buttons, header, nav, menu, slots, marquee, forms */

/* ---------- Glass ---------- */
.glass-dark {
  background: var(--glass-dark-bg);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--glass-dark-border);
}

.glass-light {
  background: var(--glass-light-bg);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-light-border);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-dark {
    background: var(--glass-dark-fallback);
  }

  .glass-light {
    background: var(--glass-light-fallback);
  }
}

/* ---------- Icons ---------- */
.icon {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--fill {
  fill: currentColor;
  stroke: none;
}

.icon--sm {
  width: 18px;
  height: 18px;
}

.icon--lg {
  width: 40px;
  height: 40px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --btn-fill: var(--navy);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

/* Hover fill: a layer grows from the cursor point (--mx, --my are set by animations.js, center by default) */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--btn-fill);
  clip-path: circle(0% at var(--mx, 50%) var(--my, 50%));
  transition: clip-path 0.6s var(--ease);
}

.btn:hover::before,
.btn:focus-visible::before {
  clip-path: circle(150% at var(--mx, 50%) var(--my, 50%));
}

.btn .icon {
  width: 18px;
  height: 18px;
}

.btn--gold {
  background: var(--gold);
  color: var(--navy);
  box-shadow: 0 10px 28px var(--gold-35);
}

.btn--gold:hover,
.btn--gold:focus-visible {
  color: var(--white);
}

.btn--glass {
  --btn-fill: var(--gold);
  color: var(--white);
  background: var(--white-10);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--white-22);
}

.btn--glass:hover,
.btn--glass:focus-visible {
  border-color: var(--gold);
  color: var(--navy);
}

.btn--navy {
  --btn-fill: var(--gold);
  background: var(--navy);
  color: var(--white);
}

.btn--navy:hover,
.btn--navy:focus-visible {
  color: var(--navy);
}

.btn--outline {
  --btn-fill: var(--gold);
  color: var(--navy);
  border: 1px solid var(--gold);
}

/* Arrow swap: animations.js wraps each arrow in .arrow-swap with a copy, the arrow slides out and the copy slides in */
.arrow-swap {
  --dir: 1;
  position: relative;
  display: inline-flex;
  flex: none;
  width: 18px;
  height: 18px;
  overflow: hidden;
}

.arrow-swap .icon {
  transition: translate var(--dur) var(--ease);
}

.arrow-swap .icon + .icon {
  position: absolute;
  inset: 0;
  translate: calc(-120% * var(--dir)) 0;
}

.btn:hover .arrow-swap .icon:first-child,
.link-arrow:hover .arrow-swap .icon:first-child,
.co-card:hover .arrow-swap .icon:first-child {
  translate: calc(120% * var(--dir)) 0;
}

.btn:hover .arrow-swap .icon + .icon,
.link-arrow:hover .arrow-swap .icon + .icon,
.co-card:hover .arrow-swap .icon + .icon {
  translate: 0 0;
}

.btn--sm {
  min-height: 44px;
  padding: 10px 22px;
  font-size: var(--fs-small);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--navy);
}

.link-arrow .icon {
  width: 18px;
  height: 18px;
  color: var(--gold);
}

/* ---------- Language switch ---------- */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--fs-small);
}

.lang-switch__sep {
  opacity: 0.5;
}

.lang-switch button {
  min-width: 44px;
  min-height: 44px;
  padding-inline: 8px;
  border-radius: var(--radius-pill);
  opacity: 0.7;
  transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease);
}

.lang-switch button[lang='ar'] {
  font-family: 'Tajawal', var(--font);
  font-size: 15px;
}

.lang-switch button:hover,
.lang-switch button[aria-pressed='true'] {
  opacity: 1;
  color: var(--gold);
}

.lang-switch button[aria-pressed='true'] {
  font-weight: 600;
}

/* ---------- Header: floating nav ---------- */
.site-header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 100;
  padding-top: var(--hero-inset);
  pointer-events: none;
  transition: transform var(--dur) var(--ease);
}

.site-header > * {
  pointer-events: auto;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: 12px;
  padding: 10px 10px 10px 24px;
  padding-inline: 24px 10px;
  border-radius: var(--radius-card);
  color: var(--white);
  transition: padding var(--dur) var(--ease), background-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.nav__logo {
  display: block;
  flex: none;
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* Mobile: 42px logo fits inside the 48px toggle row, so the navbar height does not change */
.nav__logo img {
  height: 42px;
  width: auto;
}

.nav__menu {
  display: none;
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.nav__cta {
  display: none;
}

.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--white-10);
  border: 1px solid var(--white-22);
}

.nav__toggle span {
  position: relative;
  width: 20px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
}

.nav__toggle span::before,
.nav__toggle span::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  width: 20px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
}

.nav__toggle span::before {
  top: -6px;
}

.nav__toggle span::after {
  top: 6px;
  width: 14px;
}

.site-header.is-scrolled .nav {
  background: var(--navy-78);
  border-color: var(--white-22);
  box-shadow: var(--shadow-lg);
}

@media (min-width: 1024px) {
  .site-header .nav {
    background: var(--navy-45);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

/* Mobile: no language switch in the bar (it is in the mobile menu), same side padding on both ends,
   bigger logo (about 60 percent of the bar). Negative margin keeps the row at 48px, so the bar height does not change. */
@media (max-width: 1023px) {
  .nav__lang {
    display: none;
  }

  .nav {
    padding-inline: 24px;
  }

  .nav__logo {
    flex: 0 1 auto;
    width: 70%;
    max-width: 260px;
    min-width: 0;
    margin-block: -6px;
  }

  .nav__logo img {
    width: 100%;
    height: auto;
  }

}

/* Tablet: header bar gets the same darker glass as desktop */
@media (min-width: 768px) and (max-width: 1023px) {
  .site-header .nav {
    background: var(--navy-45);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

@media (min-width: 1024px) {
  .nav {
    margin-top: 0;
    padding: 14px 14px 14px 28px;
    padding-inline: 28px 14px;
  }

  /* Desktop: 52px logo, negative margin keeps its row at 44px (same as the menu links and button), so the navbar stays the same height */
  .nav__logo {
    margin-block: -4px;
  }

  .nav__logo img {
    height: 52px;
  }

  .nav__menu {
    display: flex;
    gap: 4px;
  }

  .nav__menu a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: clamp(8px, 1vw, 16px);
    font-size: 15px;
    font-weight: 400;
    opacity: 0.9;
    transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease);
  }

  .nav__menu a::after {
    content: '';
    position: absolute;
    inset-inline: clamp(8px, 1vw, 16px);
    bottom: 6px;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transition: transform var(--dur) var(--ease);
  }

  .nav__menu a:hover,
  .nav__menu a.is-active {
    opacity: 1;
    color: var(--gold);
  }

  .nav__menu a:hover::after,
  .nav__menu a.is-active::after {
    transform: scaleX(1);
  }

  .nav__cta {
    display: inline-flex;
  }

  .nav__toggle {
    display: none;
  }
}

/* Desktop only, narrow widths (browser zoom): the header row is tighter so the Contact button stays inside the bar */
@media (min-width: 1024px) and (max-width: 1199px) {
  .nav {
    gap: 16px;
  }

  .nav__logo img {
    height: 42px;
  }

  .nav__menu a {
    padding-inline: 8px;
    font-size: 14px;
  }

  .nav__menu a::after {
    inset-inline: 8px;
  }

  .nav__lang button {
    min-width: 36px;
  }

  .nav .nav__cta {
    padding-inline: 16px;
  }
}

/* ---------- Mobile menu ---------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  flex-direction: column;
  padding: calc(var(--hero-inset) + 12px) var(--gutter) var(--space-4);
  color: var(--white);
  background: var(--navy-85);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  overflow-y: auto;
  overscroll-behavior: contain; /* scrolling the menu never scrolls the page behind it */
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur) var(--ease), visibility 0s;
}

.mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px 10px 24px;
  padding-inline: 24px 10px;
}

.mobile-menu__head img {
  width: 160px;
  height: auto;
}

.mobile-menu__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--white-22);
  background: var(--white-10);
}

.mobile-menu__links {
  display: flex;
  flex-direction: column;
  margin-block: auto;
  padding-block: var(--space-5);
}

.mobile-menu__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  border-bottom: 1px solid var(--white-22);
  font-size: clamp(26px, 7vw, 36px);
  font-weight: 500;
  transform: translateY(16px);
  opacity: 0;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), color var(--dur) var(--ease);
}

.mobile-menu.is-open .mobile-menu__links a {
  transform: none;
  opacity: 1;
}

.mobile-menu__links a:hover {
  color: var(--gold);
}

.mobile-menu__links a .icon {
  color: var(--gold);
}

.mobile-menu__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

/* Mobile menu below 1024px: the logo and the close button sit exactly where the header logo and toggle are.
   Header offsets: nav margin-top 12px (the menu already adds it), nav border 1px + padding 10px 24px.
   Same logo rule as .nav__logo (70 percent, max 260px, margin-block -6px). Links and bottom row share the head's side padding.
   Placed after the base rules above so it wins at equal specificity. */
@media (max-width: 1023px) {
  .mobile-menu {
    --menu-pad: 25px; /* 24px nav padding + 1px nav border */
  }

  .mobile-menu__head {
    padding: 11px var(--menu-pad);
  }

  .mobile-menu__head picture {
    display: block;
    flex: 0 1 auto;
    min-width: 0;
    width: 70%;
    max-width: 260px;
    margin-block: -6px;
  }

  .mobile-menu__head img {
    width: 100%;
    height: auto;
  }

  .mobile-menu__links,
  .mobile-menu__foot {
    padding-inline: var(--menu-pad);
  }

  .mobile-menu__links a {
    font-weight: 400;
  }
}

/* ---------- Image slots for photos we do not have yet ---------- */
.img-slot {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: var(--ratio, 4 / 3);
  overflow: hidden;
  border-radius: var(--radius-card);
  border: 1px dashed var(--gold);
  background: var(--white-55);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.section--dark .img-slot,
.img-slot--dark {
  background: var(--white-10);
}

.img-slot span {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--gold-20);
  color: inherit;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.img-slot > img,
.img-slot > picture,
.img-slot > picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-slot:has(img) span {
  display: none;
}

/* ---------- Marquee ---------- */
.marquee {
  --gap: clamp(12px, 1.6vw, 24px);
  --speed: 48s;
  position: relative;
  overflow: hidden;
  padding-block: 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--navy) 8%, var(--navy) 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, var(--navy) 8%, var(--navy) 92%, transparent);
}

.marquee + .marquee {
  margin-top: var(--gap);
}

.marquee__track {
  display: flex;
  width: max-content;
  direction: ltr; /* logos only, direction is handled by the animation */
  animation: marquee-left var(--speed) linear infinite;
}

.marquee--reverse .marquee__track {
  animation-name: marquee-right;
}

.marquee.is-paused .marquee__track,
.marquee:has(:focus-visible) .marquee__track {
  animation-play-state: paused;
}

.marquee__list {
  display: flex;
  gap: var(--gap);
  padding-inline-end: var(--gap);
}

.logo-pill {
  display: grid;
  place-items: center;
  width: clamp(168px, 18vw, 232px);
  aspect-ratio: 600 / 278;
  padding: 6px 12px;
  border-radius: var(--radius-card);
  background: var(--white);
  border: 1px solid var(--gold-45);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.logo-pill img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--dur) var(--ease);
}

/* Logos that bring their own solid background fill the card edge to edge */
.logo-pill--fill {
  padding: 0;
  overflow: hidden;
}

.logo-pill--fill picture,
.logo-pill--fill img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.logo-pill--fill img {
  object-fit: cover;
}

.logo-pill:hover,
.logo-pill:focus-visible {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 12px 28px var(--gold-35);
}

.logo-pill:hover img,
.logo-pill:focus-visible img {
  transform: scale(1.05);
}

@keyframes marquee-left {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes marquee-right {
  from {
    transform: translate3d(-50%, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 767px) {
  .marquee {
    --gap: 10px;
    padding-block: 10px;
  }

  .logo-pill {
    width: 110px;
    padding: 4px 8px;
    border-radius: 16px;
  }

  .logo-pill--fill {
    padding: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .marquee__track {
    width: auto;
    animation: none !important;
    transform: none;
  }

  .marquee--reverse {
    display: none;
  }

  .marquee__list {
    flex-wrap: wrap;
    justify-content: center;
    padding-inline-end: 0;
  }

  .marquee__list[aria-hidden='true'] {
    display: none;
  }
}

/* ---------- Forms ---------- */
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field label {
  font-size: var(--fs-small);
  font-weight: 500;
}

.field input,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--navy-15);
  background: var(--white-72);
  font-size: 16px; /* 16px avoids zoom on iOS */
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.field textarea {
  min-height: 140px;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--navy-40);
}

/* Focus: a gold underline grows from the center */
.field input,
.field textarea {
  background-image: linear-gradient(var(--gold), var(--gold));
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-size var(--dur) var(--ease);
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background-size: 100% 2px;
}

.field.has-error input,
.field.has-error textarea {
  border-color: var(--gold);
  box-shadow: 0 0 0 4px var(--gold-20);
}

.field__error {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--navy);
}

.field__error::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

.field.has-error .field__error {
  display: inline-flex;
}

.form-success {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-card);
}

.form-success .icon {
  width: 32px;
  height: 32px;
  color: var(--gold);
}

.form-success strong {
  display: block;
  font-size: var(--fs-h3);
  font-weight: 600;
}

/* ---------- Scroll to top ---------- */
.to-top {
  position: fixed;
  bottom: clamp(16px, 3vw, 32px);
  inset-inline-end: clamp(16px, 3vw, 32px);
  z-index: 90;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid var(--gold-45);
  border-radius: 50%;
  background: var(--navy-85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--gold);
  cursor: pointer;
  box-shadow: 0 10px 28px var(--navy-40);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease), visibility 0s linear var(--dur);
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease), visibility 0s;
}

/* Progress ring: --scroll (0 to 1) is set by main.js; starts at the top and fills clockwise */
.to-top__ring {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  transform: rotate(-90deg);
  fill: none;
  stroke-width: 2;
  pointer-events: none;
}

.to-top__track {
  stroke: var(--white-15);
}

.to-top__bar {
  stroke: var(--gold);
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--scroll, 0));
  transition: stroke var(--dur) var(--ease);
}

/* Arrow swap, vertical: the arrow slides up and out, a copy slides in from below */
.to-top__swap {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  overflow: hidden;
}

.to-top__swap .icon {
  width: 20px;
  height: 20px;
  stroke-width: 1.75;
  transition: translate var(--dur) var(--ease);
}

.to-top__swap .icon + .icon {
  position: absolute;
  inset: 0;
  translate: 0 120%;
}

.to-top:hover,
.to-top:focus-visible {
  background-color: var(--gold);
  color: var(--navy);
}

.to-top:hover .to-top__bar,
.to-top:focus-visible .to-top__bar {
  stroke: var(--navy);
}

@media (prefers-reduced-motion: no-preference) {
  .to-top.is-visible:hover,
  .to-top.is-visible:focus-visible {
    transform: translateY(-3px);
  }

  .to-top:hover .to-top__swap .icon:first-child,
  .to-top:focus-visible .to-top__swap .icon:first-child {
    translate: 0 -120%;
  }

  .to-top:hover .to-top__swap .icon + .icon,
  .to-top:focus-visible .to-top__swap .icon + .icon {
    translate: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .to-top__swap .icon + .icon {
    display: none;
  }
}

/* ---------- Scroll progress (scaled by animations.js) ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 120;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

.no-gsap .scroll-progress {
  display: none;
}

/* ---------- Tilt shine (span added by animations.js on desktop) ---------- */
.tilt-shine {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--sx, 50%) var(--sy, 50%), var(--white-55), transparent 55%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}

.why-card .tilt-shine {
  background: radial-gradient(circle at var(--sx, 50%) var(--sy, 50%), var(--white-22), transparent 55%);
}

.is-tilting .tilt-shine {
  opacity: 1;
}

/* ---------- Header dropdown: Companies (desktop hover/focus panel, mobile accordion) ---------- */
.nav__caret {
  display: inline-flex;
  margin-inline-start: 6px;
  color: var(--gold);
  transform: rotate(180deg);
  transition: transform 240ms var(--ease);
}

.nav__caret .icon {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}

.mobile-menu__group {
  display: flex;
  flex-direction: column;
}

.mobile-menu__sub-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 64px;
  border: 0;
  border-bottom: 1px solid var(--white-22);
  background: none;
  color: inherit;
  font: inherit;
  font-size: clamp(26px, 7vw, 36px);
  font-weight: 400;
  text-align: start;
  transform: translateY(16px);
  opacity: 0;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), color var(--dur) var(--ease);
}

.mobile-menu.is-open .mobile-menu__sub-toggle {
  transform: none;
  opacity: 1;
}

.mobile-menu__chev {
  display: inline-flex;
  color: var(--gold);
  transform: rotate(180deg);
  transition: transform var(--dur) var(--ease);
}

.mobile-menu__group.is-open .mobile-menu__chev {
  transform: none;
}

.mobile-menu__sub {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--dur) var(--ease), visibility 0s linear var(--dur);
}

.mobile-menu__group.is-open .mobile-menu__sub {
  grid-template-rows: 1fr;
  visibility: visible;
  transition-delay: 0s;
}

.mobile-menu__sub > ul {
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.mobile-menu__links .mobile-menu__sub a {
  min-height: 48px;
  padding-inline-start: var(--space-2);
  font-size: 18px;
  font-weight: 400;
}

@media (min-width: 1024px) {
  .nav__item {
    position: relative;
    display: flex;
    align-items: center;
  }

  .nav__item:hover .nav__caret,
  .nav__item:has(:focus-visible) .nav__caret {
    transform: none;
  }

  .nav__item.is-dismissed .nav__caret {
    transform: rotate(180deg);
  }

  .nav__dd {
    position: absolute;
    top: 100%;
    inset-inline-start: 50%;
    z-index: 5;
    width: min(740px, calc(100vw - 48px));
    margin-inline-start: calc(min(740px, 100vw - 48px) / -2);
    margin-top: 14px;
    padding: 20px;
    border-radius: var(--radius-card);
    background: var(--navy-92);
    border: 1px solid var(--white-22);
    box-shadow: var(--shadow-lg);
    color: var(--white);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 220ms var(--ease), transform 220ms var(--ease), visibility 0s linear 220ms;
  }

  /* Invisible bridge over the gap, so the panel stays open while the pointer travels to it */
  .nav__dd::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: -14px;
    height: 14px;
  }

  .nav__item:hover .nav__dd,
  .nav__item:has(:focus-visible) .nav__dd {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition-delay: 0s;
  }

  .nav__item.is-dismissed .nav__dd {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
  }

  .nav__dd-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 56px;
    gap: 4px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .nav__dd-list li {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 220ms var(--ease), transform 220ms var(--ease);
  }

  .nav__item:hover .nav__dd-list li,
  .nav__item:has(:focus-visible) .nav__dd-list li {
    opacity: 1;
    transform: none;
    transition-delay: calc(60ms + var(--i) * 18ms);
  }

  .nav__item.is-dismissed .nav__dd-list li {
    opacity: 0;
    transform: translateY(6px);
    transition-delay: 0s;
  }

  .nav__menu .nav__dd a {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    min-height: 0;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    line-height: 1.3;
    opacity: 1;
    color: var(--white);
  }

  .nav__menu .nav__dd a::after {
    display: none;
  }

  .nav__menu .nav__dd a:hover,
  .nav__menu .nav__dd a:focus-visible {
    background: var(--white-10);
    color: var(--gold);
  }

  .nav__dd-logo {
    flex: none;
    width: 76px;
    height: 48px;
    padding: 4px;
    overflow: hidden;
    border-radius: 8px;
    background: var(--white);
  }

  .nav__dd-list li > a > span:last-child {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .nav__dd-logo picture,
  .nav__dd-logo img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .nav__dd-logo img {
    object-fit: contain;
  }

  /* Logos with their own solid background: no white frame, the tile takes the logo color */
  .nav__dd-logo:has(img[src*="abu-anwar-logo"]) {
    padding: 0;
    background: #004aad;
  }

  .nav__dd-logo:has(img[src*="south-ocean-logo"]) {
    padding: 0;
    background: #312829;
  }

  .nav__menu .nav__dd .nav__dd-all {
    justify-content: space-between;
    margin-top: 12px;
    padding: 14px 10px 4px;
    border-top: 1px solid var(--white-15);
    border-radius: 0;
    font-weight: 500;
    color: var(--gold);
  }

  .nav__menu .nav__dd .nav__dd-all:hover,
  .nav__menu .nav__dd .nav__dd-all:focus-visible {
    background: none;
  }

  .nav__dd-all .icon {
    width: 18px;
    height: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav__caret,
  .nav__dd,
  .nav__dd-list li,
  .mobile-menu__sub,
  .mobile-menu__chev {
    transition: none;
  }

  .nav__dd,
  .nav__dd-list li {
    transform: none;
  }
}