/* ==========================================================================
   WEB DIGITAL — responsive breakpoints
   No horizontal scrolling at any width from 1920px down to 360px.
   ========================================================================== */

@media (max-width: 1400px) {
  :root { --container-w: 1100px; }
}

/* Between 1200px and 1400px the container above shrinks to 1100px, and the
   full desktop nav (logo + 7 links + search box + CTA button) at its normal
   size no longer fits in that space — it starts overflowing around 1290px.
   This used to be "fixed" by collapsing straight to the hamburger menu at
   1399px, but that swallowed the most common laptop resolution (1366px),
   making ordinary laptops show the mobile menu instead of the real nav.
   Fix it properly instead: tighten the nav's own spacing/sizes so the full
   row fits inside the 1100px container, and only hand off to the hamburger
   at the page's normal 1199px tablet breakpoint (below). */
@media (min-width: 1200px) and (max-width: 1400px) {
  .header-inner { gap: 14px; }
  .brand { gap: 8px; font-size: 1.12rem; }
  .main-nav ul { gap: 20px; }
  .main-nav a { font-size: 0.86rem; }
  .header-actions { gap: 10px; }
  .nav-search input { width: 116px; padding: 8px 32px 8px 12px; font-size: 0.8rem; }
  .nav-search input:focus { width: 150px; }
  .theme-toggle { width: 36px; height: 36px; }
  .theme-toggle svg { width: 16px; height: 16px; }
  .nav-cta { padding: 9px 16px; font-size: 0.82rem; }
}

@media (max-width: 1199px) {
  .main-nav { position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; background: var(--bg); padding: 30px 24px; transform: translateY(-12px); opacity: 0; visibility: hidden; transition: all var(--transition); overflow-y: auto; z-index: 190; }
  .main-nav.open { transform: none; opacity: 1; visibility: visible; }
  .main-nav ul { flex-direction: column; gap: 6px; }
  .main-nav a { display: block; padding: 14px 4px; font-size: 1.05rem; border-bottom: 1px solid var(--border); }
  .nav-toggle { display: inline-flex; }
  .nav-search { display: none; }
  .nav-cta { display: none; }
}

@media (max-width: 1199px) {
  .services-grid, .value-grid, .portfolio-grid, .team-grid, .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 20px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .strategy-wrap { grid-template-columns: 240px 1fr; gap: 30px; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
  .hero-copy { max-width: 640px; }
}

@media (max-width: 991px) {
  .about-grid, .vision-grid { grid-template-columns: 1fr; gap: 50px; }
  .about-visual { max-width: 420px; margin: 0 auto; }

  /* On the photo version of this panel (homepage), the "2 Global Offices"
     and "5+ Years" corner badges were colliding with the Strategy/Execution
     mini-cards once the panel narrowed enough for their text to wrap taller.
     A taller box plus smaller badges/cards gives everything room to breathe. */
  .about-visual--photo .about-visual-panel { aspect-ratio: 3/4.3; }
  .about-visual--photo .about-badge { padding: 12px 16px; bottom: 10px; left: 10px; }
  .about-visual--photo .about-badge h3 { font-size: 1.5rem; }
  .about-visual--photo .float-badge-top { top: 10px; right: 10px; }
  .about-visual--photo .float-badge { padding: 10px 14px; gap: 10px; }
  .about-visual--photo .float-badge-ic { width: 30px; height: 30px; }
  .about-visual--photo .about-mini-card { padding: 12px 14px; gap: 10px; }
  .about-visual--photo .about-mini-ic { width: 32px; height: 32px; }
  .consulting-grid { grid-template-columns: 1fr; }
  .strategy-wrap { grid-template-columns: 1fr; }
  .strategy-tabs { flex-direction: row; overflow-x: auto; gap: 10px; padding-bottom: 6px; }
  .strategy-tabs .nav-link { white-space: nowrap; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .section { padding: 70px 0; }
  .site-footer { margin-top: 80px; }
  .webdev-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 767px) {
  :root { --header-h: 72px; }
  .services-grid, .value-grid, .portfolio-grid, .team-grid, .blog-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr; gap: 34px; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }

  /* Let the hero's height follow its content on small screens instead of a
     fixed vh, and drop the side arrows — on a phone the dots + swipe are
     enough, and the arrows used to sit at 50% of the slide height and
     overlap the buttons/copy underneath them. */
  .hero-slide { min-height: auto; padding: 130px 0 84px; }
  .hero-carousel .carousel-control-prev, .hero-carousel .carousel-control-next { display: none; }
  .carousel-indicators { bottom: 20px; }
  .hero-slide p { margin-bottom: 24px; }
  .hero-stats { gap: 22px; margin-top: 30px; }
  .page-banner { padding: 130px 0 60px; }
  .cta-section { margin: 0 16px; padding: 56px 24px; }
  .form-grid { grid-template-columns: 1fr; }
  .container { padding: 0 18px; }
  .strategy-panel { padding: 30px 24px; }
  .testimonial-card { padding: 30px 22px; }
  .back-to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; }
}

@media (max-width: 480px) {
  .brand-text { font-size: 1.05rem; }
  .hero-slide h1 { font-size: 2rem; }
  .hero-actions .btn { width: 100%; }
  .hero-actions { flex-direction: column; }
  .stats-grid { grid-template-columns: 1fr; }
  .about-badge { left: 0; bottom: -18px; padding: 16px 18px; }
  .value-card, .consulting-card, .service-card { padding: 28px 22px; }
  .webdev-bento { grid-template-columns: 1fr; }
  .webdev-process { padding: 26px 20px; }
}

@media (max-width: 360px) {
  .container { padding: 0 14px; }
  .btn { padding: 13px 22px; font-size: 0.88rem; }
}