/* ============================================
   NAVIGATION COMPONENT — SINGLE UNDERLINE
   ============================================ */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid #EEEEEE;
  background: rgba(255, 255, 255, 0.55);
  /* Backdrop filter kept CONSTANT — transitioning it forces the
     browser to repaint every element behind the navbar on every
     frame, which can make the navbar visually disappear during
     scroll. Only transition the cheap properties below. */
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  box-shadow: 0 6px 24px rgba(42, 58, 140, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
  /* Pin the navbar to its own GPU compositor layer so it never
     disappears when sections toggle their visibility/containment
     underneath. transform: translateZ(0) is the most widely
     supported compositor hint. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
  /* Hardware-accelerate the layer so backdrop-filter has a stable
     snapshot of the page behind it. */
  isolation: isolate;
}

.navbar.scrolled {
  background-color: rgba(238, 238, 238, 0.92);
  border-bottom-color: #EEEEEE;
  box-shadow: 0 10px 32px rgba(42, 58, 140, 0.1), 0 2px 6px rgba(0, 0, 0, 0.05);
}

.navbar.transparent {
  background-color: rgba(255, 255, 255, 0.55);
  border-bottom: 1px solid #EEEEEE;
  box-shadow: 0 6px 24px rgba(42, 58, 140, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.navbar-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88px;
}

@media (min-width: 768px) {
  .navbar-inner {
    padding: 0 1.5rem;
    height: 96px;
  }
}

@media (min-width: 1280px) {
  .navbar-inner {
    padding: 0 1.75rem;
    height: 100px;
  }
}

@media (min-width: 1920px) {
  .navbar-inner {
    padding: 0 2rem;
    height: 110px;
  }
}

@media (min-width: 2560px) {
  .navbar-inner {
    padding: 0 2.5rem;
    height: 120px;
  }
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.navbar-brand:hover {
  opacity: 0.8;
}

.navbar-logo-image {
  width: 90px;
  height: 90px;
  object-fit: contain;
}

@media (max-width: 768px) {
  .navbar-logo-image {
    width: 80px;
    height: 80px;
  }
}

@media (max-width: 480px) {
  .navbar-logo-image {
    width: 70px;
    height: 70px;
  }
}

@media (max-width: 360px) {
  .navbar-logo-image {
    width: 60px;
    height: 60px;
  }
}

@media (min-width: 1280px) {
  .navbar-logo-image {
    width: 100px;
    height: 100px;
  }
}

@media (min-width: 1920px) {
  .navbar-logo-image {
    width: 115px;
    height: 115px;
  }
}

@media (min-width: 2560px) {
  .navbar-logo-image {
    width: 130px;
    height: 130px;
  }
}

.navbar-brand-text {
  display: none;
}

@media (max-width: 639px) {
  .navbar-brand-text {
    display: none;
  }
}

@media (min-width: 640px) {
  .navbar-brand-text {
    display: flex;
    flex-direction: column;
  }
}

.navbar-brand-title {
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-weight: 600;
  color: #2A3A8C;
  line-height: 1;
}

.navbar-brand-subtitle {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(42, 58, 140, 0.7);
  line-height: 1;
  margin-top: 2px;
}

/* ── NAV LINKS ── */
.navbar-nav {
  display: none;
  align-items: center;
  gap: 0.25rem;
  position: relative;
}

@media (min-width: 1024px) {
  .navbar-nav {
    display: flex;
  }
}

.nav-link {
  position: relative;
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  color: rgba(42, 58, 140, 0.7);
  font-weight: 500;
  transition: color 0.25s ease;
  text-decoration: none;
  cursor: pointer;
}

@media (min-width: 1440px) {
  .nav-link {
    font-size: 14px;
    padding: 0.5rem 1.15rem;
  }
}

@media (min-width: 1920px) {
  .nav-link {
    font-size: 15px;
    padding: 0.6rem 1.4rem;
  }
}

@media (min-width: 2560px) {
  .nav-link {
    font-size: 17px;
    padding: 0.75rem 1.75rem;
  }
}

.nav-link:hover {
  color: rgba(42, 58, 140, 0.7);
}

.nav-link.active {
  color: #2A3A8C !important;
  font-weight: 600;
}

/* ── SINGLE UNDERLINE (moves between links) ── */
.nav-underline {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: #2A3A8C;
  border-radius: 2px;
  transition: left 380ms cubic-bezier(0.22, 1, 0.36, 1), width 380ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: left, width;
  display: none;
  pointer-events: none;
}

.nav-underline.visible {
  display: block;
}

/* ── SCHEDULE BUTTON — PREMIUM ANIMATED ── */
.navbar-cta {
  position: relative;
  display: none;
  align-items: center;
  gap: 0.55rem;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.85rem 1.6rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  color: #ffffff;
  /* Premium gradient: deep amber → orange → gold (more "attractive" than flat orange) */
  background:
    linear-gradient(120deg, #C2410C 0%, #E48A24 40%, #F4A93B 60%, #E48A24 100%);
  background-size: 220% 100%;
  background-position: 0% 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 8px 20px rgba(228, 138, 36, 0.40),
    0 2px 6px rgba(194, 65, 12, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10);
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    background-position 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    letter-spacing 0.4s ease;
  animation: cta-breathe 3.2s ease-in-out infinite;
  will-change: transform, box-shadow;
}

@keyframes cta-breathe {
  0%, 100% {
    box-shadow:
      0 8px 20px rgba(228, 138, 36, 0.40),
      0 2px 6px rgba(194, 65, 12, 0.20),
      inset 0 1px 0 rgba(255, 255, 255, 0.30),
      inset 0 -1px 0 rgba(0, 0, 0, 0.10);
  }
  50% {
    box-shadow:
      0 12px 30px rgba(228, 138, 36, 0.55),
      0 4px 10px rgba(194, 65, 12, 0.30),
      inset 0 1px 0 rgba(255, 255, 255, 0.40),
      inset 0 -1px 0 rgba(0, 0, 0, 0.10);
  }
}

/* Sheen that travels across the button on hover */
.navbar-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 65%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.0) 30%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0.0) 70%,
    transparent 100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
  z-index: 1;
  transition: left 1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Expanding glow ring on hover */
.navbar-cta::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: linear-gradient(120deg, #E48A24, #F4A93B, #E48A24);
  background-size: 200% 100%;
  opacity: 0;
  filter: blur(10px);
  z-index: -1;
  pointer-events: none;
  transition: opacity 0.5s ease;
  animation: cta-ring-spin 4s linear infinite paused;
}

.navbar-cta > * {
  position: relative;
  z-index: 2;
}

@media (min-width: 1024px) {
  .navbar-cta {
    display: flex;
  }
}

@media (min-width: 1440px) {
  .navbar-cta {
    font-size: 13px;
    padding: 0.85rem 1.75rem;
    border-radius: 44px;
  }
}

@media (min-width: 1920px) {
  .navbar-cta {
    font-size: 14px;
    padding: 1rem 2rem;
    border-radius: 48px;
  }
}

@media (min-width: 2560px) {
  .navbar-cta {
    font-size: 16px;
    padding: 1.1rem 2.5rem;
    border-radius: 52px;
  }
}

.navbar-cta:hover {
  background-position: 100% 50%;
  transform: translateY(-4px) scale(1.04);
  letter-spacing: 0.22em;
  box-shadow:
    0 18px 38px rgba(228, 138, 36, 0.55),
    0 6px 14px rgba(194, 65, 12, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.40),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10);
  animation: none;
}

.navbar-cta:hover::before {
  left: 130%;
}

.navbar-cta:hover::after {
  opacity: 1;
  animation-play-state: running;
}

@keyframes cta-ring-spin {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.navbar-cta:active {
  transform: translateY(-1px) scale(1.0);
  transition-duration: 0.15s;
  box-shadow:
    0 6px 16px rgba(228, 138, 36, 0.30),
    0 2px 4px rgba(0, 0, 0, 0.10);
}

.navbar-cta.default {
  /* base styles above already cover this */
}

.navbar-cta.active {
  background:
    linear-gradient(120deg, #1E2B6E 0%, #2A3A8C 40%, #4A5FCE 60%, #2A3A8C 100%);
  background-size: 220% 100%;
  background-position: 0% 50%;
  color: #ffffff;
  box-shadow:
    0 8px 20px rgba(42, 58, 140, 0.40),
    0 2px 6px rgba(30, 43, 110, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(0, 0, 0, 0.10);
  animation: cta-breathe-blue 3.2s ease-in-out infinite;
}

@keyframes cta-breathe-blue {
  0%, 100% {
    box-shadow:
      0 8px 20px rgba(42, 58, 140, 0.40),
      0 2px 6px rgba(30, 43, 110, 0.20),
      inset 0 1px 0 rgba(255, 255, 255, 0.24),
      inset 0 -1px 0 rgba(0, 0, 0, 0.10);
  }
  50% {
    box-shadow:
      0 12px 30px rgba(42, 58, 140, 0.55),
      0 4px 10px rgba(30, 43, 110, 0.30),
      inset 0 1px 0 rgba(255, 255, 255, 0.32),
      inset 0 -1px 0 rgba(0, 0, 0, 0.10);
  }
}

.navbar-cta.active::after {
  background: linear-gradient(120deg, #2A3A8C, #4A5FCE, #2A3A8C);
  background-size: 200% 100%;
}

.navbar-cta.active:hover {
  background-position: 100% 50%;
}

.navbar-cta svg {
  width: 14px;
  height: 14px;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  animation: cta-icon-bob 2.6s ease-in-out infinite;
}

@keyframes cta-icon-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-2px) rotate(-8deg); }
}

.navbar-cta:hover svg {
  animation: cta-icon-bounce 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes cta-icon-bounce {
  0%   { transform: translateY(0) rotate(0deg); }
  30%  { transform: translateY(-5px) rotate(-18deg); }
  55%  { transform: translateY(2px)  rotate(10deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .navbar-cta,
  .navbar-cta svg,
  .navbar-cta::after {
    animation: none !important;
  }
  .navbar-cta::before { display: none; }
  .navbar-cta:hover { transform: none; }

  /* Drop the navbar's background/box-shadow transition for users
     who prefer reduced motion — instant state change, no fade. */
  .navbar { transition: none; }
}

/* ── MOBILE TOGGLE ── */
.navbar-mobile-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  color: #2A3A8C;
  background: transparent;
  border: none;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
}

@media (max-width: 1023px) {
  .navbar-mobile-toggle {
    display: flex !important;
  }
}

@media (min-width: 1024px) {
  .navbar-mobile-toggle {
    display: none;
  }
}

/* ── MOBILE MENU ── */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(241, 243, 245, 0.98);
  backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.mobile-menu.open {
  opacity: 1;
  visibility: visible;
}

.mobile-menu-close {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  padding: 0.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #2A3A8C;
}

.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.mobile-menu-link {
  font-size: 18px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(42, 58, 140, 0.7);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.25s ease;
  position: relative;
  padding: 0.25rem 0;
}

.mobile-menu-link:hover {
  color: rgba(42, 58, 140, 0.7);
}

.mobile-menu-link.active {
  color: #2A3A8C !important;
  font-weight: 600;
}

/* ── Mobile underline (only active, no hover slide) ── */
.mobile-menu-link .mobile-indicator {
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: #2A3A8C;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}

.mobile-menu-link.active .mobile-indicator {
  transform: scaleX(1);
}

.mobile-menu-cta {
  margin-top: 1rem;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 1rem 2.25rem;
  background: #2A3A8C;
  color: #ffffff;
  font-weight: 500;
  border-radius: 40px;  /* ← CURVED EDGES for mobile CTA */
  transition: background 0.3s ease;
}

.mobile-menu-cta:hover {
  background: #E48A24;
  color: #ffffff;
}

/* ── Mobile link entrance animation ── */
.mobile-menu-link {
  opacity: 0;
  transform: translateY(20px);
}

.mobile-menu.open .mobile-menu-link {
  animation: mobileLinkIn 0.3s ease forwards;
}

.mobile-menu.open .mobile-menu-link:nth-child(1) { animation-delay: 0s; }
.mobile-menu.open .mobile-menu-link:nth-child(2) { animation-delay: 0.06s; }
.mobile-menu.open .mobile-menu-link:nth-child(3) { animation-delay: 0.12s; }
.mobile-menu.open .mobile-menu-link:nth-child(4) { animation-delay: 0.18s; }
.mobile-menu.open .mobile-menu-link:nth-child(5) { animation-delay: 0.24s; }
.mobile-menu.open .mobile-menu-link:nth-child(6) { animation-delay: 0.3s; }

@keyframes mobileLinkIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}