:root {
      --navy: #122d4d;
      --orange: #F18D63;
      --peach: #ffbea2;
      --yellow: #FBC52D;
      --teal: #9BD2CB;
      --white: #ffffff;
      --muted: #5a6a7a;
      --border: #e5ddd6;
      --radius: 12px;
    }

/* ── NAV ── */
    header {
      padding: 20px 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 1200px;
      margin: 0 auto;
    }


     .btn-outline {
      background: transparent;
      color: var(--navy);
      border: 2px solid var(--navy);
    }


    .logo-wrap {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
    }

    .logo-mark {
      width: 38px;
      height: 38px;
    }

    .logo-word {
      height: 56px;
    }

    nav {
      display: flex;
      align-items: center;
      gap: 28px;
    }

    nav a {
      color: var(--navy);
      text-decoration: none;
      font-size: 15px;
      font-weight: 600;
      opacity: 0.75;
      transition: opacity 0.15s;
    }

    nav a:hover {
      opacity: 1;
    }


    /* ── HAMBURGER TOGGLE (mobile only) ── */
    .hamburger {
      display: none;
      /* hidden on desktop */
      background: none;
      border: none;
      cursor: pointer;
      padding: 6px;
      z-index: 1001;
    }

    .hamburger span {
      display: block;
      width: 24px;
      height: 2.5px;
      background: var(--navy);
      border-radius: 2px;
      margin: 5px 0;
      transition: transform 0.3s, opacity 0.2s;
    }

    /* Animate hamburger → X when open */
    .hamburger.open span:nth-child(1) {
      transform: translateY(7.5px) rotate(45deg);
    }

    .hamburger.open span:nth-child(2) {
      opacity: 0;
    }

    .hamburger.open span:nth-child(3) {
      transform: translateY(-7.5px) rotate(-45deg);
    }

    /* ── MOBILE MENU OVERLAY ── */
    .mobile-menu {
      display: none;
      /* hidden by default */
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(255, 255, 255, 0.97);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      z-index: 1000;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 20px;
      padding: 80px 40px 40px;
      opacity: 0;
      transition: opacity 0.3s;
    }

    .mobile-menu.open {
      display: flex;
      opacity: 1;
    }

    .mobile-menu a {
      color: var(--navy);
      text-decoration: none;
      font-size: 20px;
      font-weight: 700;
      padding: 12px 0;
      transition: color 0.15s;
    }

    .mobile-menu a:hover {
      color: var(--orange);
    }

    .mobile-menu .btn {
      width: 220px;
      text-align: center;
      margin-top: 8px;
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 768px) {
      header {
        padding: 16px 20px;
      }

      /* Hide desktop nav links, show hamburger */
      nav a {
        display: none;
      }

      .hamburger {
        display: block;
      }
    }