:root {
  --petrol: #0b3c40;
  --paper: #f4f0e7;
  --rust: #a84c34;
  font-family: "Outfit", "Avenir Next", system-ui, sans-serif;
  color: var(--petrol);
  background: var(--paper);
}

* { box-sizing: border-box; }
body, h1, p { margin: 0; }

main {
  min-height: 100svh;
  display: grid;
  grid-template-rows: minmax(230px, 46svh) 1fr;
}

.brand {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--petrol);
}

.brand img {
  display: block;
  width: min(100%, 820px);
  height: auto;
}

.intro {
  align-self: center;
  padding: clamp(40px, 7vh, 80px) 24px;
  text-align: center;
}

h1 {
  font-size: clamp(38px, 7vw, 86px);
  line-height: 1.04;
  letter-spacing: -.06em;
  font-weight: 680;
  text-wrap: balance;
}

p {
  max-width: 46ch;
  margin: 20px auto 24px;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.5;
}

a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: .4em;
  font-size: 18px;
  font-weight: 650;
  text-underline-offset: .24em;
  color: var(--rust);
}

a:hover { color: var(--petrol); }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }

@media (max-width: 600px) {
  main { grid-template-rows: minmax(190px, 38svh) 1fr; }
}