:root {
  --navy: #07172b;
  --navy-2: #0b2039;
  --gold: #c3a052;
  --gold-light: #ead38a;
  --ivory: #f5f1e8;
  --muted: rgba(245, 241, 232, 0.68);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--navy);
  color: var(--ivory);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow: hidden;
}

.page {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 43%, rgba(195, 160, 82, 0.12), transparent 29rem),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08), transparent 38rem),
    linear-gradient(145deg, #061326 0%, var(--navy) 46%, #040b17 100%);
}

.page::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 49.8%, rgba(195, 160, 82, 0.09) 49.9% 50.1%, transparent 50.2% 100%),
    linear-gradient(0deg, transparent 0 49.8%, rgba(255, 255, 255, 0.04) 49.9% 50.1%, transparent 50.2% 100%);
  mask-image: radial-gradient(circle at center, black 0, transparent 58%);
  opacity: 0.8;
  z-index: -2;
}

.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.12;
  background-image:
    repeating-radial-gradient(circle at 0 0, rgba(255,255,255,.55) 0 1px, transparent 1px 4px);
  mix-blend-mode: soft-light;
}

.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(88vw, 760px);
  transform: translateY(-0.6rem);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: clamp(1.05rem, 3vw, 1.65rem);
  text-decoration: none;
  color: inherit;
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  animation: brand-in 1200ms cubic-bezier(.22, 1, .36, 1) forwards, float 7000ms ease-in-out 1500ms infinite;
}

.mark {
  width: clamp(64px, 11vw, 96px);
  height: clamp(64px, 11vw, 96px);
  overflow: visible;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.28));
}

.mark .outer,
.mark .inner,
.mark .m-line,
.mark .m-wing {
  fill: none;
  stroke: url(#gold);
  stroke-width: 2.4;
  stroke-linecap: square;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}

.mark .inner { opacity: 0.72; stroke-width: 1.5; }
.mark .m-line { stroke-width: 4; }
.mark .m-wing { stroke-width: 3; opacity: 0.86; }

.outer {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: draw 1600ms ease-out 350ms forwards, pulse-stroke 5200ms ease-in-out 2100ms infinite;
}
.inner, .m-line, .m-wing {
  stroke-dasharray: 210;
  stroke-dashoffset: 210;
  animation: draw 1500ms ease-out 650ms forwards;
}

.wordmark {
  display: grid;
  gap: 0.26rem;
  text-align: left;
  letter-spacing: 0.18em;
}

.meridian {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: clamp(3.1rem, 9.8vw, 7.25rem);
  line-height: 0.83;
  letter-spacing: 0.095em;
  color: var(--ivory);
  text-shadow: 0 1px 0 rgba(255,255,255,.18), 0 24px 48px rgba(0,0,0,.18);
}

.partners {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.5rem);
  justify-self: stretch;
  font-size: clamp(0.9rem, 2.1vw, 1.55rem);
  font-weight: 600;
  color: rgba(245, 241, 232, 0.76);
  letter-spacing: 0.42em;
  padding-left: 0.35em;
}

.partners span {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.85;
  transform: scaleX(0);
  animation: line-in 900ms ease-out 1200ms forwards;
}

.contact {
  position: fixed;
  left: 0;
  right: 0;
  bottom: clamp(2rem, 5vh, 3.25rem);
  display: flex;
  justify-content: center;
  opacity: 0;
  animation: fade-up 900ms ease-out 1400ms forwards;
}

.contact a {
  color: var(--muted);
  text-decoration: none;
  font-size: clamp(0.72rem, 1.45vw, 0.88rem);
  letter-spacing: 0.18em;
  text-transform: lowercase;
  transition: color 220ms ease, letter-spacing 220ms ease;
}

.contact a:hover { color: var(--gold-light); letter-spacing: 0.2em; }

@keyframes brand-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes draw { to { stroke-dashoffset: 0; } }

@keyframes line-in { to { transform: scaleX(1); } }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes pulse-stroke {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(195,160,82,0)); }
  50% { filter: drop-shadow(0 0 9px rgba(195,160,82,.34)); }
}

@media (max-width: 680px) {
  .brand {
    flex-direction: column;
    gap: 1.15rem;
  }

  .wordmark { text-align: center; }
  .partners { letter-spacing: 0.32em; padding-left: 0.32em; }
  .hero { transform: translateY(-1.5rem); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}