/* =====================================================================
   MOBILE POLISH — loaded LAST on every page.
   Phones (<= 640px): smaller type, tighter spacing, cards/sections sized for a ~390px screen.
   Tablets / narrow layouts (<= 980px): fixes empty gaps in stacked hero sections.
   !important is used on font sizes / paddings only, because each page stylesheet sets these per class.
   ===================================================================== */

/* ---------- stacked (single-column) layouts: no giant empty hero boxes ---------- */
@media (max-width:980px){
  .service-hero-inner > *,
  .about-hero-inner,
  .m360-hero-inner > *{ flex:0 0 auto !important; }
  .service-hero-visual{ min-height:0 !important; margin-top:6px; }
  .service-hero-copy{ width:100%; }
}

/* ============================ PHONES ============================ */
@media (max-width:640px){

  /* ---------- header ---------- */
  .navbar{ padding:8px 16px !important; }
  .header-logo-img{ height:50px !important; }
  .nav-toggle{ width:38px; height:38px; }
  .nav-links a, .nav-dropdown-menu a{ font-size:15px !important; }
  .nav-cta{ font-size:14px !important; }

  /* ---------- headings ---------- */
  main h1, .gh-title, .hero h1, .headline{ font-size:26px !important; line-height:1.18 !important; letter-spacing:-0.02em; }
  .gh-slide .gh-title .w{ font-size:inherit; }
  .apply-banner-text h1{ font-size:20px !important; }

  main h2,
  .why-head h2, .cta-title, .logo-wall-head h2, .services-head h2, .faq-head h2, .culture-copy h2,
  .reviews-head h2, .video-reviews-head h2, .section-heading h2, .about-cta-inner h2, .experience-copy h2,
  .dedicated-main h2, .global-copy h2, .portfolio-cta-inner h2, .m360-about-copy h2, .post-cta h2, .related-title{
    font-size:22px !important; line-height:1.22 !important; letter-spacing:-0.015em;
  }
  main h3,
  .service-card h3, .why-card h3, .capability-card h3, .tech-card h3, .reason-card h3, .portfolio-card-body h3,
  .team-card h3, .job-card-main h3, .value-card h3, .m360-panel-header h3, .m360-bottom-cta h3, .m360-highlights h3{
    font-size:16px !important; line-height:1.3 !important;
  }
  .value-card h3{ font-size:19px !important; }

  /* ---------- body text ---------- */
  main p, .gh-lead, .desc, .cta-desc, .faq-answer, .footer-tagline, .footer-address{ font-size:14px !important; line-height:1.6 !important; }
  .logo-wall-head p, .why-head p, .about-hero-inner p, .culture-copy p, .services-head p, .reviews-head p, .video-reviews-head p,
  .faq-head p, .section-heading p, .service-hero-copy > p, .m360-lead, .experience-copy p{ font-size:14.5px !important; line-height:1.6 !important; }
  .service-card p, .why-card p, .capability-card p, .tech-card p, .reason-card p, .portfolio-card-body p, .value-card p, .review-quote{ font-size:13.5px !important; line-height:1.55 !important; }
  .eyebrow, .service-kicker, .why-eyebrow, .gh-badge{ font-size:11px !important; }
  .gh-badge{ padding:7px 14px 7px 10px !important; }

  /* ---------- buttons ---------- */
  .gh-btn, .cta, .secondary-action, .primary-action, .blog-btn, .why-cta, .logo-wall-cta, .cta-button, .nav-cta{
    font-size:14px !important; padding:12px 20px !important; border-radius:12px;
  }
  .gh-btn, .service-hero-actions .cta, .service-hero-actions .secondary-action{ width:100%; justify-content:center; }
  .gh-actions, .service-hero-actions{ gap:10px !important; }

  /* ---------- section spacing ---------- */
  .gh{ padding:22px 16px 34px !important; }
  .gh-lead{ margin-bottom:22px !important; }
  .gh-actions{ margin-bottom:0 !important; }
  .gh-controls{ margin:18px 0 22px !important; }
  .gh-points{ gap:12px !important; }
  .gh-points b{ font-size:14px !important; } .gh-points small{ font-size:12px !important; }
  .gh-pt-ico{ width:38px !important; height:38px !important; }
  .gh-visual{ zoom:.66 !important; margin:-30px auto -40px !important; }
  .gh-float{ display:none !important; }

  .service-page-hero{ padding:28px 16px 34px !important; }
  .service-hero-copy h1::after, .why .why-head h2::after, .services .services-head h2::after, .faq .faq-head h2::after, .logo-wall .logo-wall-head h2::after{ width:44px !important; height:3px !important; margin-top:12px !important; }
  .service-hero-copy > p{ margin-bottom:20px !important; }
  .service-trust-line{ font-size:11.5px !important; }
  .service-hero-visual .sv{ zoom:.66 !important; margin-top:0; }
  .service-stats{ padding:22px 16px !important; }
  .service-stat strong{ font-size:26px !important; } .service-stat span{ font-size:12.5px !important; }

  .about-hero{ padding:34px 16px 70px !important; }
  .portfolio-hero2{ padding:28px 16px 34px !important; }
  .section-shell{ padding-top:32px !important; padding-bottom:32px !important; }

  .services{ padding:36px 16px 40px !important; }
  .services .services-head{ margin-bottom:26px !important; }
  .services .services-grid{ gap:14px !important; }
  .services .service-card{ padding:22px 20px 18px !important; border-radius:20px !important; }
  .services .service-icon{ width:46px !important; height:46px !important; margin-bottom:16px !important; }
  .services .service-icon svg{ width:22px !important; height:22px !important; }
  .services .service-card p{ margin-bottom:16px !important; }
  .services .service-link{ padding-top:14px !important; font-size:13px !important; }

  .logo-wall{ margin:28px auto !important; padding:28px 18px !important; gap:22px !important; }
  .logo-wall .logo-wall-head p{ margin-bottom:18px !important; }
  .logo-wall .marquee-track{ gap:10px !important; }

  .why{ padding:38px 16px 44px !important; }
  .why .why-head p{ margin-bottom:20px !important; }
  .why .stats{ margin-bottom:22px !important; gap:12px !important; }
  .why .stats > div{ padding:14px 16px !important; }
  .why .stat-num{ font-size:28px !important; } .why .stat-label{ font-size:11.5px !important; }
  .why .card-stack{ gap:14px !important; }
  .why .why-card{ padding:22px 20px !important; border-radius:20px !important; }
  .why .card-icon{ width:44px !important; height:44px !important; margin-bottom:16px !important; }

  .reviews, .video-reviews{ padding-top:34px !important; padding-bottom:34px !important; }
  .reviews .review-card{ padding:0 !important; }
  .reviewer-name{ font-size:14px !important; } .reviewer-title{ font-size:12px !important; }

  .faq{ padding:36px 16px 40px !important; }
  .faq .faq-question{ padding:14px 14px !important; font-size:14px !important; }
  .faq .faq-answer{ padding:0 14px 16px !important; font-size:13.5px !important; }
  .faq .faq-tab{ font-size:13px !important; padding:9px 16px !important; }

  .cta-section{ padding-top:20px !important; padding-bottom:28px !important; }
  .cta-block{ padding:26px 22px !important; border-radius:22px !important; }

  /* service-page content blocks */
  .capability-card, .tech-card, .reason-card{ padding:20px 18px !important; }
  .service-section, .experience-section, .dedicated-section, .global-section, .challenge-section{ padding-top:30px !important; padding-bottom:30px !important; }
  .challenge-inner{ padding:24px 20px !important; border-radius:22px !important; }
  .experience-panel, .dedicated-main{ padding:20px 18px !important; }

  /* about / careers / contact / portfolio / 360 */
  .about-values .value-card{ padding:26px 20px 22px !important; }
  .culture-inner{ padding:28px 18px !important; }
  .culture-tag{ padding:18px 16px !important; }
  .culture-tag span b{ font-size:15px !important; } .culture-tag span small{ font-size:12.5px !important; }
  .job-card{ padding:14px 16px !important; }
  .contact-form-card, .contact-info-card, .apply-card{ padding:20px 18px !important; }
  input, select, textarea, .form-group label{ font-size:14px !important; }
  .portfolio-card-body{ padding:18px !important; }
  .m360-panel, .m360-highlights{ padding:20px 18px !important; }

  /* ---------- footer ---------- */
  .footer a, .footer p, .footer-links a{ font-size:13.5px !important; }
  .footer-col h4{ font-size:11.5px !important; }
  .footer-inner{ padding-top:34px !important; }
  .footer-action{ width:38px !important; height:38px !important; }

  /* ---------- blog ---------- */
  .blog-list{ padding:28px 16px 40px !important; }
  .post-card-title{ font-size:17px !important; } .post-card-ex{ font-size:13.5px !important; }
  .post{ padding:22px 16px 26px !important; }
  .post-head h1{ font-size:24px !important; }
  .post-content{ font-size:15.5px !important; line-height:1.75 !important; }
  .post-content h2{ font-size:21px !important; } .post-content h3{ font-size:18px !important; }
}

/* very small phones */
@media (max-width:380px){
  main h1, .gh-title, .headline{ font-size:24px !important; }
  main h2, .section-heading h2{ font-size:20px !important; }
  .gh-visual, .service-hero-visual .sv{ zoom:.58 !important; }
}

/* ---- fine tuning after review ---- */
@media (max-width:640px){
  .section-heading{ margin-bottom:24px !important; }
  .service-hero-visual{ margin-top:-4px !important; margin-bottom:-14px !important; }
  .why .why-cta{ margin-bottom:20px; }
  .why .stats{ margin-bottom:18px !important; }
  .about-hero-inner p, .m360-intro p{ margin-bottom:0; }
}

/* ---- hero safety net: the active slide's text must always be visible on phones, even if animations are throttled/disabled ---- */
@media (max-width:640px){
  .gh-track{ display:grid !important; min-height:300px; }
  .gh-slide{ position:relative !important; inset:auto !important; grid-area:1 / 1 !important; }
  .gh-slide.is-active{ opacity:1 !important; transform:none !important; visibility:visible !important; }
  .gh-slide.is-active .gh-badge,
  .gh-slide.is-active .gh-lead,
  .gh-slide.is-active .gh-actions,
  .gh-slide.is-active .gh-title,
  .gh-slide.is-active .gh-title .w{ opacity:1 !important; transform:none !important; animation:none !important; }
  .gh-slide:not(.is-active){ visibility:hidden; pointer-events:none; }
  .gh-slide.is-active .gh-title .w:last-child{ animation:ghGrad 6s linear infinite !important; }
}
/* ---- hero highlights: all three in ONE row on phones ---- */
@media (max-width:640px){
  .gh-points{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:8px !important; justify-content:stretch !important; }
  .gh-points li, .gh-points li + li{ flex-direction:column !important; align-items:center !important; text-align:center; gap:7px !important; padding:11px 4px !important; white-space:normal !important; border:1px solid rgba(255,255,255,.18) !important; border-radius:14px; background:rgba(255,255,255,.08); }
  .gh-pt-ico{ width:34px !important; height:34px !important; border-radius:10px !important; }
  .gh-pt-ico svg{ width:18px !important; height:18px !important; }
  .gh-points{ align-items:stretch !important; }
  .gh-points li > span:last-child{ display:flex; flex-direction:column; align-items:center; }
  .gh-points b{ font-size:11.5px !important; line-height:1.25; }
  .gh-points small{ font-size:10px !important; line-height:1.25; margin-top:1px; }
}
/* ---- phone header: big logo on the left, menu button on the right ---- */
@media (max-width:640px){
  .navbar{ justify-content:flex-start !important; padding:8px 64px 8px 16px !important; min-height:84px; }
  .navbar .logo{ margin:0; justify-content:flex-start; }
  .header-logo-img{ height:68px !important; }
  .navbar .nav-toggle{ position:absolute !important; right:14px; top:50%; transform:translateY(-50%); z-index:61; }
  .navbar.is-open .nav-menu{ top:100% !important; }
}
@media (max-width:360px){ .header-logo-img{ height:60px !important; } }