:root {
  color-scheme: dark;
  --ink: #f4f0e8;
  --muted: rgba(244, 240, 232, .68);
  --line: rgba(244, 240, 232, .24);
  --gold: #c9a76d;
  --navy: #07111e;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--navy); }

body { color: var(--ink); font-family: "DM Sans", sans-serif; }

.hero {
  position: relative;
  min-height: 100svh;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 32px clamp(24px, 5vw, 76px) 28px;
}

.backdrop {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("assets/hero.jpg") 57% center / cover no-repeat;
  transform: scale(1.01);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(2, 10, 19, .97) 0%, rgba(4, 13, 24, .83) 30%, rgba(4, 13, 24, .25) 62%, rgba(3, 9, 17, .15) 100%),
    linear-gradient(0deg, rgba(2, 8, 15, .65) 0%, transparent 35%);
}

.site-header, .site-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.brand { display: inline-flex; align-items: center; gap: 13px; color: inherit; text-decoration: none; }

.brand-mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(201, 167, 109, .8);
  color: var(--gold);
  font: 500 15px/1 "Manrope", sans-serif;
  letter-spacing: .12em;
}

.brand-name { text-transform: uppercase; font-size: 11px; line-height: 1.42; letter-spacing: .19em; color: rgba(255,255,255,.72); }
.brand-name strong { color: var(--ink); font-weight: 600; }

.location { margin: 0; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.location span { display: inline-block; width: 5px; height: 5px; margin: 0 9px 2px 0; border-radius: 50%; background: var(--gold); box-shadow: 0 0 14px var(--gold); }

.content { align-self: center; width: min(620px, 55vw); padding: 9vh 0 6vh; }
.eyebrow { margin: 0 0 24px; color: var(--gold); font-size: 12px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; }
h1 { margin: 0; font: 300 clamp(4rem, 7.6vw, 8rem)/.84 "Manrope", sans-serif; letter-spacing: -.065em; }
h1 em { color: var(--gold); font-family: Georgia, serif; font-weight: 400; }
.intro { width: min(510px, 100%); margin: 34px 0 42px; color: var(--muted); font-size: clamp(1rem, 1.2vw, 1.16rem); line-height: 1.7; }

.notify-form { width: min(520px, 100%); }
.notify-form label { display: block; margin-bottom: 11px; font-size: 12px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }
.field-row { display: flex; border-bottom: 1px solid var(--line); }
input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  padding: 17px 16px 17px 0;
  background: transparent;
  color: white;
  font: inherit;
  font-size: 16px;
}
input::placeholder { color: rgba(255,255,255,.46); }
button {
  display: flex;
  align-items: center;
  gap: 18px;
  border: 0;
  padding: 0 2px 0 18px;
  background: transparent;
  color: var(--ink);
  font: 600 12px/1 "DM Sans", sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
}
.arrow { color: var(--gold); font-size: 21px; transition: transform .2s ease; }
button:hover .arrow, button:focus-visible .arrow { transform: translate(3px, -3px); }
button:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }
.form-note { margin: 11px 0 0; min-height: 18px; color: rgba(255,255,255,.43); font-size: 12px; }
.form-note.success { color: var(--gold); }

.site-footer { color: rgba(255,255,255,.48); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; }

@media (max-width: 760px) {
  .hero { padding: 24px 22px 22px; }
  .hero::after { background: linear-gradient(180deg, rgba(2,9,17,.6), rgba(2,9,17,.62) 35%, rgba(2,9,17,.94) 74%, #020811); }
  .backdrop { background-position: 68% center; opacity: .78; }
  .location { display: none; }
  .content { align-self: end; width: 100%; padding: 22vh 0 7vh; }
  .eyebrow { margin-bottom: 18px; font-size: 11px; }
  h1 { font-size: clamp(3.55rem, 17vw, 5.4rem); }
  .intro { margin: 24px 0 30px; line-height: 1.6; }
  .field-row { align-items: stretch; }
  button span:first-child { display: none; }
  button { padding-left: 24px; }
  .site-footer p:first-child { display: none; }
  .site-footer { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }