.network-grid {
  padding: 70px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: #2a3138;
  align-content: center;
}

.network-grid article {
  min-height: 180px;
  padding: 28px;
  background: #151a20;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.network-grid article:hover { background: #1c232a; }
.network-grid span { color: #ff5a5f; font-size: .74rem; font-weight: 800; letter-spacing: .12em; }
.network-grid h3 { font-size: 1.2rem; margin: 30px 0 6px; }
.network-grid p { color: #9ea8b1; font-size: .88rem; line-height: 1.55; margin: 0; }
.network-grid .network-wide { grid-column: 1 / -1; min-height: 150px; }
.contact-card > p { margin: 4px 0 0; color: #edc8ca; max-width: 520px; }

@media (max-width: 900px) {
  .network-grid { min-height: 520px; padding: 42px; }
}

@media (max-width: 580px) {
  .network-grid { grid-template-columns: 1fr; padding: 22px; }
  .network-grid article { min-height: 150px; }
  .network-grid .network-wide { grid-column: auto; }
  .network-grid h3 { margin-top: 20px; }
}

/* Keep the Shanghai skyline visible below the hero message. */
.hero { align-items: flex-start; }
.hero-shade {
  background: linear-gradient(180deg, rgba(6,10,15,.87) 0%, rgba(6,10,15,.58) 42%, rgba(6,10,15,.12) 72%, rgba(6,10,15,.28) 100%);
}
.hero-content { padding-top: 64px; padding-bottom: 0; }
.hero h1 { font-size: clamp(3.4rem, 6vw, 5.65rem); max-width: 760px; }
.hero-content > p { font-size: 1.08rem; line-height: 1.65; margin: 22px 0 24px; }

@media (max-width: 900px) {
  .hero-image { background-position: 35% center; }
  .hero-content { padding-top: 52px; }
  .hero-shade {
    background: linear-gradient(180deg, rgba(6,10,15,.92) 0%, rgba(6,10,15,.65) 48%, rgba(6,10,15,.16) 78%, rgba(6,10,15,.32) 100%);
  }
}

@media (max-width: 580px) {
  .hero-image { background-position: 27% center; }
  .hero-content { padding-top: 42px; padding-bottom: 0; }
  .hero h1 { font-size: 3.15rem; }
  .hero-content > p { font-size: .96rem; line-height: 1.55; max-width: 480px; margin: 18px 0 20px; }
  .hero-actions { flex-direction: row; align-items: center; }
  .button { min-height: 46px; padding: 0 16px; font-size: .78rem; }
}