@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Playfair+Display:ital,wght@0,500;1,500&display=swap');

:root { --ink:#14373e; --blue:#0786aa; --aqua:#4bb3c9; --cream:#f4eedf; --paper:#fbf8f0; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:var(--ink); }
body { color:var(--paper); font-family:"DM Sans",sans-serif; }
.launch, .hero { min-height:100svh; }
.hero { position:relative; display:flex; flex-direction:column; overflow:hidden; isolation:isolate; }
.image-stage { position:absolute; inset:0; z-index:-2; background:#163c42; }
.trailer { position:absolute; inset:-3%; width:106%; height:106%; object-fit:cover; opacity:0; filter:blur(12px) saturate(.78) brightness(.72); transform:scale(1.025); transition:opacity .4s ease,filter .4s ease,transform 5s ease; }
.trailer.active { opacity:.64; transform:scale(1); }
.image-stage.reveal .trailer.active { opacity:1; filter:brightness(.78) saturate(.94); }
.veil { position:absolute; inset:0; background:linear-gradient(90deg,rgba(8,37,42,.9) 0%,rgba(8,37,42,.68) 48%,rgba(8,37,42,.35) 100%),linear-gradient(0deg,rgba(8,37,42,.62),transparent 45%); opacity:1; transition:opacity .4s ease; }
.image-stage.reveal .veil { opacity:0 !important; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:28px clamp(24px,5vw,72px); }
.logo { width:84px; height:84px; object-fit:contain; filter:drop-shadow(0 6px 18px rgba(0,0,0,.16)); }
.location { font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; }
.content { width:min(760px,calc(100% - 48px)); margin:auto 0 auto clamp(24px,9vw,140px); padding:42px 0; }
.eyebrow { color:#a6dce6; letter-spacing:.2em; text-transform:uppercase; font-size:.78rem; font-weight:600; }
h1 { display:flex; flex-direction:column; gap:.42em; margin:.25em 0 .14em; max-width:700px; font-family:"Playfair Display",serif; font-size:clamp(3.6rem,8vw,7.8rem); font-weight:500; line-height:1; letter-spacing:-.02em; }
h1 span { display:block; }
h1 span:first-child { font-size:.72em; white-space:nowrap; }
h1 span + span { margin-top:0; }
.subhead { margin:0 0 2.4rem; font-family:"Playfair Display",serif; font-style:italic; font-size:clamp(1.25rem,2.4vw,2rem); color:#d5eef2; }
.signup { max-width:720px; }
.fields { display:grid; grid-template-columns:1fr 1.2fr auto; gap:10px; align-items:end; }
label span { display:block; margin:0 0 8px; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; }
input, button { min-height:54px; border-radius:3px; font:inherit; }
input { width:100%; padding:0 16px; border:1px solid rgba(255,255,255,.35); color:white; background:rgba(9,44,49,.62); outline:none; }
input::placeholder { color:rgba(255,255,255,.55); }
input:focus { border-color:#77d1df; box-shadow:0 0 0 3px rgba(75,179,201,.22); }
button { border:0; padding:0 22px; background:var(--cream); color:var(--ink); font-weight:600; cursor:pointer; white-space:nowrap; }
button:hover { background:white; }
.privacy { max-width:660px; font-size:.72rem; line-height:1.5; color:rgba(255,255,255,.64); }
.success { display:none; color:#c8f2e1; font-weight:600; }
.success.visible { display:block; }
.success.error { color:#ffd2ca; }
footer { display:flex; justify-content:space-between; gap:24px; padding:24px clamp(24px,5vw,72px); color:rgba(255,255,255,.68); font-size:.78rem; }
footer a { color:inherit; text-decoration:none; }
footer a:hover { color:white; }
@media (max-width:720px) {
  .hero { min-height:100svh; }
  .trailer { inset:-5%; width:110%; height:110%; object-position:center; }
  .veil { background:linear-gradient(180deg,rgba(8,37,42,.58) 0%,rgba(8,37,42,.74) 45%,rgba(8,37,42,.94) 100%); }
  .topbar { padding:18px 20px 8px; }
  .logo { width:64px; height:64px; }
  .location { font-size:.7rem; letter-spacing:.17em; }
  .content { margin:auto 20px; width:auto; padding:24px 0 18px; }
  .eyebrow { font-size:.7rem; letter-spacing:.15em; }
  h1 { margin-top:.3em; font-size:clamp(3rem,15vw,4.7rem); }
  .subhead { margin-bottom:1.6rem; font-size:clamp(1.15rem,5.5vw,1.55rem); }
  .fields { grid-template-columns:1fr; }
  .fields { gap:8px; }
  label span { margin-bottom:5px; }
  input, button { min-height:50px; }
  button { width:100%; }
  .privacy { margin:.7rem 0; font-size:.68rem; }
  footer { flex-direction:column; gap:5px; padding:14px 20px 18px; font-size:.72rem; }
}
@media (max-width:380px), (max-height:700px) and (max-width:720px) {
  .topbar { padding-top:12px; }
  .logo { width:54px; height:54px; }
  .content { padding:12px 0; }
  h1 { font-size:clamp(2.55rem,13.5vw,3.65rem); }
  .subhead { margin-bottom:1rem; }
  input, button { min-height:46px; }
  footer { padding-top:8px; padding-bottom:12px; }
}
@media (prefers-reduced-motion:reduce) {
  .trailer { transition:none; filter:blur(12px) saturate(.8); }
  .image-stage.reveal .trailer.active { filter:blur(12px) saturate(.8); }
}