/* ================================================
   NEXUS — MOBILE STYLES
   Loaded on all devices, targets small screens
   Desktop-specific overrides remain in index.html
================================================ */

/* ---- TOUCH DEVICE CURSOR OVERRIDE ---- */
@media (hover: none), (pointer: coarse) {
  body    { cursor: auto !important; }
  a       { cursor: pointer !important; }
  button  { cursor: pointer !important; }
  .c-dot,
  .c-ring { display: none !important; }
}

/* ---- SMALL PHONE (max 480px) ---- */
@media (max-width: 480px) {
  /* Typography scale down */
  .hero__h1    { font-size: 40px; letter-spacing: -.035em; }
  .sh__t       { font-size: 30px; }
  .stat__n     { font-size: 44px; }
  .cta-box__t  { font-size: 30px; }

  /* Hero */
  #hero { padding: 100px 0 60px; }
  .hero__badge { font-size: 11px; padding: 6px 14px; }
  .hero__sub   { font-size: 15px; }
  .hero__btns  { flex-direction: column; width: 100%; }
  .hero__btns .btn { width: 100%; justify-content: center; font-size: 14px; }
  .hero__scroll { display: none; }

  /* Floating badges */
  .hero__float { display: none; }

  /* Stats */
  .stats__g { grid-template-columns: 1fr; gap: 1px; }
  .stat { padding: 36px 24px; }

  /* Services */
  .svc__g { grid-template-columns: 1fr; gap: 14px; }
  .svc-card { padding: 28px 24px; }

  /* Process */
  .proc__g { grid-template-columns: 1fr 1fr; gap: 20px; }

  /* Work */
  .work__g { grid-template-columns: 1fr; gap: 14px; }
  .w-card--feat { grid-column: 1; display: block; }
  .w-card--feat .w-card__img { min-height: 200px; height: 200px; }
  .w-card__content { padding: 20px; }
  .w-card__t { font-size: 18px; }
  .w-metrics { gap: 14px; }
  .w-met__v  { font-size: 18px; }

  /* Bento features */
  .bento { gap: 12px; }
  .b { grid-column: 1 / -1 !important; padding: 24px; }
  .b__t { font-size: 17px; }

  /* Team */
  .team__g { grid-template-columns: 1fr; gap: 14px; max-width: 100%; }
  .t-card { padding: 28px 24px; }

  /* Testimonials */
  .t-card2 { width: 100% !important; min-width: 100% !important; padding: 24px; }
  .t-txt { font-size: 14.5px; }

  /* CTA */
  .cta-box { padding: 44px 20px; border-radius: 20px; }
  .cta-box__btns { flex-direction: column; width: 100%; }
  .cta-box__btns .btn { width: 100%; justify-content: center; }

  /* Footer */
  .footer__g { grid-template-columns: 1fr; gap: 28px; }
  .footer__bot { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ---- TABLET / LARGE MOBILE (481px – 768px) ---- */
@media (min-width: 481px) and (max-width: 768px) {
  /* Nav */
  .nav__links,
  .nav__cta { display: none !important; }
  .nav__tog  { display: flex !important; }

  /* Hero */
  .hero__h1  { font-size: clamp(38px, 8vw, 56px); }
  .hero__float { display: none; }

  /* Layout grids → single column */
  .svc__g,
  .work__g,
  .team__g   { grid-template-columns: 1fr; }
  .stats__g  { grid-template-columns: 1fr; }
  .w-card--feat { grid-column: 1; display: block; }
  .bento .b  { grid-column: 1 / -1 !important; }
  .footer__g { grid-template-columns: 1fr 1fr; }

  /* Process — 2 columns */
  .proc__g   { grid-template-columns: repeat(2,1fr); }
  .proc__g::before { display: none; }

  /* Testimonials → 1 per page */
  .t-card2 { width: 100% !important; min-width: 100% !important; }
}

/* ---- MEDIUM TABLET (769px – 1024px) ---- */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Hero floats hidden */
  .hero__float { display: none; }

  /* Bento grid adjustments */
  .b1, .b2, .b6, .b7 { grid-column: span 6 !important; }
  .b3, .b4, .b5       { grid-column: span 4 !important; }

  /* Process 2x2 */
  .proc__g   { grid-template-columns: repeat(2,1fr); }
  .proc__g::before { display: none; }

  /* Footer 2-col */
  .footer__g { grid-template-columns: 1fr 1fr; }
}

/* ---- TOUCH INTERACTION IMPROVEMENTS ---- */
@media (hover: none) {
  /* Remove hover transforms that feel broken on touch */
  .svc-card:hover,
  .w-card:hover,
  .t-card:hover,
  .t-card2:hover,
  .b:hover,
  .btn:hover {
    transform: none !important;
  }

  /* Larger tap targets */
  .btn { padding: 15px 28px; min-height: 48px; }
  .nav__links a { padding: 12px 16px; }
  .testi__btn { width: 52px; height: 52px; }
  .testi__dot { width: 12px; height: 12px; min-width: 12px; min-height: 12px; }
  .testi__dot.on { width: 28px; }

  /* Keep visible reveal states (no :hover needed to see content) */
  .w-card .w-card__overlay { opacity: 1; }
}

/* ---- LANDSCAPE PHONES ---- */
@media (max-width: 768px) and (orientation: landscape) {
  #hero { min-height: auto; padding: 80px 0 40px; }
  .hero__h1 { font-size: clamp(32px, 6vw, 48px); }
}

/* ---- SALES IMAGE MOBILE SWAP ---- */
@media (max-width: 768px) {
  .sales-img {
    background-image: url('salesmobile.jpg') !important;
    background-size: cover !important;
    background-position: center top !important;
  }
}

/* ---- REDUCED MOTION ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .mq__t  { animation: none; }
}