/* ==========================================================
   Luxar Studios responsive stabilization
   Desktop design is intentionally unchanged. These rules only
   normalize layout behavior at laptop/tablet/mobile widths.
   ========================================================== */

@media (max-width: 1199.98px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  img, video, iframe, svg { max-width: 100%; }
  .container, .container-fluid { min-width: 0; }
  .row > * { min-width: 0; }
  .hero-title, .section-title, .main-title, .expertise-heading, .work-title,
  .cta-title, .package-name, .footer-text, .footer-contact, p, a, span {
    overflow-wrap: break-word;
  }
  .custom-navbar .container { gap: 16px; }
  .brand-name { flex: 0 1 auto; width: auto; max-width: 22%; }
  .brand-name img, .footer-brand img { width: auto; max-width: 100%; height: auto; }
  .navbar-collapse { min-width: 0; }
  .navbar-nav .nav-link { white-space: normal; }
  .hero-section, .luxar-video-hero, .cta-section { width: 100%; }
  .luxar-hero-video, .cta-bg-video, .expertise-video { max-width: none; }
  .pricing-card, .glass-panel, .work-card, .expertise-item { min-width: 0; }
  .package-info-popup { max-width: calc(100vw - 32px); }
  .lightbox-frame { max-width: calc(100vw - 32px); }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .custom-navbar { padding: 18px 0; }
  .hero-content { padding-left: 20px; padding-right: 20px; }
  .hero-title { font-size: clamp(3.2rem, 7vw, 5.4rem); }
  .portfolio-grid > .col-md-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
  .work-image { width: 100%; height: auto; }
  .section-packages .row > [class*="col-"] { margin-bottom: 24px; }
  .section-packages .pricing-card { height: 100%; }
  .expertise-copy { height: auto; }
  .footer .row > [class*="col-"] { min-width: 0; }
}

@media (max-width: 991.98px) {
  .custom-navbar .navbar-collapse {
    width: 100%; max-height: calc(100vh - 100px); overflow-y: auto;
  }
  .custom-navbar .navbar-nav { gap: 2px; }
  .custom-navbar .navbar-nav .nav-link { padding: 12px 10px !important; }
  .nav-quote-btn { display: inline-flex; width: auto; margin-top: 8px; }
  .hero-content { padding-left: 16px; padding-right: 16px; }
  .hero-title .accent { margin-top: -.45rem; }
  .expertise-media, .expertise-video-wrapper { position: relative; width: 100%; }
  .expertise-video-wrapper { inset: auto; }
  .expertise-video { width: 100%; height: 100%; object-fit: cover; }
  .section-packages { min-height: 0; }
  .pricing-card { min-height: 0; }
  .footer-brand { width: auto !important; max-width: 220px; }
  .footer-bottom { width: 100%; }
}

@media (max-width: 767.98px) {
  .container { --bs-gutter-x: 1.5rem; }
  .custom-navbar { padding: 15px 0; }
  .custom-navbar .container { flex-wrap: wrap; }
  .brand-name { width: auto !important; max-width:40%; }
  .navbar-toggler { flex: 0 0 auto; }
  .hero-content { padding: 42px 0 48px; }
  .hero-title { font-size: clamp(2.6rem, 13vw, 4.4rem); line-height: 1.02; }
  .hero-title .accent { margin-top: 0; }
  .hero-text { max-width: 100%; padding: 0 4px; }
  .hero-buttons { width: 100%; gap: 12px; }
  .hero-buttons .solid-btn, .hero-buttons .outline-btn { max-width: 420px; }
  .logo-marquee::before, .logo-marquee::after { width: 40px; }
  .logo-marquee-group { flex-shrink: 0; }
  .showcase-hero { width: 100%; }
  .showcase-sub { align-items: center; text-align: center; }
  .showcase-stats .row { --bs-gutter-y: 1rem; }
  .expertise-media { min-height: clamp(260px, 78vw, 420px); }
  .expertise-copy { padding: 32px 20px; }
  .expertise-heading { overflow-wrap: anywhere; }
  .tag-group { display: flex; flex-wrap: wrap; gap: 8px; }
  .tag-chip { width: auto; max-width: 100%; }
  .portfolio-grid > [class*="col-"] { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
  .work-image-wrap { height: auto !important; }
  .work-image { width: 100%; height: auto !important; aspect-ratio: 4 / 5.25; object-fit: cover; }
  .luxarCoverflow { padding-left: 30px; padding-right: 30px; }
  .luxarCoverflow .swiper-slide { height: auto !important; aspect-ratio: 4 / 5.25; }
  .luxarCoverflow .swiper-slide img { width: 100%; height: 100%; object-fit: cover; }
  .luxarCoverflow .swiper-button-prev, .luxarCoverflow .swiper-button-next { width: 40px; height: 40px; }
  .main-title { font-size: clamp(2.4rem, 12vw, 3.5rem); }
  .pricing-card, .pricing-card.featured { padding: 32px 20px 28px !important; }
  .badge-lux, .badge-outline { left: 20px; top: 24px; }
  .price { flex-wrap: wrap; }
  .features li { align-items: flex-start; }
  .testimonial-track { gap: 0; }
  .testimonial-card { min-width: 100%; }
  .cta-section { min-height: 420px; padding-left: 12px; padding-right: 12px; }
  .cta-title { font-size: clamp(2.5rem, 12vw, 4rem); }
  .footer { text-align: left; }
  .footer .row > [class*="col-"] { margin-bottom: 24px; }
  .footer-social { width: 100%; }
  .luxar-terms-page { padding: 40px 12px; }
  .luxar-terms-wrap { padding: 30px 18px; border-radius: 18px; }
  .luxar-terms-page h1 { font-size: clamp(2.25rem, 11vw, 3rem); letter-spacing: -1px; }
  .luxar-terms-page .luxar-intro { padding-left: 14px; }
  .image-lightbox { padding: 12px; }
  .lightbox-frame { width: calc(100vw - 24px) !important; height: min(82vh, 760px) !important; }
  .lightbox-img { width: auto !important; height: auto !important; max-width: 100% !important; max-height: 100% !important; }
  .lightbox-prev, .lightbox-next { width: 42px !important; height: 42px !important; font-size: 34px !important; }
  .lightbox-close { top: 8px !important; right: 8px !important; }
}

@media (max-width: 575.98px) {
  .container { --bs-gutter-x: 1.25rem; }
/*  .section-title { font-size: clamp(2.25rem, 11.5vw, 3.25rem); }*/
  .section-label, .eyebrow { letter-spacing: .16em; }
  .outline-btn, .solid-btn { padding: 14px 18px; letter-spacing: .14em; }
  .glass-panel { padding: 18px 12px; }
  .luxarCoverflow { padding-left: 16px; padding-right: 16px; }
  .expertise-copy { padding: 28px 16px; }
  .package-info-popup { width: calc(100vw - 24px); max-height: 80vh; overflow-y: auto; }
  .footer-copy { letter-spacing: .08em; line-height: 1.7; }
  .footer-social { gap: 12px 18px; }
  .luxar-terms-page { padding: 30px 10px; }
  .luxar-terms-wrap { padding: 24px 15px; }
}

@media (max-width: 374.98px) {
  .brand-name { max-width: 38%; }
  .hero-title { font-size: 2.55rem; }
  .outline-btn, .solid-btn { font-size: .72rem; }
  .pricing-card, .pricing-card.featured { padding-left: 16px !important; padding-right: 16px !important; }
}
@media (max-width: 767.98px) {
  .package-content { width: 100%; }
  .package-info { width: 100%; min-width: 0; }
  .package-name-row { flex-wrap: wrap; }
  .contact-method-group { flex-wrap: wrap; }
  .contact-method-btn { min-width: calc(50% - 6px); }
  .pricing-items .pricing-item, .pricing-total { gap: 12px; }
  .pricing-item-name { min-width: 0; overflow-wrap: anywhere; }
  .file-upload-zone { flex-wrap: wrap; }
}
@media (max-width: 420px) {
  .contact-method-group { flex-direction: column; }
  .contact-method-btn { width: 100%; min-width: 0; }
  .tab-btn { min-width: 0; }
  .package-name { font-size: 17px; }
}