/* Nav, footer, back-to-top - Everlane mark + violet */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  transition:
    background 0.25s var(--snap),
    border-color 0.25s var(--snap),
    backdrop-filter 0.25s var(--snap);
  border-bottom: 1px solid transparent;
}

.nav.is-stuck {
  background: rgba(10, 7, 17, 0.84);
  border-bottom-color: var(--line);
  backdrop-filter: blur(16px) saturate(140%);
}

.nav__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
}

.lock {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* The home link is a real tap target on a phone, not just the 28px mark. */
  min-height: 44px;
  text-decoration: none;
  color: var(--bone);
}

.lock:hover {
  color: var(--bone);
}

.lock__mark {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--void);
}

.lock__word {
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

@media (max-width: 420px) {
  .lock__word {
    font-size: 0.95rem;
  }
}

.nav__right {
  display: flex;
  align-items: center;
  gap: 10px;
}

@media (min-width: 900px) {
  .nav__right {
    gap: 18px;
  }
}

.nav__links {
  display: none;
  align-items: center;
  gap: 22px;
}

.nav__links a {
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--mute);
}

.nav__links a:hover,
.nav__links a[aria-current="page"],
.nav__links a[data-current] {
  color: var(--bone);
}

.nav__cta {
  display: inline-flex;
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 600;
  color: #fff;
  background: var(--violet);
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  transition: background 0.2s var(--snap);
  white-space: nowrap;
}

.nav__cta:hover {
  background: var(--violet-hi);
  color: #fff;
}

.nav__burger {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  background: rgba(239, 234, 247, 0.04);
  color: var(--bone);
  cursor: pointer;
  flex: 0 0 auto;
  transition:
    border-color 0.2s var(--snap),
    background 0.2s var(--snap);
}

.nav__burger:hover {
  border-color: var(--violet);
}

/* Two bars that cross into an X, so the control reads as a state rather than a link. */
.nav__burger-lines {
  position: relative;
  display: block;
  width: 17px;
  height: 11px;
}

.nav__burger-lines span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition:
    transform 0.28s var(--soft-out),
    opacity 0.18s var(--snap);
}

.nav__burger-lines span:first-child {
  top: 0;
}

.nav__burger-lines span:last-child {
  bottom: 0;
}

.nav[data-open] .nav__burger {
  border-color: var(--line-2);
  background: rgba(239, 234, 247, 0.08);
}

.nav[data-open] .nav__burger-lines span:first-child {
  transform: translateY(4.75px) rotate(45deg);
}

.nav[data-open] .nav__burger-lines span:last-child {
  transform: translateY(-4.75px) rotate(-45deg);
}

/* Sheet is a full-screen panel with its own top bar. The sticky header stays above it
   (z-index 50 vs 45), so leaving it visible doubles the mark + close control. */
.nav[data-open] {
  visibility: hidden;
}

@media (min-width: 900px) {
  .nav__links {
    display: inline-flex;
  }

  .nav__cta {
    font-size: 0.88rem;
    padding: 10px 16px;
  }

  .nav__burger {
    display: none;
  }
}

/* The phone menu: a full-height panel, opened from the top bar and covering the page.
   Links are set at display size because on a phone this screen is the whole decision. */
.nav__sheet {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 32px);
  /* Fully opaque from the first frame, and deliberately NOT faded in: a translucent panel
     rising over the page showed the real nav bar through it, which read as a flash of a
     second header. The panel arrives instantly; only its contents animate. */
  background: var(--void);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.nav__sheet[hidden] {
  display: none;
}

.nav__sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 62% at 82% 8%, rgba(139, 92, 246, 0.24), transparent 66%),
    radial-gradient(90% 50% at 0% 100%, rgba(76, 29, 149, 0.34), transparent 70%);
}

/* The sheet carries its own top bar. It is mounted on <body>, outside the page wrapper's
   stacking context, so the real nav cannot paint over it however high its z-index is; the
   menu therefore owns the whole screen, brand row included, and closes from the same spot
   the burger sits in. */
.nav__sheet-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
  flex: 0 0 auto;
}

.nav__sheet-lead {
  margin: 22px 0 0;
  max-width: 22ch;
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--mute);
  opacity: 0;
  transform: translateY(10px);
}

.nav__sheet[data-open] .nav__sheet-lead {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.5s var(--soft-out) 0.04s,
    transform 0.5s var(--soft-out) 0.04s;
}

.nav__burger--close .nav__burger-lines span:first-child {
  transform: translateY(4.75px) rotate(45deg);
}

.nav__burger--close .nav__burger-lines span:last-child {
  transform: translateY(-4.75px) rotate(-45deg);
}

/* margin-top:auto parks the links and the CTA in the thumb zone while the brand row stays
   at the top, so the free space lands in the middle rather than under the button. */
.nav__sheet-in {
  width: 100%;
  margin-top: auto;
  padding-top: 40px;
}

.nav__sheet-links {
  display: grid;
  gap: 2px;
  margin-bottom: 28px;
}

.nav__sheet-links a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  font-family: var(--display);
  font-size: clamp(1.75rem, 8vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--bone);
  opacity: 0;
  transform: translateY(14px);
}

.nav__sheet[data-open] .nav__sheet-links a {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.5s var(--soft-out),
    transform 0.5s var(--soft-out);
}

.nav__sheet[data-open] .nav__sheet-links a:nth-child(1) {
  transition-delay: 0.06s;
}

.nav__sheet[data-open] .nav__sheet-links a:nth-child(2) {
  transition-delay: 0.12s;
}

.nav__sheet[data-open] .nav__sheet-links a:nth-child(3) {
  transition-delay: 0.18s;
}

.nav__sheet[data-open] .nav__sheet-links a:nth-child(4) {
  transition-delay: 0.24s;
}

.nav__sheet-links a[aria-current="page"] {
  color: var(--violet-hi);
}

.nav__sheet-n {
  font-family: var(--body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--violet-hi);
  flex: 0 0 auto;
}

.nav__sheet-foot {
  display: grid;
  gap: 18px;
  opacity: 0;
  transform: translateY(14px);
}

.nav__sheet[data-open] .nav__sheet-foot {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.5s var(--soft-out) 0.24s,
    transform 0.5s var(--soft-out) 0.24s;
}

.nav__sheet-foot .btn {
  justify-content: center;
  width: 100%;
  padding: 16px 20px;
  font-size: 1rem;
}

.nav__sheet-mail {
  font-size: 0.95rem;
  color: var(--mute);
  text-decoration: none;
}

.nav__sheet-note {
  margin: 0;
  font-size: 0.85rem;
  color: var(--mute-2);
}

@media (min-width: 900px) {
  .nav__sheet {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav__sheet,
  .nav__sheet-links a,
  .nav__sheet-foot,
  .nav__burger-lines span {
    transition: none;
  }
}

.foot {
  padding: 72px 0 36px;
  border-top: 1px solid var(--line);
  background: var(--void);
}

.foot__top {
  display: grid;
  gap: 36px;
}

@media (min-width: 820px) {
  .foot__top {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 48px;
  }
}

.foot__blurb {
  margin: 14px 0 0;
  max-width: 36ch;
  color: var(--mute);
  font-size: 0.95rem;
}

.foot__mail {
  display: inline-block;
  margin-top: 16px;
  color: var(--violet-hi);
  text-decoration: none;
  font-weight: 600;
}

.foot__mail:hover {
  color: var(--violet);
}

.foot__col h4 {
  margin: 0 0 14px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--violet-hi);
}

.foot__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.foot__col a {
  text-decoration: none;
  color: var(--mute);
}

.foot__col a:hover {
  color: var(--bone);
}

.foot__base {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--mute-2);
}

.to-top {
  position: fixed;
  right: max(18px, env(safe-area-inset-right, 0px));
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 0;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(10, 7, 17, 0.88);
  backdrop-filter: blur(10px);
  color: var(--bone);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition:
    opacity 0.25s var(--snap),
    transform 0.25s var(--snap),
    border-color 0.2s var(--snap);
}

.to-top.is-on {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.to-top:hover {
  border-color: var(--violet);
  color: var(--violet-hi);
}