/* Mobile navigation (2026-10-14). Shared by every page with the standard header (.header-inner / .main-nav)
   and by the blog post header (header nav / .nav-links). Below 1080px those menus were hidden with no way to
   open them; this adds an accessible menu button. Markup: a static .mnav-btn in the header; the panel is
   built by /mobile-nav.js from the page's own nav links. */
.mnav-btn{display:none;align-items:center;justify-content:center;flex-direction:column;gap:5px;width:44px;height:44px;margin-left:10px;padding:0;background:#fff;border:1.5px solid #d0e2f8;border-radius:10px;cursor:pointer;flex-shrink:0;-webkit-tap-highlight-color:transparent}
.mnav-btn span{display:block;width:20px;height:2px;background:#0b2d6e;border-radius:2px;transition:transform .2s,opacity .2s}
.mnav-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mnav-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.mnav-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mnav-btn:focus-visible,.mnav-panel a:focus-visible{outline:3px solid #f7a800;outline-offset:2px}
.mnav-panel{display:block;height:auto;width:auto;flex:none;justify-content:normal;align-items:normal;gap:0;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid #e2eaf6;box-shadow:0 14px 30px rgba(11,45,110,.16);padding:10px 16px 18px;max-height:calc(100vh - 90px);overflow-y:auto;z-index:1001;font-family:inherit}
.mnav-panel[hidden]{display:none!important}
.mnav-group{display:grid;grid-template-columns:1fr 1fr;gap:2px 6px}
.mnav-panel a{display:block;padding:12px 10px;border-radius:8px;font-size:15px;font-weight:600;line-height:1.3;color:#0f172a;text-decoration:none}
.mnav-panel a:hover{background:#f0f5ff;color:#1549c0}
.mnav-panel a[aria-current="page"]{color:#1549c0}
.mnav-label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#64748b;margin:14px 10px 2px}
.mnav-actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.mnav-actions a{flex:1 1 150px;text-align:center}
.mnav-panel a.mnav-quote{background:#1549c0;color:#fff}
.mnav-panel a.mnav-quote:hover{background:#0b2d6e;color:#fff}
.mnav-panel a.mnav-call{border:1.5px solid #1549c0;color:#1549c0}
.mnav-open .float-call,.mnav-open #mig-ai-btn,.mnav-open #mig-ai-teaser{display:none!important}
@media(max-width:1080px){.mnav-btn{display:inline-flex}}
/* Small phones: the logo and the menu button fill the bar, so the header number moves into the menu
   (the floating Call Now button stays on screen). */
@media(max-width:560px){.header-inner .header-phone,header .hdr-phone{display:none!important}}
@media(max-width:380px){.mnav-group{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){.mnav-btn span{transition:none}}
/* Blog posts (2026-10-14): wide tables used to stretch the article column past the screen on phones,
   so the whole page scrolled sideways. Let the column shrink and the tables scroll inside it. */
@media(max-width:960px){.article-layout>*{min-width:0}.article-body table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}}
/* Top strip (2026-10-14): on phones the strip wrapped with a stray "|" or "·" at the edge of a line. Below 640px
   each separator becomes a clean line break and a three-part strip drops its middle tagline (.tb-mid);
   below 400px the text steps down to 12px so the first line still fits on one row on 360px phones. */
@media(max-width:640px){.topbar .tb-sep{display:block;height:0;overflow:hidden}.topbar .tb-mid{display:none}}
@media(max-width:400px){body .topbar{font-size:12px;padding:8px 10px}}