:root {
  --background: #f7f7f6;
  --logo-blue: #0668a8;
  --heading: #5a5a5a;
  --body: #b8b8b8;
}

* {
  box-sizing: border-box;
}

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

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: var(--background);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(6, 104, 168, 0.055) 1px, transparent 0),
    linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(238, 238, 236, 0.22));
  background-size: 18px 18px, 100% 100%;
  color: var(--heading);
}

.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  text-align: center;
}

.eyebrow {
  margin: 0 0 clamp(2rem, 5vh, 2.625rem);
  color: var(--heading);
  font-size: clamp(1rem, 2.3vw, 1.18rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  text-transform: uppercase;
}

.logo {
  width: min(360px, 72vw);
  height: auto;
  display: block;
}

.tagline {
  margin: clamp(4rem, 10vh, 5.4rem) 0 0;
  color: var(--body);
  font-size: clamp(1rem, 2.4vw, 1.28rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.85;
}

@media (max-width: 520px) {
  .hero {
    padding: 2rem 1.25rem;
  }

  .eyebrow {
    margin-bottom: 1.75rem;
  }

  .logo {
    width: min(310px, 82vw);
  }

  .tagline {
    margin-top: 3.5rem;
  }

  .tagline br {
    display: none;
  }
}