/* ─── Nav ──────────────────────────────────────────────────── */
    nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.25rem 2.5rem;

      transition: background 0.4s, backdrop-filter 0.4s;
    }

    nav.scrolled {
      background: rgba(8,8,8,0.88);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
    }

    .nav-name {
      font-family: var(--font-display);
      font-size: 1.4rem;
      letter-spacing: 0.14em;
      color: var(--white);
      text-decoration: none;
    }

    .nav-links {
      display: flex;
      gap: 3rem;
      list-style: none;
      margin-left: 3%;
    }

    .nav-links a {
      font-size: 0.7rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--muted);
      text-decoration: none;
      transition: color 0.2s;
    }

    .nav-links a:hover { color: var(--white); }

    .nav-ticket {
      font-size: 0.65rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--black);
      background: var(--white);
      padding: 0.5rem 1.2rem;
      border-radius: 2px;
      text-decoration: none;
      font-weight: 600;
      transition: background 0.2s, color 0.2s;
    }

    .nav-ticket:hover {
      background: var(--accent);
      color: var(--white);
    }


    /* ─── Nav logo ─────────────────────────────────────────────── */
    .nav-logo {
      display: flex;
      align-items: center;
      text-decoration: none;
    }
 
    .nav-logo img {
      height: 36px;
      width: auto;
      display: block;
      /* filter: brightness(0) invert(1); */
      transition: opacity 0.2s;
    }
 
    .nav-logo img:hover { opacity: 0.7; }
 
    .nav-logo-fallback {
      display: none; /* shown via JS onerror if logo.png is missing */
      font-family: var(--font-display);
      font-size: 1.4rem;
      letter-spacing: 0.14em;
      color: var(--white);
    }

    
    
    /* ─── CS Toggle (hamburger) — hidden on desktop ────────────── */
    .cs-toggle { display: none; }
 
    /* CS wrapper hidden on desktop entirely */
    .cs-ul-wrapper { display: none; }

        /* ─── CS mobile nav menu ───────────────────────────────────── */
    @media only screen and (max-width: 768px) {
 
      /* Body lock when menu open */
      body.cs-open { overflow: hidden; }
 
      /* Backdrop blur overlay behind the panel */
      #nav::before {
        content: '';
        width: 100%;
        height: 0vh;
        background: rgba(0,0,0,0.7);
        opacity: 0;
        display: block;
        position: absolute;
        top: 100%;
        right: 0;
        z-index: -1;
        transition: height 0.5s, opacity 0.5s;
        backdrop-filter: blur(6px);
      }
 
      #nav.cs-active::before {
        height: 150vh;
        opacity: 1;
      }
 
      /* Toggle button */
      .cs-toggle {
        display: flex;
        width: clamp(2.8rem, 7vw, 3.2rem);
        height: clamp(2.8rem, 7vw, 3.2rem);
        margin-left: auto;
        background-color: var(--accent);
        border: none;
        border-radius: 0.25rem;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        transition: transform 0.6s;
        flex-shrink: 0;
        position: relative;
        z-index: 200;
      }
 
      .cs-toggle.cs-active { transform: rotate(180deg); }
 
      /* CS line styles */
      .cs-box {
        width: clamp(1.4rem, 2vw, 1.6rem);
        height: 1rem;
        position: relative;
        display: block;
      }
 
      .cs-line {
        width: 100%;
        height: 2px;
        background-color: var(--white);
        border-radius: 2px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
      }
 
      .cs-line1 {
        top: 0;
        transform-origin: center;
        transition: transform 0.5s ease, top 0.3s ease;
      }
 
      .cs-line2 {
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        transform-origin: center;
        transition: top 0.3s ease, transform 0.5s ease, opacity 0.2s ease;
      }
 
      .cs-line3 {
        bottom: 0;
        transition: bottom 0.3s ease, opacity 0.3s ease;
      }
 
      /* Animate to X */
      #nav.cs-active .cs-line1 {
        top: 50%;
        transform: translate(-50%, -50%) rotate(225deg);
      }
 
      #nav.cs-active .cs-line2 {
        top: 50%;
        transform: translate(-50%, -50%) rotate(-225deg);
        opacity: 0;
      }
 
      #nav.cs-active .cs-line3 {
        bottom: 100%;
        opacity: 0;
      }
 
      /* ── Full screen menu overlay ──────────────────────────── */
      .cs-ul-wrapper {
        width: 100vw;
        height: 100vh;
        background: var(--black);
        position: fixed;
        top: 0; left: 0;
        z-index: 99;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 6rem 2rem 3rem;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-12px);
        transition: opacity 0.4s cubic-bezier(0.16,1,0.3,1),
                    transform 0.4s cubic-bezier(0.16,1,0.3,1);
      }
 
      #nav.cs-active .cs-ul-wrapper {
        opacity: 1;
        pointer-events: all;
        transform: translateY(0);
        transition-delay: 0.05s;
      }
 
      /* ── Top label ─────────────────────────────────────────── */
      .cs-ul-wrapper::before {
        content: 'Professional debut';
        display: block;
        position: absolute;
        top: 1.8rem;
        left: 2rem;
        font-size: 0.6rem;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: var(--accent);
        font-family: var(--font-body);
        opacity: 0;
        transform: translateY(8px);
        transition: opacity 0.4s 0.2s ease, transform 0.4s 0.2s ease;
      }
 
      #nav.cs-active .cs-ul-wrapper::before {
        opacity: 1;
        transform: translateY(0);
      }
 
      /* ── Nav list ──────────────────────────────────────────── */
      .cs-ul {
        margin: 0;
        padding: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 0;
        list-style: none;
        flex: 1;
      }
 
      .cs-li {
        width: 100%;
        border-bottom: 1px solid var(--border);
        transform: translateY(20px);
        opacity: 0;
        transition: transform 0.5s cubic-bezier(0.16,1,0.3,1),
                    opacity 0.4s ease;
      }
 
      .cs-li:first-child { border-top: 1px solid var(--border); }
 
      /* Stagger delays */
      .cs-li:nth-of-type(1) { transition-delay: 0.1s;  }
      .cs-li:nth-of-type(2) { transition-delay: 0.16s; }
      .cs-li:nth-of-type(3) { transition-delay: 0.22s; }
      .cs-li:nth-of-type(4) { transition-delay: 0.28s; }
 
      #nav.cs-active .cs-li {
        opacity: 1;
        transform: translateY(0);
      }
 
      .cs-li-link {
        font-family: var(--font-display);
        font-size: clamp(3rem, 12vw, 5rem);
        letter-spacing: 0.06em;
        text-decoration: none;
        color: rgba(255,255,255,0.18);
        display: block;
        padding: 0.4rem 0;
        line-height: 1.1;
        transition: color 0.2s, letter-spacing 0.3s;
      }
 
      .cs-li-link:hover {
        color: var(--white);
        letter-spacing: 0.1em;
      }
 
      /* ── Footer — notify me + credentials ──────────────────── */
      .cs-menu-footer {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.4s 0.35s ease,
                    transform 0.4s 0.35s ease;
      }
 
      #nav.cs-active .cs-menu-footer {
        opacity: 1;
        transform: translateY(0);
      }
 
      .cs-menu-notify {
        display: block;
        text-align: center;
        font-size: 0.7rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        font-weight: 600;
        color: var(--black);
        background: var(--white);
        padding: 1rem;
        text-decoration: none;
        border-radius: 2px;
        transition: background 0.2s, color 0.2s;
      }
 
      .cs-menu-notify:hover {
        background: var(--accent);
        color: var(--white);
      }
 
      .cs-menu-creds {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.4rem;
        font-size: 0.58rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: rgba(255,255,255,0.18);
        font-family: var(--font-body);
      }
 
      .cs-menu-creds span.dot { color: rgba(255,255,255,0.1); }
 
      .cs-menu-socials {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
      }
 
      .cs-menu-social-link {
        color: rgba(255,255,255,0.3);
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.4rem;
        height: 2.4rem;
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 50%;
        transition: color 0.2s, border-color 0.2s;
      }
 
      .cs-menu-social-link:hover {
        color: var(--white);
        border-color: rgba(255,255,255,0.35);
      }
 
      /* Show toggle, hide desktop links and ticket on mobile */
      .cs-toggle  { display: flex; }
      .nav-links  { display: none; }
      .nav-ticket { display: none; }
 
      /* Wrapper is block — starts invisible, opens on cs-active */
      .cs-ul-wrapper { display: flex; }
    }
 

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.5rem;
  margin-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.footer-legal {
  display: flex;
  gap: 1.2rem;
}

.footer-legal a {
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.2);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-legal a:hover { color: var(--white); }