body{margin:0;font-family:Arial,sans-serif;background:#07101B;color:white;position:relative;overflow-x:hidden}

.site-header { position: fixed; top: 0; left: 0; right: 0; display:flex; justify-content:space-between; align-items:center; height:130px; padding:0 80px 0 40px; background:rgba(2,7,13,.85); backdrop-filter:blur(18px); z-index:50; overflow:visible; } 

.brand { color: var(--text); text-decoration: none; display: flex; gap: 10px; align-items: center; font-family: Cinzel, serif; letter-spacing: 0.08em; text-transform: uppercase; } 

.brand img { height:180px; width:auto; max-width:none; position:relative; top:23px; display:block; } 

.brand-mark { color: var(--cyan); text-shadow: 0 0 20px var(--gold); } nav { display:flex; align-items:center; gap:42px; } nav a { color:var(--muted); text-decoration:none; font-weight:600; font-size:.9rem; transition:all .3s ease; } nav a:hover { color:#F4C542; } 

.nav-cta { color: var(--cyan); }

.site-header nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 42px;
  white-space: nowrap;
  height: auto;
  padding: 0;
}

.page-menu-wrap {
  position: relative;
  display: flex;
  align-items: center;
  z-index: 500;
}

.hamburger-menu {
  width: 46px;
  height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(90,190,255,.35);
  background: rgba(12,23,39,.95);
  display: grid;
  place-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 9px;
}

.hamburger-menu span {
  display: block;
  width: 24px;
  height: 2px;
  background: white;
  border-radius: 999px;
}

.page-dropdown {
  position: absolute;
  top: 52px;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 220px;
  gap: 22px;
  padding: 14px 18px;
  background: #02070D;
  border: 1px solid rgba(90,190,255,.35);
  border-radius: 14px;
  box-shadow: 0 0 30px rgba(30,136,255,.22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 9999;
}

.page-dropdown.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.page-dropdown a {
  color: white;
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
}

.page-dropdown a:hover {
  color: #F4C542;
}

.cropped1{width: 800; height: 600; object-fit: cover;}


.btn{padding:14px 24px;border-radius:10px;text-decoration:none;color:white;border:none}

.primary {
  background:#1E88FF;
  transition:all .3s ease;
}

.primary:hover {
  background:#F4C542;
  color:#07101B;

  transform:translateY(-2px);

  box-shadow:
    0 0 12px rgba(244,197,66,.35),
    0 0 30px rgba(244,197,66,.20);
}

.secondary {
  border:1px solid rgba(255,255,255,.15);
  color:white;
  transition:all .3s ease;
}

.secondary:hover {
  color:#F4C542;

  border-color:rgba(244,197,66,.6);
  
  transform:translateY(-2px);


  box-shadow:
    0 0 12px rgba(244,197,66,.25),
    0 0 24px rgba(244,197,66,.12);
}

.section{padding:80px 60px}


.grid-buttons{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:15px}

.grid-buttons button{padding:14px;background:#1E88FF;color:white;border:none;border-radius:8px}

.meter{height:18px;background:#02070D;border-radius:999px;margin-top:20px;overflow:hidden}
#meterBar{height:100%;width:10%;background:#1E88FF;transition:.3s}
.contact-box{background:#0C1727;padding:30px;border-radius:18px;max-width:700px}
input,textarea{width:100%;padding:14px;margin:10px 0 20px;background:#09111B;border:1px solid rgba(255,255,255,.08);border-radius:10px;color:white}
footer{text-align:center;padding:30px;background:#02070D;color:#8EA0B2}



.nav-links a {
    color:white;
    text-decoration:none;
    margin-left:0;
    letter-spacing:1px;
    transition:all .3s ease;
}

.nav-links a:hover {
    color:#F4C542;
}

@media(max-width:900px) {
  

  .logo img {
    width: 600px;
    height: auto;
    max-width: 110vw;
    max-height: none;
    position: relative;
    top: 10px;
  }

  .hero {
    padding: 50px 22px;
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .hero h1 {
    font-size:42px;
  }

  .hero-image {
    height: 440px !important;
  }

  .hero-image .hero-photo {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transform: none;
  }
}

/* ================================
   GLOBAL MERIDIAN NORTH EFFECTS
   Logo sizing/location above is intentionally unchanged.
================================ */

.cursor-glow {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  background: radial-gradient(circle, rgba(0, 170, 255, 0.24), rgba(0, 170, 255, 0.08) 35%, transparent 68%);
  transform: translate(-50%, -50%);
  filter: blur(12px);
  opacity: 0;
  transition: opacity 0.25s ease;
  mix-blend-mode: screen;
}

.site-particles {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}

.site-particles span {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(90, 190, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(90, 190, 255, 0.9);
  animation: particleFloat 18s linear infinite;
}

body.home-page .site-particles span { opacity: 0.9; }
body.about-page .site-particles span { opacity: 0.65; }
body.services-page .site-particles span { opacity: 0.35; }
body.portfolio-page .site-particles span { opacity: 0.45; }
body.contact-page .site-particles span { opacity: 0.18; }

.site-particles span:nth-child(1) { left: 8%; top: 20%; animation-delay: 0s; }
.site-particles span:nth-child(2) { left: 18%; top: 70%; animation-delay: 3s; }
.site-particles span:nth-child(3) { left: 32%; top: 40%; animation-delay: 6s; }
.site-particles span:nth-child(4) { left: 48%; top: 80%; animation-delay: 1s; }
.site-particles span:nth-child(5) { left: 60%; top: 25%; animation-delay: 8s; }
.site-particles span:nth-child(6) { left: 74%; top: 55%; animation-delay: 4s; }
.site-particles span:nth-child(7) { left: 86%; top: 18%; animation-delay: 7s; }
.site-particles span:nth-child(8) { left: 92%; top: 78%; animation-delay: 2s; }
.site-particles span:nth-child(9) { left: 40%; top: 12%; animation-delay: 9s; }
.site-particles span:nth-child(10) { left: 68%; top: 88%; animation-delay: 5s; }

@keyframes particleFloat {
  0% { transform: translateY(0) scale(1); opacity: 0.25; }
  50% { transform: translateY(-45px) scale(1.4); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 0.25; }
}

.reveal {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Keep logo above global animations */
nav {
  position: relative;
  z-index: 50;
  overflow: visible;
}

.logo {
  position: relative;
  z-index: 60;
  overflow: visible;
}

.logo a {
  position: relative;
  z-index: 61;
  display: block;
}

.logo img {
  position: relative;
  z-index: 62;
}

/* Home Page Constellation Layer */

#constellationCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;

  z-index: 2;
}

/* Audio Routing Simulator Modal */

.simulator-launch-card {
  background: rgba(12, 23, 39, 0.82);
  border: 1px solid rgba(90, 190, 255, 0.22);
  padding: 24px;
  border-radius: 18px;
  margin-top: 28px;
  box-shadow: 0 0 30px rgba(30, 136, 255, 0.08);
}

.simulator-modal {
  position: fixed;
  inset: 0;
  background: rgba(2, 7, 13, 0.72);
  backdrop-filter: blur(8px);
  z-index: 300;
  display: none;
  justify-content: center;
  align-items: center;
}

.simulator-modal.active {
  display: flex;
}

.simulator-window {
  width: min(1200px, 94vw);
  height: min(750px, 88vh);

  background: #0C1727;
  border: 1px solid rgba(90, 190, 255, 0.35);
  border-radius: 22px;
  position: relative;
  overflow: hidden;

  box-shadow:
    0 0 30px rgba(30, 136, 255, 0.25),
    0 0 80px rgba(30, 136, 255, 0.12);
}

.simulator-close {
  position: absolute;
  top: 8px;
  right: 12px;
  z-index: 5;
  background: rgba(2, 7, 13, 0.8);
  border: 1px solid rgba(90, 190, 255, 0.35);
  color: white;
  font-size: 26px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
}

.simulator-frame {
  width: 133%;
  height: 133%;
  border: none;

  transform: scale(0.75);
  transform-origin: top left;
}

/* ================================
   GLOBAL MERIDIAN NORTH EFFECTS
   Logo sizing/location above is intentionally unchanged.
================================ */



/* Mobile only */

@media (max-width: 900px) {
  .site-header {
  position: sticky !important;
  top: 0 !important;

  height: 118px !important;
  min-height: 118px !important;
  max-height: 118px !important;

  padding: 4px 12px !important;

  display: grid !important;
  grid-template-columns: 1fr auto !important;
  grid-template-rows: 70px 32px !important;

  align-items: center !important;
  row-gap: 0 !important;
  column-gap: 8px !important;

  overflow: visible !important;
}


  .brand img {
  width: 220px !important;
  height: auto !important;
  max-height: 78px !important;
  top: 0 !important;
  margin: 0 !important;
  display: block !important;
}

  .site-header nav {
  grid-column: 1 / -1 !important;
  grid-row: 2 / 3 !important;

  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;

  gap: 12px !important;

  margin: -4px 0 0 0 !important;
  padding: 0 !important;

  line-height: 1 !important;
  background: transparent !important;
}

  .site-header nav a {
  font-size: 0.68rem !important;
  line-height: 1 !important;
}

  .page-menu-wrap {
  grid-column: 2 / 3 !important;
  grid-row: 1 / 2 !important;

  margin: 0 !important;
  padding: 0 !important;

  justify-self: end !important;
  align-self: center !important;
}

  .hamburger-menu {
    width: 36px !important;
    height: 32px !important;
    padding: 6px !important;
  }

  .hamburger-menu span {
    width: 21px !important;
  }

  .page-dropdown {
    position: absolute !important;
    top: 40px !important;
    right: 0 !important;
    left: auto !important;
    transform: none !important;

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

    background: #02070D !important;
    z-index: 99999 !important;
  }
  
}