html, body { min-height: 100%; }
body { margin: 0; color: #fff; font-family: "Helvetica Neue", Arial, sans-serif; }
.hero {
  position: relative; isolation: isolate; min-height: 100svh;
  background: #13161a url("../mountains.png") right center / cover no-repeat;
}
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(5,7,10,.28), rgba(5,7,10,.16) 44%, rgba(5,7,10,.48)); }
.content { width: min(100% - 2rem, 900px); padding-bottom: 5vh; }
h1 { font-weight: 200; font-size: clamp(2.35rem, 5vw, 4.4rem); letter-spacing: .14em; line-height: 1.15; }
.description { color: rgba(255,255,255,.78); font-weight: 300; font-size: clamp(.9rem, 1.2vw, 1.06rem); line-height: 1.7; }
.notify { min-width: 185px; min-height: 54px; border-radius: 0; border: 1px solid rgba(255,255,255,.75);
  color: white; font-size: .72rem; letter-spacing: .34em; font-weight: 600; transition: background .2s, color .2s; }
.notify:hover, .notify:focus-visible { background: white; color: #121212; }
.brand { position: absolute; bottom: clamp(22px, 4vh, 46px); left: 50%; transform: translateX(-50%);
  width: clamp(110px, 10vw, 150px); height: auto; }
.modal { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.modal-backdrop { --bs-backdrop-bg: #05070a; --bs-backdrop-opacity: .65; }
.modal-content { position: relative; padding: clamp(2.5rem, 6vw, 3.25rem) clamp(1.5rem, 6vw, 3rem);
  background: rgba(16,18,22,.94); color: #fff; border: 1px solid rgba(255,255,255,.14); border-radius: 0;
  box-shadow: 0 30px 80px rgba(0,0,0,.55); }
.modal-close { position: absolute; top: 1.1rem; right: 1.1rem; font-size: .7rem; }
.modal-title { font-weight: 200; font-size: clamp(1.35rem, 3vw, 1.7rem); letter-spacing: .14em; text-transform: uppercase; }
.modal-title::after { content: ""; display: block; width: 40px; height: 1px; margin: 1.25rem auto 0; background: rgba(255,255,255,.4); }
.modal-text { color: rgba(255,255,255,.65); font-weight: 300; font-size: .92rem; line-height: 1.7; }
.field { min-height: 54px; padding: 0 1.1rem; background: transparent; color: #fff; font-weight: 300;
  border: 1px solid rgba(255,255,255,.3); border-radius: 0; }
.field::placeholder { color: rgba(255,255,255,.4); }
.field:focus { background: rgba(255,255,255,.04); color: #fff; border-color: #fff; box-shadow: none; }
.form-message { color: rgba(255,255,255,.6); font-size: .82rem; line-height: 1.6; }
.form-message:not(:empty) { margin-top: 1.25rem; }
@media (max-width: 575px) { h1 { letter-spacing: .08em; } .content { padding-bottom: 12vh; } }
.form-message.is-error { color: #f3b7b0; }
.notify:disabled { opacity: .5; }