/* Hero 01 — Orbital Mechanics */
.h1-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.h1-wordmark {
  position: absolute;
  left: clamp(32px, 7vw, 112px);
  top: 50%;
  transform: translateY(-50%);
  text-align: left;
  pointer-events: none;
  max-width: min(420px, 50vw);
  opacity: 0;
}
.h1-wordmark.in { opacity: 1; transition: opacity 1.2s 0.3s ease-out; }
.h1-eyebrow { font-size: 10px; color: var(--accent); letter-spacing: 0.4em; text-transform: uppercase; margin-bottom: 18px; }
.h1-title { font-family: "Geist", sans-serif; font-weight: 300; font-size: clamp(72px, 9vw, 128px); letter-spacing: -0.028em; line-height: 0.95; margin: 0; color: #ECEDEE; }
body.theme-light .h1-title { color: #0A0A0C; }
.h1-sub { font-size: 12px; color: var(--text-muted); letter-spacing: 0.6em; text-transform: uppercase; margin-top: 14px; }
.h1-tag { font-size: 14px; color: var(--text-muted); line-height: 1.65; max-width: 300px; margin-top: 36px; }

.h1-glossary {
  position: absolute; left: 32px; bottom: 32px; max-width: 360px;
  font-size: 10px; color: var(--text-muted); line-height: 1.7; letter-spacing: 0.04em;
  pointer-events: none; opacity: 0;
}
.h1-glossary .ad { color: var(--accent); }
.h1-glossary .sl { color: var(--text-faint); }
.h1-glossary.in { opacity: 1; transition: opacity 1s 0.9s ease-out; }

.h1-tel {
  position: absolute; right: 32px; bottom: 32px; min-width: 280px;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  pointer-events: none; opacity: 0;
}
.h1-tel .row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--border-mid); gap: 24px; }
.h1-tel .row:first-child { border-top: 1px solid var(--border-mid); }
.h1-tel .row:last-child { border-bottom: none; }
.h1-tel .lab { color: var(--text-faint); }
.h1-tel .val { color: var(--text); }
.h1-tel .val .ad, .h1-tel .val .now { color: var(--accent); }
.h1-tel.in { opacity: 1; transition: opacity 1s 1.1s ease-out; }

.h1-cue {
  position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%);
  font-size: 10px; color: var(--text-muted); letter-spacing: 0.35em; text-transform: uppercase;
  pointer-events: none; opacity: 0;
}
.h1-cue.in { opacity: 1; transition: opacity 1s 1.4s ease-out; animation: h1-drift 3.6s 2.4s ease-in-out infinite; }
@keyframes h1-drift { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 4px); } }

@media (max-width: 768px) {
  .h1-wordmark { left: 50%; top: 64%; transform: translate(-50%, -50%); text-align: center; max-width: 86vw; }
  .h1-tag { margin-left: auto; margin-right: auto; }
  .h1-glossary { left: 22px; right: 22px; bottom: 152px; max-width: none; font-size: 9.5px; }
  .h1-tel { left: 22px; right: 22px; bottom: 22px; min-width: 0; font-size: 9.5px; }
  .h1-cue { display: none; }
}