.mca-site-nav{position:relative;align-items:center;gap:16px!important;overflow:visible!important}
.mca-site-nav>a,.mca-site-nav button{color:#12293b;font:600 var(--type-control)/1.25 'DM Sans','Segoe UI',sans-serif}
.mca-site-nav>a{text-decoration:none;white-space:nowrap}
.mca-site-nav>a[aria-current="page"]{border-bottom:2px solid #d97846;padding-bottom:4px}
.mca-nav-description{display:none;margin-top:3px;color:#5b6266;font-size:var(--type-qualification);font-weight:400;line-height:1.4}
.mca-currency-note{margin:var(--space-section,34px) 18px 18px;padding:12px 14px;border:1px solid #cec7ba;background:#faf8f2;color:#5b666c;font-size:var(--type-qualification,13px);line-height:1.55}
.mca-currency-note strong{color:#38505e}
/* Injected on every route, so it takes the same narrow-width spacing the routes give their own
   cards: inset to the 16px page gutter, 12px of padding inside that. */
@media (max-width:559px){
  .mca-currency-note{margin-left:16px;margin-right:16px;padding-left:12px;padding-right:12px}
}

@media (max-width:859px){
  .mca-site-nav{grid-template-columns:1fr!important;flex-direction:column!important;align-items:stretch!important;width:100%;min-width:0!important;gap:0!important;overflow:visible!important;white-space:normal!important;padding:0!important}
  .mca-site-nav>a{display:block;min-height:48px;padding:0 16px!important;border:0!important;border-bottom:1px solid #e0d9ca!important;background:#fffefa;font-weight:600;font-size:15px}
  .mca-site-nav>a[aria-current="page"]{box-shadow:inset 3px 0 #d97846;background:#f4f0e7}
  /* Descriptions triple row height in the one place there is least room; they stay
     available in the desktop disclosure panel via the rule above. */
  .mca-nav-description{display:none!important}
}

/* ── The mobile menu overlays the page; it does not sit at the top of it ──────────
   Home, Cases and Budget render their menu as a `sc-if` sibling of a position:sticky
   header, in ordinary flow. The hamburger therefore stayed reachable at any scroll
   position while the menu it opened did not: the panel was laid out at the top of the
   document, so opening it from halfway down a long page looked like nothing had
   happened until you scrolled all the way back. navigation.js marks exactly that nav —
   a Primary nav outside the header, on a page that has a Menu button — and publishes
   the header's measured height as --mca-nav-top. Measured, not assumed: the header
   grows at 200% zoom, and a hardcoded 63px would tuck the menu under it there.
   The seven screens whose Primary nav lives inside the header are untouched; their nav
   is an ordinary in-flow list and pinning it would cover the page permanently. */
@media (max-width:859px){
  .mca-nav-overlay{
    position:fixed;
    top:var(--mca-nav-top,63px);
    left:0;
    right:0;
    z-index:60;
    max-height:calc(100vh - var(--mca-nav-top,63px));
    max-height:calc(100dvh - var(--mca-nav-top,63px));
    overflow-y:auto;
    overscroll-behavior:contain;
    box-shadow:0 16px 32px rgba(18,41,59,.24);
  }
}

/* ── The Cases filter bar yields the screen as you read ──────────────────────────
   The bar is position:sticky under the header and holds a search field, a sort row and
   a filter row. At 320px that is roughly a third of the viewport, pinned, above every
   result the reader is trying to read. Scrolled down, it collapses to its search field;
   scrolling up, reaching the top, or focusing anything inside it restores the rest.
   The search field itself is never hidden, which is what keeps this honest for keyboard
   users: it stays a tab stop, so Shift+Tab back into the bar always lands somewhere real
   and re-expands it. Collapsing never happens while the bar contains the focused
   element. Its sticky offset is corrected to the measured header height for the same
   reason as the menu above — the inline 63px is wrong at 200% zoom. */
@media (max-width:859px){
  /* The bar occupies flow space even while pinned, so collapsing it shortens the
     document. Scroll anchoring then "helpfully" restores the reader's position,
     which is itself a scroll event — and a bar that collapses on scroll would read
     its own correction as a new gesture and oscillate. Opt this element out. */
  [data-mca-filter-bar]{top:var(--mca-nav-top,63px)!important;overflow-anchor:none}
  /* !important is load-bearing, not defensive: the collapsing rows carry inline
     `display:flex` from the design tool, and an inline declaration beats any
     selector without it. Without this the heading collapsed and the two control
     rows — the 297px actually worth reclaiming — did not. */
  [data-mca-filter-bar="collapsed"] [data-mca-filter-collapsible]{display:none!important}
}

/* ── The header search field ──────────────────────────────────────────────────
   The field shipped as a bare input inside a native GET form, and the deployed CSP
   carries `form-action 'none'`, so every submission was refused: "Refused to send form
   data to .../Search.dc.html?q=... because it violates the following Content Security
   Policy directive". navigation.js turns the submit into a same-origin navigation
   instead, which that directive does not govern; the Search link in the primary nav
   remains the route to the same screen with no script at all.

   The styles live here rather than in seven identical inline blocks because the field
   is one control repeated on seven screens, and it drifted as one: every copy was the
   same 38px, which is neither the 44px the hamburger beside it keeps nor a size the
   route-level target-size check was allowed to see. Sizing it once is what makes the
   submit button affordable — it is the field's own container that shrinks for it. */
.mca-search{display:flex;align-items:center;gap:6px;flex:0 1 auto;min-width:0}
/* Shrinkable, not fixed: adding the button costs 50px in a header the plan already
   records as crowded between 860px and 1024px. The header's title is the flexible
   element and already truncates, so the field gives up width first and the title
   absorbs the rest. */
.mca-search input{height:44px;flex:0 1 104px;min-width:64px;padding:0 10px;border:1px solid #cec7ba;background:#fffefa;color:#12293b;font-size:var(--type-body,15px);border-radius:2px}
.mca-search button{width:44px;height:44px;flex:0 0 auto;display:grid;place-items:center;padding:0;border:1px solid #cec7ba;background:transparent;color:#12293b;cursor:pointer;border-radius:2px}
.mca-search button:hover{background:#fffefa;border-color:#24698e}
.mca-search button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

@media (forced-colors:active){
  .mca-site-nav>a[aria-current="page"]{border:2px solid CanvasText!important;box-shadow:none}
  /* A transparent background against a forced canvas leaves the submit as a bare glyph;
     the border is what makes it read as the control it is. */
  .mca-search button{border:1px solid ButtonText!important}
}