:root {
  color: #172033;
  background: #fdfdfc;
  font-family: Arial, Helvetica, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body { background: #fdfdfc; }

.coming-soon {
  display: flex;
  min-height: 100vh;
}

.coming-soon__image,
.coming-soon__content { width: 50%; }

.coming-soon__image { min-height: 100vh; }

.coming-soon__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.coming-soon__content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 6vw;
}

.coming-soon__inner { width: min(100%, 34rem); }

.brand {
  margin: 0 0 3.2rem;
  color: #6d7685;
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: .35em;
  text-transform: uppercase;
}

h1 {
  margin: 0 0 1.35rem;
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: 1.08;
}

.body-copy {
  margin: 0 0 1.7rem;
  color: #4f596b;
  font-size: 1.08rem;
  font-weight: 300;
  line-height: 1.65;
}

.signals {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 3.5rem 0 4rem;
  color: #566071;
  text-align: center;
}

.signals div { display: grid; gap: .65rem; justify-items: center; }
.signals span { font-size: 1.6rem; line-height: 1; }
.signals strong { font-size: .78rem; font-weight: 400; }

.contact { margin: 0; color: #7a8290; font-size: .82rem; }
.contact a { color: inherit; text-underline-offset: .2em; }

@media (max-width: 760px) {
  .coming-soon { display: block; }
  .coming-soon__image,
  .coming-soon__content { width: 100%; }
  .coming-soon__image { height: 42vh; min-height: 18rem; }
  .coming-soon__content { min-height: 58vh; padding: 3rem 1.5rem; }
  .brand { margin-bottom: 2.2rem; }
  .signals { margin: 2.5rem 0 3rem; }
}