/* Navigation v3 (HavenCU Sitemap v3): utility row, direct links, grouped mega columns */
:root { --util-h: 38px; }
html { scroll-padding-top: calc(var(--header-h) + var(--util-h) + 16px); }

/* utility navigation: Rates, Locations, Help */
.util-bar { border-bottom: 1px solid var(--line); transition: border-color .25s; }
.util-bar .wrap { display: flex; justify-content: flex-end; height: calc(var(--util-h) - 1px); }
.util-nav { display: flex; align-items: center; gap: 28px; }
.util-nav a { display: inline-flex; align-items: center; gap: 7px; font: 600 14px/1 var(--sans); color: var(--ink-muted); transition: color .2s; }
.util-nav a .i { width: 15px; height: 15px; color: var(--cyan-ink); }
.util-nav a:hover { color: var(--navy); }

/* primary navigation: four items, Next Steps is a direct link */
.main-nav > ul { gap: 32px; }
.main-nav > ul > li { display: flex; }
.nav-link { position: relative; display: flex; align-items: center; height: 100%; font: 700 14px/1 var(--sans); color: var(--navy); white-space: nowrap; transition: color .2s; }
.nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.nav-link:hover::after { transform: scaleX(1); }
.mega-m1, .mega-m2 { max-height: calc(100vh - var(--header-h) - var(--util-h) - 40px); }

/* Menu 1: several groups can stack in one column; group heads link to category pages */
.m1-col > .m1-colhead ~ .m1-colhead { margin-top: 22px; }
.m1-colhead a { display: flex; align-items: center; gap: 6px; color: inherit; transition: color .2s; }
.m1-colhead a .chev { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.m1-colhead a:hover { color: var(--navy); }
.m1-colhead a:hover .chev { transform: translateX(3px); }

/* Menu 2: group heads link to category pages */
.m2-col > ul + h3 { margin-top: 30px; }
.m2-col h3 a { display: inline-flex; align-items: center; gap: 8px; color: inherit; transition: color .2s; }
.m2-col h3 a .arrow { width: 14px; height: 14px; color: var(--gold); transition: transform .25s var(--ease); }
.m2-col h3 a:hover { color: var(--white); }
.m2-col h3 a:hover .arrow { transform: translateX(3px); }
.m2-link { padding: 11px 0 12px; }
.m2-name { font-size: 19px; }
.menu-m2.menu-open .util-bar { border-color: rgba(249, 252, 254, .1); }
.menu-m2.menu-open .util-nav a { color: rgba(249, 252, 254, .78); }
.menu-m2.menu-open .util-nav a .i { color: var(--cyan); }
.menu-m2.menu-open .util-nav a:hover, .menu-m2.menu-open .nav-link:hover { color: var(--cyan); }
.menu-m2.menu-open .nav-link { color: var(--white); }
.menu-m2.menu-open .nav-link::after { background: var(--cyan); }

/* mobile drawer */
.drawer-util { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 20px 4px; }
.drawer-util a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 6px; background: var(--surface-alt); font: 700 14px/1 var(--sans); color: var(--navy); transition: background-color .2s; }
.drawer-util a .i { width: 18px; height: 18px; color: var(--cyan-ink); }
.drawer-util a:hover { background: var(--line); }
.drawer-link { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; border-bottom: 1px solid var(--line); font: 700 18px var(--sans); color: var(--navy); }
.drawer-link .arrow { width: 18px; height: 18px; color: var(--cyan-ink); }
.drawer-m2 .drawer-util a { background: rgba(249, 252, 254, .06); color: var(--white); }
.drawer-m2 .drawer-util a .i { color: var(--gold); }
.drawer-m2 .drawer-util a:hover { background: rgba(249, 252, 254, .12); }
.drawer-m2 .drawer-link { border-color: rgba(249, 252, 254, .12); font: 400 24px var(--serif); color: var(--white); }
.drawer-m2 .drawer-link .arrow { color: var(--gold); }

@media (max-width: 1340px) {
  .main-nav > ul { gap: 24px; }
}
@media (max-width: 1180px) {
  :root { --util-h: 0px; }
  .util-bar { display: none; }
}

/* Menu 3: Business is now the last dropdown, so it opens toward the left */
.menu-m3 .nav-item:nth-child(3) .mega-m3 { left: auto; right: -24px; }
.m3-text { min-width: 0; }
.m3-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Homepage B: simple dropdown with offer box and quick-link strip (revision 1) */
.menu-b .nav-bar { position: relative; }
.menu-b .nav-item { position: static; }
.menu-b .nav-item .mega-m3.m3-wide { top: calc(100% + 10px); left: auto; right: 0; width: min(1010px, 100%); max-width: none; }
.m3-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 8px; padding: 8px; }
.m3-wide .m3-q { padding: 16px 16px 8px; }
.m3-wide .m3-grid { padding: 0; }
.m3-wide .m3-text strong { font-weight: 600; }
.m3-all { margin: 10px 16px 12px; }
.m3-offer { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius); background: var(--navy); color: var(--white); transition: box-shadow .3s var(--ease); }
.m3-offer:hover { box-shadow: var(--shadow-lift); }
.m3-offer-img { display: block; height: 136px; overflow: hidden; }
.m3-offer-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.m3-offer:hover .m3-offer-img img { transform: scale(1.05); }
.m3-offer-body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 18px 20px 20px; }
.m3-offer .eyebrow { color: var(--cyan); }
.m3-offer strong { font: 400 22px/1.2 var(--serif); }
.m3-offer-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; font: 700 15px var(--sans); }
.m3-offer-cta .arrow { width: 17px; height: 17px; color: var(--gold); transition: transform .25s var(--ease); }
.m3-offer:hover .m3-offer-cta .arrow { transform: translateX(4px); }
.m3-strip { display: flex; flex-wrap: wrap; align-items: center; padding: 14px 24px; border-radius: 0 0 12px 12px; background: var(--brand-cyan); color: var(--navy); }
.m3-strip a { font: 700 14px var(--sans); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .25s var(--ease); }
.m3-strip a:hover { background-size: 100% 1.5px; }
.m3-strip span { margin: 0 14px; opacity: .45; }
.m3-offer-text { font-size: 14px; line-height: 1.45; color: rgba(249, 252, 254, .82); }