/* ============================================================
   SECURITY PAGE (+ ALL SERVICE PAGES) — HERO STATS MOBILE FIX
   Paste at the very bottom of your style.css
   ============================================================ */

@media (max-width: 820px) {

  /* ── Stats grid: 3 columns → 1 row of 3 equal boxes ── */
  .service-page-hero-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    margin-top: 28px !important;
    width: 100% !important;
  }

  /* ── Each stat card ── */
  .sph-stat {
    padding: 16px 12px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(212,168,67,.2) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  /* ── Big number/word — scale down so it fits ── */
  .sph-stat .num {
    font-family: var(--font-display) !important;
    font-size: clamp(20px, 5.5vw, 32px) !important;
    font-weight: 800 !important;
    color: var(--gold-light) !important;
    line-height: 1 !important;
    display: block !important;
  }

  /* ── Label text — smaller and no wrapping issues ── */
  .sph-stat .lbl {
    font-size: 11px !important;
    color: rgba(255,255,255,.55) !important;
    line-height: 1.4 !important;
    letter-spacing: .04em !important;
  }

  /* ── Page hero: enough height for content ── */
  .page-hero {
    min-height: auto !important;
  }

  .page-hero .container {
    padding-top: 50px !important;
    padding-bottom: 40px !important;
  }

  /* ── Hero h1 on service pages ── */
  .page-hero h1 {
    font-size: clamp(28px, 7.5vw, 40px) !important;
    line-height: 1.12 !important;
    margin-bottom: 14px !important;
  }

  /* ── Hero paragraph ── */
  .page-hero p {
    font-size: 15px !important;
    line-height: 1.7 !important;
    max-width: 100% !important;
    margin-bottom: 24px !important;
  }

  /* ── Hero tag ── */
  .hero-tag {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    font-size: 9px !important;
  }
}

/* ── Very small phones: stack to 1 column ── */
@media (max-width: 380px) {
  .service-page-hero-stats {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .sph-stat {
    flex-direction: row !important;
    align-items: center !important;
    gap: 14px !important;
  }

  .sph-stat .num {
    font-size: 28px !important;
    min-width: 60px !important;
  }
}
/* ============================================================
   PROCESS STEPS — MOBILE FIX
   Fixes "How It Works" 4-step grid overflowing on mobile
   Paste at the very bottom of your style.css
   ============================================================ */

@media (max-width: 820px) {

  /* Stack steps into 1 column on mobile */
  .process-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Each step card */
  .process-step {
    padding: 26px 22px !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  /* Number badge */
  .process-step .step-num {
    width: 52px !important;
    height: 52px !important;
    font-size: 20px !important;
    border-radius: 16px !important;
    margin: 0 0 14px 0 !important;
  }

  /* Title */
  .process-step h3 {
    font-size: 18px !important;
    margin-bottom: 8px !important;
    text-align: left !important;
  }

  /* Description */
  .process-step p {
    font-size: 14px !important;
    line-height: 1.7 !important;
    text-align: left !important;
    color: var(--muted) !important;
  }

  /* Hide the → arrow connectors between steps on mobile */
  .process-step:not(:last-child)::after {
    display: none !important;
  }
}

/* 2 columns on tablet */
@media (min-width: 481px) and (max-width: 820px) {
  .process-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}
/* ============================================================
   PROCESS STEPS — MOBILE FIX (UPDATED)
   Fixes: number badge overlapping title text on mobile
   Paste at the very bottom of your style.css
   ============================================================ */

@media (max-width: 820px) {

  /* Stack to 2 columns on mobile */
  .process-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }

  /* Each card: relative so we can control badge position */
  .process-step {
    padding: 20px 16px 20px 16px !important;
    text-align: left !important;
    position: relative !important;
    overflow: visible !important;
  }

  /* Number badge: move to TOP-RIGHT corner, away from text */
  .process-step .step-num {
    position: absolute !important;
    top: -14px !important;
    right: -10px !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 16px !important;
    border-radius: 14px !important;
    margin: 0 !important;
    z-index: 2 !important;
  }

  /* Title: add right padding so it never goes under the badge */
  .process-step h3 {
    font-size: 16px !important;
    font-weight: 800 !important;
    margin: 0 0 10px 0 !important;
    padding-right: 28px !important; /* keep text clear of badge */
    line-height: 1.3 !important;
    color: var(--navy) !important;
    text-align: left !important;
  }

  /* Description text */
  .process-step p {
    font-size: 13px !important;
    line-height: 1.65 !important;
    color: var(--muted) !important;
    text-align: left !important;
    margin: 0 !important;
  }

  /* Hide → arrow connectors — don't make sense on mobile */
  .process-step:not(:last-child)::after {
    display: none !important;
  }
}

/* Single column on very small phones */
@media (max-width: 400px) {
  .process-grid {
    grid-template-columns: 1fr !important;
  }

  .process-step .step-num {
    position: static !important;
    margin: 0 0 12px 0 !important;
    width: 48px !important;
    height: 48px !important;
  }

  .process-step h3 {
    padding-right: 0 !important;
  }
}