/* =========================================================
   GO TECH SOLUTIONS — Global responsive styles
   Load last (after page CSS) on every page.
   Breakpoints: 1200 | 1024 | 768 | 480
   ========================================================= */

/* ---------- Foundation ---------- */
html {
  overflow-x: clip;
}

body {
  overflow-x: clip;
}

img,
video,
svg {
  max-width: 100%;
  height: auto;
}

.container {
  padding-left: clamp(16px, 4vw, 24px);
  padding-right: clamp(16px, 4vw, 24px);
}

/* ---------- Mobile navigation ---------- */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(4, 10, 22, 0.55);
  z-index: 99;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.nav-overlay.is-visible {
  display: block;
  opacity: 1;
}

body.nav-open {
  overflow: hidden;
}

@media (max-width: 980px) {
  .nav-inner,
  #global-header .nav-inner {
    gap: 12px;
    padding: 8px 12px 8px 16px !important;
  }

  .nav-links {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: min(320px, 88vw);
    height: 100vh;
    height: 100dvh;
    flex: none;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    padding: 88px 24px 32px;
    margin: 0;
    list-style: none;
    background: rgba(6, 18, 38, 0.98);
    backdrop-filter: blur(14px);
    border-left: 1px solid rgba(63, 182, 247, 0.22);
    z-index: 100;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .nav-links a {
    display: block;
    padding: 16px 0;
    font-size: 15px;
  }

  .mobile-toggle {
    display: flex;
    z-index: 101;
  }

  .mobile-toggle.is-active span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .mobile-toggle.is-active span:nth-child(2) {
    opacity: 0;
  }

  .mobile-toggle.is-active span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .mobile-toggle span {
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
}

@media (max-width: 600px) {
  .nav-cta {
    display: none;
  }

  .logo-img {
    max-height: 36px;
    width: auto;
  }
}

/* ---------- Heroes (all pages) ---------- */
@media (max-width: 1024px) {
  .hero-bg-infinity {
    width: 70%;
    max-width: 520px;
    top: calc(var(--header-clearance) + 24px);
    right: -80px;
    opacity: 0.85;
  }

  .service-detail-hero .hero-grid,
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }

  .hero-panel {
    max-width: 100%;
  }

  .services-hero,
  .portfolio-hero,
  .career-hero {
    min-height: auto;
    padding-bottom: 64px;
  }
}

@media (max-width: 768px) {
  :root {
    --hero-content-gap: 28px;
  }

  .hero-content,
  .hero-content.container {
    padding-top: var(--hero-content-gap);
    padding-bottom: 24px;
  }

  .hero-title {
    font-size: clamp(32px, 8vw, 42px) !important;
  }

  .hero-sub,
  .hero-sub-2,
  .hero-location {
    max-width: 100%;
    font-size: 14px;
  }

  .hero-ctas {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 12px;
  }

  .hero-ctas .btn {
    width: 100%;
    justify-content: center;
  }

  .hero-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
  }

  .hero-stats .stat {
    min-width: 0;
    width: 100%;
  }

  .portfolio-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .scroll-hint {
    margin-top: 24px;
  }

  .hero-bg-infinity {
    width: 90%;
    right: -40%;
    top: calc(var(--header-clearance) + 32px);
    opacity: 0.5;
  }

  .service-detail-hero .hero-copy h1,
  .service-detail-hero .hero-copy h1 {
    font-size: clamp(32px, 7vw, 40px) !important;
  }

  .hero-highlights {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .hero-stats,
  .portfolio-stats {
    grid-template-columns: 1fr;
  }

  .hero-bg-infinity {
    display: none;
  }
}

/* ---------- Shared multi-column grids ---------- */
@media (max-width: 1100px) {
  .tech-icons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cd-why-choose-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .about-grid,
  .contact-grid,
  .project-grid,
  .legal-layout,
  .contact-container,
  .uux-split-grid,
  .cd-intro-grid,
  .wd-matters-grid,
  .wd-texas-grid,
  .bpa-triple-grid,
  .port-card {
    grid-template-columns: 1fr !important;
  }

  .services-grid,
  .hire-cards,
  .featured-grid,
  .why-grid,
  .blog-grid,
  .blog-listing-grid,
  .blog-related-grid,
  .awards-grid,
  .steps-wrap,
  .industries-grid,
  .global-grid,
  .vt-grid,
  .roles-grid,
  .faq-grid,
  .culture-grid,
  .vacancy-grid,
  .portfolio-grid,
  .overview-grid,
  .tool-grid,
  .case-grid,
  .client-testi-grid,
  .client-testi-grid--cols-2,
  .testimonial-grid,
  .reason-grid,
  .recognition-grid,
  .benefits-grid,
  .feature-grid,
  .process-grid,
  .form-grid,
  .cs-overview-grid,
  .cs-features-grid,
  .cs-outcome-grid,
  .cs-tech-grid,
  .ec-services-grid,
  .ec-why-grid,
  .pd-problem-grid,
  .pd-answer-grid,
  .pd-process-grid,
  .pd-case-grid,
  .pd-why-grid,
  .cd-process-grid,
  .cd-industries-grid,
  .cd-tech-grid,
  .cd-why-gotech-grid,
  .hdt-roles-grid,
  .hdt-engagement-grid,
  .hdt-benefits-grid,
  .hdt-industries-grid,
  .uux-investment-grid,
  .uux-check-grid,
  .uux-services-grid,
  .uux-process-grid,
  .uux-different-grid,
  .uux-results-grid,
  .uux-industries-grid,
  .uux-tools-grid,
  .bpa-benefits-grid,
  .bpa-matters-grid,
  .bpa-services-grid,
  .bpa-process-grid,
  .bpa-industries-grid,
  .bpa-why-grid,
  .ea-services-grid,
  .ea-why-grid,
  .had-challenge-grid,
  .had-deliver-grid,
  .had-governance-grid,
  .had-why-grid,
  .had-case-grid,
  .wd-features-grid,
  .wd-types-grid,
  .wd-industry-grid,
  .wd-why-grid,
  .wd-problems-cards,
  .tc-services-grid,
  .tc-why-grid,
  .tc-tech-grid,
  .tc-stats-grid,
  .wa-problem-grid,
  .wa-tech-grid,
  .wa-industry-grid,
  .wa-why-grid,
  .ma-tech-grid,
  .ma-industry-grid,
  .ma-case-grid,
  .ma-reason-grid,
  .industry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .build-service-item,
  .automate-row,
  .expertise-service-item {
    grid-template-columns: 1fr !important;
  }

  .project-actions,
  .cta-actions,
  .cta-row,
  .contact-row,
  .hero-ctas,
  .contact-cta-row {
    flex-wrap: wrap;
  }

  .portfolio-cta-bar {
    padding: 56px 0 72px;
  }

  .portfolio-cta-inner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 28px;
    padding: 36px 28px;
  }

  .portfolio-cta-copy {
    align-items: center;
  }

  .portfolio-cta-desc {
    max-width: none;
  }

  .portfolio-cta-action {
    align-items: center;
  }

  .portfolio-cta-note {
    text-align: center;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .tech-icons,
  .cd-why-choose-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .services-grid,
  .hire-cards,
  .featured-grid,
  .why-grid,
  .blog-grid,
  .blog-listing-grid,
  .blog-related-grid,
  .awards-grid,
  .steps-wrap,
  .culture-grid,
  .vacancy-grid,
  .portfolio-grid,
  .overview-grid,
  .tool-grid,
  .case-grid,
  .client-testi-grid,
  .client-testi-grid--cols-2,
  .testimonial-grid,
  .reason-grid,
  .recognition-grid,
  .benefits-grid,
  .feature-grid,
  .process-grid,
  .cs-overview-grid,
  .cs-features-grid,
  .cs-outcome-grid,
  .cs-tech-grid,
  .ec-services-grid,
  .ec-why-grid,
  .pd-problem-grid,
  .pd-answer-grid,
  .pd-process-grid,
  .pd-case-grid,
  .pd-why-grid,
  .cd-process-grid,
  .cd-industries-grid,
  .cd-tech-grid,
  .cd-why-gotech-grid,
  .hdt-roles-grid,
  .hdt-engagement-grid,
  .hdt-benefits-grid,
  .hdt-industries-grid,
  .uux-services-grid,
  .uux-process-grid,
  .uux-different-grid,
  .uux-results-grid,
  .uux-industries-grid,
  .uux-tools-grid,
  .bpa-benefits-grid,
  .bpa-matters-grid,
  .bpa-services-grid,
  .bpa-process-grid,
  .bpa-industries-grid,
  .bpa-why-grid,
  .ea-services-grid,
  .ea-why-grid,
  .had-challenge-grid,
  .had-deliver-grid,
  .had-governance-grid,
  .had-why-grid,
  .had-case-grid,
  .wd-features-grid,
  .wd-types-grid,
  .wd-industry-grid,
  .wd-why-grid,
  .tc-services-grid,
  .tc-why-grid,
  .tc-tech-grid,
  .tc-stats-grid,
  .wa-problem-grid,
  .wa-tech-grid,
  .wa-industry-grid,
  .wa-why-grid,
  .ma-tech-grid,
  .ma-industry-grid,
  .ma-case-grid,
  .ma-reason-grid,
  .industry-grid,
  .uux-investment-grid,
  .uux-check-grid,
  .footer-grid {
    grid-template-columns: 1fr !important;
  }

  .build-service-image,
  .automate-visual,
  .expertise-service-media {
    aspect-ratio: 16 / 9;
    min-height: 200px;
    height: auto;
  }


  .section-padding {
    padding: 64px 0 !important;
  }

  .build-section,
  .automate-section,
  .expertise-section,
  .portfolio-intro,
  .portfolio-grid-section,
  .culture-section,
  .vacancies-section,
  .contact-section,
  .legal-content {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .section-h2 {
    font-size: clamp(24px, 6vw, 32px) !important;
  }

  .project-grid,
  .input-grid,
  .form-row,
  .row-2 {
    grid-template-columns: 1fr !important;
  }

  .project-copy h2 {
    font-size: clamp(26px, 6vw, 34px) !important;
  }

  .project-actions .btn,
  .cta-actions .btn,
  .portfolio-cta-action .btn,
  .btn-block {
    width: 100%;
    justify-content: center;
  }

  .contact-row {
    flex-direction: column;
  }

  .contact-item {
    min-width: 0;
    width: 100%;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }

  .f-links {
    flex-wrap: wrap;
    justify-content: center;
  }

  .portfolio-filter {
    gap: 8px;
  }

  .filter-btn {
    padding: 10px 16px;
    font-size: 13px;
  }

  .navbar {
    padding: 12px 16px !important;
  }

  .about-text .card-grid-3,
  .about-text .card-grid-2,
  .card-grid-3,
  .card-grid-2 {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .tech-icons,
  .cd-why-choose-grid {
    grid-template-columns: 1fr;
  }

  .btn {
    padding: 12px 18px;
    font-size: 13px;
  }

  .project-card,
  .hero-panel {
    padding: 20px 16px !important;
    border-radius: 20px;
  }

  .culture-card,
  .vacancy-item {
    padding: 20px;
  }

  .page-portfolio .portfolio-card-content {
    padding: 20px;
  }
}

/* ---------- Tables & wide content ---------- */
.table-wrap,
.legal-prose table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- Legal & contact pages ---------- */
@media (max-width: 1024px) {
  .legal-layout {
    grid-template-columns: 1fr !important;
  }

  .legal-sidebar {
    position: static;
  }
}

@media (max-width: 768px) {
  .contact-hero,
  .legal-hero {
    min-height: auto;
    padding-bottom: 48px;
  }

}

/* ---------- Touch targets ---------- */
@media (hover: none) and (pointer: coarse) {
  .nav-links a,
  .filter-btn,
  .vacancy-item,
  .btn {
    min-height: 44px;
  }
}

/* =========================================================
   NO ANIMATIONS — site-wide (loads last)
   ========================================================= */
html {
  scroll-behavior: auto !important;
}

*,
*::before,
*::after {
  animation: none !important;
  transition: none !important;
}

.service-card:hover,
.hire-card:hover,
.tech-tab:hover,
.tech-item:hover,
.port-card:hover,
.vt-card:hover,
.blog-card:hover,
.client-testi-card:hover,
.portfolio-cta-action .btn-white:hover,
.btn-primary:hover,
.btn-white:hover,
.btn-ghost:hover,
.tooltip-cta:hover,
.vacancy-item:hover,
.blog-list-card:hover,
.page-bpa .bpa-triple-card:hover,
.page-bpa .bpa-matter-card:hover,
.page-bpa .bpa-service-card:hover,
.page-bpa .bpa-industry-card:hover,
.page-bpa .bpa-why-card:hover,
.page-custom-dev .cd-service-box:hover,
.page-custom-dev .cd-gotech-card:hover,
.page-custom-dev .client-testi-card:hover,
.build-service-item:hover .build-service-image img,
.automate-row:hover .automate-visual img,
.expertise-service-item:hover .expertise-service-media img,
.tech-item:hover .ti-ico,
.tech-item:hover .ti-ico--brand,
.blog-card:hover .bc-photo,
.who-card:hover,
.step-horizontal:hover,
.build-card:hover,
.work-card:hover,
.why-card:hover {
  transform: none !important;
}

.mobile-toggle.is-active span:nth-child(1) {
  transform: translateY(6px) rotate(45deg) !important;
}

.mobile-toggle.is-active span:nth-child(2) {
  opacity: 0 !important;
}

.mobile-toggle.is-active span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg) !important;
}