/* ============================================================
   BIND – MOBILE CSS v2 (Comprehensive Fix)
   Breakpoints: 960px, 768px, 540px, 480px, 380px
   ============================================================ */

/* ══════════════════════════════════════════
   CRITICAL: GLOBAL OVERFLOW FIX
   Must be first – kills horizontal scroll
══════════════════════════════════════════ */
html {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
}
body {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
  position: relative !important;
}

/* Kill overflow on ALL direct children of body */
body > * {
  max-width: 100vw !important;
  overflow-x: hidden;
}

/* Kill overflow on hero shapes specifically (they extend beyond viewport) */
.hero-shape,
.hero-shape-1,
.hero-shape-2,
.hero-shape-3 {
  display: none !important;
}

/* Kill marquee overflow leak */
.marquee-wrapper {
  overflow: hidden !important;
  max-width: 100% !important;
}
.marquee-track {
  /* width: max-content is fine INSIDE an overflow:hidden parent */
}

/* ══════════════════════════════════════════
   CONTAINER
══════════════════════════════════════════ */
.container {
  max-width: 100% !important;
  overflow-x: hidden;
}

@media (max-width: 768px) {
  .container {
    padding-left: 1.125rem !important;
    padding-right: 1.125rem !important;
  }
  section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}

@media (max-width: 480px) {
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  section {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
}

/* ══════════════════════════════════════════
   NAVBAR – MOBILE
══════════════════════════════════════════ */
@media (max-width: 960px) {
  .navbar {
    padding: 0.875rem 0;
  }
  .navbar-inner {
    gap: 0.5rem;
    flex-wrap: nowrap;
  }
  .bind-logo-svg {
    height: 36px !important;
    width: auto !important;
    max-width: 120px !important;
  }
  .navbar-cta {
    gap: 1rem;
    flex-shrink: 0;
  }
  .navbar-cta .btn {
    font-size: 0.68rem;
    padding: 0.45rem 0.7rem;
    white-space: nowrap;
    letter-spacing: 0.02em;
  }
  .dark-toggle {
    flex-shrink: 0;
  }
}

@media (max-width: 540px) {
  .bind-logo-svg {
    height: 30px !important;
    max-width: 100px !important;
  }
  /* Hide the GET FREE QUOTE nav btn – sticky bar handles it */
  #nav-quote-btn {
    display: none !important;
  }
}

@media (max-width: 380px) {
  .dark-toggle {
    display: none;
  }
}

/* Mobile menu */
@media (max-width: 960px) {
  .mobile-menu {
    padding-top: 5rem;
    padding-bottom: 3rem;
    gap: 0;
    justify-content: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 9998 !important; /* Force above everything but navbar */
  }
  .navbar {
    z-index: 9999 !important; /* Force on top */
  }
  .mobile-menu .nav-link {
    font-size: 1.4rem;
    padding: 0.875rem 2rem;
    width: 100%;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  .mobile-menu .btn {
    margin-top: 1.5rem;
    width: calc(100% - 4rem);
    justify-content: center;
  }
}

/* ══════════════════════════════════════════
   HERO – MOBILE
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .hero {
    min-height: 100svh;
    min-height: 100vh; /* fallback */
    padding-bottom: 4rem;
    padding-top: 6rem;
    overflow: hidden !important;
  }
  .hero-bg {
    overflow: hidden !important;
  }
  .hero-content {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .hero-badge {
    font-size: 0.62rem;
    padding: 0.3rem 0.75rem;
    margin-bottom: 0.875rem;
    max-width: calc(100vw - 2rem);
  }
  .hero-title {
    font-size: clamp(1.9rem, 7.5vw, 2.8rem);
    margin-bottom: 0.875rem;
    line-height: 1.08;
    word-break: break-word;
  }
  .hero-subtitle {
    font-size: 0.875rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
    max-width: 100%;
  }
  /* CTA buttons: stacked */
  .hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.625rem !important;
    margin-bottom: 1.5rem !important;
    width: 100% !important;
  }
  .hero-actions .btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 0.875rem 1rem !important;
    font-size: 0.8rem !important;
  }
  /* Stats: 2x2 grid */
  .hero-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.875rem 1.5rem !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    width: 100% !important;
  }
  .hero-stat {
    text-align: left !important;
  }
  .hero-stat + .hero-stat::before {
    display: none !important;
  }
  .hero-stat-number {
    font-size: 1.65rem !important;
  }
  .hero-stat-label {
    font-size: 0.6rem !important;
    letter-spacing: 0.05em !important;
  }
  /* Hide scroll indicator */
  .scroll-indicator {
    display: none !important;
  }
}

@media (max-width: 380px) {
  .hero-title {
    font-size: 1.75rem !important;
  }
  .hero-subtitle {
    font-size: 0.82rem;
  }
}

/* ══════════════════════════════════════════
   TRUST BAR – MOBILE
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .trust-bar {
    padding: 1.125rem 0 !important;
    overflow: hidden !important;
  }
  .trust-bar .flex,
  .trust-bar > .container > div {
    flex-direction: column !important;
    gap: 0.625rem !important;
    align-items: flex-start !important;
  }
  .trust-bar-label {
    font-size: 0.6rem;
    letter-spacing: 0.1em;
  }
  .marquee-wrapper {
    min-width: 0 !important;
    width: 100% !important;
    flex: none !important;
    max-width: calc(100vw - 2.25rem) !important;
  }
  .trust-logo-item {
    font-size: 0.9rem;
  }
  .marquee-track {
    gap: 1.75rem;
  }
}

/* ══════════════════════════════════════════
   ABOUT SECTION – MOBILE
══════════════════════════════════════════ */
@media (max-width: 960px) {
  .about-story-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  .about-img-stack {
    height: 360px !important;
  }
}

@media (max-width: 768px) {
  .about-img-stack {
    height: 280px !important;
  }
  .about-img-main {
    width: 72%;
    height: 78%;
  }
  .about-img-secondary {
    width: 50%;
    height: 50%;
  }
  .about-img-badge {
    padding: 0.5rem 0.7rem;
  }
  .about-img-badge-num {
    font-size: 1.4rem;
  }
  .about-img-badge-label {
    font-size: 0.58rem;
  }
  /* 2-col mini grid inside about */
  .about-section .grid-2 {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
  }
}

@media (max-width: 480px) {
  .about-img-stack {
    height: 240px !important;
  }
  .about-section .grid-2 {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════════
   SECTION HEADERS – MOBILE
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .section-title {
    font-size: clamp(1.5rem, 5.5vw, 2rem) !important;
  }
  .section-header {
    margin-bottom: 2rem !important;
  }
  .section-subtitle {
    font-size: 0.875rem;
  }
  .section-label {
    font-size: 0.62rem;
  }
  .section-header.flex-between {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.875rem !important;
  }
}

/* ══════════════════════════════════════════
   WHY CHOOSE US – MOBILE
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .why-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
  }
  .why-card {
    padding: 1.25rem 1rem !important;
  }
  .why-icon {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.25rem !important;
    margin-bottom: 0.75rem !important;
  }
  .why-title {
    font-size: 0.9rem !important;
  }
  .why-card p {
    font-size: 0.775rem !important;
  }
}

@media (max-width: 480px) {
  .why-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════════
   PACKAGES – MOBILE
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .packages-grid {
    grid-template-columns: 1fr !important;
    gap: 1.125rem !important;
  }
  .package-card {
    padding: 1.5rem 1.25rem !important;
  }
  .package-price-main {
    font-size: 2.25rem !important;
  }
}

/* ══════════════════════════════════════════
   FEATURED PROJECTS (MASONRY) – MOBILE
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .masonry-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 0.75rem !important;
  }
  .masonry-item {
    height: 220px !important;
  }
  .masonry-grid .masonry-item:first-child {
    grid-row: span 1 !important;
    height: 250px !important;
  }
}

/* ══════════════════════════════════════════
   PROCESS SECTION – MOBILE
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .process-grid-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  .process-vertical::before {
    left: 20px;
  }
  .process-v-num {
    width: 40px !important;
    height: 40px !important;
    font-size: 0.9rem !important;
  }
  .process-v-title {
    font-size: 0.95rem !important;
  }
  .process-v-content p {
    font-size: 0.8rem;
  }
  .process-v-item {
    gap: 0.875rem;
    padding-bottom: 1.5rem;
  }
}

/* ══════════════════════════════════════════
   BEFORE & AFTER SLIDER – MOBILE
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .before-after-container {
    height: 280px !important;
  }
  .slider-handle-btn {
    width: 36px !important;
    height: 36px !important;
  }
}

@media (max-width: 480px) {
  .before-after-container {
    height: 220px !important;
  }
}

/* ══════════════════════════════════════════
   COST CALCULATOR – MOBILE
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .calculator-widget {
    padding: 1.5rem 1.125rem !important;
    border-radius: 1rem !important;
  }
  .calculator-widget .grid-2 {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  /* 4-col pkg buttons → 2-col */
  .calculator-widget div[style*="repeat(4,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
  .calc-result-box {
    padding: 1.125rem !important;
  }
  .calc-result-amount {
    font-size: 1.875rem !important;
  }
}

/* ══════════════════════════════════════════
   TESTIMONIALS – MOBILE
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .testimonial-card {
    padding: 1.375rem 1.125rem !important;
  }
  .testimonial-text {
    font-size: 0.875rem !important;
    line-height: 1.65 !important;
  }
  .testimonial-quote {
    font-size: 1.4rem !important;
  }
}

/* ══════════════════════════════════════════
   FAQ SECTION – MOBILE
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .faq-grid-wrap {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .faq-question-text {
    font-size: 0.875rem !important;
  }
  .faq-question {
    padding: 0.875rem 1rem !important;
  }
  .faq-answer-inner {
    padding: 0 1rem 0.875rem !important;
    font-size: 0.82rem !important;
  }
}

/* ══════════════════════════════════════════
   CTA BAND – MOBILE
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .cta-band {
    padding: 2.5rem 0 !important;
  }
  .cta-band h2 {
    font-size: clamp(1.65rem, 6.5vw, 2.4rem) !important;
    margin-bottom: 0.875rem !important;
  }
  .cta-band p {
    font-size: 0.875rem !important;
    margin-bottom: 1.5rem !important;
  }
  .cta-band div[style*="display:flex;gap:1rem;justify-content:center"] {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  .cta-band .btn {
    justify-content: center !important;
  }
}

/* ══════════════════════════════════════════
   FOOTER – MOBILE
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .footer-top {
    padding: 2.5rem 0 1.75rem !important;
  }
  .footer-bottom-inner {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 0.625rem !important;
  }
  .footer-bottom-links {
    justify-content: center;
    gap: 1rem;
  }
  .footer-brand-desc {
    font-size: 0.875rem;
  }
}

/* ══════════════════════════════════════════
   STICKY CTA BAR – MOBILE BOTTOM
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .sticky-cta {
    display: flex !important;
    padding: 0.75rem 0.875rem !important;
    gap: 0.5rem !important;
  }
  .sticky-cta .btn {
    font-size: 0.72rem !important;
    padding: 0.7rem 0.5rem !important;
    flex: 1 !important;
    justify-content: center !important;
  }
}

@media (min-width: 769px) {
  .sticky-cta {
    display: none !important;
  }
}

/* ══════════════════════════════════════════
   FLOATING BUTTONS – MOBILE
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .floating-whatsapp,
  .floating-call {
    width: 48px !important;
    height: 48px !important;
  }
  .floating-whatsapp {
    bottom: 5rem !important;
    right: 1rem !important;
  }
  .floating-call {
    bottom: 9.5rem !important;
    right: 1rem !important;
  }
  .back-to-top {
    bottom: 14rem !important;
    right: 1rem !important;
    width: 44px !important;
    height: 44px !important;
  }
  .floating-whatsapp svg,
  .floating-call svg,
  .back-to-top svg {
    width: 20px !important;
    height: 20px !important;
  }
}

/* ══════════════════════════════════════════
   ENTRY MODAL – MOBILE (CRITICAL FIX)
   Inputs were overflowing horizontally
══════════════════════════════════════════ */
@media (max-width: 700px) {
  .entry-modal-overlay {
    padding: 1rem !important;
    align-items: center !important;
    overflow-y: auto !important;
  }
  .entry-modal {
    flex-direction: column !important;
    width: 100% !important;
    max-width: calc(100vw - 2rem) !important;
    max-height: none !important;
    overflow: hidden !important;
    border-radius: 12px !important;
  }
  .em-left {
    flex: none !important;
    width: 100% !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    position: relative !important;
  }
  .em-body {
    padding: 0.875rem 0.875rem !important;
    width: 100% !important;
    overflow: hidden !important;
  }
  /* CRITICAL: Fix input overflow */
  .em-form-control {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    padding: 0.4rem 0.6rem !important;
    font-size: 0.75rem !important;
    height: 38px !important;
  }
  .em-input-wrap, .em-form-group {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    margin-bottom: 0.5rem !important;
  }
  /* Phone row fix */
  .em-phone-row {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .em-phone-row .em-form-control {
    flex: 1 !important;
    min-width: 0 !important;
    width: 0 !important; /* flex will size it */
  }
  .em-flag-box {
    flex-shrink: 0 !important;
  }
  /* Right panel */
  .em-right {
    display: none !important;
  }
  .em-title {
    font-size: 1.25rem !important;
    margin-bottom: 0.75rem !important;
    text-align: center !important;
  }
  .em-left .btn-submit {
    padding: 0.6rem !important;
    font-size: 0.875rem !important;
    margin-top: 0.25rem !important;
  }
  /* Close button */
  .entry-modal-close {
    top: 10px !important;
    right: 10px !important;
    width: 28px !important;
    height: 28px !important;
    font-size: 0.95rem !important;
    background: var(--c-gold) !important;
    color: var(--c-navy) !important;
    border-radius: 50% !important;
  }
}

/* ══════════════════════════════════════════
   BUTTON SIZES – MOBILE
══════════════════════════════════════════ */
@media (max-width: 480px) {
  .btn-lg {
    padding: 0.825rem 1.375rem !important;
    font-size: 0.78rem !important;
  }
  .btn {
    font-size: 0.78rem;
  }
}

/* ══════════════════════════════════════════
   CURSOR: FORCE AUTO ON TOUCH DEVICES
══════════════════════════════════════════ */
@media (max-width: 768px) {
  body,
  button,
  a,
  .btn,
  .filter-tab,
  .faq-question,
  .floating-whatsapp,
  .floating-call,
  .back-to-top,
  .dark-toggle,
  .hamburger,
  .masonry-item,
  .project-card,
  #lightbox-close,
  .calc-slider {
    cursor: pointer !important;
  }
  input, textarea, select {
    cursor: text !important;
  }
}

/* ══════════════════════════════════════════
   BLOG CARDS – MOBILE
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .blog-preview-grid {
    grid-template-columns: 1fr !important;
  }
  .blog-card-img {
    height: 180px;
  }
  .blog-card-body {
    padding: 1rem !important;
  }
  .blog-card-title {
    font-size: 1rem;
  }
}

/* ══════════════════════════════════════════
   STATS BAND – MOBILE
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .stats-band {
    padding: 2.5rem 0 !important;
  }
  .stats-band-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.25rem !important;
  }
  .stat-number {
    font-size: 1.875rem !important;
  }
}

/* ══════════════════════════════════════════
   PAGE HERO (inner pages) – MOBILE
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .page-hero {
    padding: 6rem 0 3rem !important;
  }
  .page-hero-title {
    font-size: clamp(1.75rem, 7vw, 2.75rem) !important;
  }
  .page-hero-sub {
    font-size: 0.9rem;
  }
}

/* ══════════════════════════════════════════
   CONTACT PAGE – MOBILE
══════════════════════════════════════════ */
@media (max-width: 960px) {
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}

@media (max-width: 768px) {
  .contact-info-card {
    padding: 1.5rem 1.25rem !important;
  }
  .contact-form-card {
    padding: 1.5rem 1.25rem !important;
  }
  .map-container {
    height: 240px !important;
  }
}

/* ══════════════════════════════════════════
   PACKAGES/DESIGN PAGE – MOBILE
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .pkg-cards-wrapper {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
  .sticky-package-nav {
    top: 65px !important;
    padding: 0.5rem 0.875rem !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    justify-content: center !important;
    width: calc(100% - 2rem) !important;
  }
  .sticky-package-nav a {
    padding: 0.35rem 0.875rem !important;
    font-size: 0.78rem !important;
  }
  /* Spec table on mobile */
  .spec-table,
  .spec-table tbody,
  .spec-table tr,
  .spec-table th,
  .spec-table td {
    display: block !important;
    width: 100% !important;
  }
}

/* ══════════════════════════════════════════
   GALLERY – MOBILE
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .masonry-grid[class] {
    column-count: 1 !important;
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════════
   PROJECTS PAGE – MOBILE
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .projects-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .project-card {
    height: 260px !important;
  }
}

@media (max-width: 480px) {
  .projects-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════════
   LOADING SCREEN – MOBILE
══════════════════════════════════════════ */
@media (max-width: 480px) {
  #loading-screen::before {
    top: 20px !important;
    left: 20px !important;
    width: 36px !important;
    height: 36px !important;
  }
  #loading-screen::after {
    bottom: 20px !important;
    right: 20px !important;
    width: 36px !important;
    height: 36px !important;
  }
  .loading-bar-wrap {
    width: 110px !important;
  }
}