/* ── FONTS ── */
@font-face {
  font-family: 'Stratos';
  src: url('./assets/stratos.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
}

/* ── COLOUR TOKENS ── */
:root {
  --blue:  #1B1FBE;
  --navy:  #0D0F6B;
  --white: #FFFFFF;
  --black: #0A0A0A;
  --grey:  #d2d2d2;
  --margin: 2.5rem;
}

/* ── NAVIGATION ── */
nav {
  background-color: transparent;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--margin);
  position: fixed;
  top: 0; right: 0; left: 0;
  z-index: 100;
}

nav .logo { display: flex; align-items: center; gap: 2rem; text-decoration: none; }
nav .logo img { height: 4rem; width: auto; display: block; }

.logo-text {
  color: var(--blue);
  font-family: 'Stratos', sans-serif;
  font-weight: 400;
  font-size: 2rem;
  letter-spacing: 0.1em;
}

/* Hamburger */
.menu-btn {
  display: flex; flex-direction: column; gap: 0.55rem;
  padding: 0.5rem; cursor: pointer; background: none; border: none;
}
.menu-btn span { width: 3.25rem; height: 1px; background-color: var(--blue); display: block; }

/* Overlay */
.menu-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background-color: var(--blue);
  z-index: 200;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--margin);
  transform: translateY(-100%);
  transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}
.menu-overlay.open { transform: translateY(0); }

/* Close X */
.menu-close {
  position: absolute; top: var(--margin); right: var(--margin);
  cursor: pointer; background: none; border: none;
  padding: 0.5rem; width: 4rem; height: 1.55rem;
  display: flex; align-items: center; justify-content: center;
}
.menu-close span {
  position: absolute; left: 0.5rem; right: 0.5rem; top: 50%;
  height: 1px; background-color: var(--white); transform-origin: center;
}
.menu-close span:first-child { transform: translateY(-50%) rotate(45deg); }
.menu-close span:last-child  { transform: translateY(-50%) rotate(-45deg); }

/* Links */
.menu-links {
  list-style: none;
  display: flex; flex-direction: column; justify-content: space-evenly;
  height: 75vh; margin: 0;
}
.menu-links li { display: flex; align-items: baseline; gap: 1.5rem; margin-bottom: 0.5rem; }
.menu-links .num { font-size: 1rem; color: var(--grey); letter-spacing: 0.05em; min-width: 2rem; }
.menu-links a {
  color: var(--grey); text-decoration: none;
  font-size: clamp(3rem, 8vw, 7rem);
  font-family: 'Stratos', sans-serif;
  font-weight: 100; letter-spacing: -0.02em; line-height: 1.2;
  transition: color 0.2s ease;
}
.menu-links a:hover { color: var(--white); }

.menu-logo { position: absolute; bottom: 5rem; right: var(--margin); }
.menu-logo img { height: 120px; width: auto; }

@media (max-width: 900px) {
  :root { --margin: 1.25rem; }
  nav .logo img { height: 2.5rem; }
  .logo-text { font-size: 1.2rem; }
  .menu-btn span { width: 2.25rem; }
  .menu-logo img { height: 70px; }
}