:root { color-scheme: light; --night: #052c56; --cream: #f5f9fa; --cobalt: #0750bd; --cyan: #12d9f4; --sun: #ffd83d; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--night); }
body { color: var(--cream); -webkit-font-smoothing: antialiased; }
.arrival { position: relative; isolation: isolate; min-height: 100svh; display: grid; grid-template-columns: 52% 48%; align-items: center; overflow: hidden; }
.landscape { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.shade { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(245,249,250,.97) 0%, rgba(245,249,250,.95) 26%, rgba(245,249,250,.7) 43%, rgba(5,44,86,.12) 69%, rgba(5,44,86,.04) 100%), linear-gradient(0deg, rgba(5,44,86,.12), transparent 45%); }
.message { padding: 72px 28px; text-align: center; width: 100%; max-width: 850px; justify-self: center; }
.brand { display: block; width: clamp(280px, 25vw, 390px); height: auto; margin: 0 auto 42px; }
h1 { color: var(--night); font-family: Georgia, "Times New Roman", serif; font-size: clamp(36px, 3.65vw, 64px); font-weight: 400; line-height: 1.16; letter-spacing: -.045em; margin: 0; text-wrap: balance; }
h1 em { font-weight: 400; color: var(--cobalt); }
.support { max-width: 29ch; margin: 22px auto 0; color: #315675; font: 400 clamp(14px, 1.1vw, 17px)/1.6 "Segoe UI", Arial, sans-serif; }
.soon { display: flex; justify-content: center; align-items: center; gap: 18px; margin: 30px 0 0; font: 600 11px/1.5 "Segoe UI", Arial, sans-serif; letter-spacing: .23em; text-transform: uppercase; color: var(--cobalt); }
.soon span { height: 2px; width: 30px; background: var(--cyan); opacity: .9; }
::selection { color: white; background: var(--cobalt); }
@media (max-width: 760px) {
  .arrival { grid-template-columns: 1fr; align-items: end; min-height: max(680px, 100svh); }
  .landscape { height: 72%; object-position: 62% center; }
  .shade { background: linear-gradient(0deg, var(--cream) 0%, var(--cream) 12%, rgba(245,249,250,.96) 30%, rgba(245,249,250,.55) 51%, rgba(245,249,250,.05) 76%); }
  .message { padding: 40px 20px max(60px, env(safe-area-inset-bottom)); }
  .brand { width: 270px; margin-bottom: 28px; }
  h1 { font-size: clamp(32px, 5.3vw, 42px); line-height: 1.18; letter-spacing: -.04em; }
  .support { margin-top: 17px; font-size: 14px; }
  .soon { margin-top: 25px; }
}
@media (max-width: 360px) { .brand { width: 238px; } h1 { font-size: 29px; } .message { padding-inline: 14px; } }
@media (min-width: 761px) and (max-height: 600px) { .message { padding-block: 32px; } .brand { margin-bottom: 24px; width: 240px; } .soon { margin-top: 24px; } }