/* Contact page: a complete, self-contained desktop viewport with a quiet office selector. */
.contact-us-section {
  /* Local overlay scale: office cards < map pins < the open office selector. */
  --contact-layer-address-card: 3;
  --contact-layer-map-marker: 4;
  --contact-layer-map-marker-active: 5;
  --contact-layer-office-selector: 6;
  min-height: calc(100dvh - 72px);
  padding: clamp(64px, 8vh, 88px) var(--site-inline-gutter);
  background: var(--paper);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.contact-us-section .contact-us-content-wrap {
  width: 100%;
  margin: 0;
}

.contact-us-section .contact-us-content-wrap .content-center {
  max-width: none;
  margin: 0;
  min-height: 0;
  padding-right: 0;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(48.5%, 640px);
  column-gap: clamp(24px, 2.5vw, 40px);
  align-items: center;
}

.contact-us-section .contact-us-content-wrap .content-center .address-select-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 164px;
  margin: 0;
  z-index: var(--contact-layer-office-selector);
}

.contact-us-section .contact-us-content-wrap .content-center .address-select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 7px;
  height: 7px;
  border-right: 2px solid #084A91;
  border-bottom: 2px solid #084A91;
  pointer-events: none;
  transform: translateY(-70%) rotate(45deg);
}

.contact-us-section .contact-us-content-wrap .content-center .address-select {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 42px;
  border-radius: 6px;
  background-color: #FFFFFF;
  border: 1px solid #B8CBE1;
  font-size: 15px;
  color: #084A91;
  font-weight: 600;
  padding: 0 42px 0 14px;
  margin: 0;
  outline: none;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.contact-us-section .contact-us-content-wrap .content-center .address-select:hover {
  border-color: #084A91;
}

.contact-us-section .contact-us-content-wrap .content-center .address-select:focus-visible {
  border-color: #084A91;
  box-shadow: 0 0 0 3px rgba(8, 74, 145, 0.16);
}

.contact-us-section .contact-us-content-wrap .content-center .address-select-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  padding: 6px;
  border: 1px solid #D5E1EF;
  border-radius: 6px;
  background: #FFFFFF;
  box-shadow: 0 12px 26px rgba(27, 59, 95, 0.16);
}

.contact-us-section .contact-us-content-wrap .content-center .address-option {
  display: block;
  width: 100%;
  min-height: 34px;
  padding: 7px 10px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #084A91;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease;
}

.contact-us-section .contact-us-content-wrap .content-center .address-option:hover,
.contact-us-section .contact-us-content-wrap .content-center .address-option:focus-visible,
.contact-us-section .contact-us-content-wrap .content-center .address-option.is-selected {
  background: #E7F0FA;
  color: #084A91;
  outline: none;
}

.contact-us-section .contact-us-content-wrap .content-center .address-option:active {
  background: #D6E6F7;
}

.contact-us-section .contact-us-content-wrap .content-center .contact-map-column {
  grid-column: 1;
  width: 100%;
  min-width: 0;
  align-self: center;
}

.contact-us-section .contact-us-content-wrap .content-center .page-map {
  width: 100%;
  height: auto;
  position: relative;
  margin: 0;
}

.contact-us-section .contact-us-content-wrap .content-center .page-map .contact-map-image {
  display: block;
  width: 100%;
  height: auto;
}

.contact-us-section .contact-us-content-wrap .content-center .page-map .contact-map-markers {
  position: absolute;
  inset: 0 0 auto;
  aspect-ratio: 1585 / 763;
  pointer-events: none;
}

.contact-us-section .contact-us-content-wrap .content-center .page-map .contact-map-marker {
  position: absolute;
  z-index: var(--contact-layer-map-marker);
  display: grid;
  place-items: center;
  width: 28px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}

.contact-us-section .contact-us-content-wrap .content-center .page-map .contact-map-marker img {
  display: block;
  width: 10px;
  height: 13px;
  object-fit: contain;
}

.contact-us-section .contact-us-content-wrap .content-center .page-map .contact-map-marker.is-active {
  z-index: var(--contact-layer-map-marker-active);
}

.contact-us-section .contact-us-content-wrap .content-center .page-map .contact-map-marker.is-active img {
  width: 17px;
  height: 22px;
  filter: brightness(0) saturate(100%) invert(61%) sepia(77%) saturate(675%) hue-rotate(352deg) brightness(97%) contrast(90%);
}

.contact-us-section .contact-us-content-wrap .content-center .page-map .contact-map-marker:focus-visible {
  outline: 2px solid #084A91;
  outline-offset: 1px;
}

/* Keep these percentages identical to the homepage presence map. */
.contact-us-section .contact-us-content-wrap .content-center .page-map .contact-map-marker--california { left: 17.4%; top: 39.2%; }
.contact-us-section .contact-us-content-wrap .content-center .page-map .contact-map-marker--cayman { left: 27.6%; top: 51.6%; }
.contact-us-section .contact-us-content-wrap .content-center .page-map .contact-map-marker--bvi { left: 27.9%; top: 48.8%; }
.contact-us-section .contact-us-content-wrap .content-center .page-map .contact-map-marker--beijing { left: 79.3%; top: 38.3%; }
.contact-us-section .contact-us-content-wrap .content-center .page-map .contact-map-marker--shanghai { left: 81.1%; top: 44.2%; }
.contact-us-section .contact-us-content-wrap .content-center .page-map .contact-map-marker--shenzhen { left: 79.3%; top: 49.2%; }
.contact-us-section .contact-us-content-wrap .content-center .page-map .contact-map-marker--foshan { left: 78.7%; top: 49.5%; }
.contact-us-section .contact-us-content-wrap .content-center .page-map .contact-map-marker--haikou { left: 78.3%; top: 51.4%; }
.contact-us-section .contact-us-content-wrap .content-center .page-map .contact-map-marker--hong-kong { left: 79.4%; top: 48.4%; }

.contact-us-section .contact-us-content-wrap .content-center .page-map .address-content {
  width: 100%;
  max-width: min(250px, calc(100vw - 64px));
  padding: 18px 20px 20px;
  background: #084A91;
  box-shadow: 0 12px 28px rgba(28, 63, 101, 0.2);
  color: #FFFFFF;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}

.contact-us-section .contact-us-content-wrap .content-center .page-map .contact-card-title {
  margin: 0 0 12px;
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.contact-us-section .contact-us-content-wrap .content-center .page-map .contact-line {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  margin-top: 8px;
}

.contact-us-section .contact-us-content-wrap .content-center .page-map .contact-line.address {
  margin-top: 0;
}

.contact-us-section .contact-us-content-wrap .content-center .page-map .contact-icon {
  display: block;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  object-fit: contain;
}

.contact-us-section .contact-us-content-wrap .content-center .page-map .address-content-wrap {
  position: absolute;
  z-index: var(--contact-layer-address-card);
  top: 50%;
  left: 54%;
  right: auto;
  display: none;
  transform: translate(-50%, -50%);
}

.contact-us-section .contact-us-content-wrap .content-center .page-map .address-content-wrap.is-active {
  display: block;
}

.contact-us-section .contact-us-content-wrap .content-center .contact-map-consult {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  width: fit-content;
  max-width: 100%;
  min-height: 66px;
  position: relative;
  top: 32px;
  margin: 22px auto 0;
  padding: 14px 20px;
  border: 2px solid #084A91;
  border-radius: var(--button-radius);
  background: transparent;
  color: #084A91;
  font-size: clamp(20px, 1.25vw, 24px);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.contact-us-section .contact-us-content-wrap .content-center .contact-map-consult:hover,
.contact-us-section .contact-us-content-wrap .content-center .contact-map-consult:focus-visible {
  background: #084A91;
  color: #FFFFFF;
}

.contact-us-section .contact-us-content-wrap .content-center .contact-map-consult:focus-visible {
  outline: 3px solid #EB8F07;
  outline-offset: 3px;
}

.contact-us-section .contact-us-content-wrap .content-center .contact-map-consult:active {
  transform: translateY(1px);
}

.contact-us-section .contact-us-content-wrap .content-center .contact-map-consult-arrow {
  font-size: 1.25em;
  font-weight: 500;
  line-height: 1;
  transition: transform 0.2s ease;
}

.contact-us-section .contact-us-content-wrap .content-center .contact-map-consult:hover .contact-map-consult-arrow,
.contact-us-section .contact-us-content-wrap .content-center .contact-map-consult:focus-visible .contact-map-consult-arrow {
  transform: translateX(4px);
}

.contact-us-section .contact-us-content-wrap .content-center .cities-right-wrap {
  grid-column: 2;
  width: 100%;
  position: static;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  user-select: none;
}

.contact-us-section .contact-us-content-wrap .content-center .cities-right-wrap .center-cities,
.contact-us-section .contact-us-content-wrap .content-center .cities-right-wrap .left-cities,
.contact-us-section .contact-us-content-wrap .content-center .cities-right-wrap .right-cities {
  display: contents;
}

.contact-us-section .contact-us-content-wrap .content-center .cities-right-wrap .text-common {
  font-size: clamp(15px, 1.35vw, 20px);
  font-weight: 500;
  color: #44546A;
  line-height: 30px;
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 1;
}

.contact-us-section .contact-us-content-wrap .content-center .cities-right-wrap .active-bg {
  background: #084A91;
}

.contact-us-section .contact-us-content-wrap .content-center .cities-right-wrap .active-bg .text-common {
  color: #FFFFFF;
}

.contact-us-section .contact-us-content-wrap .content-center .cities-right-wrap .active-bg img {
  filter: brightness(0) invert(1) contrast(1.12);
}

.contact-us-section .contact-us-content-wrap .content-center .cities-right-wrap .bg {
  background: #EEF0F2;
  position: relative;
}

.contact-us-section .contact-us-content-wrap .content-center .cities-right-wrap .bg img {
  filter: grayscale(1) contrast(1.28) brightness(0.78);
}

.contact-us-section .contact-us-content-wrap .content-center .cities-right-wrap .bg2 {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  font: inherit;
  text-align: left;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  transition: background-color 0.22s ease, transform 0.18s ease;
}

.contact-us-section .contact-us-content-wrap .content-center .cities-right-wrap .bg2:hover {
  transform: translateY(-2px);
}

.contact-us-section .contact-us-content-wrap .content-center .cities-right-wrap .bg2:active {
  transform: translateY(0);
}

.contact-us-section .contact-us-content-wrap .content-center .cities-right-wrap .bg2:focus-visible {
  outline: 3px solid #EB8F07;
  outline-offset: 3px;
}

.contact-us-section .contact-us-content-wrap .content-center .cities-right-wrap .bg2 .img-beijing,
.contact-us-section .contact-us-content-wrap .content-center .cities-right-wrap .bg2 .img-usa,
.contact-us-section .contact-us-content-wrap .content-center .cities-right-wrap .bg2 .img-shanghai,
.contact-us-section .contact-us-content-wrap .content-center .cities-right-wrap .bg2 .img-shenzhen,
.contact-us-section .contact-us-content-wrap .content-center .cities-right-wrap .bg2 .img-haiKou,
.contact-us-section .contact-us-content-wrap .content-center .cities-right-wrap .bg2 .img-foshan,
.contact-us-section .contact-us-content-wrap .content-center .cities-right-wrap .bg2 .img-BVI {
  width: 84%;
  height: 68%;
  position: absolute;
  bottom: 7%;
  left: 8%;
  object-fit: contain;
  object-position: center bottom;
  image-rendering: auto;
}

.contact-us-section .contact-us-content-wrap .content-center .cities-right-wrap .bg2 .img-HongKong {
  width: 84%;
  height: 68%;
  position: absolute;
  left: 8%;
  bottom: 7%;
  object-fit: contain;
  object-position: center bottom;
  image-rendering: auto;
}

.contact-us-section .contact-us-content-wrap .content-center .cities-right-wrap .bg2 .img-CAY {
  width: 84%;
  height: 68%;
  position: absolute;
  left: 8%;
  bottom: 7%;
  object-fit: contain;
  object-position: center bottom;
  image-rendering: auto;
}

/* City active state helpers */
.contact-us-section .contact-us-content-wrap .content-center .cities-right-wrap .bg2 .city2-name,
.contact-us-section .contact-us-content-wrap .content-center .cities-right-wrap .bg2 .city-name {
  left: 16px;
  top: 16px;
}

@media (max-width: 1080px) {
  .contact-us-section {
    min-height: 0;
    align-items: flex-start;
    padding: 104px var(--site-inline-gutter) 56px;
  }

  .contact-us-section .contact-us-content-wrap .content-center {
    display: block;
    min-height: 0;
    padding-right: 0;
  }

  .contact-us-section .contact-us-content-wrap .content-center .address-select-wrap {
    position: relative;
    margin-bottom: 18px;
  }

  .contact-us-section .contact-us-content-wrap .content-center .cities-right-wrap {
    width: 100%;
    position: static;
    margin-top: 32px;
  }

  .contact-us-section .contact-us-content-wrap .content-center .page-map {
    max-width: 680px;
    margin-top: 17px;
  }

  .contact-us-section .contact-us-content-wrap .content-center .contact-map-consult {
    min-height: 62px;
    margin-top: 20px;
  }

}

@media (max-width: 580px) {
  .contact-us-section {
    padding: 92px var(--site-inline-gutter) 40px;
  }

  /* On phones the office card belongs below the map so every marker stays
     visible. The active card remains inside .page-map in the DOM, then flows
     naturally above the consultation link. */
  .contact-us-section .contact-us-content-wrap .content-center .page-map .address-content-wrap {
    position: static;
    width: 100% !important;
    margin-top: 12px;
    transform: none;
  }

  .contact-us-section .contact-us-content-wrap .content-center .page-map .address-content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 12px;
    width: 100%;
    max-width: none;
    padding: 12px 14px;
    font-size: 11px;
    line-height: 1.4;
  }

  .contact-us-section .contact-us-content-wrap .content-center .page-map .contact-card-title {
    grid-column: 1 / -1;
    margin: 0 0 2px;
    font-size: 14px;
  }

  .contact-us-section .contact-us-content-wrap .content-center .page-map .contact-line {
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 6px;
    margin-top: 0;
    min-width: 0;
  }

  .contact-us-section .contact-us-content-wrap .content-center .page-map .contact-line.address {
    grid-column: 1 / -1;
  }

  .contact-us-section .contact-us-content-wrap .content-center .page-map .contact-line:not(.address) {
    font-size: 10px;
    line-height: 1.3;
    white-space: nowrap;
  }

  .contact-us-section .contact-us-content-wrap .content-center .page-map .contact-icon {
    width: 14px;
    height: 14px;
  }

  .contact-us-section .contact-us-content-wrap .content-center .cities-right-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .contact-us-section .contact-us-content-wrap .content-center .cities-right-wrap .text-common {
    left: 12px;
    top: 10px;
    font-size: 14px;
    line-height: 20px;
  }

  .contact-us-section .contact-us-content-wrap .content-center .contact-map-consult {
    width: fit-content;
    max-width: 100%;
    min-height: 58px;
    top: 0;
    gap: 18px;
    margin-top: 12px;
    padding: 12px 18px;
    font-size: 18px;
  }

}