/* ============================================================
   ServicePoints v2 — mobile.css
   All rules wrapped in max-width media queries so desktop is
   bit-for-bit unchanged. Loaded AFTER style.css.
   Breakpoints: 900px (tablet), 640px (phone).
   ============================================================ */

/* Hamburger button — invisible on desktop */
.mobile-nav-toggle{display:none}
/* Backdrop element (appended by mobile-nav.js) — invisible on desktop too */
.mobile-nav-backdrop{display:none}

@media (max-width:900px){

  /* === Topbar (phone/email above nav) === */
  .sp-topbar{padding:8px 16px;gap:14px;font-size:11px}

  /* === Nav container ===
     Important on mobile:
     - clear backdrop-filter so the fixed drawer can escape this element
       (backdrop-filter creates a new containing block for fixed descendants)
     - z-index MUST be auto (not the desktop 100) — otherwise .snav creates
       a stacking context with z-index 100, trapping the drawer's z-index 1000
       inside it. At root, .snav (100) would then sit BELOW the backdrop (999),
       which captures every tap meant for the drawer. */
  .snav{
    padding:12px 16px;
    position:relative;
    z-index:auto;
    flex-wrap:nowrap;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  .nl{font-size:17px}

  /* === Hamburger button === */
  .mobile-nav-toggle{
    display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
    width:40px;height:40px;background:transparent;border:0;cursor:pointer;
    margin-left:auto;padding:0;color:var(--navy);
    -webkit-tap-highlight-color:transparent;
  }
  .snav-dark .mobile-nav-toggle{color:var(--white)}
  .mobile-nav-toggle .bar{
    display:block;width:22px;height:2px;margin:3px 0;
    background:currentColor;border-radius:2px;
    transition:transform .25s ease,opacity .2s ease;
  }
  body.mobile-nav-open .mobile-nav-toggle .bar1{transform:translateY(8px) rotate(45deg)}
  body.mobile-nav-open .mobile-nav-toggle .bar2{opacity:0}
  body.mobile-nav-open .mobile-nav-toggle .bar3{transform:translateY(-8px) rotate(-45deg)}

  /* === Nav menu becomes slide-in drawer === */
  .snav .nav-menu{
    position:fixed;top:0;right:0;bottom:0;left:auto;
    width:min(86%,360px);
    background:var(--navy);
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:0;padding:78px 24px 32px;
    box-shadow:-20px 0 60px rgba(0,0,0,.45);
    transform:translateX(100%);
    transition:transform .28s ease-out;
    overflow-y:auto;
    z-index:1000;
  }
  body.mobile-nav-open .snav .nav-menu{transform:translateX(0)}

  /* Backdrop — real element, becomes interactive (taps close drawer) when open */
  .mobile-nav-backdrop{
    display:block;position:fixed;inset:0;
    background:rgba(13,27,42,.55);
    z-index:999;
    opacity:0;pointer-events:none;
    transition:opacity .25s ease-out;
  }
  body.mobile-nav-open .mobile-nav-backdrop{opacity:1;pointer-events:auto}

  /* Drawer items always white on dark drawer bg */
  .snav .nav-menu > li{display:block;width:100%}
  .snav .nav-menu > li > a,
  .snav .nav-menu .dd-trigger{
    display:block;color:var(--white) !important;
    padding:14px 0;font-size:15px;font-weight:400;
    border-bottom:1px solid rgba(255,255,255,.08);
    text-align:left;cursor:pointer;
  }
  .snav .nav-menu .btn-nd{
    background:var(--teal);color:var(--white) !important;
    border-radius:6px;padding:12px 20px;margin-top:12px;
    border-bottom:0;text-align:center;font-weight:500;
  }
  .snav .nav-menu .btn-nd:hover{background:var(--teal-light)}

  /* Dropdowns always expanded inside drawer */
  .snav .nav-menu .dd-menu{
    display:block;position:static;
    background:transparent;border:0;box-shadow:none;
    min-width:0;padding:8px 0 8px 14px;margin:0;
  }
  .snav .nav-menu .dd-link{
    padding:10px 0;border-bottom:1px dashed rgba(255,255,255,.06);
  }
  .snav .nav-menu .dd-link:last-child{border-bottom:0}
  .snav .nav-menu .dd-label{font-size:14px;color:var(--white)}
  .snav .nav-menu .dd-sub{font-size:11px;color:var(--tmd);margin-top:2px}

  /* Hide the small chevron arrow in dd-trigger on mobile (always expanded) */
  .snav .nav-menu .dd-trigger{padding-right:0}

  /* Footer was already responsive — just trim padding */
  .sp-footer{padding:48px 24px 0}

  /* ============================================================
     PAGE CONTENT — responsive layer
     ============================================================ */

  /* Section padding — kill the 56px horizontal which causes h-scroll */
  .sec,.cta-t,.tb,.sf{padding-left:20px;padding-right:20px}
  .sec{padding-top:56px;padding-bottom:56px}
  .cta-t{padding-top:56px;padding-bottom:56px}

  /* Hero — stack the two-col layout */
  .hero-wrap{
    grid-template-columns:1fr;
    gap:32px;
    padding:56px 20px 40px;
  }
  .hdesc{max-width:none}
  .hero-cta{flex-wrap:wrap;gap:10px}
  .hero-cta a{flex:1 1 auto;text-align:center}

  /* Generic multi-column grids → 2-col at tablet */
  .g3,.g4,.horiz-g,.how-g{grid-template-columns:repeat(2,1fr)}

  /* Featured segment (2-col on home) — stack */
  .seg-feat{
    grid-template-columns:1fr;
    gap:24px;
    padding:24px;
  }

  /* Section headers — let them breathe and not overflow */
  .sec-h2{max-width:none;font-size:clamp(24px,5vw,34px)}
  .sec-p,.sec-p-d{max-width:none}

  /* Trust bar — let it scroll horizontally instead of cramming */
  .tb{
    overflow-x:auto;
    flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
    gap:20px;
  }
  .tb > *{flex-shrink:0}
  .tbi{white-space:nowrap}

  /* === Calculators / quiz widgets === */
  .calc-grid,.cr-breakdown,.feat-mets,.icp-pane.active{
    grid-template-columns:1fr;
    gap:12px;
  }

  /* === Dispatch mockup row .jr (4-col) → simpler 2-row layout === */
  .jr{
    grid-template-columns:auto 1fr;
    gap:6px 10px;
    padding:10px 14px;
  }
  .jr > *:nth-child(3),
  .jr > *:nth-child(4){grid-column:2}

  /* === Contact form — stack the two columns === */
  .contact-g{
    grid-template-columns:1fr;
    gap:32px;
  }
  /* Form rows that were 2-col → 1-col */
  .contact-g .g2{grid-template-columns:1fr}
  .fi,.finp{font-size:16px} /* 16px prevents iOS zoom-on-focus */

  /* CTA strip buttons stack */
  .cta-t .btn-cw,.cta-t .btn-co{display:inline-block;margin:6px 4px}

  /* Sub-footer strip wrap cleanly */
  .sf{flex-direction:column;align-items:flex-start;gap:8px}
}

@media (max-width:640px){
  /* === Phone-specific tightening === */
  .sp-topbar{display:none}
  .snav{padding:10px 14px}
  .nl{font-size:16px}
  .mobile-nav-toggle{width:36px;height:36px}
  .snav .nav-menu{padding:72px 20px 28px}

  /* Sections — even tighter horizontal padding */
  .sec,.cta-t,.tb,.sf{padding-left:16px;padding-right:16px}
  .sec{padding-top:44px;padding-bottom:44px}
  .cta-t{padding-top:44px;padding-bottom:44px}
  .hero-wrap{padding:40px 16px 32px;gap:24px}

  /* All multi-col grids → single column on phone */
  .g2,.g3,.g4,.horiz-g,.how-g{grid-template-columns:1fr}

  /* Hero typography — scale down */
  .h1,.hero-h1,.hero h1{font-size:clamp(30px,8vw,42px)}
  .sec-h2{font-size:clamp(22px,6vw,30px)}
  .hdesc{font-size:15px}

  /* Buttons — full width and bigger tap targets on phone */
  .btn-pt,.btn-pn,.btn-ol,.btn-on,.btn-cw,.btn-co{
    display:block;width:100%;text-align:center;padding:14px 22px;
    margin-bottom:10px;
  }
  .hero-cta a{flex:1 1 100%}

  /* Footer — make it less cramped */
  .sp-footer{padding:40px 20px 0}
  .sp-footer-bottom{padding:20px 0;font-size:10px}
}