/* ============================================================
   Fran Kelly Professional Liability — Mobile Styles
   Overrides desktop.css at max-width: 860px
   ============================================================ */

@media (max-width: 860px) {

  /* ── Nav ── */
  .nav-links { display: none; }
  .nav-links.mobile-open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: 68px; left: 0; right: 0;
    background: var(--white); border-bottom: 1px solid var(--border);
    padding: 8px 0; box-shadow: 0 8px 24px rgba(26,42,58,.1); z-index: 199;
  }
  .nav-links.mobile-open > li > a,
  .nav-links.mobile-open > li > span { padding: 12px 5%; font-size: 15px; color: var(--navy); }
  .nav-links.mobile-open .dropdown {
    display: block; position: static; box-shadow: none;
    border: none; border-top: 1px solid var(--border);
    padding: 0; border-radius: 0;
  }
  .nav-links.mobile-open .dropdown a { padding: 10px 7%; font-size: 14px; }
  .nav-links.mobile-open > li > span.has-arrow::after { float: right; }
  .nav-links.mobile-open .nav-cta { margin: 8px 5%; border-radius: 4px; text-align: center; }

  .nav-burger {
    display: flex; flex-direction: column; justify-content: center;
    gap: 5px; background: none; border: none; cursor: pointer; padding: 8px;
  }
  .nav-burger span {
    display: block; width: 22px; height: 2px;
    background: var(--navy); border-radius: 2px; transition: all .2s;
  }
  .nav-burger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger.active span:nth-child(2) { opacity: 0; }
  .nav-burger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  nav { position: relative; }

  /* ── Hero ── */
  .hero { grid-template-columns: 1fr; gap: 40px; padding: 56px 4% 52px; }
  .hero-left p { max-width: 100%; }
  .hero-actions { flex-direction: column; }
  .btn-hero-primary, .btn-hero-secondary { text-align: center; }

  /* ── Why ── */
  .why-section { grid-template-columns: 1fr; gap: 36px; padding: 52px 4%; }

  /* ── Home services ── */
  .home-services { padding: 48px 4%; }
  .services-grid { grid-template-columns: 1fr; }

  /* ── CTA Row ── */
  .cta-row { grid-template-columns: 1fr; padding: 48px 4%; }

  /* ── Container ── */
  .container { padding: 48px 4%; }

  /* ── Contact ── */
  .contact-grid { grid-template-columns: 1fr; gap: 28px; }

  /* ── Service Detail ── */
  .service-detail { grid-template-columns: 1fr; gap: 32px; }
  .service-sidebar { order: -1; }

  /* ── Coverage Grid ── */
  .coverage-grid { grid-template-columns: 1fr; }

  /* ── Footer ── */
  footer { grid-template-columns: 1fr; gap: 28px; padding: 40px 4% 28px; }
  .footer-bottom { flex-direction: column; gap: 8px; padding: 16px 4%; }

  /* ── Page Header ── */
  .page-header { padding: 40px 4% 36px; }

  /* ── Applications ── */
  .app-list li { flex-direction: column; align-items: flex-start; gap: 12px; }
  .app-list a { align-self: flex-start; }

  /* ── Intro Band ── */
  .intro-band { padding: 36px 4%; }
  .intro-band p { font-size: 15px; }

  /* ── Action row ── */
  .action-row { flex-direction: column; }
  .action-row .btn-primary, .action-row .btn-outline { text-align: center; }
}

@media (max-width: 400px) {
  .trust-stat { flex-direction: column; align-items: flex-start; gap: 8px; }
  .trust-stat .number { font-size: 22px; min-width: auto; }
  .section-title { font-size: 20px; }
}