/* ============================================================
   Alpheios landing — navigation + footer
   Single-page anchor nav (no multi-page routing). Desktop top bar +
   mobile slide-over, plus the footer.
   ============================================================ */

/* ---------------- DESKTOP NAV ---------------- */
.desktop-nav {
  position: fixed; top: 0; left: 0;
  width: 100%; z-index: 1000;
  display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  padding: 26px 5%;
  pointer-events: none;
}
.desktop-nav a, .desktop-nav .nav-cta { pointer-events: auto; }

.nav-brand { display: flex; align-items: center; gap: 12px; }
.nav-brand img { height: 26px; width: 26px; display: block; }
.nav-brand .nav-wordmark { height: 32px; width: auto; }
.nav-brand .wordmark {
  font-family: var(--font-quaternary); font-weight: 400;
  font-size: 17px; letter-spacing: 0.18em; color: var(--text-color-light);
}

.desktop-nav-buttons { display: flex; flex-direction: row; align-items: center; gap: 38px; }
.desktop-nav-buttons a {
  font-family: var(--font-quaternary); font-weight: 300;
  font-size: 14px; letter-spacing: 0.01em; color: var(--text-color-light);
}
.desktop-nav-buttons .nav-cta {
  font-family: var(--font-quaternary); font-weight: 400; font-size: 14px;
  color: var(--global-color-dark); background: var(--global-color-light);
  padding: 9px 18px; border-radius: 2px;
  transition: background .3s ease, transform .3s ease;
}
.desktop-nav-buttons .nav-cta:hover { background: #fff; }

@media (max-width: 900px) { .desktop-nav { display: none; } }


/* ---------------- MOBILE NAV ---------------- */
#nav { display: none; }
@media (max-width: 900px) {
  #nav { display: block; }
  .nav-wrapper {
    position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
    display: flex; align-items: center; justify-content: space-between;
    padding: calc(18px + env(safe-area-inset-top)) 22px 18px;
    transition: transform .6s cubic-bezier(0.37, 0, 0.63, 1);
  }
  /* reading gesture (scroll down) lets the bar yield; scroll up recalls it */
  .nav-wrapper.nav-hidden { transform: translateY(-110%); }
  /* progressive blur canopy: solid under the bar, melting into the page —
     readability comes from the blur, not a scrim box */
  .nav-wrapper::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: -28px;
    z-index: -1; pointer-events: none;
    background: linear-gradient(to bottom, rgba(6, 7, 10, 0.45), rgba(6, 7, 10, 0));
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
    opacity: 0; transition: opacity .5s ease;
  }
  .nav-wrapper.nav-scrolled::before { opacity: 1; }
  .nav-wrapper .nav-logo { display: flex; align-items: center; gap: 10px; }
  .nav-wrapper .nav-logo img { height: 24px; width: 24px; }
  .nav-wrapper .nav-logo .nav-wordmark { height: 28px; width: auto; }
  .nav-wrapper .nav-logo .wordmark {
    font-family: var(--font-quaternary); font-size: 15px; letter-spacing: 0.16em;
    color: var(--text-color-light);
  }
  .nav-open-button img { height: 18px; }

  .sidenav {
    position: fixed; top: 0; left: 0; height: 100%; width: 100%;
    background: var(--bg-1); z-index: 2000;
    transform: translateX(-100%);
    transition: all 1.2s cubic-bezier(0.2, 0, 0.54, 0);
    padding: calc(22px + env(safe-area-inset-top)) 22px calc(22px + env(safe-area-inset-bottom));
    display: flex; flex-direction: column;
  }
  .sidenav-header { display: flex; align-items: center; justify-content: space-between; }
  .sidenav-header .mobile-nav-logo img { height: 24px; width: 24px; }
  .closebtn { opacity: 0; }
  .closebtn img { height: 16px; }
  .nav-content { display: flex; flex-direction: column; gap: 6px; margin-top: 14vh; }
  .nav-content a {
    font-family: var(--font-quaternary); font-weight: 300; font-size: 34px;
    letter-spacing: -0.02em; color: var(--text-color-light); padding: 8px 0;
  }
  .nav-content a.is-cta { color: var(--accent); }
  .socmed { margin-top: auto; display: flex; gap: 28px; }
  .socmed a { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--text-dim); text-transform: uppercase; }
}


/* ---------------- FOOTER ---------------- */
.footer {
  position: relative; z-index: 10;
  background: var(--bg-0);
  padding: 90px 5% 48px;
  border-top: 1px solid var(--hairline);
}
.footer-container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer .container-logo { display: flex; flex-direction: column; gap: 18px; }
.footer .container-logo .brand { display: flex; align-items: center; gap: 12px; }
.footer .container-logo .brand .footer-wordmark { height: 32px; width: auto; display: block; }
.footer .company-info p {
  font-family: var(--font-mono); font-size: 12px; line-height: 1.7;
  color: var(--text-faint); letter-spacing: 0.02em;
}
.footer .footnav-title {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 16px;
}
.footer .footnav-ul li, .footer .footnav-contact li { margin-bottom: 12px; }
.footer .footnav-ul a, .footer .footnav-contact a {
  font-family: var(--font-quaternary); font-size: 14px; font-weight: 300;
  color: var(--text-dim); transition: color .3s ease;
}
.footer .footnav-ul a:hover, .footer .footnav-contact a:hover { color: var(--text-color-light); }

.footer-baseline {
  margin-top: 64px; padding-top: 22px; border-top: 1px solid var(--hairline);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
}
.footer-baseline p {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--text-faint);
}
.footer-baseline .disclaimer { max-width: 640px; line-height: 1.6; }

@media (max-width: 900px) {
  .footer-container { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer .container-logo { grid-column: 1 / -1; }
}