@font-face {
  font-family: "Archivo";
  src: url("archivo.woff2") format("woff2-variations"), url("archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy: #1b4865;
  --grey: #56636d;
  --paper: #ffffff;
  --gutter: clamp(1.25rem, 6vw, 6rem);
}

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

html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--navy);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
}

header { padding: clamp(1.5rem, 4vw, 2.5rem) var(--gutter) 0; }

.logo {
  display: block;
  width: clamp(150px, 16vw, 210px);
  height: auto;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem var(--gutter) clamp(4rem, 14vh, 9rem);
}

h1 {
  margin: 0;
  font-size: clamp(4.4rem, 14vw, 12.5rem);
  font-weight: 800;
  font-stretch: 66%;
  line-height: 0.88;
  letter-spacing: -0.012em;
}

main p {
  margin: clamp(1rem, 2.5vw, 1.75rem) 0 0;
  color: var(--grey);
  font-size: clamp(1.5rem, 3.4vw, 2.75rem);
  font-weight: 500;
  font-stretch: 85%;
  line-height: 1.1;
}