/* Canonical NOVA ADUs header. Loaded after each page stylesheet. */
.nwb-global-header,
.nwb-global-header.is-solid {
  position: fixed;
  inset: clamp(.75rem,1.5vw,1.5rem) clamp(.75rem,1.5vw,1.5rem) auto;
  z-index: 100;
  padding: 0;
  color: #1e1e1e;
  background: #fff;
  border: 1px solid rgb(30 30 30 / .08);
  border-radius: clamp(.875rem,1.25vw,1.25rem);
  box-shadow: 0 16px 48px -24px rgb(37 34 31 / .32);
}
.nwb-global-header::before,.nwb-global-header::after{display:none!important}
.nwb-global-header__inner{
  width:100%;max-width:none!important;min-height:clamp(4rem,5.8vw,5.75rem);height:auto!important;
  padding-inline:clamp(1rem,3vw,3rem) 1.5rem;display:grid!important;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:1rem;
}
.nwb-global-header .brand{justify-self:start}
/* Wordmark, 18% larger than the original 1.75/1.5+1.1vw/2.375 ramp. The
   header keeps its height because at every width the mark stays under the
   48px CTA button, which is what actually sets the row height. */
.nwb-global-header .brand__mark{display:block;width:auto;height:clamp(2.065rem,1.77rem + 1.3vw,2.8025rem);filter:none!important}
.nwb-global-header .nav{display:block}
/* The hover pill's inline padding. The dropdown's left anchor is derived from
 it below, so changing this keeps the panel aligned to the label. The list
 gap is reduced by twice this, so the gap between LABELS is unchanged and
 the nav occupies the same width as before. */
.nwb-global-header .nav{--nav-pad-x:.75rem}
.nwb-global-header .nav__list{display:flex;align-items:center;justify-content:center;gap:clamp(.25rem,2.4vw - 1rem,1.5rem);margin:0;padding:0;list-style:none}
.nwb-global-header .nav__item{position:relative}
.nwb-global-header .nav__link{display:inline-flex;align-items:center;gap:.45rem;padding:.625rem var(--nav-pad-x);border:0;background:transparent;color:inherit;border-radius:999px;font:500 clamp(.875rem,.8rem + .15vw,1rem)/1.2 var(--font-body,var(--font-sans,"Instrument Sans",Arial,sans-serif));letter-spacing:0;text-transform:none;white-space:nowrap;text-decoration:none;cursor:pointer}
.nwb-global-header .nav__link:hover,.nwb-global-header .nav__item[data-open="true"]>.nav__link{background:rgb(30 30 30 / .06)}
.nwb-global-header .nav__caret{display:none}
/* Left-anchored to the trigger, not centred on it. The offset is the trigger's inline padding minus the panel's own padding and the item's, so the menu labels sit on the same vertical as the nav label above them. `translate:none` cancels the -50% that home.css's base .nav__menu sets: both used to apply and the panel landed half its width to the left. */
.nwb-global-header .nav__menu{position:absolute;inset:calc(100% + .5rem) auto auto calc(var(--nav-pad-x) - .55rem - .8rem);translate:none;transform:translateY(-.35rem);min-width:15rem;margin:0;padding:.55rem;background:#fff;color:#1e1e1e;border:1px solid rgb(30 30 30 / .1);border-radius:.75rem;box-shadow:0 18px 45px -18px rgb(0 0 0 / .35);list-style:none;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,transform .18s ease,visibility 0s .18s}
/* Open state is the script's to own — it also keeps aria-expanded honest, and
 a bare :focus-within here would re-open the panel the moment Escape moved
 focus back to the toggle. The no-JS fallback below covers keyboard users
 when the script never runs. */
.nwb-global-header .nav__item[data-open="true"]>.nav__menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition-delay:0s}
/* The panel floats .5rem below the trigger, and that gap used to sit outside the <li>, so crossing it fired mouseleave and shut the menu. This covers the gap with a transparent strip that belongs to the panel, so the pointer never leaves the item. It is taller than the gap on
 purpose: an absolutely positioned child is laid out against the panel's
 PADDING box, so `bottom:100%` starts it 1px below the panel's border and
 a .5rem strip left a one-pixel seam exactly on the trigger's bottom edge.
 The overshoot laps onto the trigger, which is hoverable anyway. It inherits the closed panel's pointer-events:none, so it is inert until the menu opens. */
/* A long list — Areas We Serve is 13 deep — is 556px tall in one column and
 runs past the fold on a short laptop screen. Two columns keeps it inside
 the viewport. Deliberately NOT a scroll container: overflow on the panel
 would clip the ::before hover bridge, which sits above its padding box.
 21rem is the widest label ("Rancho Cordova", 108px) doubled, plus the link
 and panel padding and the column gap — about 311px — with a little slack. */
.nwb-global-header .nav__menu:has(li:nth-child(10)){columns:2;column-gap:1.5rem;min-width:21rem}
.nwb-global-header .nav__menu:has(li:nth-child(10)) li{break-inside:avoid}
html:not(.js) .nwb-global-header .nav__item:focus-within>.nav__menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition-delay:0s}
.nwb-global-header .nav__menu::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:1rem}
.nwb-global-header .nav__menu a{display:block;padding:.7rem .8rem;border-radius:.45rem;color:inherit;font:500 .875rem/1.35 var(--font-body,var(--font-sans,"Instrument Sans",Arial,sans-serif));text-decoration:none;white-space:nowrap}
.nwb-global-header .nav__menu a:hover{background:rgb(30 30 30 / .06)}
.nwb-global-header__actions{display:flex;justify-self:end;align-items:center;justify-content:flex-end;gap:2rem}
.nwb-global-header__phone{display:inline-flex;align-items:center;gap:.75rem;color:inherit;font:500 clamp(.875rem,.82rem + .12vw,1rem)/1.2 var(--font-body,var(--font-sans,"Instrument Sans",Arial,sans-serif));letter-spacing:.04em;text-decoration:none;white-space:nowrap}
.nwb-global-header__phone:hover{text-decoration:underline}
.nwb-global-header .nwb-global-header__phone-icon{display:block;width:1.05rem!important;height:1.05rem!important;flex:none}
.nwb-global-header .header-cta{display:inline-flex!important;min-height:3rem;padding:.75rem 2.125rem!important;align-items:center;justify-content:center;background:#36423a!important;color:#fff!important;border:1px solid #36423a!important;border-radius:999px;font:600 clamp(.875rem,.82rem + .1vw,1rem)/1.2 var(--font-body,var(--font-sans,"Instrument Sans",Arial,sans-serif));letter-spacing:0!important;text-transform:none;white-space:nowrap;text-decoration:none;box-shadow:none}
.nwb-global-header .header-cta:hover{background:#1e1e1e!important;border-color:#1e1e1e!important}
.nwb-global-header__burger{display:none}

.nwb-global-panel[hidden]{display:none}
.nwb-global-panel{position:fixed;inset:0;z-index:150;display:grid;grid-template-rows:auto 1fr auto;background:#fff;color:#1e1e1e;visibility:hidden;opacity:0;overflow-y:auto;overscroll-behavior:contain;transition:opacity .2s ease,visibility 0s .2s}
.nwb-global-panel[data-open="true"]{visibility:visible;opacity:1;transition-delay:0s}
.nwb-global-panel .brand__mark{display:block;width:auto;height:2rem;filter:none}
.nwb-global-panel__top{width:100%;min-height:4.75rem;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgb(30 30 30 / .12)}
.nwb-global-panel .panel__close,.nwb-global-panel .nav-panel__close{display:grid;place-items:center;width:3rem;height:3rem;padding:0;background:none;border:0;color:inherit;cursor:pointer}
.nwb-global-panel .panel__close svg,.nwb-global-panel .nav-panel__close svg{width:1.25rem;height:1.25rem}
.nwb-global-panel__body{width:100%;padding-block:1.25rem}
.nwb-global-panel ul{margin:0;padding:0;list-style:none}
.nwb-global-panel .panel__link,.nwb-global-panel .nav-panel__link{display:flex;width:100%;min-height:3.5rem;align-items:center;justify-content:space-between;padding:.9rem 0;border:0;border-radius:0;background:none;color:inherit;font:500 clamp(1.35rem,1.15rem + 1vw,2rem)/1.2 var(--font-display,var(--font-heading,"Manrope",Arial,sans-serif));letter-spacing:-.01em;text-align:left;text-decoration:none;cursor:pointer}
.nwb-global-panel .nav-panel__list>li+li{border-top:1px solid rgb(30 30 30 / .12)}
.nwb-global-panel .nav__caret{display:block;width:.65em;transition:transform .2s ease}
.nwb-global-panel .panel__sub,.nwb-global-panel .nav-panel__sub{max-height:0;overflow:hidden;transition:max-height .25s ease}
.nwb-global-panel [data-accordion][data-open="true"] .panel__sub{max-height:32rem}
.nwb-global-panel [data-accordion][data-open="true"] .nav__caret{transform:rotate(180deg)}
.nwb-global-panel .panel__sub a,.nwb-global-panel .nav-panel__sub a{display:block;padding:.65rem 0;color:#5e695f;font:500 .95rem/1.35 var(--font-body,var(--font-sans,"Instrument Sans",Arial,sans-serif));text-decoration:none}
.nwb-global-panel__foot{width:100%;padding-block:1.25rem;border-top:1px solid rgb(30 30 30 / .12);display:grid;gap:1rem}
.nwb-global-panel__foot>.btn{display:inline-flex;min-height:3rem;align-items:center;justify-content:center;background:#36423a!important;color:#fff!important;border-radius:999px;text-decoration:none}
.nwb-global-panel .panel__contact,.nwb-global-panel .nav-panel__contact{display:grid;gap:.4rem;color:#5e695f;font:.875rem/1.4 var(--font-body,var(--font-sans,"Instrument Sans",Arial,sans-serif))}
.nwb-global-panel .panel__contact a,.nwb-global-panel .nav-panel__contact a{color:inherit;text-decoration:none}
.nwb-global-panel .panel__contact a:first-child{display:inline-flex;align-items:center;gap:.55rem}
.nwb-global-panel__phone-icon{width:1rem;height:1rem;flex:none}

@media(max-width:89.99rem){.nwb-global-header__phone{display:none}}
@media(max-width:67.99rem){
  .nwb-global-header,.nwb-global-header.is-solid{inset:.75rem .75rem auto;border-radius:.875rem}
  .nwb-global-header__inner{min-height:4rem;padding-inline:1rem;display:flex!important;justify-content:space-between}
  .nwb-global-header .brand__mark{height:2.065rem}
  .nwb-global-header .nav,.nwb-global-header__phone{display:none!important}
  .nwb-global-header .header-cta{display:none!important}
  .nwb-global-header__actions{gap:0}
  .nwb-global-header__burger{display:inline-flex!important;width:2.75rem;height:2.75rem;padding:0;border:0;background:none;color:inherit;flex-direction:column;justify-content:center;gap:.4rem;cursor:pointer}
  .nwb-global-header__burger .burger__bar,.nwb-global-header__burger .nav-burger__bar{display:block;width:1.25rem;height:1.5px;margin-inline:auto;background:currentColor}
}
/* Tablet: the nav collapses to a burger at 68rem, but from 48rem the bar still
   has ~800px of empty space, so the primary action should not collapse with it. */
@media(min-width:48rem) and (max-width:67.99rem){
  .nwb-global-header .header-cta{display:inline-flex!important;min-height:2.75rem;padding:.7rem 1.5rem!important}
  .nwb-global-header__actions{gap:1rem}
}


/* ==========================================================================
   MOBILE MENU — one control, nothing moves
   The panel used to carry its own logo and close button, so opening it swapped
   two elements for two near-identical ones a few pixels away: the wordmark
   jumped 7px left and 6px up and changed size (33px -> 32px). The header now
   simply sits above the panel, so the brand and the burger are literally the
   same elements open or closed, and the burger's two bars rotate into the X.
   ========================================================================== */
@media(max-width:67.99rem){
  /* Above the panel's 150, so the bar it shares with the panel is the real one. */
  .nwb-global-header,.nwb-global-header.is-solid{z-index:160}

  /* Once the panel is white behind it, the pill's ground, border and shadow
     would draw a box around the logo for no reason. */
  body.is-locked .nwb-global-header,
  body.is-locked .nwb-global-header.is-solid{
    background:transparent;border-color:transparent;box-shadow:none;
  }

  /* The header supplies both of these now. Hiding the top bar removes a grid
     item, so the panel's rows have to lose one too: on `auto 1fr auto` the foot
     would slide into the flexible row and stretch its button to fill the
     leftover height. */
  .nwb-global-panel__top{display:none}
  .nwb-global-panel{grid-template-rows:1fr auto}

  /* Clear the fixed header: its inset plus its own height. */
  .nwb-global-panel__body{padding-block:calc(.75rem + 4rem + 1.5rem) 1.25rem}

  .nwb-global-header__burger .burger__bar,
  .nwb-global-header__burger .nav-burger__bar{
    transform-origin:center;
    transition:transform .3s cubic-bezier(.22,.61,.36,1);
  }
  /* Counted from the end, because the button's first span is the visually
     hidden label - nth-of-type(1) is that label, not a bar. Offset is half the
     centre-to-centre distance: the .4rem gap plus one bar height. */
  .nwb-global-header__burger[aria-expanded="true"] .burger__bar:nth-last-of-type(2){
    transform:translateY(calc(.2rem + .75px)) rotate(45deg);
  }
  .nwb-global-header__burger[aria-expanded="true"] .burger__bar:nth-last-of-type(1){
    transform:translateY(calc(-.2rem - .75px)) rotate(-45deg);
  }
}

/* The panel itself: a longer fade than the old .2s, with the contents settling
   upward so it does not simply appear. visibility is delayed on close only, so
   the fade has time to play before the panel goes inert. */
.nwb-global-panel{transition:opacity .3s cubic-bezier(.22,.61,.36,1),visibility 0s .3s}
.nwb-global-panel[data-open="true"]{transition-delay:0s}
.nwb-global-panel__body,.nwb-global-panel__foot{
  transform:translateY(.75rem);
  transition:transform .34s cubic-bezier(.22,.61,.36,1);
}
.nwb-global-panel[data-open="true"] .nwb-global-panel__body,
.nwb-global-panel[data-open="true"] .nwb-global-panel__foot{transform:none}

@media(prefers-reduced-motion:reduce){
  .nwb-global-panel,
  .nwb-global-panel__body,
  .nwb-global-panel__foot,
  .nwb-global-header__burger .burger__bar,
  .nwb-global-header__burger .nav-burger__bar{transition-duration:.01ms}
  .nwb-global-panel__body,.nwb-global-panel__foot{transform:none}
}

@media print{.nwb-global-header,.nwb-global-panel{display:none!important}}