/* ==========================================================================
   SITE NAVIGATION — THE STATE SYSTEM                      2026-09-20

   One sheet, linked LAST on all six live pages, that owns every state the
   header's menus can be in. It replaces the state paint that had accumulated
   in layers inside assets/home/design.css (the homepage) and its lift
   assets/shared/header-footer.css (the five inner pages); those files are left alone
   and simply out-ranked, so nothing else in the header moves.

   WHY IT EXISTS — measured on the live pages before this file, at 1920, 1600,
   1440, 1366, 1280, 1180, 1024, 1000, 900, 820, 768, 700, 600, 480, 430, 390,
   360 and 320, on all six pages:

     · Row 1: the CURRENT page was a 34px white pill with a 1px #8FB8F2 ring
       and a dot. A HOVERED tab was a 34px pill of the same radius with a
       1.5px rgba(255,255,255,.42) ring — a HEAVIER stroke than the selected
       state's. Two identical boxes.
     · Their geometry made them touch: the hover box bled -12px past its tab
       and the current pill bled -1px past its own, so the measured distance
       between the two was -13.0px at [archived]1440 (Legal Documents next to
       Contact Us), -0.2px at 1024 and -13.0 to -2.0px at 1000 on EVERY page.
       Negative — they overlapped, and read as one joined segmented control.
     · Row 2: the current section was a white pill with a 1px #8FB8F2 ring; a
       hovered section was a white pill with a 1px #8E9AAD ring AND a drop
       shadow. Same fill, same radius, same height — the hover read as the
       stronger of the two. Overlapping at [archived]320 on the
       homepage (-1 to -7px) and 7px apart nearly everywhere else.
     · Below 901px the hover box collapsed to nothing (it was inset 8px top
       and bottom inside a 23px-tall link) — so phones had no hover at all,
       while the sticky :hover after a TAP left a white pill on whichever
       section was last touched: a second "selected" item.
     · Focus was a #4989E2 ring: 2.62:1 on the #004594 bar and 2.74:1 on the
       #D8E4F6 section row. Both below the 3:1 that WCAG 2.2 1.4.11 asks of a
       focus indicator. On row 1 it also drew round the tab's full 66px height
       (the tabs are align-self:stretch), so it was a THIRD box shape,
       unrelated to the other two and clipped by the bar's own edge.
     · The Our Services menu: its current item and its hover were the same
       fill, #EEF4FD, so the open menu showed two "current" services. The
       panel carried a 1px #B9CBEE border AND a 1px #D3DAE6 box-shadow ring —
       a literal double border.
     · In the phone drawer the current page's accent bar sat at left:-10px,
       outside the panel's 18px padding, so it was clipped to a sliver.

   THE RULE THIS FILE ENFORCES — one material per state, never two:

     ACTIVE   a FILLED surface.  White pill, 1px ring, the blue dot, bold ink.
              The only filled thing in the header. One per row, ever.
     HOVER    a LINE.            A 2px underline under the label, plus ink.
              It has no box and no edge, so it can never read as a tab and
              can never "join" the pill beside it, at any spacing.
     FOCUS    a RING.            A 2px outline at 9.22:1 (row 1) / 7.17:1
              (row 2), offset clear of the pill, on the label's own box —
              never on the tab's full height.
     INACTIVE nothing.           Ink only.

   Because hover is a line, the adjacency problem cannot come back: there is
   never more than ONE box in a row, so two boxes can never touch, merge or
   both look chosen — at any width, with any label length, in any order.

   GEOMETRY, per measured layout band (the header has exactly three):
     A  >=1024px  row 1 tabs are 66px and stretched, padding 0 clamp(12px,
                  1.25vw,22px), column-gap 0; row 2 links are 42px, padding
                  0 12px, gap clamp(8px,1.6vw,26px). Room for the pill.
     B  901-1023  row 1 tabs are 22px with NO horizontal padding and an 11px
                  gap — measured slack beside the brand at 901px is 0.7px, so
                  there is no room for a pill without cramping it. Both rows
                  use a rule for active (3px) and hover (1.5px): same
                  hierarchy, stated in a way that fits 11px.
     C  <=900px   row 1 is the drawer (full-width 45px rows); row 2 is a
                  scrolling strip of 25px links with a 14px gap floor.

   TOUCH: every hover rule below is inside @media (hover:hover) and
   (pointer:fine). A tap can no longer leave a state behind. :active gives
   touch its own momentary feedback instead.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0 · TOKENS — the whole system's palette and metrics, in one place.
   The six pages all render the same header: bar #004594, section row #D8E4F6,
   drawer #FFFFFF (verified on every page at 1440, 900 and 390).
   -------------------------------------------------------------------------- */
html body header.bar{
  /* the two grounds these states sit on, recorded here so every contrast
     figure below can be checked without opening a browser */
  --nvs-bar:        #004594;
  --nvs-row2:       #D8E4F6;

  /* row 1 — the site's pages, on the navy bar */
  --nvs-1-ink:      #E1ECFC;                 /* 7.73:1 on the bar           */
  --nvs-1-ink-h:    #FFFFFF;                 /* 9.22:1                      */
  --nvs-1-ink-on:   #004594;                 /* 9.22:1 on the white pill    */
  --nvs-1-rule:     rgba(255,255,255,.62);   /* hover line                  */
  --nvs-1-rule-on:  #FFFFFF;                 /* band B active line          */
  --nvs-1-fill:     #FFFFFF;
  --nvs-1-ring:     #8FB8F2;
  --nvs-1-focus:    #FFFFFF;                 /* 9.22:1                      */

  /* row 2 — this page's sections, on the pale row */
  --nvs-2-ink:      #324968;                 /* 7.14:1 on #D8E4F6           */
  --nvs-2-ink-h:    #00285E;
  --nvs-2-ink-on:   #004594;
  --nvs-2-rule:     #5E7596;                 /* 3.66:1 — a visible line     */
  --nvs-2-rule-on:  #004594;
  --nvs-2-fill:     #FFFFFF;
  --nvs-2-ring:     #6C9BE0;                 /* darker than row 1's: the
                                                ground here is light, so the
                                                ring is what draws the pill  */
  --nvs-2-focus:    #004594;                 /* 7.17:1 on #D8E4F6           */

  /* the selected dot — the site's own "this one" mark, active states only */
  --nvs-dot: radial-gradient(circle 3.5px at calc(100% - 9px) 9px,
                             #1F8FEA 0 3.5px, rgba(0,0,0,0) 3.6px);

  /* metrics */
  --nvs-r:          7px;       /* pill radius, both rows                     */
  --nvs-pill-h:     34px;      /* pill height in band A, both rows           */
  --nvs-rule-h:     2px;
  --nvs-focus-w:    2px;

  /* band A geometry. The PILL reaches 10px past its own label. The hover RULE
     reaches nothing — it spans the label exactly, which is what an underline
     should do anyway, and it is what keeps the two apart at the tightest
     width: measured pill-edge to rule-start is 15.6px at 1024, 26px at 1440
     and 34px at 1920. (Letting the rule use the pill's footprint too left
     only 1.6px at 1024.) */
  --nvs-1-pad:      clamp(12px, 1.25vw, 22px);   /* the tab's real padding   */
  --nvs-1-inset:    max(0px, calc(var(--nvs-1-pad) - 10px));
}

/* --------------------------------------------------------------------------
   1 · RESET — clear every state paint the older layers put on a nav item, so
   what follows is the only thing drawing. Four ids + !important is what it
   takes to out-rank design.css / header-footer.css's own three-id !important rules;
   the file is also linked last. Geometry that is NOT state (the tab's
   padding, the ghost that reserves its bold width) is deliberately untouched.
   -------------------------------------------------------------------------- */
html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab,
html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:hover,
html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:focus,
html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:focus-visible,
html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab.cur,
html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab[aria-expanded="true"]{
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  isolation: isolate;                    /* keeps a z-index:-1 layer above
                                            the bar's own background        */
  -webkit-tap-highlight-color: transparent;
}
html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab::before{
  content: "" !important; display: block !important; position: absolute !important;
  inset: auto !important; margin: 0 !important; padding: 0 !important;
  width: auto !important; height: auto !important;
  background: none !important; box-shadow: none !important; border: 0 !important;
  border-radius: 0 !important; opacity: 1 !important; transform: none !important;
  clip-path: none !important; pointer-events: none !important; z-index: -1 !important;
  transition: background-color .16s ease, box-shadow .16s ease !important;
}
/* nothing is drawn unless a state below asks for it */
html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:not(.cur):not([aria-expanded="true"])::before{
  display: none !important;
}
/* the ::after on a tab is the ghost that reserves its BOLD width so the row
   cannot shift between pages — it must stay invisible and unpainted */
html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab::after{
  background: none !important; box-shadow: none !important; border: 0 !important;
}

html body header.bar #navKids#navKids#navKids#navKids a.kid,
html body header.bar #navKids#navKids#navKids#navKids a.kid:hover,
html body header.bar #navKids#navKids#navKids#navKids a.kid:focus,
html body header.bar #navKids#navKids#navKids#navKids a.kid:focus-visible,
html body header.bar #navKids#navKids#navKids#navKids a.kid.on{
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}
html body header.bar #navKids#navKids#navKids#navKids a.kid::after{
  content: "" !important; display: block !important; position: absolute !important;
  inset: auto !important; margin: 0 !important; padding: 0 !important;
  width: auto !important; height: auto !important;
  background: none !important; box-shadow: none !important; border: 0 !important;
  border-radius: 0 !important; opacity: 1 !important; transform: none !important;
  clip-path: none !important; pointer-events: none !important; z-index: -1 !important;
  transition: background-color .16s ease, box-shadow .16s ease !important;
}
html body header.bar #navKids#navKids#navKids#navKids a.kid:not(.on)::after{
  display: none !important;
}

/* one transition, one language */
html body header.bar :is(#navPrimary a.ptab, #navKids a.kid){
  transition: color .16s ease, font-weight .16s ease !important;
}
@media (prefers-reduced-motion: reduce){
  html body header.bar :is(#navPrimary a.ptab, #navKids a.kid),
  html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab::before,
  html body header.bar #navKids#navKids#navKids#navKids a.kid::after{
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   2 · BAND A — desktop and laptop, >=1024px
   Tabs are 66px and stretched; the pill is 34px, centred, and reaches 10px
   past its label. Section links are 42px with 12px of padding; their pill is
   the padding box itself, so the next link is a full column-gap away.
   ========================================================================== */
@media (min-width: 1024px){

  /* ---- row 1 · INACTIVE ---- */
  html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab{
    color: var(--nvs-1-ink) !important; font-weight: 650 !important;
  }

  /* ---- row 1 · ACTIVE — the only filled thing on the bar ---- */
  html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab.cur{
    color: var(--nvs-1-ink-on) !important; font-weight: 750 !important;
  }
  html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab.cur > span{
    color: inherit !important;
  }
  html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab.cur::before{
    display: block !important;
    top: calc(50% - var(--nvs-pill-h) / 2) !important;
    height: var(--nvs-pill-h) !important;
    left: var(--nvs-1-inset) !important;
    right: var(--nvs-1-inset) !important;
    background: var(--nvs-dot), var(--nvs-1-fill) !important;
    box-shadow: inset 0 0 0 1px var(--nvs-1-ring) !important;
    border-radius: var(--nvs-r) !important;
  }

  /* ---- row 1 · OPEN MENU (Our Services) — a state of its own -------------
     A solid 3px rule and white ink, with the chevron already turned and the
     panel already showing. Deliberately NOT a box: keeping it a rule is what
     guarantees that row 1 never holds two boxes at once, whatever is open,
     hovered or current. On the Google Ads page this tab is also .cur, and
     there the pill above wins. */
  html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:not(.cur)[aria-expanded="true"]{
    color: var(--nvs-1-ink-h) !important; font-weight: 700 !important;
  }
  html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:not(.cur)[aria-expanded="true"]::before{
    display: block !important;
    left: var(--nvs-1-pad) !important;
    right: var(--nvs-1-pad) !important;
    top: auto !important;
    bottom: calc(50% - var(--nvs-pill-h) / 2) !important;
    height: 3px !important;
    background: var(--nvs-1-rule-on) !important;
    border-radius: 2px !important;
  }

  /* ---- row 2 · INACTIVE ---- */
  html body header.bar #navKids#navKids#navKids#navKids a.kid{
    color: var(--nvs-2-ink) !important; font-weight: 550 !important;
  }

  /* ---- row 2 · ACTIVE ---- */
  html body header.bar #navKids#navKids#navKids#navKids a.kid.on{
    color: var(--nvs-2-ink-on) !important; font-weight: 700 !important;
  }
  html body header.bar #navKids#navKids#navKids#navKids a.kid.on::after{
    display: block !important;
    inset: 4px 0 4px 0 !important;
    background: var(--nvs-dot), var(--nvs-2-fill) !important;
    box-shadow: inset 0 0 0 1px var(--nvs-2-ring) !important;
    border-radius: var(--nvs-r) !important;
  }
}

/* ---- BAND A · HOVER — a line, never a box ------------------------------- */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine){
  html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:not(.cur):not([aria-expanded="true"]):hover{
    color: var(--nvs-1-ink-h) !important;
  }
  html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:not(.cur):not([aria-expanded="true"]):hover::before{
    display: block !important;
    left: var(--nvs-1-pad) !important;      /* the label, not the pill box  */
    right: var(--nvs-1-pad) !important;
    top: auto !important;
    bottom: calc(50% - var(--nvs-pill-h) / 2) !important;
    height: var(--nvs-rule-h) !important;
    background: var(--nvs-1-rule) !important;
    border-radius: 2px !important;
  }
  html body header.bar #navKids#navKids#navKids#navKids a.kid:not(.on):hover{
    color: var(--nvs-2-ink-h) !important;
  }
  html body header.bar #navKids#navKids#navKids#navKids a.kid:not(.on):hover::after{
    display: block !important;
    left: 12px !important; right: 12px !important;
    top: auto !important; bottom: 8px !important;
    height: var(--nvs-rule-h) !important;
    background: var(--nvs-2-rule) !important;
    border-radius: 2px !important;
  }
}

/* ==========================================================================
   3 · BAND B — tablet landscape and small laptops, 901-1023px
   Measured: the six tabs, the wordmark and the gutters leave 0.7px of slack
   at 901px, and the tabs sit 11px apart with no padding of their own. A pill
   cannot be given breathing room here without cramping it or pushing the
   brand off, so ACTIVE states as a 3px rule and HOVER as a 1.5px one: the
   same hierarchy (weight, ink, thickness), stated in 11px.
   ========================================================================== */
@media (min-width: 901px) and (max-width: 1023px){

  html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab{
    color: var(--nvs-1-ink) !important; font-weight: 650 !important;
  }
  /* 750, not more: every tab reserves the width of its own BOLD state with an
     ::after ghost set at 750, so a current tab heavier than that comes out
     wider than its ghost and the whole row shifts between pages. Measured at
     1000px with 800: 1.20px of drift. The rule and the white ink carry the
     state here; the weight matches the ghost. */
  html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab.cur{
    color: var(--nvs-1-ink-h) !important; font-weight: 750 !important;
  }
  html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab.cur > span{
    color: inherit !important;
  }
  html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab.cur::before{
    display: block !important;
    left: 0 !important; right: 0 !important;
    top: auto !important; bottom: -7px !important;
    height: 3px !important;
    background: var(--nvs-1-rule-on) !important;
    border-radius: 2px !important;
  }
  html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:not(.cur)[aria-expanded="true"]{
    color: var(--nvs-1-ink-h) !important; font-weight: 700 !important;
  }
  html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:not(.cur)[aria-expanded="true"]::before{
    display: block !important;
    left: 0 !important; right: 0 !important;
    top: auto !important; bottom: -7px !important;
    height: 3px !important;
    background: rgba(255,255,255,.55) !important;
    border-radius: 2px !important;
  }

  html body header.bar #navKids#navKids#navKids#navKids a.kid{
    color: var(--nvs-2-ink) !important; font-weight: 550 !important;
  }
  html body header.bar #navKids#navKids#navKids#navKids a.kid.on{
    color: var(--nvs-2-ink-on) !important; font-weight: 700 !important;
  }
  html body header.bar #navKids#navKids#navKids#navKids a.kid.on::after{
    display: block !important;
    left: 0 !important; right: 0 !important;
    top: auto !important; bottom: 6px !important;
    height: 3px !important;
    background: var(--nvs-2-rule-on) !important;
    border-radius: 2px !important;
  }
}

@media (min-width: 901px) and (max-width: 1023px) and (hover: hover) and (pointer: fine){
  html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:not(.cur):not([aria-expanded="true"]):hover{
    color: var(--nvs-1-ink-h) !important;
  }
  html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:not(.cur):not([aria-expanded="true"]):hover::before{
    display: block !important;
    left: 0 !important; right: 0 !important;
    top: auto !important; bottom: -7px !important;
    height: 1.5px !important;
    background: rgba(255,255,255,.45) !important;
    border-radius: 2px !important;
  }
  html body header.bar #navKids#navKids#navKids#navKids a.kid:not(.on):hover{
    color: var(--nvs-2-ink-h) !important;
  }
  html body header.bar #navKids#navKids#navKids#navKids a.kid:not(.on):hover::after{
    display: block !important;
    left: 0 !important; right: 0 !important;
    top: auto !important; bottom: 6px !important;
    height: 1.5px !important;
    background: var(--nvs-2-rule) !important;
    border-radius: 2px !important;
  }
}

/* ==========================================================================
   4 · BAND C — tablet portrait and phones, <=900px
   Row 1 is the drawer: full-bleed rows, so ACTIVE is a tinted row with a 3px
   accent bar ON the panel's own left edge (it used to be drawn at left:-10px,
   outside the 18px padding, and was clipped to a sliver), and HOVER is a
   lighter tint of the same full-bleed row. One is plainly deeper than the
   other and neither can look like a tab.
   Row 2 keeps the pill; it is given the link's own padding box.
   ========================================================================== */
@media (max-width: 900px){

  /* ---- the section strip: a 25px link, so the tap target clears the 24px
     WCAG 2.2 2.5.8 minimum (it was 23px). The row's own padding is reduced by
     the same 2px, so the header's height — and --barh, which the hero and
     every scroll offset are built on — does not move. */
  html body header.bar .krow{ padding-top: 10px !important; padding-bottom: 11px !important; }
  html body header.bar #navKids#navKids#navKids#navKids a.kid{
    padding-top: 6px !important; padding-bottom: 6px !important;
    color: var(--nvs-2-ink) !important; font-weight: 550 !important;
  }
  html body header.bar #navKids#navKids#navKids#navKids a.kid.on{
    color: var(--nvs-2-ink-on) !important; font-weight: 700 !important;
  }
  html body header.bar #navKids#navKids#navKids#navKids a.kid.on::after{
    display: block !important;
    inset: 0 !important;
    background: var(--nvs-dot), var(--nvs-2-fill) !important;
    box-shadow: inset 0 0 0 1px var(--nvs-2-ring) !important;
    border-radius: var(--nvs-r) !important;
  }

  /* ---- the drawer ---- */
  html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab{
    color: #34405A !important; font-weight: 600 !important;
  }
  html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab.cur{
    color: #00285E !important; font-weight: 750 !important;
  }
  html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab.cur > span{
    color: inherit !important;
  }
  /* full-bleed: the row reaches the panel's edges, and the accent bar lands
     ON the left edge rather than outside it */
  html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab.cur::before{
    display: block !important;
    inset: 0 calc(-1 * var(--pad, 18px)) !important;
    background: linear-gradient(90deg, var(--nvs-2-ink-on) 0 3px, #EFF5FF 3px) !important;
    border-radius: 0 !important;
  }
  html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:not(.cur)[aria-expanded="true"]{
    color: #00285E !important; font-weight: 700 !important;
  }
  html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:not(.cur)[aria-expanded="true"]::before{
    display: block !important;
    inset: 0 calc(-1 * var(--pad, 18px)) !important;
    background: #F4F8FF !important;
    border-radius: 0 !important;
  }
}

@media (max-width: 900px) and (hover: hover) and (pointer: fine){
  html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:not(.cur):not([aria-expanded="true"]):hover{
    color: #00285E !important;
  }
  html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:not(.cur):not([aria-expanded="true"]):hover::before{
    display: block !important;
    inset: 0 calc(-1 * var(--pad, 18px)) !important;
    background: #F7FAFF !important;
    border-radius: 0 !important;
  }
  html body header.bar #navKids#navKids#navKids#navKids a.kid:not(.on):hover{
    color: var(--nvs-2-ink-h) !important;
  }
  html body header.bar #navKids#navKids#navKids#navKids a.kid:not(.on):hover::after{
    display: block !important;
    left: 10px !important; right: 10px !important;
    top: auto !important; bottom: 3px !important;
    height: var(--nvs-rule-h) !important;
    background: var(--nvs-2-rule) !important;
    border-radius: 2px !important;
  }
}

/* ==========================================================================
   5 · TOUCH — the press, not the hover
   Touch gets its own momentary feedback so a tap still feels answered. It
   lasts only while the finger is down, so it cannot be left behind on an item
   the way the old sticky :hover pill was.
   ========================================================================== */
html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:active{
  color: var(--nvs-1-ink-h) !important;
}
html body header.bar #navKids#navKids#navKids#navKids a.kid:active{
  color: var(--nvs-2-ink-h) !important;
}
@media (max-width: 900px){
  html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:active{
    color: #00285E !important;
  }
}

/* ==========================================================================
   6 · FOCUS — a ring, on the label, never confused with either other state
   Row 1's ring is on the tab's own <span>, because the tab itself is 66px
   tall (align-self:stretch) and a ring round THAT was a third box shape, cut
   off by the bar's bottom edge. On the span it lands exactly where the pill
   lands, and nests 4px inside it, so a focused current page shows pill + ring
   as one clearly related pair.
   ========================================================================== */
html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:focus,
html body header.bar #navKids#navKids#navKids#navKids a.kid:focus{ outline: 0 !important; }

/* The ring is deliberately TIGHTER than the pill — 5px off the label against
   the pill's 10px, and a 5px radius against the pill's 7px — so a focused tab
   beside the current one reads as "the cursor is here", not as a second
   chosen page. Measured at 1440: ring 28px tall, pill 34px. */
@media (min-width: 1024px){
  html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:focus-visible > span{
    outline: var(--nvs-focus-w) solid var(--nvs-1-focus) !important;
    outline-offset: 5px !important; border-radius: 5px !important;
  }
  html body header.bar #navKids#navKids#navKids#navKids a.kid:focus-visible{
    outline: var(--nvs-focus-w) solid var(--nvs-2-focus) !important;
    outline-offset: -2px !important; border-radius: 9px !important;
  }
}
@media (min-width: 901px) and (max-width: 1023px){
  html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:focus-visible > span{
    outline: var(--nvs-focus-w) solid var(--nvs-1-focus) !important;
    outline-offset: 4px !important; border-radius: 5px !important;
  }
  html body header.bar #navKids#navKids#navKids#navKids a.kid:focus-visible{
    outline: var(--nvs-focus-w) solid var(--nvs-2-focus) !important;
    outline-offset: -4px !important; border-radius: 8px !important;
  }
}
@media (max-width: 900px){
  /* in the drawer the row IS the target, so the ring goes round the row and
     tucks inside it; the strip's links keep a ring just outside their pill */
  html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:focus-visible{
    outline: var(--nvs-focus-w) solid var(--nvs-2-focus) !important;
    outline-offset: -3px !important; border-radius: 8px !important;
  }
  html body header.bar #navKids#navKids#navKids#navKids a.kid:focus-visible{
    outline: var(--nvs-focus-w) solid var(--nvs-2-focus) !important;
    outline-offset: 2px !important; border-radius: 9px !important;
  }
}
/* Windows High Contrast: outlines are repainted by the OS, backgrounds are
   not — so the states must not rely on the fill alone there. */
@media (forced-colors: active){
  html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab.cur::before,
  html body header.bar #navKids#navKids#navKids#navKids a.kid.on::after{
    box-shadow: none !important; border: 1px solid CanvasText !important;
    background: none !important;
  }
  html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:focus-visible > span,
  html body header.bar #navPrimary#navPrimary#navPrimary#navPrimary a.ptab:focus-visible,
  html body header.bar #navKids#navKids#navKids#navKids a.kid:focus-visible{
    outline: 3px solid Highlight !important;
  }
}

/* ==========================================================================
   7 · THE OUR SERVICES MENU
   Was: one border plus one box-shadow ring in a different grey (a double
   border), the current item and the hover both filled #EEF4FD (the open menu
   showed two current services), and the current item at radius 2px among
   siblings at 9px.
   Now: one ring on the panel, and the two states told apart the way they must
   be inside a panel that is ALREADY a white filled surface — the hierarchy is
   inverted but the rule is the same, one material each:
       current  a deeper fill PLUS a 1px ring and bold navy ink
       hover    a faint wash, no ring
   The blue selected dot is deliberately NOT used here: every live service
   already carries a green .nd-live dot at the right end of its row, and a
   second dot in the same corner would read as a badge, not a state.
   ========================================================================== */
/* ALIGNMENT — the panel used to start 31.9px left of the words that open it
   (measured at 1440: panel 661, label 692.9). That offset belonged to the old
   "tongue" treatment, where the tab was drawn as the panel's lid; there is no
   tongue any more, so the panel's left edge now sits on the label's own left
   edge. --svc-lip is subtracted from --svc-x (the tab BOX's left) by
   assets/shared/nav/nav.css, so a negative lip moves the panel right by the tab's own
   padding — which is exactly the label's left edge. */
@media (min-width: 1024px){
  html body header.bar{ --svc-lip: calc(-1 * var(--nvs-1-pad)) !important; }
}
@media (min-width: 901px) and (max-width: 1023px){
  html body header.bar{ --svc-lip: 0px !important; }
}

/* the "live" marker beside a service that exists. It had been overridden to a
   5x5 SQUARE in #1E4FD6 — the same blue the selected state now owns, so it
   read as a second state mark. Back to what it is: a small round status dot,
   in a hue nothing else in the header uses.
   Both lists live inside #navPrimary, and the rule that squared it is
   `html body :is(header.bar .nd-live, #sfoot .f-live)` — :is() takes the
   specificity of its STRONGEST arm, so that selector scores as if it held the
   footer's #sfoot id. Two ids are what it takes to out-rank it. */
html body header.bar #navPrimary#navPrimary .nd-live{
  width: 6px !important; height: 6px !important; border-radius: 50% !important;
  background: #188038 !important; background-color: #188038 !important;
  box-shadow: 0 0 0 3px rgba(24,128,56,.14) !important;
}

html body header.bar :is(#navSvc, #navPrice):is(#navSvc, #navPrice):is(#navSvc, #navPrice):is(#navSvc, #navPrice){
  border: 0 !important;
  box-shadow: 0 0 0 1px #C9D8F0,
              0 2px 8px rgba(11,13,18,.05),
              0 26px 60px -18px rgba(15,27,61,.22) !important;
  border-radius: 12px !important;
  padding: 8px !important;
}
html body header.bar :is(#navSvc, #navPrice):is(#navSvc, #navPrice):is(#navSvc, #navPrice):is(#navSvc, #navPrice) a,
html body header.bar :is(#navSvc, #navPrice):is(#navSvc, #navPrice):is(#navSvc, #navPrice):is(#navSvc, #navPrice) .nd-na{
  position: relative;
  min-height: 40px !important;              /* a comfortable target         */
  border-radius: 9px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #34405A !important; font-weight: 600 !important;
  transition: background-color .16s ease, color .16s ease !important;
}
html body header.bar :is(#navSvc, #navPrice):is(#navSvc, #navPrice):is(#navSvc, #navPrice):is(#navSvc, #navPrice) .nd-na{
  color: #8795AE !important; font-weight: 550 !important;
}
html body header.bar :is(#navSvc, #navPrice):is(#navSvc, #navPrice):is(#navSvc, #navPrice):is(#navSvc, #navPrice) a[aria-current]{
  background: #E4EFFD !important;
  box-shadow: inset 0 0 0 1px var(--nvs-2-ring) !important;
  color: var(--nvs-2-ink-on) !important; font-weight: 700 !important;
}
html body header.bar :is(#navSvc, #navPrice):is(#navSvc, #navPrice):is(#navSvc, #navPrice):is(#navSvc, #navPrice) a:focus-visible{
  outline: var(--nvs-focus-w) solid var(--nvs-2-focus) !important;
  outline-offset: -2px !important; border-radius: 9px !important;
}
@media (hover: hover) and (pointer: fine){
  html body header.bar :is(#navSvc, #navPrice):is(#navSvc, #navPrice):is(#navSvc, #navPrice):is(#navSvc, #navPrice) a:not([aria-current]):hover{
    background: #F3F7FE !important; color: #00285E !important;
  }
}
/* inside the drawer the menu is a plain indented list — no pill, or it would
   be a second "chosen" mark beside the drawer row that is already current */
@media (max-width: 900px){
  html body header.bar :is(#navSvc, #navPrice):is(#navSvc, #navPrice):is(#navSvc, #navPrice):is(#navSvc, #navPrice){
    box-shadow: none !important; border-radius: 0 !important; padding: 0 !important;
  }
  html body header.bar :is(#navSvc, #navPrice):is(#navSvc, #navPrice):is(#navSvc, #navPrice):is(#navSvc, #navPrice) a,
  html body header.bar :is(#navSvc, #navPrice):is(#navSvc, #navPrice):is(#navSvc, #navPrice):is(#navSvc, #navPrice) .nd-na{
    border-radius: 0 !important; min-height: 44px !important;
  }
  /* in the drawer the item is a full-width row against a 1px rail, so the
     current service takes the drawer's own mark: a 3px bar on that rail */
  html body header.bar :is(#navSvc, #navPrice):is(#navSvc, #navPrice):is(#navSvc, #navPrice):is(#navSvc, #navPrice) a[aria-current]{
    background: none !important; box-shadow: none !important;
    color: #00285E !important; font-weight: 700 !important;
  }
  html body header.bar :is(#navSvc, #navPrice):is(#navSvc, #navPrice):is(#navSvc, #navPrice):is(#navSvc, #navPrice) a[aria-current]::before{
    content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px;
    width: 3px; border-radius: 2px; background: var(--nvs-2-ink-on);
  }
}
/* the "View services" tip is a pointer affordance only */
@media (hover: none){
  html body header.bar .ptip{ display: none !important; }
}

/* ==========================================================================
   8 · THE ALL-PAGES LIST IN THE DRAWER (.nd-p)
   It repeats the six pages, so the page you are on has to be marked there
   too — otherwise the drawer shows the current page twice, marked once.
   Same language as the drawer rows above: a tinted row with a 3px bar.
   ========================================================================== */
@media (max-width: 900px){
  html body header.bar .nd-p a{
    position: relative; isolation: isolate;
    border-radius: 0 !important;
    min-height: 44px !important;
    -webkit-tap-highlight-color: transparent;
  }
  html body header.bar .nd-p a[aria-current]{
    color: #00285E !important; font-weight: 700 !important;
  }
  html body header.bar .nd-p a[aria-current]::before{
    content: ""; position: absolute; z-index: -1;
    inset: 0 calc(-1 * var(--pad, 18px));
    background: linear-gradient(90deg, var(--nvs-2-ink-on) 0 3px, #EFF5FF 3px);
  }
  html body header.bar .nd-p a:focus-visible,
  html body header.bar .barmenu:focus-visible{
    outline: var(--nvs-focus-w) solid var(--nvs-2-focus) !important;
    outline-offset: -3px !important; border-radius: 8px !important;
  }
}
@media (max-width: 900px) and (hover: hover) and (pointer: fine){
  html body header.bar .nd-p a:not([aria-current]):hover{
    color: #00285E !important; background: transparent !important;
  }
  html body header.bar .nd-p a:not([aria-current]):hover::before{
    content: ""; position: absolute; z-index: -1;
    inset: 0 calc(-1 * var(--pad, 18px));
    background: #F7FAFF;
  }
}


/* ==========================================================================
   THE PHONE SECTION ROW — "OUTLINE CHIPS"                        2026-10-02

   Chosen by the owner (home-subnav-refine-5, round 2, Solution 1) as the
   refinement of the "Outline Box" row of 2026-10-01, and applied to every
   page. Phones and small tablets only: the header's own phone band,
   max-width 900px. Above that nothing here applies.

   WHAT WAS WRONG with the Outline Box row, measured on the homepage at 390px:
     · names stood 33px apart with nothing between them;
     · only the selected name had a box, the others read as loose words;
     · the row began 9px from the edge while the logo above begins at 18px;
     · two blues: the name in #004594, its frame in the brighter #0760C6.

   WHAT THIS DOES:
     ROW      white, 38px, one 1px grey edge (#DFE4EC). It runs edge to edge;
              the first box starts on the logo's left edge (18px) and the last
              one ends on the Menu button's right edge.
     NAME     13px, every one in the same box: 27px high, 4px corners, a 1px
              grey line (#C9D0DB), 9px of air inside, 6px between boxes — the
              names are 24px apart. The link itself is still the full 38px
              high to the finger.
     ACTIVE   the same box in the header's own blue (#004594), 1.5px, and a
              bold blue name. Nothing is filled, there is no line under it,
              and no other blue is used in the row.
     LANDING  unchanged: a section's heading starts 18px under the row
              (assets/shared/nav/nav.js marks the heading); nav.js lands a tapped
              section flush under the header.

   THE GAP. The 6px between boxes is the row's 4px column-gap plus 1px of
   each link beside its drawn box. The strip tuner (assets/shared/strip-peek.js, and
   its inline copy at the top of index.html) used to widen the old row's gap
   by up to 16px to cut the next name at the screen edge — that is what
   spread the row out. Since 2026-10-02 the row has its own rule there,
   tuneChips: the gap is left at 6px wherever a box already crosses the
   screen edge, and moves by 1–4px (4 to 10px) only where the edge would
   fall between two boxes and the row would look as if it ended. Phones up
   to 760px only; from 761 to 900px the gap is always 6px.

   STILL TRUE (owner, 2026-10-01): a section's name is boxed in the row only.
   It is never repeated as a tab or framed label inside the section.

   Specificity: #navKids is repeated five times, one more than every rule
   above, so nothing above needed editing. Section spacing on several pages
   is set with id selectors and !important; :is(#snx…, .x) lends the heading
   rules the weight of five ids without needing an element called #snx.

   UNDO: 
   ========================================================================== */
@media (max-width: 900px){

  html body header.bar .krow.krow.krow{
    background: #fff !important; padding: 0 !important;
    box-shadow: inset 0 -1px 0 #DFE4EC !important;
  }
  html body header.bar #navKids#navKids#navKids#navKids#navKids{
    gap: 0 4px !important; align-items: stretch !important; height: 38px !important;
    padding: 0 0 0 17px !important;                /* 17 + the link's 1 = the logo's 18px line */
  }
  /* the same 18px after the last box (13 + the row gap of 4 + the link's 1); a
     spacer, because a scrolling row's own end padding is not counted by every browser */
  html body header.bar #navKids#navKids#navKids#navKids#navKids::after{
    content: ""; flex: none; width: 13px;
  }
  html body header.bar #navKids#navKids#navKids#navKids#navKids a.kid{
    box-sizing: border-box !important; height: 38px !important; padding: 0 10px !important;   /* 1px beside the box, 9px inside it */
    justify-content: center !important;
    font-size: 13px !important; line-height: 1.1 !important; font-weight: 600 !important; color: #33415A !important;
  }
  /* the box: 5px under the header, 5px over the row's edge */
  html body header.bar #navKids#navKids#navKids#navKids#navKids a.kid::after{
    display: block !important; inset: 5px 1px 6px !important; height: auto !important;
    background: none !important; box-shadow: inset 0 0 0 1px #C9D0DB !important; border-radius: 4px !important;
  }
  html body header.bar #navKids#navKids#navKids#navKids#navKids a.kid.on{
    color: #004594 !important; font-weight: 700 !important;
  }
  html body header.bar #navKids#navKids#navKids#navKids#navKids a.kid.on::after{
    box-shadow: inset 0 0 0 1.5px #004594 !important;
  }
  /* keyboard: the ring sits just outside the box, inside the row */
  html body header.bar #navKids#navKids#navKids#navKids#navKids a.kid:focus-visible{
    outline-offset: -4px !important; border-radius: 7px !important;
  }
  /* a mouse on a narrow window: the box darkens, nothing else moves */
  @media (hover: hover) and (pointer: fine){
    html body header.bar #navKids#navKids#navKids#navKids#navKids a.kid:not(.on):hover{ color: #0E1E35 !important; }
    html body header.bar #navKids#navKids#navKids#navKids#navKids a.kid:not(.on):hover::after{ box-shadow: inset 0 0 0 1px #8E9BB0 !important; }
  }
  /* Windows High Contrast drops box-shadows, so the boxes are drawn as borders there */
  @media (forced-colors: active){
    html body header.bar #navKids#navKids#navKids#navKids#navKids a.kid::after{ border: 1px solid GrayText !important; }
    html body header.bar #navKids#navKids#navKids#navKids#navKids a.kid.on::after{ border: 2px solid Highlight !important; }
  }

  /* ---- the section opening: heading straight under the row ---- */
  html body :is(#snx#snx#snx#snx#snx, .snx-pt0){ padding-top: 0 !important; }
  html body :is(#snx#snx#snx#snx#snx, .snx-head){ margin-top: 0 !important; padding-top: 18px !important; }

}


/* ==========================================================================
   PHONE MENU — "FULL-WIDTH LEDGER"                               2026-10-01

   Chosen by the owner: mobile-nav-lab, round 5, Version B ("apply Version B
   as you chose it in round 5"). Phones and small tablets only — the header's
   own phone band, max-width 900px. Above that the menu button is hidden and
   nothing here applies. The panel itself is built by assets/shared/nav/nav.js.

   WHAT WAS WRONG, measured on the live site at 400px:
     · the button was a 36px square with three lines and no word, and looked
       the same open and closed;
     · the section row sat between the button and the list it opened;
     · the list held 21 links for a 14-page site, six of them twice.

   WHAT THIS DOES:
     BUTTON   88 x 40, the word "Menu" beside the three lines. Open, it is a
              white tab reading "Close", joined to the panel beneath it. The
              icon and the word are drawn here (::before / ::after), so the
              14 pages' markup did not change and nothing shifts on load.
     PANEL    hangs under the brand row and covers the section row; the page
              behind is dimmed and a tap on it closes the menu.
     TABLE    one ruled table, edge to edge: a name cell and a key cell.
              → goes to a page; a boxed + opens a heading in place, − closes it.
              Under an open heading each page has its mark in a cell, then its
              name. The page being read has a 3px brand line and a blue name;
              the heading that holds it carries a blue dot and is already open.
     FOOT     Call us | WhatsApp us, then Privacy Policy | Terms & Disclaimers,
              as the last two rows of the same table.

   UNDO: delete this block, restore nav.js from
   [archived], and bump the two ?v= values
   on the 14 pages again (see the README in that folder).
   ========================================================================== */
.mnl, .mnl-sc{ display: none; }
@media (max-width: 900px){

  /* ---- the button ---- */
  html body header.bar #navBurger#navBurger{
    display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important;
    box-sizing: border-box !important; width: 88px !important; height: 40px !important; margin: -2px 0 !important; padding: 0 !important;
    border: 0 !important; border-radius: 4px !important; background: #fff !important; color: #0E1E35 !important;
    box-shadow: inset 0 0 0 1.5px #B9CBEE !important;
    font: inherit !important; font-size: 13.5px !important; font-weight: 700 !important; letter-spacing: -.01em !important; line-height: 1 !important;
    white-space: nowrap !important; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  html body header.bar #navBurger#navBurger svg{ display: none !important; }
  html body header.bar #navBurger#navBurger::before{
    content: ""; flex: none; width: 18px; height: 18px;
    background: center / 18px 18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E1E35' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
  }
  html body header.bar #navBurger#navBurger::after{ content: "Menu"; }
  html body header.bar #navBurger#navBurger[aria-expanded="true"]{
    border-radius: 4px 4px 0 0 !important;
    box-shadow: 0 10px 0 #fff !important;            /* the tab runs down into the panel */
  }
  html body header.bar #navBurger#navBurger[aria-expanded="true"]::before{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E1E35' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  }
  html body header.bar #navBurger#navBurger[aria-expanded="true"]::after{ content: "Close"; }
  html body header.bar #navBurger#navBurger:focus-visible{
    outline: 2.5px solid #fff !important; outline-offset: 2px !important; border-radius: 4px !important;
  }

  /* ---- the dimmed page and the panel ---- */
  html.mnl-lock, html.mnl-lock body{ overflow: hidden !important; }
  header.bar .mnl-sc{
    display: block; position: fixed; left: 0; right: 0; top: var(--mnl-top, 58px); bottom: 0; z-index: 1;
    background: rgba(14,30,53,.46); opacity: 0; visibility: hidden;
    transition: opacity .22s, visibility 0s .22s; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  header.bar.mnl-open .mnl-sc{ opacity: 1; visibility: visible; transition: opacity .22s; }
  header.bar .mnl{
    --mnl-e1: #C6D9F4; --mnl-e2: #AEC9EF; --mnl-p1: #F6F9FE; --mnl-p2: #EEF4FC; --mnl-p3: #E3EBF7; --mnl-p4: #DDE9F9; --mnl-blue: #0760C6;
    display: block; position: absolute; left: 0; right: 0; top: var(--mnl-top, 58px); z-index: 2;
    max-height: calc(100vh - var(--mnl-top, 58px) - 8px); max-height: calc(100dvh - var(--mnl-top, 58px) - 8px);
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    background: #fff; border-bottom: 1px solid var(--mnl-e2);
    font-size: 16px; line-height: 1.3; font-weight: 400; color: #0D1526; text-align: left;
    opacity: 0; visibility: hidden; transform: translateY(-12px);
    transition: opacity .18s, transform .24s cubic-bezier(.2,.7,.2,1), visibility 0s .24s;
  }
  header.bar.mnl-open .mnl{ opacity: 1; visibility: visible; transform: none;
    transition: opacity .18s, transform .24s cubic-bezier(.2,.7,.2,1); }
  header.bar .mnl *{ box-sizing: border-box; margin: 0; }
  header.bar .mnl a{ color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
  header.bar .mnl button{ font: inherit; color: inherit; border: 0; border-radius: 0; background: none; padding: 0; cursor: pointer; text-align: left;
    -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; }
  header.bar .mnl i{ font-style: normal; }
  header.bar .mnl svg{ display: block; }
  header.bar .mnl :focus-visible{ outline: 2.5px solid #0B57F5; outline-offset: -2px; border-radius: 4px; }
  header.bar .mnl nav{ display: block; position: static; padding: 0; border: 0; background: none; box-shadow: none; max-height: none; overflow: visible; }

  /* ---- the table: a row is a name cell and a key cell ---- */
  header.bar .mnl > * + *, header.bar .mnl-main > * + *{ border-top: 1px solid var(--mnl-e1); }
  header.bar .mnl .mnl-g{ display: block; }
  header.bar .mnl .mnl-r{
    display: flex; align-items: stretch; width: 100%; min-height: 54px; position: relative; padding: 0; background: #fff;
    font-size: 16.5px; font-weight: 650; letter-spacing: -.012em; line-height: 1.25; color: #0E1E35;
  }
  header.bar .mnl .mnl-n{ flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 6px 12px 6px 18px; }
  header.bar .mnl .mnl-k{ flex: none; width: 58px; display: grid; place-items: center; border-left: 1px solid var(--mnl-e1); color: #22406F; }
  header.bar .mnl .mnl-ic{ width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  header.bar .mnl .mnl-b{ width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--mnl-e2); border-radius: 2px; background: #fff; color: #0E1E35; }
  header.bar .mnl .mnl-pm{ position: relative; display: block; width: 14px; height: 14px; }
  header.bar .mnl .mnl-pm::before, header.bar .mnl .mnl-pm::after{
    content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; border-radius: 1px; background: currentColor; transition: transform .2s; }
  header.bar .mnl .mnl-pm::after{ transform: rotate(90deg); }
  header.bar .mnl [aria-expanded="true"] .mnl-pm::after{ transform: rotate(0); }

  /* a heading, open: its row fills and its key cell fills one shade deeper */
  header.bar .mnl .mnl-h[aria-expanded="true"]{ background: var(--mnl-p2); }
  header.bar .mnl .mnl-h[aria-expanded="true"] .mnl-k{ background: var(--mnl-p4); }
  header.bar .mnl .mnl-has .mnl-nm::after{
    content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-radius: 50%;
    background: var(--mnl-blue); vertical-align: middle; position: relative; top: -1px; }
  header.bar .mnl .mnl-sub{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows .24s ease; }
  header.bar .mnl .mnl-sub > div{ overflow: hidden; min-height: 0; }
  header.bar .mnl [aria-expanded="true"] + .mnl-sub{ grid-template-rows: 1fr; }
  header.bar .mnl .mnl-in{ display: block; border-top: 1px solid var(--mnl-e1); }

  /* a page under a heading: its mark in a cell, then its name */
  header.bar .mnl .mnl-c{ min-height: 46px; font-size: 15.5px; font-weight: 600; letter-spacing: 0; color: #1A2B45; }
  header.bar .mnl .mnl-c + .mnl-c{ border-top: 1px solid var(--mnl-p3); }
  header.bar .mnl .mnl-m{ flex: none; width: 56px; display: grid; place-items: center; background: var(--mnl-p1); border-right: 1px solid var(--mnl-p3); }
  header.bar .mnl .mnl-mk{ width: 20px; height: 20px; flex: none; }
  header.bar .mnl .mnl-ln{ width: 19px; height: 19px; fill: none; stroke: #22406F; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  header.bar .mnl .mnl-c .mnl-n{ padding-left: 12px; }
  header.bar .mnl .mnl-c .mnl-k{ border-left-color: var(--mnl-p3); color: #8296B5; }
  header.bar .mnl .mnl-c .mnl-ic{ width: 16px; height: 16px; }

  /* the page being read */
  header.bar .mnl .mnl-r[aria-current]{ color: var(--mnl-blue); }
  header.bar .mnl .mnl-r[aria-current]::before{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--mnl-blue); z-index: 1; }
  header.bar .mnl .mnl-c[aria-current]{ font-weight: 700; }
  header.bar .mnl .mnl-c[aria-current] .mnl-m{ background: #E4EEFC; }

  /* the last two rows */
  header.bar .mnl .mnl-2{ display: grid; grid-template-columns: 1fr 1fr; background: #fff; }
  header.bar .mnl .mnl-2 a{ display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 6px;
    font-size: 14px; font-weight: 700; color: #0E1E35; text-align: center; }
  header.bar .mnl .mnl-2 a + a{ border-left: 1px solid var(--mnl-e1); }
  header.bar .mnl .mnl-2 .mnl-ic{ width: 16px; height: 16px; color: var(--mnl-blue); stroke-width: 1.9; }
  header.bar .mnl .mnl-wa{ width: 18px; height: 18px; flex: none; fill: #1FA855; }
  header.bar .mnl .mnl-f{ background: var(--mnl-p1); }
  header.bar .mnl .mnl-f a{ min-height: 40px; font-size: 12.5px; font-weight: 600; color: #5E6F88; }
  header.bar .mnl .mnl-f a[aria-current]{ color: var(--mnl-blue); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }

  /* small phones (320–359px): the brand row cannot hold the 226px brand and an
     88px button, so the button narrows and the brand's name sets a size smaller */
  @media (max-width: 359px){
    html body header.bar #navBurger#navBurger{ width: 78px !important; gap: 5px !important; font-size: 13px !important; }
    html body header.bar .brow .wm{ font-size: 14px !important; letter-spacing: -.03em !important; }
    header.bar .mnl .mnl-r{ font-size: 16px; }
    header.bar .mnl .mnl-c{ font-size: 15px; }
    header.bar .mnl .mnl-m{ width: 48px; }
    header.bar .mnl .mnl-k{ width: 52px; }
    header.bar .mnl .mnl-2 a{ font-size: 13.5px; }
  }
  /* the narrowest phones (320–339px): the row's side padding gives up 6px each side */
  @media (max-width: 339px){
    html body header.bar .brow{ padding-left: 12px !important; padding-right: 12px !important; gap: 8px !important; }
    header.bar .mnl .mnl-main > .mnl-r > .mnl-n, header.bar .mnl .mnl-h > .mnl-n{ padding-left: 12px; }
  }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce){
  header.bar .mnl, header.bar .mnl-sc, header.bar .mnl *, header.bar .mnl *::before, header.bar .mnl *::after{ transition-duration: .01ms !important; }
}