/* ================================
   V32 REAL MOBILE FIX
   Loaded last. Targets actual classes:
   .site-header, .hero, .slides, .hero-grad, .hero-content, .features, .gallery-section, .cta, .footer
================================ */

@media screen and (max-width: 768px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    background: #241B68 !important;
  }

  .site-header,
  header.site-header,
  #header {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 16px !important;
    min-height: 72px !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    z-index: 20 !important;
  }

  .site-header .container,
  header .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
  }

  .site-header img,
  header.site-header img,
  .brand img {
    width: auto !important;
    max-width: 112px !important;
    height: auto !important;
    max-height: 42px !important;
    object-fit: contain !important;
  }

  .menu-toggle,
  .hamburger,
  .mobile-menu-toggle {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    background: #f5f4f9 !important;
  }

  /* HERO: full mobile viewport, no leftover below buttons */
  main {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  section.hero,
  .hero {
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: calc(100svh - 72px) !important;
    min-height: 590px !important;
    max-height: 760px !important;
    margin: 0 !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  .hero .slides,
  .slides {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .hero .slide,
  .slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .hero .slide:not(.active),
  .slide:not(.active) {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .hero .slide img,
  .hero img,
  .slide img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  .hero-grad,
  .hero::after {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(
      180deg,
      rgba(36, 27, 104, 0.02) 0%,
      rgba(36, 27, 104, 0.18) 34%,
      rgba(22, 16, 69, 0.78) 68%,
      rgba(22, 16, 69, 0.98) 100%
    ) !important;
    pointer-events: none !important;
  }

  .hero .dots,
  .dots[aria-label="Slider controls"] {
    display: none !important;
  }

  .hero-content,
  .container.hero-content {
    position: absolute !important;
    z-index: 5 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 18px !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 16px !important;
    transform: none !important;
    box-sizing: border-box !important;
  }

  .hero-content h1 {
    font-size: 30px !important;
    line-height: 1.02 !important;
    letter-spacing: -0.8px !important;
    max-width: 92% !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
  }

  .hero-content p {
    font-size: 13.4px !important;
    line-height: 1.42 !important;
    max-width: 100% !important;
    margin: 0 0 13px 0 !important;
    padding: 0 !important;
  }

  .hero-content .btns,
  .hero-content .hero-actions,
  .hero-content .hero-buttons,
  .btns {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .hero-content .btn,
  .hero-content a.btn,
  .hero-content .button,
  .btns .btn {
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 9px 12px !important;
    border-radius: 10px !important;
    font-size: 14.5px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* Sections after hero: compact */
  .features,
  .gallery-section,
  .cta,
  .footer,
  footer.footer {
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 28px !important;
    padding-bottom: 28px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
  }

  .features .container,
  .gallery-section .container,
  .cta .container,
  .footer .container,
  footer .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  .features-grid,
  .gallery-grid,
  .footer-grid,
  .grid,
  .cards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .feature-card,
  .card,
  .service-card,
  .about-card,
  .commitment-card {
    padding: 18px 16px !important;
    border-radius: 15px !important;
    min-height: auto !important;
    margin: 0 !important;
  }

  .feature-card .icon,
  .card .icon,
  .icon-box {
    width: 48px !important;
    height: 48px !important;
    margin-bottom: 14px !important;
  }

  .feature-card h3,
  .card h3,
  .service-card h3,
  .about-card h3 {
    font-size: 19px !important;
    line-height: 1.25 !important;
    margin: 0 0 8px !important;
  }

  .feature-card p,
  .card p,
  .service-card p,
  .about-card p {
    font-size: 14.7px !important;
    line-height: 1.48 !important;
    margin: 0 !important;
  }

  .gallery-grid img {
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    border-radius: 14px !important;
  }

  .cta h2 {
    font-size: 26px !important;
    line-height: 1.15 !important;
    margin-bottom: 10px !important;
  }

  .cta p {
    font-size: 15px !important;
    line-height: 1.45 !important;
    margin-bottom: 16px !important;
  }

  .footer {
    padding-top: 30px !important;
    padding-bottom: 18px !important;
  }

  .footer .brand img,
  footer img {
    max-width: 130px !important;
    margin-bottom: 10px !important;
  }

  .footer p,
  .footer a,
  .footer li {
    font-size: 13.5px !important;
    line-height: 1.42 !important;
  }

  .footer h3,
  .footer h4 {
    font-size: 15px !important;
    margin-bottom: 8px !important;
  }

  .footer-bottom {
    margin-top: 14px !important;
    padding-top: 12px !important;
  }
}

@media screen and (max-width: 430px) {
  section.hero,
  .hero {
    height: calc(100svh - 66px) !important;
    min-height: 560px !important;
  }

  .hero-content,
  .container.hero-content {
    bottom: 16px !important;
    padding: 0 14px !important;
  }

  .hero-content h1 {
    font-size: 28px !important;
  }

  .hero-content p {
    font-size: 12.7px !important;
    line-height: 1.38 !important;
  }

  .hero-content .btn,
  .hero-content a.btn,
  .btns .btn {
    height: 40px !important;
    min-height: 40px !important;
    font-size: 14px !important;
  }

  .features,
  .gallery-section,
  .cta,
  .footer,
  footer.footer {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
}