/* Mobile Styles */
@media (max-width: 768px) {
    .navbar {
        padding: 0.75rem 0;
    }

    .mobile-menu-btn {
        display: flex;
        margin-left: auto;
        z-index: 100;
    }

    .nav-inner {
        padding: 0 1.5rem;
    }

    .mobile-menu {
        position: fixed;
        top: 0;
        right: -100%;
        height: 100vh;
        width: 100%;
        background: rgba(0,0,0,0.98);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        transition: right 0.3s ease;
        z-index: 99;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 4rem;
    }

    .mobile-menu.active {
        right: 0;
    }

    .close-menu {
        position: absolute;
        top: 1rem;
        right: 1rem;
        background: none;
        border: none;
        color: var(--gold);
        font-size: 2rem;
        cursor: pointer;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: all 0.3s ease;
    }

    .close-menu:hover {
        background: rgba(255,255,255,0.1);
    }

    .nav-links {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        padding: 2rem;
        margin-top: 2rem;
    }

    .nav-links.active {
        right: 0;
    }

    .nav-links a {
        font-size: 1.2rem;
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.3s ease;
    }

    .nav-links.active a {
        opacity: 1;
        transform: translateY(0);
    }

    .nav-links a:not(.nav-cta):after {
        left: 50%;
        transform: translateX(-50%);
        bottom: -10px;
    }

    .nav-cta {
        margin-top: 1rem;
        padding: 0.75rem 2rem !important;
        font-size: 1.1rem !important;
        width: 200px;
        text-align: center;
    }

    /* Animated menu button */
    .mobile-menu-btn.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .mobile-menu-btn.active .bar:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-btn.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}
@media (max-width: 768px){
  :root { --nav-h: 64px; }
}

/* Force mobile menu above hero & overlays */
.mobile-menu {
  z-index: 2000 !important;
  position: fixed;
}

.mobile-nav a {
  font-size: 1.7rem;
  font-weight: 500;
  text-decoration: none;
  color: #ffffff;
  opacity: 0;
  animation: luxuryFade 0.9s ease forwards;
  animation-delay: calc(var(--i) * 0.12s);
  /* staggered fade based on index */
}
/* === LUXURY FLOAT ANIMATION === */
@keyframes luxuryFade {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }
  60% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
.mobile-menu {
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease; /* already smooth */
}
.mobile-menu.active {
  opacity: 1;
  pointer-events: auto;
}
/* Base state: hidden */
.mobile-nav a {
  font-size: 1.7rem;
  font-weight: 500;
  text-decoration: none;
  color: #ffffff;
  opacity: 0;
  transform: translateY(18px);
}

/* When menu opens: animate links */
.mobile-menu.active .mobile-nav a {
  animation: luxuryFade 0.9s ease forwards;
  animation-delay: calc(var(--i) * 0.12s);
}

/* Fullscreen Luxury Menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  justify-content: center; /* centers everything vertically */
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
  z-index: 2000;
}

.mobile-menu.active {
  opacity: 1;
  pointer-events: auto;
}

/* Close Button */
.close-menu {
  position: absolute;
  top: 22px;
  right: 24px;
  font-size: 2rem;
  background: none;
  border: none;
  color: #ffffff;
  cursor: pointer;
  opacity: .9;
}
.close-menu:hover {
  opacity: 1;
}

/* Centered Menu Links */
.mobile-nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 28px;
  text-align: center;
  padding: 0;
  margin: 0;
}

/* Link Typography */
.mobile-nav a {
  font-size: 1.85rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #ffffff;
  opacity: 0;
  transform: translateY(18px);
}

/* Luxury Fade Stagger Trigger */
.mobile-menu.active .mobile-nav a {
  animation: luxuryFade 0.9s ease forwards;
  animation-delay: calc(var(--i) * 0.12s);
}

/* CTA Styling */
.mobile-nav .nav-cta {
  font-size: 1.35rem;
  border: 1px solid #D9B35C;
  padding: 10px 26px;
  border-radius: 8px;
  margin-top: 10px;
}

.mobile-nav .nav-cta:hover {
  background: #D9B35C;
  color: #000;
}

/* === Premium Projects Showcase (Luxury Soft Edge) === */
.projects-section {
  padding: 80px 20px;
  background: #111;
  text-align: center;
}

.projects-section .section-title {
  font-size: 2rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 8px;
}

.projects-section .section-subtitle {
  color: #cfcfcf;
  max-width: 640px;
  margin: 0 auto 28px;
  font-size: .95rem;
  line-height: 1.6;
}

/* Swiper container */
.showcaseSwiper {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 0 30px;
}

/* Slide wrapper keeps ratio for consistent feel */
.showcaseSwiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.showcaseSwiper .swiper-slide img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 14px;
  object-fit: cover;

  /* Luxury soft edge */
  box-shadow: 0 12px 34px rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.08);

  /* Gentle reveal on active slides */
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .6s ease, transform .6s ease;
}
.showcaseSwiper .swiper-slide-active img,
.showcaseSwiper .swiper-slide-next img,
.showcaseSwiper .swiper-slide-prev img {
  opacity: 1;
  transform: translateY(0);
}

/* Pagination bullets (brand gold) */
.swiper-pagination-bullet { background: #777 !important; opacity: .6; }
.swiper-pagination-bullet-active { background: #d4af37 !important; opacity: 1; }

/* Responsive sizing (keeps slides elegant on big screens) */
@media (min-width: 640px){
  .showcaseSwiper { padding-left: 12px; padding-right: 12px; }
}


/* Fix counters alignment on mobile */
@media (max-width: 768px) {
  .counters {
    justify-content: center;   /* centers items horizontally */
  }

  .counters div {
    max-width: 320px;          /* keeps them looking nice */
   
  }
}