/* Shared interaction model for the Contact Us page: the same single navbar
   smoothly changes dimensions as the homepage; no duplicate header is used. */
:root {
  --contact-nav-normal: 77px;
  --contact-nav-compact: 60px;
  --contact-nav-scale: .8;
  --contact-nav-motion: 360ms;
  --contact-nav-ease: cubic-bezier(.22, 1, .36, 1);
}

.contact-nav.site-nav {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100vw;
  height: var(--contact-nav-normal);
  display: block;
  padding: 0;
  overflow: visible;
  background: #fff;
  border-bottom: 1px solid transparent;
  box-shadow: 0 1px 0 rgba(20, 49, 75, 0);
  transition: height var(--contact-nav-motion) var(--contact-nav-ease), border-color var(--contact-nav-motion) ease-out, box-shadow var(--contact-nav-motion) ease-out;
}

body.nav-is-condensed .contact-nav.site-nav {
  height: var(--contact-nav-compact);
  border-bottom-color: rgba(20, 49, 75, .1);
  box-shadow: 0 5px 16px rgba(20, 49, 75, .06);
}

.contact-nav .site-nav-inner {
  position: relative;
  width: 1920px;
  height: 96px;
  transform: scale(var(--contact-nav-scale));
  transform-origin: top left;
  transition: transform var(--contact-nav-motion) var(--contact-nav-ease);
}

.contact-nav .site-logo {
  position: absolute;
  left: 26px;
  top: 10px;
  display: block;
  width: 279px;
  height: 72px;
  transition: left var(--contact-nav-motion) var(--contact-nav-ease), top var(--contact-nav-motion) var(--contact-nav-ease), width var(--contact-nav-motion) var(--contact-nav-ease), height var(--contact-nav-motion) var(--contact-nav-ease);
}

.contact-nav .site-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }

.contact-nav .site-nav-links { position: absolute; inset: 0; display: block; width: auto; margin-left: 0; }

.contact-nav .site-nav-links .nav-link {
  position: absolute;
  top: 29px;
  display: flex;
  align-items: center;
  height: 38px;
  margin: 0;
  padding: 0;
  color: #213345;
  font-size: 25px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color 160ms ease-out, left var(--contact-nav-motion) var(--contact-nav-ease), top var(--contact-nav-motion) var(--contact-nav-ease), font-size var(--contact-nav-motion) var(--contact-nav-ease);
}

.contact-nav .site-nav-links .nav-link:hover,
.contact-nav .site-nav-links .nav-link:focus-visible { color: #008cc7; outline: none; }
.contact-nav .site-nav-links .nav-link.active {
  justify-content: center;
  text-align: center;
  background: #365faa;
  color: #fff;
  padding: 0 25px;
  border-radius: 20px;
}
.contact-nav .site-nav-links .nav-link.active:hover,
.contact-nav .site-nav-links .nav-link.active:focus-visible { color: #fff; background: #274a89; }
/* Shared desktop spacing. All top-level pages use this single arrangement. */
.contact-nav .site-nav-links .nav-link:nth-child(1) { left: 803px; width: 120px; }
.contact-nav .site-nav-links .nav-link:nth-child(2) { left: 975px; width: 260px; }
.contact-nav .site-nav-links .nav-link:nth-child(3) { left: 1260px; width: 226px; }
.contact-nav .site-nav-links .nav-link:nth-child(4) { left: 1515px; width: 360px; }
.contact-nav .site-nav-links .nav-link:nth-child(5) { left: 1900px; width: 237px; }

.contact-nav .nav-mega {
  --menu-width: 858px;
  --menu-title-width: 248px;
  position: absolute;
  z-index: 101;
  top: var(--contact-nav-normal);
  left: 0;
  width: var(--menu-width);
  min-height: 237px;
  padding: 50px 50px 50px 54px;
  display: grid;
  grid-template-columns: minmax(190px, var(--menu-title-width)) 1px minmax(0, 1fr);
  column-gap: 36px;
  align-items: center;
  color: #fff;
  background: #365faa;
  border-radius: 0 0 16px 16px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-12px);
  transition: opacity 180ms ease-out, transform 240ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 240ms, top var(--contact-nav-motion) var(--contact-nav-ease);
}

.contact-nav.nav-menu-open .nav-mega,
.contact-nav:focus-within .nav-mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition-delay: 0s; }

.contact-nav .nav-mega-pointer {
  position: absolute;
  top: -16px;
  left: var(--pointer-center, 50%);
  width: 0;
  height: 0;
  border-right: 18px solid transparent;
  border-bottom: 18px solid #365faa;
  border-left: 18px solid transparent;
  transform: translateX(-50%);
}

.contact-nav .nav-mega-title { margin: 0; font-size: 30px; line-height: 1.15; font-weight: 500; }
.contact-nav .nav-mega-divider { width: 1px; min-height: 164px; background: rgba(255, 255, 255, .76); }
.contact-nav .nav-mega-links { display: grid; gap: 19px; align-content: center; }
.contact-nav .nav-mega-link { color: #fff; font-size: 29px; line-height: 1.18; font-weight: 400; text-decoration: none; transition: color 180ms ease-out, transform 180ms ease-out; }
.contact-nav .nav-mega-link:hover,
.contact-nav .nav-mega-link:focus-visible { color: #cbe8ff; transform: translateX(6px); outline: none; }

body.nav-is-condensed .contact-nav .site-nav-inner { transform: scale(1); }
body.nav-is-condensed .contact-nav .site-logo { left: clamp(58px, 5vw, 96px); top: 7px; width: 190px; height: 46px; }
body.nav-is-condensed .contact-nav .site-nav-links { --compact-links-left: calc(50vw - 400px); }
body.nav-is-condensed .contact-nav .site-nav-links .nav-link { top: 17px; width: auto; height: 27px; font-size: 22px; }
body.nav-is-condensed .contact-nav .site-nav-links .nav-link.active { padding: 0; background: transparent; color: #213345; }
body.nav-is-condensed .contact-nav .site-nav-links .nav-link.active:hover,
body.nav-is-condensed .contact-nav .site-nav-links .nav-link.active:focus-visible { color: #008cc7; background: transparent; }
body.nav-is-condensed .contact-nav .site-nav-links .nav-link:nth-child(1) { left: var(--compact-links-left); }
body.nav-is-condensed .contact-nav .site-nav-links .nav-link:nth-child(2) { left: calc(var(--compact-links-left) + 98px); }
body.nav-is-condensed .contact-nav .site-nav-links .nav-link:nth-child(3) { left: calc(var(--compact-links-left) + 330px); }
body.nav-is-condensed .contact-nav .site-nav-links .nav-link:nth-child(4) { left: calc(var(--compact-links-left) + 500px); }
body.nav-is-condensed .contact-nav .site-nav-links .nav-link:nth-child(5) { left: calc(var(--compact-links-left) + 790px); }
body.nav-is-condensed .contact-nav .nav-mega { top: var(--contact-nav-compact); width: 820px; min-height: 220px; padding: 40px 48px; grid-template-columns: 190px 1px minmax(0, 1fr); column-gap: 36px; }
body.nav-is-condensed .contact-nav .nav-mega-pointer { top: -14px; }
body.nav-is-condensed .contact-nav .nav-mega-title { font-size: 28px; }
body.nav-is-condensed .contact-nav .nav-mega-divider { min-height: 144px; }
body.nav-is-condensed .contact-nav .nav-mega-links { gap: 16px; }
body.nav-is-condensed .contact-nav .nav-mega-link { font-size: 26px; }

.contact-site > main { padding-top: var(--contact-nav-normal); }

@media (max-width: 800px) {
  .contact-nav.site-nav,
  body.nav-is-condensed .contact-nav.site-nav { height: 72px; }
  .contact-nav .site-nav-inner,
  body.nav-is-condensed .contact-nav .site-nav-inner { transform: scale(.68); }
  .contact-nav .site-nav-links { display: none; }
  .contact-nav .nav-mega { display: none; }
  .contact-site > main { padding-top: 72px; }
}
