/* Site-wide mobile refinement layer */

/* ── Always: prevent horizontal scroll on all devices ── */
html,
body {
  overflow-x: hidden !important;
  max-width: 100vw;
}

/* Belt-and-suspenders: clip any section that bleeds */
main,
section,
footer,
header,
nav {
  max-width: 100%;
}

@media (max-width: 900px) {
  html {
    scroll-padding-top: 86px;
  }

  body {
    font-size: 15.5px;
  }

  nav {
    min-height: 66px !important;
    padding: 0.85rem 1rem !important;
  }

  .nav-logo {
    font-size: 1.12rem !important;
  }

  .mobile-nav {
    top: 66px !important;
    padding: 1.35rem 1.1rem 2rem !important;
    gap: 0.35rem !important;
    overflow-y: auto;
  }

  .mobile-nav a {
    width: 100%;
    padding: 0.95rem 0.2rem !important;
    font-size: 1.05rem !important;
  }

  .container {
    padding-inline: 1rem !important;
  }

  .sec-pad {
    padding-block: 4.25rem !important;
  }

  .page-hero,
  .hero {
    padding-inline: 1rem !important;
    padding-top: 7.5rem !important;
    padding-bottom: 3.6rem !important;
  }

  .page-hero::before,
  .hero::before {
    inset-inline: 0.65rem !important;
  }

  .page-hero h1,
  .hero-h1,
  .section-title,
  .cta-inner h2 {
    overflow-wrap: anywhere;
  }

  .page-hero p,
  .hero-sub,
  .section-sub,
  .cta-inner p {
    font-size: 0.98rem !important;
    line-height: 1.7 !important;
  }

  .btn-glow {
    min-height: 48px;
    padding: 0.85rem 1rem !important;
  }

  .ambient-blob,
  .ab,
  .aurora-band {
    filter: blur(80px) !important;
    opacity: 0.055 !important;
  }

  .blog-layout {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .sidebar {
    position: static !important;
  }
}

@media (max-width: 760px) {
  .hero-actions,
  .cta-btns {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 0.75rem !important;
  }

  .btn-glow,
  .nav-btn {
    width: 100%;
    justify-content: center;
  }

  .hero-proof,
  .service-proof,
  .about-proof {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 0.55rem !important;
  }

  .hero-proof span,
  .service-proof span,
  .about-proof span {
    justify-content: flex-start;
    width: 100%;
  }

  .hero-stats,
  .stats-inner,
  .portfolio-proof {
    grid-template-columns: 1fr 1fr !important;
  }

  .stat-cell,
  .hero-stat,
  .portfolio-proof div {
    min-height: auto !important;
    padding: 1rem !important;
  }

  .bento,
  .tech-grid,
  .process-steps,
  .port-grid,
  .articles,
  .blog-grid,
  .testi-grid,
  .team-grid,
  .values-grid,
  .mv-grid,
  .contact-layout,
  .footer-grid {
    grid-template-columns: 1fr !important;
  }

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

  .bento-cell,
  .port-body,
  .blog-body,
  .team-card,
  .val-card,
  .mv-cell,
  .form-card,
  .info-panel {
    padding: 1.35rem !important;
  }

  .port-img,
  .blog-img,
  .featured-img {
    min-height: 180px !important;
    height: 200px !important;
  }

  .featured,
  .article-card {
    grid-template-columns: 1fr !important;
  }

  .featured-body,
  .art-body {
    padding: 1.35rem !important;
  }

  .featured {
    margin-bottom: 1.5rem !important;
  }

  .featured-img {
    font-size: 4rem !important;
  }

  .feat-meta {
    flex-wrap: wrap;
    gap: 0.45rem 0.8rem !important;
  }

  .feat-title {
    font-size: clamp(1.35rem, 7vw, 1.75rem) !important;
    line-height: 1.16 !important;
  }

  .article-card {
    border-radius: 14px !important;
  }

  .art-img {
    min-height: 138px !important;
    font-size: 2.65rem !important;
  }

  .art-title {
    font-size: 1rem !important;
    line-height: 1.28 !important;
  }

  .art-meta {
    align-items: flex-start !important;
    flex-direction: column;
    gap: 0.35rem;
  }

  .sidebar {
    margin-top: 2rem;
  }

  .sb-widget {
    padding: 1.25rem !important;
  }

  .cat-list li,
  .recent-item {
    gap: 0.75rem;
  }

  .tag-cloud {
    gap: 0.45rem !important;
  }

  .tag-pill {
    padding: 0.38rem 0.62rem !important;
  }

  .filter-row {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ftab {
    width: 100%;
    padding-inline: 0.75rem !important;
  }

  .sb-inner,
  .sb-inner.flip,
  .ai-inner,
  .timeline-layout {
    grid-template-columns: 1fr !important;
    direction: ltr !important;
    gap: 1.75rem !important;
  }

  .sb-visual,
  .hero-visual {
    min-height: 240px !important;
    height: 280px !important;
  }

  .contact-sidebar {
    position: static !important;
  }

  .form-row {
    grid-template-columns: 1fr !important;
  }

  .footer-bottom {
    align-items: flex-start !important;
    text-align: left !important;
  }

  .stats-strip .container {
    padding-inline: 1rem !important;
  }

  .stats-inner,
  .portfolio-proof {
    border-radius: 14px !important;
  }

  .stat-num {
    font-size: 2rem !important;
  }

  .stat-lbl {
    font-size: 0.62rem !important;
    line-height: 1.35;
  }

  .mv-title,
  .val-title,
  .team-name,
  .tl-title {
    line-height: 1.18 !important;
  }

  .team-role {
    white-space: normal;
    line-height: 1.35;
  }

  .timeline-section .section-title {
    margin-bottom: 0.65rem !important;
  }

  .timeline-layout > .reveal p {
    max-width: 100% !important;
  }
}

@media (max-width: 480px) {
  .page-hero h1,
  .hero-h1 {
    font-size: clamp(2.35rem, 13vw, 3.35rem) !important;
  }

  .section-title,
  .cta-inner h2 {
    font-size: clamp(2rem, 10vw, 2.8rem) !important;
  }

  .portfolio-proof,
  .tech-grid,
  .filter-row {
    grid-template-columns: 1fr !important;
  }

  .hero-stats,
  .stats-inner {
    grid-template-columns: 1fr 1fr !important;
  }

  .service-nav-inner {
    grid-template-columns: 1fr !important;
  }

  .timeline {
    padding-left: 1.25rem !important;
  }

  .tl-item {
    padding-left: 1.25rem !important;
  }

  .tl-dot {
    left: -1.6rem !important;
  }

  .footer-links {
    gap: 1rem !important;
  }

  .page-hero,
  .hero {
    padding-inline: 0.85rem !important;
  }

  .container {
    padding-inline: 0.85rem !important;
  }

  .mobile-nav {
    padding-inline: 0.9rem !important;
  }

  .featured-body,
  .art-body,
  .sb-widget,
  .team-card,
  .val-card,
  .mv-cell {
    padding: 1.1rem !important;
  }

  .team-avatar {
    width: 78px !important;
    height: 78px !important;
    font-size: 1.75rem !important;
  }

  .footer-bottom,
  .footer-links {
    width: 100%;
  }

  .footer-links {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}