/* STEPVOY coming soon page. Brand: Old Glory Blue #0A3161, Old Glory Red #B31942, White, Ink #1B2230. Font: Montserrat. */
@font-face { font-family: "Montserrat"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/montserrat-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/montserrat-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 800; font-style: normal; font-display: swap; src: url("../fonts/montserrat-latin-800-normal.woff2") format("woff2"); }

:root {
  --navy: #0A3161;
  --navy-deep: #051B38;
  --blue: #2A64AD;
  --red: #B31942;
  --white: #FFFFFF;
  --mist: #C9D6EA;   /* light blue-grey for secondary text on navy */
  --font: "Montserrat", "Segoe UI", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--white);
  background: radial-gradient(120% 90% at 15% 10%, #12407A 0%, var(--navy) 45%, var(--navy-deep) 100%) fixed, var(--navy);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Decorative flight path */
.flight { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.flight__trail {
  fill: none; stroke: #8FA6C8; stroke-opacity: .55; stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 22 18;
  -webkit-mask: none;
  animation: dash-move 40s linear infinite;
}
.flight__stars path { fill: #5B7FB0; opacity: .35; }
.plane {
  position: fixed; z-index: 0; pointer-events: none;
  width: clamp(110px, 13vw, 190px); height: auto;
  top: clamp(40px, 9vh, 110px); right: clamp(8px, 6vw, 110px);
  transform: rotate(-4deg);
  animation: glide 6s ease-in-out infinite;
  opacity: .95;
}
@keyframes dash-move { to { stroke-dashoffset: -800; } }
@keyframes glide { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-10px) rotate(-2deg); } }

/* Layout */
.page {
  position: relative; z-index: 1;
  min-height: 100%;
  max-width: 1080px; margin: 0 auto;
  padding-block: max(28px, env(safe-area-inset-top)) 72px;
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
  display: grid; grid-template-rows: auto 1fr auto auto; gap: 48px;
}
.brand img { display: block; width: clamp(200px, 26vw, 300px); height: auto; }

.hero { align-self: center; max-width: 760px; }
.badge {
  display: inline-block; margin: 0 0 22px;
  background: var(--red); color: var(--white);
  font-weight: 800; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  padding: .55em 1.1em; border-radius: 999px;
}
h1 {
  margin: 0 0 22px;
  font-weight: 800; letter-spacing: -.02em; line-height: 1.04;
  font-size: clamp(2.6rem, 7.2vw, 5.4rem);
  text-wrap: balance;
}
h1 span { color: #F0F4FA; background: linear-gradient(transparent 70%, rgba(179, 25, 66, .85) 70%, rgba(179, 25, 66, .85) 92%, transparent 92%); padding: 0 .06em; }
.lede { margin: 0 0 30px; max-width: 58ch; font-size: clamp(1.02rem, 1.6vw, 1.2rem); line-height: 1.7; color: var(--mist); }
.cats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.cats li { font-weight: 600; font-size: .82rem; letter-spacing: .22em; text-transform: uppercase; color: var(--white); display: flex; align-items: center; gap: 10px; }
.cats li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); flex: none; }

.contact {
  max-width: 560px;
  border-top: 1px solid rgba(201, 214, 234, .25);
  padding-top: 28px;
}
.contact h2 { margin: 0 0 6px; font-size: 1.15rem; font-weight: 800; }
.contact p { margin: 0; color: var(--mist); line-height: 1.6; }
.contact .email { margin-top: 12px; }
.contact a {
  color: var(--white); font-weight: 600; font-size: 1.15rem; text-decoration: none;
  border-bottom: 2px solid var(--red); padding-bottom: 2px;
}
.contact a:hover { color: #FFD9E3; }
a:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 4px; border-radius: 2px; }

.foot p { margin: 0; font-size: .8rem; letter-spacing: .06em; color: var(--mist); }

/* Brand stripes at the bottom, as on the STEPVOY covers */
.stripes { position: fixed; left: 0; right: 0; bottom: 0; height: 18px; z-index: 2;
  background: linear-gradient(var(--white) 0 4px, var(--navy-deep) 4px 7px, var(--red) 7px 100%); }

@media (max-width: 640px) {
  .page { gap: 36px; }
  .plane { opacity: .55; top: 64px; }
  .flight__trail { stroke-opacity: .3; }
  .cats li { font-size: .74rem; }
}
@media (prefers-reduced-motion: reduce) {
  .flight__trail, .plane { animation: none; }
}