* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: #142139; color: white; font-family: Futura, "Century Gothic", "Helvetica Neue", Arial, sans-serif; }
.background { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: -1; }
body::before { content: ""; position: fixed; inset: 0; background: rgba(24,39,58,.3); pointer-events: none; }
.cover { position: relative; min-height: 100vh; min-height: 100svh; padding: 40px 60px 60px; }
.brand { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); margin: 0; }
.brand img { display: block; width: auto; height: 60px; }
h1.brand { text-align: center; width: calc(100% - 40px); text-transform: uppercase; font-size: 22px; line-height: 1; letter-spacing: .14em; font-weight: 500; }
@media (max-width: 600px) {
  .cover { padding: 20px; }
  .brand { top: 20px; }
}