/* MECKLY_SITE_NAV_V1 — change175, 28 Oct 2026. One menu for every public page.
   Her: the menu looked shabby on phones. Learned from mechanicdesk.com.au:
   name every page plainly, keep the sign up button loud, and on a phone put
   everything behind one clear Menu button instead of a row that runs off the
   screen. Mechanics don't look for things, so the phone menu shows every
   link at once, big enough for a thumb. No pale grey anywhere: dark ink for
   words, strong colour for lines. */
header.mn{position:sticky;top:0;z-index:80;background:#fff;border-bottom:2px solid #0B2238;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
header.mn *{box-sizing:border-box}
.mn-in{max-width:1200px;margin:0 auto;padding:0 16px;height:64px;display:flex;align-items:center;gap:6px}
.mn-logo{display:flex;align-items:center;gap:8px;font-weight:900;font-size:22px;letter-spacing:-.02em;color:#0B2238;text-decoration:none;margin-right:10px;flex:none}
.mn-logo img{width:32px;height:32px;display:block}
.mn-links{display:none;align-items:center;gap:0;margin-right:auto}
.mn-links>a,.mn-ddb{font:800 16px/1 Inter,system-ui,sans-serif;color:#0B2238;padding:12px 11px;border-radius:10px;background:none;border:0;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;text-underline-offset:6px;text-decoration-thickness:3px}
.mn-links>a:hover,.mn-ddb:hover,.mn-links>a[aria-current],.mn-ddb.on{color:#0063AB;text-decoration:underline;text-decoration-color:#008FEB}
.mn-links>a:focus-visible,.mn-ddb:focus-visible,.mn a:focus-visible,.mn button:focus-visible{outline:3px solid #008FEB;outline-offset:2px}
.mn-ddb svg{transition:transform .15s}
.mn-dd{position:relative}
.mn-dd.open .mn-ddb svg{transform:rotate(180deg)}
.mn-ddp{display:none;position:absolute;left:0;top:calc(100% + 8px);width:380px;background:#fff;border:2px solid #0B2238;border-radius:16px;box-shadow:0 18px 40px rgba(11,34,56,.22);padding:8px;z-index:61}
.mn-dd.open .mn-ddp{display:block}
.mn-ddp a{display:flex;flex-direction:column;gap:3px;padding:11px 12px;border-radius:10px;text-decoration:none;color:#0B2238}
.mn-ddp a b{font-size:16px;font-weight:800}
.mn-ddp a span{font-size:14px;font-weight:600;color:#0B2238}
.mn-ddp a:hover,.mn-ddp a[aria-current]{background:#0B2238;color:#fff}
.mn-ddp a:hover span,.mn-ddp a[aria-current] span{color:#fff}
.mn-ddp a.mn-all{border-bottom:2px solid #0B2238;border-radius:10px 10px 0 0;margin-bottom:4px}
.mn-ddp a.mn-all b{color:#0063AB}
.mn-ddp a.mn-all:hover b{color:#fff}
.mn-end{display:flex;align-items:center;gap:6px;margin-left:auto;flex:none}
.mn-login{display:none;font:800 16px/1 Inter,system-ui,sans-serif;color:#0B2238;text-decoration:none;padding:12px 10px}
.mn-login:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
.mn-call{display:none;font:800 16px/1 Inter,system-ui,sans-serif;color:#0B2238;text-decoration:none;padding:11px 16px;border:2px solid #0B2238;border-radius:999px;white-space:nowrap}
.mn-call:hover{background:#0B2238;color:#fff}
.mn-go{font:800 16px/1 Inter,system-ui,sans-serif;color:#fff;background:#0063AB;text-decoration:none;padding:13px 16px;border-radius:999px;white-space:nowrap;box-shadow:0 6px 16px rgba(0,99,171,.3)}
.mn-go:hover{background:#004F8A}
.mn-burger{display:inline-flex;align-items:center;gap:8px;font:800 16px/1 Inter,system-ui,sans-serif;color:#0B2238;background:#fff;border:2px solid #0B2238;border-radius:12px;padding:9px 12px;cursor:pointer;min-height:44px}
.mn-burger i{display:block;width:18px;height:2.5px;background:#0B2238;border-radius:2px;position:relative}
.mn-burger i::before,.mn-burger i::after{content:"";position:absolute;left:0;width:18px;height:2.5px;background:#0B2238;border-radius:2px}
.mn-burger i::before{top:-6px}.mn-burger i::after{top:6px}
.mn-burger[aria-expanded="true"]{background:#0B2238;color:#fff}
.mn-burger[aria-expanded="true"] i{background:transparent}
.mn-burger[aria-expanded="true"] i::before{top:0;transform:rotate(45deg);background:#fff}
.mn-burger[aria-expanded="true"] i::after{top:0;transform:rotate(-45deg);background:#fff}
/* The phone menu: everything at once, big rows, buttons at the bottom. */
.mn-panel{position:fixed;left:0;right:0;top:64px;bottom:0;background:#fff;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 16px 28px;border-top:2px solid #0B2238;z-index:59}
.mn-panel[hidden]{display:none}
.mn-panel h2{font:900 13px/1 Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#0063AB;margin:26px 0 4px}
.mn-feat{display:grid;grid-template-columns:1fr;gap:0;margin:0 0 6px;padding:0;list-style:none}
.mn-feat a{display:flex;flex-direction:column;gap:2px;padding:12px 4px;text-decoration:none;color:#0B2238;border-bottom:1.5px solid #0B2238}
.mn-feat a b{font-size:18px;font-weight:800}
.mn-feat a span{font-size:15px;font-weight:600;color:#0B2238}
.mn-main{list-style:none;margin:0;padding:0}
.mn-main a{display:flex;align-items:center;justify-content:space-between;min-height:56px;font:800 20px/1.2 Inter,system-ui,sans-serif;color:#0B2238;text-decoration:none;border-bottom:1.5px solid #0B2238;padding:0 4px}
.mn-main a::after{content:"›";font-size:26px;color:#0063AB;font-weight:900}
.mn-feat a[aria-current] b,.mn-main a[aria-current]{color:#0063AB}
.mn-btns{display:grid;gap:10px;margin-top:22px}
.mn-btns a{display:flex;align-items:center;justify-content:center;min-height:54px;border-radius:999px;font:800 18px/1 Inter,system-ui,sans-serif;text-decoration:none}
.mn-btns .b-go{background:#0063AB;color:#fff}
.mn-btns .b-line{border:2px solid #0B2238;color:#0B2238;background:#fff}
.mn-panel small{display:block;margin-top:18px;font-size:14px;font-weight:600;color:#0B2238;text-align:center}
body.mn-open{overflow:hidden}
body.mn-open header.mn{z-index:300}
@media(min-width:560px){.mn-login{display:inline-flex}.mn-feat{grid-template-columns:1fr 1fr;column-gap:18px}}
@media(min-width:1100px){.mn-links{display:flex}.mn-burger,.mn-panel{display:none!important}}
@media(min-width:1260px){.mn-call{display:inline-flex}}
@media(max-width:360px){.mn-logo span{display:none}.mn-go{padding:12px 12px}}
@media(prefers-reduced-motion:reduce){.mn-ddb svg{transition:none}}
@media print{header.mn,.mn-panel{display:none!important}}
html[data-menu="portal"] header.mn{display:none}