/* Shared public-site header: the homepage's dark top bar, used on every public page.
   Markup: <div class="hm-top hm-dark" id="hmTop"><div class="wrap"><nav> brand | .navr: .tel, .lang, pill </nav></div></div>
   Values copied from the homepage (bigbox-theme.css body.bb .hm-top + index.html header rules), so the bar looks the same on every page. */
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/sourcesans3-400-latin.woff2?v=114a0e5e16) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/sourcesans3-400-latin.woff2?v=114a0e5e16) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
.hm-top.hm-dark{position:sticky;top:0;z-index:40;background:#111;border:0;border-radius:0;margin:0;box-shadow:none;color:#4f4f4f;font-family:"Source Sans 3","HM Arabic","Source Sans Pro",system-ui,sans-serif;font-size:17px;line-height:1.7;font-weight:400;letter-spacing:normal;text-align:start}
body .hm-top.hm-dark .wrap{display:block;max-width:1100px;margin:0 auto;padding:0 20px!important;background:none;box-shadow:none;border-radius:0}
.hm-top.hm-dark nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0;margin:0}
.hm-top.hm-dark .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;line-height:inherit;text-decoration:none;color:#fff;white-space:nowrap}
.hm-top.hm-dark .brand img{display:block;width:42px;height:42px;margin:0}
.hm-top.hm-dark .navr{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;white-space:nowrap;min-width:0}
.hm-top.hm-dark .navr>*{margin:0;flex:none}
.hm-top.hm-dark .tel{min-height:0;padding:0;color:#fff;font-weight:800;font-size:17px;text-decoration:none}
.hm-top.hm-dark .lang-btn{font-family:inherit;font-size:14.4px;background:#fff;color:#1a1a1a}
/* right-hand pill: Log in (or Get a quote on the login pages) */
.hm-top.hm-dark .hm-pill,.hm-top.hm-dark #acct a{box-sizing:border-box;min-width:44px;height:44px;min-height:44px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 12px!important;margin:0;font:inherit;font-weight:800;font-size:14.4px;line-height:1;text-decoration:none;white-space:nowrap;box-shadow:3px 3px 0 #1a1a1a;transform:none;background:transparent;color:var(--bb-y,#ffd400);border:2px solid var(--bb-y,#ffd400)}
.hm-top.hm-dark .hm-pill:focus-visible,.hm-top.hm-dark #acct a:focus-visible{outline:3px solid var(--bb-y,#ffd400);outline-offset:2px}
.hm-top.hm-dark #acct{display:inline-flex;align-items:center;gap:6px}
.hm-top.hm-dark #acct .small{color:#ddd;max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hm-top.hm-dark #acct .btn-link{color:#fff;font:inherit;font-weight:700;font-size:14.4px}
/* the old yellow band under the light header is not needed under the dark one */
.hm-top.hm-dark+.hero-y{background:none;border-radius:0;padding:0;margin:0 0 22px}
@media(max-width:600px){.hm-top.hm-dark .tel{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}}
@media(max-width:400px){.hm-top.hm-dark .navr{gap:4px}}
/* phones: same as the homepage (the phone number hides at 440px and below, the brand shrinks at 420px) */
@media(max-width:440px){.hm-top.hm-dark .tel{display:none}}
@media(max-width:420px){.hm-top.hm-dark .tel{font-size:13.6px}.hm-top.hm-dark .brand{font-size:16px;gap:6px}.hm-top.hm-dark .brand img{width:34px;height:34px}}
@media(max-width:480px){#acct .small{display:none}}
/* quote page: its Setting pill (#qTools) sits just under the header instead of on top of it */
body.mf-quote .hm-top.hm-dark~.qgrid #qTools{top:82px}
body.mf-quote .hm-top.hm-dark{z-index:91}   /* above the quote page's own floating controls (Setting pill z 90) when scrolled or when the language menu is open */

/* translated pages: very long words (Russian, Tamil...) in headings break or hyphenate instead of running past the screen edge */
html:not([lang="en"]) h1,html:not([lang="en"]) h2,html:not([lang="en"]) h3,html:not([lang="en"]) .newin{overflow-wrap:break-word;hyphens:auto}
/* phones: a long translated pill label (e.g. Tamil, Punjabi) wraps onto two short lines instead of widening the header past the screen */
@media(max-width:480px){html:not([lang="en"]) .hm-top.hm-dark nav{min-width:0}html:not([lang="en"]) .hm-top.hm-dark .navr>.hm-pill,html:not([lang="en"]) .hm-top.hm-dark #acct a{flex:0 1 auto;min-width:44px;max-width:8.5em;white-space:normal;text-align:center;line-height:1.1;padding:0 10px!important}html:not([lang="en"]) .hm-top.hm-dark .brand{flex:0 1 auto;min-width:0}}