/* =========================================================
   NIGHT MODE TOGGLE
   ========================================================= */

.night-mode-toggle {
  display: inline-flex;
  min-height: 42px;
  gap: 8px;
  margin-left: 14px;
  padding: 9px 13px;
  border: 1px solid rgba(13, 32, 66, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  color: #102a52;
  cursor: pointer;
  font: 800 0.74rem/1 "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 10px 22px rgba(10, 32, 78, 0.08);
  align-items: center;
  justify-content: center;
  transition:
    transform 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}

.night-mode-toggle:hover,
.night-mode-toggle:focus-visible {
  border-color: rgba(26, 93, 202, 0.55);
  outline: none;
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(10, 32, 78, 0.16);
}

.mode-icon {
  display: grid;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
  place-items: center;
}

/* =========================================================
   NIGHT MODE COLORS
   ========================================================= */

body.future-home {
  transition:
    background 240ms ease,
    color 240ms ease;
}

.future-home.night-mode {
  background: #030712;
  color: #ebf5ff;
}

.future-home.night-mode .future-shell {
  background:
    radial-gradient(
      circle at 12% 8%,
      rgba(45, 112, 255, 0.16),
      transparent 28%
    ),
    radial-gradient(
      circle at 86% 22%,
      rgba(112, 63, 255, 0.13),
      transparent 26%
    ),
    linear-gradient(
      180deg,
      #071326 0%,
      #030712 46%,
      #07111f 100%
    );
}

.future-home.night-mode .future-nav {
  border-color: rgba(133, 185, 255, 0.2);
  background: rgba(5, 15, 31, 0.84);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
}

.future-home.night-mode .brand-mark {
  border-color: rgba(133, 185, 255, 0.58);
  background: linear-gradient(135deg, #102f5e, #172047);
  color: #eaf5ff;
}

.future-home.night-mode .nav-links a {
  color: #c8dcf3;
}

.future-home.night-mode .nav-links a:hover,
.future-home.night-mode .nav-links a:focus-visible {
  color: #ffffff;
}

.future-home.night-mode .night-mode-toggle {
  border-color: rgba(139, 190, 255, 0.44);
  background: rgba(16, 38, 75, 0.92);
  color: #f8fbff;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
}

.future-home.night-mode .night-mode-toggle:hover,
.future-home.night-mode .night-mode-toggle:focus-visible {
  border-color: #a9d5ff;
  background: rgba(30, 69, 128, 0.94);
}

.future-home.night-mode .signal-line,
.future-home.night-mode .card-index,
.future-home.night-mode .home-project-card > span,
.future-home.night-mode .about-snapshot span,
.future-home.night-mode .mission-strip span {
  color: #7dc5ff;
}

.future-home.night-mode h1,
.future-home.night-mode h2,
.future-home.night-mode h3,
.future-home.night-mode strong {
  color: #f2f8ff;
}

.future-home.night-mode p,
.future-home.night-mode .tech,
.future-home.night-mode .hero-lead,
.future-home.night-mode .command-readout {
  color: #c4d5ea;
}

.future-home.night-mode .mission-strip article,
.future-home.night-mode .proof-feature,
.future-home.night-mode .about-snapshot,
.future-home.night-mode .home-skill-strip article,
.future-home.night-mode .identity-card,
.future-home.night-mode .home-project-card,
.future-home.night-mode .command-center,
.future-home.night-mode .game-launchpad,
.future-home.night-mode .home-contact-form {
  border-color: rgba(125, 197, 255, 0.22);
  background: linear-gradient(
    145deg,
    rgba(11, 28, 55, 0.92),
    rgba(5, 12, 27, 0.94)
  );
  box-shadow: 0 20px 38px rgba(0, 0, 0, 0.32);
}

.future-home.night-mode .home-project-card:hover,
.future-home.night-mode .identity-card:hover,
.future-home.night-mode .proof-feature:hover {
  border-color: rgba(125, 197, 255, 0.58);
}

.future-home.night-mode .primary-action,
.future-home.night-mode .inline-action,
.future-home.night-mode .command-buttons button,
.future-home.night-mode .game-controls button,
.future-home.night-mode .game-close {
  border-color: rgba(123, 193, 255, 0.48);
  background: linear-gradient(135deg, #1b64c7, #5542bb);
  color: #ffffff;
}

.future-home.night-mode .secondary-action,
.future-home.night-mode .project-actions a,
.future-home.night-mode .email-link {
  border-color: rgba(125, 197, 255, 0.32);
  background: rgba(10, 31, 61, 0.72);
  color: #dff0ff;
}

.future-home.night-mode .command-buttons button:hover,
.future-home.night-mode .command-buttons button:focus-visible,
.future-home.night-mode .project-actions a:hover,
.future-home.night-mode .project-actions a:focus-visible,
.future-home.night-mode .email-link:hover,
.future-home.night-mode .email-link:focus-visible {
  border-color: #a9d5ff;
  outline: none;
  filter: brightness(1.15);
}

.future-home.night-mode .home-skill-strip i {
  background: linear-gradient(90deg, #4ec7ff, #9d80ff);
  box-shadow: 0 0 14px rgba(89, 183, 255, 0.52);
}

.future-home.night-mode .cursor-glow {
  background: radial-gradient(
    circle,
    rgba(81, 169, 255, 0.22),
    transparent 66%
  );
}

.future-home.night-mode .showcase-main,
.future-home.night-mode .portrait-scan,
.future-home.night-mode .showcase-chip,
.future-home.night-mode .identity-card img,
.future-home.night-mode .home-project-card img,
.future-home.night-mode .proof-feature img,
.future-home.night-mode .mini-game-card img {
  filter: brightness(0.76) saturate(0.9) contrast(1.08);
}

.future-home.night-mode .game-overlay {
  background: rgba(1, 5, 18, 0.88);
}

.future-home.night-mode .game-panel,
.future-home.night-mode .game-sky {
  border-color: rgba(125, 197, 255, 0.26);
  background-color: #07152b;
}

/* =========================================================
   MOBILE NAVIGATION
   ========================================================= */

@media (max-width: 760px) {
  .future-nav {
    flex-wrap: wrap;
  }

  .future-nav .night-mode-toggle {
    margin-left: auto;
  }

  .night-mode-toggle {
    min-height: 38px;
    margin-left: 0;
    padding: 8px 11px;
    font-size: 0.7rem;
  }
}

@media (max-width: 480px) {
  .night-mode-toggle .mode-label {
    display: none;
  }

  .night-mode-toggle {
    width: 40px;
    padding: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .night-mode-toggle,
  body.future-home {
    transition: none;
  }
}
/* FIX: ABOUT SNAPSHOT CARD CONTRAST IN NIGHT MODE */

.future-home.night-mode .about-snapshot > div {
  border: 1px solid rgba(125, 197, 255, 0.3) !important;
  background: linear-gradient(
    145deg,
    rgba(13, 34, 67, 0.98),
    rgba(5, 13, 29, 0.98)
  ) !important;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.35) !important;
}

.future-home.night-mode .about-snapshot > div span {
  color: #7fc8ff !important;
}

.future-home.night-mode .about-snapshot > div strong {
  color: #ffffff !important;
}

.future-home.night-mode .about-snapshot > div p {
  color: #c7d9ed !important;
}
/* FIX: PROCESS CARD CONTRAST IN NIGHT MODE */

.future-home.night-mode .home-timeline li {
  border: 1px solid rgba(125, 197, 255, 0.3) !important;
  background: linear-gradient(
    145deg,
    rgba(13, 34, 67, 0.98),
    rgba(5, 13, 29, 0.98)
  ) !important;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.35) !important;
}

.future-home.night-mode .home-timeline li b {
  color: #ffffff !important;
}

.future-home.night-mode .home-timeline li p {
  color: #c7d9ed !important;
}

.future-home.night-mode .home-timeline li::before {
  color: #ff5b9b !important;
}
/* =========================================================
   SUBTLE NAVIGATION BAR
   ========================================================= */

.future-nav {
  min-height: 58px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(125, 197, 255, 0.12) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Smaller, quieter logo */
.brand-mark {
  width: 38px !important;
  height: 38px !important;
  border-width: 1px !important;
  box-shadow: none !important;
}

.brand-mark span {
  font-size: 0.78rem !important;
}

/* Cleaner navigation links */
.nav-links {
  gap: clamp(18px, 2.2vw, 34px) !important;
}

.nav-links a {
  color: rgba(218, 232, 248, 0.82) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  color: #ffffff !important;
}

/* Make Day/Night Mode look like a quiet utility control */
.night-mode-toggle {
  min-height: 34px !important;
  gap: 6px !important;
  padding: 7px 10px !important;
  border: 1px solid rgba(125, 197, 255, 0.2) !important;
  border-radius: 999px !important;
  background: rgba(125, 197, 255, 0.06) !important;
  box-shadow: none !important;
  color: rgba(226, 240, 255, 0.84) !important;
  font-size: 0.68rem !important;
}

.night-mode-toggle:hover,
.night-mode-toggle:focus-visible {
  border-color: rgba(125, 197, 255, 0.52) !important;
  background: rgba(125, 197, 255, 0.13) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Keep it subtle in dark mode too */
.future-home.night-mode .future-nav {
  background: rgba(3, 10, 22, 0.32) !important;
  border-bottom-color: rgba(125, 197, 255, 0.14) !important;
  box-shadow: none !important;
}

.future-home.night-mode .night-mode-toggle {
  background: rgba(125, 197, 255, 0.06) !important;
  color: rgba(231, 242, 255, 0.84) !important;
}

/* Phone layout */
@media (max-width: 760px) {
  .future-nav {
    min-height: 54px !important;
    padding: 0 4px !important;
  }

  .nav-links {
    gap: 13px !important;
  }

  .nav-links a {
    font-size: 0.72rem !important;
  }
}
/* =========================================================
   SCROLLING SIDE NAVIGATION
   Desktop only
   ========================================================= */

@media (min-width: 761px) {
  .future-nav {
    z-index: 100;
    transition:
      width 220ms ease,
      padding 220ms ease,
      background 220ms ease,
      border-radius 220ms ease,
      box-shadow 220ms ease;
  }

  .future-nav.is-side-nav {
    position: fixed !important;
    top: 50% !important;
    right: 18px !important;
    left: auto !important;
    z-index: 1000 !important;

    width: 92px !important;
    min-height: auto !important;
    padding: 12px 8px !important;

    border: 1px solid rgba(125, 197, 255, 0.2) !important;
    border-radius: 16px !important;
    background: rgba(5, 15, 31, 0.88) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28) !important;
    backdrop-filter: blur(14px);

    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: center !important;

    transform: translateY(-50%);
    animation: sideNavEnter 220ms ease both;
  }

  .future-nav.is-side-nav .brand-mark {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 auto;
  }

  .future-nav.is-side-nav .brand-mark span {
    font-size: 0.72rem !important;
  }

  .future-nav.is-side-nav .nav-links {
    display: flex !important;
    width: 100%;
    gap: 8px !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .future-nav.is-side-nav .nav-links a {
    width: 100%;
    padding: 5px 2px !important;
    color: rgba(224, 239, 255, 0.84) !important;
    font-size: 0.67rem !important;
    font-weight: 700 !important;
    line-height: 1.1;
    text-align: center;
  }

  .future-nav.is-side-nav .nav-links a:hover,
  .future-nav.is-side-nav .nav-links a:focus-visible {
    color: #ffffff !important;
  }

  .future-nav.is-side-nav .night-mode-toggle {
    width: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 7px !important;
  }

  .future-nav.is-side-nav .night-mode-toggle .mode-label,
  .future-nav.is-side-nav .night-mode-toggle #nightModeText {
    display: none !important;
  }
}

@keyframes sideNavEnter {
  from {
    opacity: 0;
    transform: translate(16px, -50%) scale(0.92);
  }

  to {
    opacity: 1;
    transform: translate(0, -50%) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .future-nav,
  .future-nav.is-side-nav {
    transition: none !important;
    animation: none !important;
  }
}
/* =========================================================
   FINAL MOBILE NAVIGATION OVERRIDE
   ========================================================= */

@media (max-width: 760px) {
  /* Normal phone navbar at the top */
  .future-nav:not(.is-side-nav) {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) 36px !important;
    min-height: 62px !important;
    padding: 8px 6px !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  .future-nav:not(.is-side-nav) .brand-mark {
    width: 36px !important;
    height: 36px !important;
  }

  .future-nav:not(.is-side-nav) .nav-links {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: clamp(7px, 2.4vw, 13px) !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .future-nav:not(.is-side-nav) .nav-links a {
    width: auto !important;
    min-height: 0 !important;
    padding: 5px 0 !important;
    font-size: clamp(0.61rem, 2.35vw, 0.72rem) !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .future-nav:not(.is-side-nav) .night-mode-toggle {
    display: grid !important;
    width: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 6px !important;
    place-items: center !important;
  }

  .future-nav:not(.is-side-nav) .night-mode-toggle .mode-label {
    display: none !important;
  }

  /* Compact right-side navigation after scrolling */
  .future-nav.is-side-nav {
    position: fixed !important;
    top: 50% !important;
    right: 8px !important;
    left: auto !important;
    z-index: 9999 !important;

    display: flex !important;
    width: 76px !important;
    min-height: auto !important;
    padding: 10px 6px !important;
    gap: 9px !important;

    border: 1px solid rgba(49, 95, 213, 0.24) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 16px 34px rgba(21, 47, 86, 0.2) !important;
    backdrop-filter: blur(14px);

    flex-direction: column !important;
    align-items: center !important;
    transform: translateY(-50%) !important;
  }

  .future-nav.is-side-nav .brand-mark {
    width: 32px !important;
    height: 32px !important;
  }

  .future-nav.is-side-nav .nav-links {
    display: flex !important;
    width: 100% !important;
    gap: 7px !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .future-nav.is-side-nav .nav-links a {
    width: 100% !important;
    min-height: 0 !important;
    padding: 5px 1px !important;
    color: #14213d !important;
    font-size: 0.58rem !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    text-align: center !important;
  }

  .future-nav.is-side-nav .night-mode-toggle {
    display: grid !important;
    width: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 6px !important;
    place-items: center !important;
  }

  .future-nav.is-side-nav .night-mode-toggle .mode-label {
    display: none !important;
  }

  /* Dark-mode side rail */
  .future-home.night-mode .future-nav.is-side-nav {
    border-color: rgba(125, 197, 255, 0.3) !important;
    background: rgba(5, 15, 31, 0.94) !important;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.38) !important;
  }

  .future-home.night-mode .future-nav.is-side-nav .nav-links a {
    color: #dbeaff !important;
  }

  .future-home.night-mode .future-nav.is-side-nav .night-mode-toggle {
    border-color: rgba(125, 197, 255, 0.4) !important;
    background: rgba(125, 197, 255, 0.1) !important;
    color: #edf6ff !important;
  }
}
/* =========================================================
   ROUNDED NAVIGATION CORNERS
   ========================================================= */

.future-nav {
  border-radius: 18px !important;
}

@media (max-width: 760px) {
  .future-nav:not(.is-side-nav) {
    border-radius: 16px !important;
  }

  .future-nav.is-side-nav {
    border-radius: 16px !important;
  }
}
/* =========================================================
   COMPACT SIDE DROPDOWN NAVIGATION
   ========================================================= */

/* The hamburger stays hidden while the normal top navbar is visible. */
.side-menu-toggle {
  display: none;
}

/* Compact icon rail after scrolling. */
.future-nav.is-side-nav {
  position: fixed !important;
  top: 50% !important;
  right: 10px !important;
  left: auto !important;
  z-index: 9999 !important;

  display: grid !important;
  width: 54px !important;
  min-height: auto !important;
  padding: 8px !important;
  gap: 8px !important;

  border: 1px solid rgba(125, 197, 255, 0.28) !important;
  border-radius: 18px !important;
  background: rgba(5, 15, 31, 0.94) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(14px);

  align-items: center !important;
  justify-items: center !important;
  transform: translateY(-50%) !important;
}

/* Hide the large logo and link list until menu is opened. */
.future-nav.is-side-nav .brand-mark {
  display: none !important;
}

.future-nav.is-side-nav .nav-links {
  display: none !important;
}

/* Keep the night-mode control as a small icon. */
.future-nav.is-side-nav .night-mode-toggle {
  display: grid !important;
  width: 36px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 6px !important;

  place-items: center !important;
}

.future-nav.is-side-nav .night-mode-toggle .mode-label {
  display: none !important;
}

/* Menu button only appears after scrolling. */
.future-nav.is-side-nav .side-menu-toggle {
  display: grid !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;

  border: 1px solid rgba(125, 197, 255, 0.42) !important;
  border-radius: 50% !important;
  background: rgba(125, 197, 255, 0.1) !important;
  color: #edf6ff !important;
  cursor: pointer;
  font-size: 1.2rem !important;

  place-items: center !important;
}

.future-nav.is-side-nav .side-menu-toggle:hover,
.future-nav.is-side-nav .side-menu-toggle:focus-visible {
  border-color: #b7e2ff !important;
  background: rgba(125, 197, 255, 0.2) !important;
  outline: none;
}

/* The links open as a dropdown panel to the left of the small rail. */
.future-nav.is-side-nav.is-side-menu-open .nav-links {
  position: absolute !important;
  top: 0 !important;
  right: calc(100% + 10px) !important;

  display: flex !important;
  width: min(210px, calc(100vw - 90px)) !important;
  padding: 9px !important;
  gap: 4px !important;

  border: 1px solid rgba(125, 197, 255, 0.28) !important;
  border-radius: 14px !important;
  background: rgba(5, 15, 31, 0.97) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38) !important;
  backdrop-filter: blur(16px);

  flex-direction: column !important;
  align-items: stretch !important;
}

.future-nav.is-side-nav.is-side-menu-open .nav-links a {
  width: 100% !important;
  min-height: 40px !important;
  padding: 11px 12px !important;

  border-radius: 8px !important;
  color: #dbeaff !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  text-align: left !important;
}

.future-nav.is-side-nav.is-side-menu-open .nav-links a:hover,
.future-nav.is-side-nav.is-side-menu-open .nav-links a:focus-visible {
  background: rgba(125, 197, 255, 0.14) !important;
  color: #ffffff !important;
  outline: none;
}

/* Light-mode dropdown version. */
.future-home:not(.night-mode) .future-nav.is-side-nav {
  border-color: rgba(49, 95, 213, 0.24) !important;
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 16px 34px rgba(21, 47, 86, 0.18) !important;
}

.future-home:not(.night-mode)
  .future-nav.is-side-nav
  .side-menu-toggle {
  border-color: rgba(49, 95, 213, 0.35) !important;
  background: rgba(49, 95, 213, 0.08) !important;
  color: #14213d !important;
}

.future-home:not(.night-mode)
  .future-nav.is-side-nav.is-side-menu-open
  .nav-links {
  border-color: rgba(49, 95, 213, 0.2) !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 18px 42px rgba(21, 47, 86, 0.18) !important;
}

.future-home:not(.night-mode)
  .future-nav.is-side-nav.is-side-menu-open
  .nav-links
  a {
  color: #14213d !important;
}

.future-home:not(.night-mode)
  .future-nav.is-side-nav.is-side-menu-open
  .nav-links
  a:hover,
.future-home:not(.night-mode)
  .future-nav.is-side-nav.is-side-menu-open
  .nav-links
  a:focus-visible {
  background: rgba(49, 95, 213, 0.09) !important;
  color: #315fd5 !important;
}
/* =========================================================
   SIDE DROPDOWN: DARK MODE INSIDE MENU
   ========================================================= */

.side-menu-toggle,
.dropdown-night-toggle {
  display: none;
}

/* The normal top navbar keeps its original Day/Night button. */
.future-nav:not(.is-side-nav) .top-night-toggle {
  display: inline-flex !important;
}

.future-nav:not(.is-side-nav) .dropdown-night-toggle,
.future-nav:not(.is-side-nav) .side-menu-toggle {
  display: none !important;
}

/* Small menu rail after the visitor scrolls. */
.future-nav.is-side-nav {
  position: fixed !important;
  top: 50% !important;
  right: 10px !important;
  left: auto !important;
  z-index: 9999 !important;

  display: grid !important;
  width: 54px !important;
  min-height: auto !important;
  padding: 8px !important;

  border: 1px solid rgba(125, 197, 255, 0.28) !important;
  border-radius: 18px !important;
  background: rgba(5, 15, 31, 0.94) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(14px);

  place-items: center !important;
  transform: translateY(-50%) !important;
}

/* Keep the compact side rail out of the way. */
.future-nav.is-side-nav .brand-mark,
.future-nav.is-side-nav .top-night-toggle {
  display: none !important;
}

.future-nav.is-side-nav .nav-links {
  display: none !important;
}

/* The only visible control while collapsed. */
.future-nav.is-side-nav .side-menu-toggle {
  display: grid !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;

  border: 1px solid rgba(125, 197, 255, 0.42) !important;
  border-radius: 50% !important;
  background: rgba(125, 197, 255, 0.1) !important;
  color: #edf6ff !important;
  cursor: pointer;
  font-size: 1.2rem !important;

  place-items: center !important;
}

.future-nav.is-side-nav .side-menu-toggle:hover,
.future-nav.is-side-nav .side-menu-toggle:focus-visible {
  border-color: #b7e2ff !important;
  background: rgba(125, 197, 255, 0.2) !important;
  outline: none;
}

/* Open dropdown panel. */
.future-nav.is-side-nav.is-side-menu-open .nav-links {
  position: absolute !important;
  top: 50% !important;
  right: calc(100% + 10px) !important;

  display: flex !important;
  width: min(220px, calc(100vw - 84px)) !important;
  padding: 9px !important;
  gap: 4px !important;

  border: 1px solid rgba(125, 197, 255, 0.28) !important;
  border-radius: 14px !important;
  background: rgba(5, 15, 31, 0.98) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(16px);

  flex-direction: column !important;
  align-items: stretch !important;
  transform: translateY(-50%) !important;
}

.future-nav.is-side-nav.is-side-menu-open .nav-links a {
  width: 100% !important;
  min-height: 40px !important;
  padding: 11px 12px !important;

  border-radius: 8px !important;
  color: #dbeaff !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  text-align: left !important;
}

.future-nav.is-side-nav.is-side-menu-open .nav-links a:hover,
.future-nav.is-side-nav.is-side-menu-open .nav-links a:focus-visible {
  background: rgba(125, 197, 255, 0.14) !important;
  color: #ffffff !important;
  outline: none;
}

/* Dark/Day Mode button now appears inside the open menu. */
.future-nav.is-side-nav.is-side-menu-open .dropdown-night-toggle {
  display: inline-flex !important;
  width: 100% !important;
  min-height: 42px !important;
  margin-top: 5px !important;
  padding: 10px 12px !important;

  border: 1px solid rgba(125, 197, 255, 0.4) !important;
  border-radius: 8px !important;
  background: rgba(125, 197, 255, 0.1) !important;
  color: #edf6ff !important;
  cursor: pointer;
  font-size: 0.78rem !important;
  font-weight: 800 !important;

  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.future-nav.is-side-nav.is-side-menu-open .dropdown-night-toggle:hover,
.future-nav.is-side-nav.is-side-menu-open .dropdown-night-toggle:focus-visible {
  border-color: #b7e2ff !important;
  background: rgba(125, 197, 255, 0.2) !important;
  outline: none;
}

/* Light-mode version of the side dropdown. */
.future-home:not(.night-mode) .future-nav.is-side-nav {
  border-color: rgba(49, 95, 213, 0.24) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 16px 34px rgba(21, 47, 86, 0.18) !important;
}

.future-home:not(.night-mode)
  .future-nav.is-side-nav
  .side-menu-toggle {
  border-color: rgba(49, 95, 213, 0.35) !important;
  background: rgba(49, 95, 213, 0.08) !important;
  color: #14213d !important;
}

.future-home:not(.night-mode)
  .future-nav.is-side-nav.is-side-menu-open
  .nav-links {
  border-color: rgba(49, 95, 213, 0.2) !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 18px 42px rgba(21, 47, 86, 0.18) !important;
}

.future-home:not(.night-mode)
  .future-nav.is-side-nav.is-side-menu-open
  .nav-links
  a {
  color: #14213d !important;
}

.future-home:not(.night-mode)
  .future-nav.is-side-nav.is-side-menu-open
  .dropdown-night-toggle {
  border-color: rgba(49, 95, 213, 0.35) !important;
  background: rgba(49, 95, 213, 0.08) !important;
  color: #14213d !important;
}
/* =========================================================
   TRANSPARENT SIDE DROPDOWN MENU
   ========================================================= */

.future-nav.is-side-nav.is-side-menu-open .nav-links {
  background: transparent !important;
  backdrop-filter: none !important;
}

/* Light-mode dropdown stays transparent too. */
.future-home:not(.night-mode)
  .future-nav.is-side-nav.is-side-menu-open
  .nav-links {
  background: transparent !important;
  backdrop-filter: none !important;
}
/* =========================================================
   TRANSPARENT SIDE DROPDOWN MENU
   ========================================================= */

.future-nav.is-side-nav.is-side-menu-open .nav-links {
  background: transparent !important;
  backdrop-filter: none !important;
}

/* =========================================================
   TRANSPARENT SIDE DROPDOWN MENU
   ========================================================= */

.future-nav.is-side-nav.is-side-menu-open .nav-links {
  background: transparent !important;
  backdrop-filter: none !important;
}

/* Light-mode dropdown stays transparent too. */
.future-home:not(.night-mode)
  .future-nav.is-side-nav.is-side-menu-open
  .nav-links {
  background: transparent !important;
  backdrop-filter: none !important;
}

/* Make the Day/Night button inside the dropdown transparent too. */
.future-nav.is-side-nav.is-side-menu-open .dropdown-night-toggle {
  background: transparent !important;
}
/* Transparent light-mode side-nav container */
.future-home:not(.night-mode) .future-nav.is-side-nav {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
/* Transparent dark-mode side-nav container */
.future-home.night-mode .future-nav.is-side-nav {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
/* =========================================================
   JAIRE DEVELOPMENT NAVBAR LOGO
   ========================================================= */

.brand-mark {
  display: grid !important;
  width: 46px !important;
  height: 46px !important;
  padding: 4px !important;
  overflow: hidden !important;
  border: 1px solid rgba(0, 141, 228, 0.5) !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 0 14px rgba(0, 141, 228, 0.18) !important;
  place-items: center !important;
}

.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: contain;
}

.future-home.night-mode .brand-mark {
  background: #ffffff !important;
  border-color: rgba(125, 197, 255, 0.65) !important;
}

@media (max-width: 760px) {
  .brand-mark {
    width: 42px !important;
    height: 42px !important;
  }
}
/* =========================================================
   JAIRE DEVELOPMENT NAVBAR LOGO FIX
   ========================================================= */

.brand-mark {
  display: flex !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  padding: 4px !important;
  overflow: hidden !important;
  border: 1px solid rgba(0, 141, 228, 0.55) !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 0 14px rgba(0, 141, 228, 0.2) !important;
  align-items: center !important;
  justify-content: center !important;
}

.brand-mark img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  border-radius: 50% !important;
  object-fit: contain !important;
}

.future-home.night-mode .brand-mark {
  background: #ffffff !important;
  border-color: rgba(125, 197, 255, 0.7) !important;
}

@media (max-width: 760px) {
  .brand-mark {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }
}
  

/* MULTI-PAGE NIGHT MODE */
.future-home.night-mode .page-hero-visual,
.future-home.night-mode .service-card,
.future-home.night-mode .package-grid article,
.future-home.night-mode .value-grid article,
.future-home.night-mode .preview-steps li,
.future-home.night-mode .contact-method-card,
.future-home.night-mode .final-cta,
.future-home.night-mode .site-footer {
  border-color: rgba(125, 197, 255, 0.22);
}

.future-home.night-mode .service-card,
.future-home.night-mode .package-grid article,
.future-home.night-mode .value-grid article,
.future-home.night-mode .preview-steps li,
.future-home.night-mode .contact-method-card,
.future-home.night-mode .final-cta {
  background: linear-gradient(145deg, rgba(11, 28, 55, 0.92), rgba(5, 12, 27, 0.94));
}

.future-home.night-mode .page-hero-visual img,
.future-home.night-mode .profile-portrait img {
  filter: brightness(0.78) saturate(0.92) contrast(1.08);
}

.future-home.night-mode .site-footer a,
.future-home.night-mode .service-card strong,
.future-home.night-mode .full-process li p strong {
  color: #f2f8ff;
}
body.night-mode .service-details li {
  color: #cbd5e1;
}

body.night-mode .service-details li::marker {
  color: #94a3b8;
}