* { margin: 0; box-sizing: border-box; }

body {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  font: 300 1rem/1.6 "Unbounded", system-ui, sans-serif;
  color: #fff;
  background: linear-gradient(135deg, #5a3c0e, #23382a 55%, #0f2a22); /* shown until video loads */
}

/* full-screen video, dimmed by overlay */
.bg { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: rgb(0 0 0 / .55); }

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4rem;
  padding: 1rem 12.5vw 6rem;
}

h1 {
  font-size: clamp(3rem, 11vw, 13rem);
  font-weight: 400;
  line-height: .95;
  text-transform: uppercase;
}

.info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.info div { display: grid; align-content: start; gap: 1.5rem; }
.lead { font-size: 1.15rem; font-weight: 500; line-height: 1.25; text-transform: uppercase; }
small { display: block; font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; opacity: .7; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

footer { padding: 1rem 12.5vw; background: #2e4a3e; font-size: .8rem; }

@media (max-width: 700px) {
  main { padding: 1.5rem 6vw 3rem; }
  h1 { font-size: 14vw; }
  .info { grid-template-columns: 1fr; }
}