/* =====================================================
   MOBILE FIRST OPTIMIZATION - Blue Fox Digital
   Applies responsive improvements without changing branding.
===================================================== */

:root{
  --safe-space: clamp(16px, 5vw, 72px);
}

/* Base mobile improvements */
html{
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body{
  overflow-x: hidden;
}

img, video, iframe{
  max-width: 100%;
}

img{
  height: auto;
}

/* Better tap targets */
a, button, .btn{
  min-height: 44px;
}

/* Universal flexible containers */
.container,
.nav-inner,
.contact-wrap,
.hero-grid,
.service-block,
.case-study,
calculator-wrap,
.grid,
.grid-3,
.grid-4,
.service-grid,
.portfolio-grid,
.premium-projects-grid,
.home-project-grid,
.selector-grid,
.contact-grid-v7,
.explain-grid,
.timeline,
.timeline-lite,
.journey,
.v7-journey,
.expect-grid,
.mv-grid,
.value-grid,
.team-grid,
.diff-grid,
.before-grid,
.faq-grid{
  max-width: 1180px;
}

/* Mobile first layout */
@media (max-width: 768px){

  body{
    font-size: 16px;
  }

  section,
  .section{
    padding: 58px var(--safe-space) !important;
  }

  .container,
  .nav-inner{
    width: 100% !important;
    max-width: 100% !important;
  }

  .nav,
  nav{
    position: sticky;
    top: 0;
    z-index: 999;
  }

  .nav-inner,
  nav{
    padding-left: var(--safe-space) !important;
    padding-right: var(--safe-space) !important;
  }

  .menu,
  .nav-links{
    display: none !important;
  }

  .logo,
  .brand{
    font-size: 16px !important;
  }

  .btn{
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 13px 16px !important;
  }

  .hero,
  .v7-hero,
  .cinematic-hero,
  .service-hero,
  .project-hero,
  .page-hero{
    min-height: auto !important;
    padding: 92px var(--safe-space) 64px !important;
    display: block !important;
  }

  h1,
  .hero h1,
  .v7-hero h1,
  .cinematic-hero h1,
  .service-hero h1,
  .project-hero h1,
  .page-hero h1{
    font-size: clamp(38px, 13vw, 56px) !important;
    line-height: .95 !important;
    letter-spacing: -1px !important;
  }

  h2,
  .section-title h2,
  .service-content h2,
  .lux-text h2{
    font-size: clamp(30px, 10vw, 44px) !important;
    line-height: 1.05 !important;
  }

  p{
    font-size: 16px !important;
  }

  .hero-actions{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .trust-bar,
  .stats,
  .grid,
  .grid-3,
  .grid-4,
  .service-grid,
  .portfolio-grid,
  .premium-projects-grid,
  .home-project-grid,
  .selector-grid,
  .contact-grid-v7,
  .contact-wrap,
  .contact-wrap-v7,
  .explain-grid,
  .timeline,
  .timeline-lite,
  .journey,
  .v7-journey,
  .expect-grid,
  .mv-grid,
  .value-grid,
  .team-grid,
  .diff-grid,
  .before-grid,
  .faq-grid,
  .calculator-wrap,
  .service-block,
  .case-study,
  .split,
  .culture-grid,
  .compare-slider,
  .feature-grid,
  .meta-grid,
  .option-select,
  .form-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .service-block,
  .case-study,
  .split{
    margin-bottom: 46px !important;
  }

  .hero img,
  .about img,
  .service-visual,
  .case-img,
  .feature-img,
  .project-main-photo,
  .contact-hero-v7 img{
    height: auto !important;
    min-height: 260px !important;
    max-height: none !important;
  }

  .service-visual,
  .case-img,
  .feature-img{
    min-height: 320px !important;
  }

  .project-main-photo{
    height: 280px !important;
  }

  .project-thumb-row{
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 6px !important;
  }

  .project-thumb-row img,
  .home-mini-thumbs img{
    height: 56px !important;
  }

  .bts-grid,
  .gallery,
  .masonry{
    display: grid !important;
    grid-template-columns: 1fr !important;
    columns: auto !important;
  }

  .gallery img,
  .masonry img,
  .bts-grid figure,
  .bts-grid figure:first-child{
    width: 100% !important;
    height: auto !important;
    min-height: 240px !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .team-card{
    min-height: 420px !important;
  }

  .team-info{
    transform: translateY(0) !important;
  }

  .skill-row{
    opacity: 1 !important;
  }

  .calc-panel,
  .wizard,
  .contact-card,
  .contact-info-card{
    padding: 22px !important;
    border-radius: 24px !important;
  }

  input, select, textarea{
    font-size: 16px !important;
  }

  .step-tabs{
    grid-template-columns: 1fr !important;
  }

  footer,
  .footer-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    text-align: left !important;
  }

  footer{
    padding: 40px var(--safe-space) !important;
    margin-top: auto !important;
    position: relative !important;
  }

  .whatsapp{
    width: 54px !important;
    height: 54px !important;
    right: 16px !important;
    bottom: 16px !important;
  }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1100px){
  section,
  .section{
    padding-left: 6% !important;
    padding-right: 6% !important;
  }

  .grid-4,
  .selector-grid,
  .team-grid,
  .diff-grid{
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .premium-projects-grid,
  .home-project-grid,
  .feature-grid,
  .grid-3{
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .journey,
  .v7-journey,
  .timeline-lite,
  .expect-grid{
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Very small phones */
@media (max-width: 380px){
  h1,
  .hero h1,
  .v7-hero h1,
  .cinematic-hero h1{
    font-size: 34px !important;
  }

  .project-thumb-row img{
    height: 48px !important;
  }
}