*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: #fff;
  color: #1c1c1c;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
}

.page {
  display: flex;
  min-height: 100vh;
  border-top: 6px solid #b5001e;
}

/* Left: logo and message */
.intro {
  flex: 1 1 58%;
  display: flex;
  flex-direction: column;
  padding: 56px 8vw 32px;
}

.intro-inner {
  margin: auto 0;
  max-width: 520px;
}

.logo {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
}

h1 {
  margin: 56px 0 0;
  font-size: 56px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -1px;
}

.lead {
  margin: 18px 0 0;
  max-width: 420px;
  font-size: 19px;
  color: #555;
}

.copy {
  margin: 40px 0 0;
  font-size: 13px;
  color: #8a8a8a;
}

/* Right: contact panel */
.contact {
  flex: 1 1 42%;
  display: flex;
  align-items: center;
  padding: 56px 6vw;
  background: #1c1c1c;
  color: #fff;
}

.contact-inner { width: 100%; max-width: 360px; }

.contact h2 {
  margin: 0 0 32px;
  padding-bottom: 18px;
  border-bottom: 1px solid #3a3a3a;
  font-size: 24px;
  font-weight: 700;
}

.contact ul { margin: 0; padding: 0; list-style: none; }

.contact li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.contact li + li { margin-top: 26px; }

.icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #b5001e;
}

.icon svg { width: 20px; height: 20px; fill: #fff; }

.label {
  display: block;
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #a3a3a3;
}

.contact a, address {
  font-size: 18px;
  font-style: normal;
  color: #fff;
  text-decoration: none;
}

.contact a:hover, .contact a:focus { text-decoration: underline; }

@media (max-width: 820px) {
  .page { flex-direction: column; }
  .intro { flex: none; padding: 40px 24px 28px; }
  .intro-inner { margin: 0; }
  .logo { max-width: 340px; }
  h1 { margin-top: 36px; font-size: 40px; }
  .lead { font-size: 17px; }
  .copy { display: none; }
  .contact { flex: 1 0 auto; align-items: flex-start; padding: 36px 24px 44px; }
}