/* ==========================================================================
   Nalk shared chrome: header, primary nav, dropdown panels, mobile drawer.
   Namespaced .nk-* so nothing collides with the legacy Blocs/Bootstrap
   all.css. Loaded on every page by scripts/build-nalk.py.
   Brand: navy #01367A, crimson #AD031E.
   ========================================================================== */

:root {
  --nk-navy: #01367a;
  --nk-navy-dark: #012a60;
  --nk-crimson: #ad031e;
  --nk-crimson-dark: #8c0218;
  --nk-ink: #10151f;
  --nk-muted: #5b6577;
  --nk-line: #e3e7ee;
  --nk-surface: #ffffff;
  --nk-surface-2: #f6f8fb;
  --nk-radius: 14px;
  --nk-radius-sm: 9px;
  --nk-shadow: 0 1px 2px rgba(16, 21, 31, .04), 0 12px 32px rgba(16, 21, 31, .10);
  --nk-header-h: 76px;
  --nk-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- skip link (must be the first focusable element) -------------- */
.nk-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--nk-navy);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 var(--nk-radius-sm) 0;
  font: 600 15px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-decoration: none;
}
.nk-skip:focus { left: 0; }

/* ---------- sprite ------------------------------------------------------- */
.nk-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- header shell ------------------------------------------------- */
.nk-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--nk-surface);
  border-bottom: 1px solid var(--nk-line);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.nk-header * { box-sizing: border-box; }
.nk-header-inner {
  max-width: 1280px;
  margin: 0 auto;
  min-height: var(--nk-header-h);
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.nk-logo { display: block; flex: 0 0 auto; line-height: 0; }
.nk-logo img { display: block; width: auto; height: 52px; }

.nk-spacer { flex: 1 1 auto; }

/* ---------- call button -------------------------------------------------- */
.nk-call {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--nk-crimson);
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  padding: 11px 19px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .18s var(--nk-ease), transform .18s var(--nk-ease);
}
.nk-call:hover, .nk-call:focus-visible { background: var(--nk-crimson-dark); color: #fff; }
.nk-call:active { transform: translateY(1px); }
.nk-call svg { width: 17px; height: 17px; flex: 0 0 auto; }

/* ---------- desktop nav ------------------------------------------------- */
.nk-nav { flex: 0 1 auto; }
.nk-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}
.nk-nav-item { position: relative; margin: 0; }

.nk-nav-trigger,
.nk-nav-link {
  appearance: none;
  background: none;
  border: 0;
  margin: 0;
  font: 600 15.5px/1.2 inherit;
  color: var(--nk-ink);
  text-decoration: none;
  padding: 10px 13px;
  border-radius: var(--nk-radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s var(--nk-ease), color .15s var(--nk-ease);
}
.nk-nav-trigger:hover,
.nk-nav-link:hover,
.nk-nav-trigger[aria-expanded="true"] { background: var(--nk-surface-2); color: var(--nk-navy); }

.nk-chev {
  width: 13px;
  height: 13px;
  transition: transform .2s var(--nk-ease);
  opacity: .6;
}
.nk-nav-trigger[aria-expanded="true"] .nk-chev { transform: rotate(180deg); opacity: 1; }

/* ---------- dropdown panel ---------------------------------------------- */
.nk-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 1001;
  background: var(--nk-surface);
  border: 1px solid var(--nk-line);
  border-radius: var(--nk-radius);
  box-shadow: var(--nk-shadow);
  padding: 20px;
  opacity: 0;
  transform: translateY(-6px) scale(.985);
  transition: opacity .16s var(--nk-ease), transform .2s var(--nk-ease);
  transform-origin: top left;
}
/* Closed state is a CLASS, not the hidden attribute. Browsers apply
   `display: none !important` to [hidden], which no stylesheet can override,
   so a no-JS visitor could never be shown the panel contents. */
.nk-panel.nk-closed { display: none; }
.nk-panel.nk-open { opacity: 1; transform: none; }
.nk-panel.nk-align-right { left: auto; right: 0; transform-origin: top right; }

.nk-panel-grid { display: grid; gap: 22px; }
.nk-cols-3 { grid-template-columns: repeat(3, minmax(226px, 1fr)); }
.nk-cols-2 { grid-template-columns: repeat(2, minmax(210px, 1fr)); }
.nk-cols-1 { grid-template-columns: minmax(264px, 1fr); }

.nk-group { min-width: 0; }
.nk-group-title {
  margin: 0 0 8px;
  padding: 0 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--nk-muted);
}
.nk-group ul { list-style: none; margin: 0; padding: 0; }
.nk-group li { margin: 0; }

.nk-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 9px 10px;
  border-radius: var(--nk-radius-sm);
  text-decoration: none;
  color: var(--nk-ink);
  transition: background .14s var(--nk-ease);
}
.nk-item:hover, .nk-item:focus-visible { background: var(--nk-surface-2); }
.nk-item-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(1, 54, 122, .07);
  color: var(--nk-navy);
  display: grid;
  place-items: center;
}
.nk-item-icon svg { width: 17px; height: 17px; }
.nk-item:hover .nk-item-icon { background: rgba(1, 54, 122, .13); }
.nk-item-body { min-width: 0; }
.nk-item-label { display: block; font-size: 14.5px; font-weight: 650; line-height: 1.3; }
.nk-item-desc {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--nk-muted);
}

/* compact list variant, used by Service Areas and About */
.nk-item--compact { padding: 8px 10px; align-items: center; }
.nk-item--compact .nk-item-label { font-weight: 600; }

/* featured card inside a panel */
.nk-feature {
  grid-column: span 1;
  background: var(--nk-navy);
  color: #fff;
  border-radius: var(--nk-radius-sm);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
}
.nk-feature:hover { background: var(--nk-navy-dark); color: #fff; }
.nk-feature-title { font-size: 15.5px; font-weight: 700; line-height: 1.25; }
.nk-feature-text { font-size: 13px; line-height: 1.45; opacity: .88; }
.nk-feature-cue { margin-top: auto; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; }

.nk-panel-foot {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--nk-line);
}
.nk-panel-foot .nk-item { padding-left: 10px; }

/* ---------- mobile toggle ----------------------------------------------- */
.nk-burger {
  display: none;
  appearance: none;
  background: none;
  border: 1px solid var(--nk-line);
  border-radius: var(--nk-radius-sm);
  width: 46px;
  height: 42px;
  cursor: pointer;
  color: var(--nk-ink);
  padding: 0;
  place-items: center;
}
.nk-burger svg { width: 23px; height: 23px; }

/* ---------- mobile drawer ------------------------------------------------ */
.nk-drawer { display: none; }
.nk-scrim { display: none; }

@media (max-width: 991px) {
  .nk-nav { display: none; }
  .nk-burger { display: grid; }
  .nk-logo img { height: 44px; }
  .nk-call { padding: 10px 14px; font-size: 14px; }
  .nk-call-label { display: none; }

  .nk-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1010;
    background: rgba(16, 21, 31, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s var(--nk-ease);
  }
  .nk-scrim.nk-open { opacity: 1; pointer-events: auto; }

  .nk-drawer {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1020;
    width: min(420px, 90vw);
    height: 100%;
    background: var(--nk-surface);
    box-shadow: var(--nk-shadow);
    transform: translateX(100%);
    transition: transform .26s var(--nk-ease);
    display: flex;
    flex-direction: column;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  }
  .nk-drawer.nk-open { transform: none; }

  .nk-drawer-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--nk-line);
  }
  .nk-drawer-head img { height: 40px; width: auto; display: block; }
  .nk-close {
    appearance: none;
    background: none;
    border: 1px solid var(--nk-line);
    border-radius: var(--nk-radius-sm);
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: var(--nk-ink);
  }
  .nk-close svg { width: 21px; height: 21px; }

  .nk-drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 10px 20px;
  }
  .nk-acc { border-bottom: 1px solid var(--nk-line); }
  .nk-acc:last-of-type { border-bottom: 0; }
  .nk-acc-trigger {
    appearance: none;
    background: none;
    border: 0;
    width: 100%;
    text-align: left;
    font: 650 16.5px/1.3 inherit;
    color: var(--nk-ink);
    padding: 15px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
  }
  .nk-acc-trigger .nk-chev { width: 16px; height: 16px; }
  .nk-acc-body { padding: 0 8px 12px; }
  .nk-acc-body[hidden] { display: none; }
  .nk-acc-body .nk-group { margin-bottom: 14px; }
  .nk-acc-body .nk-group:last-child { margin-bottom: 0; }
  .nk-acc-body .nk-item-desc { display: none; }
  .nk-acc-body .nk-feature { margin-top: 6px; }

  .nk-drawer-foot {
    flex: 0 0 auto;
    padding: 14px 16px;
    border-top: 1px solid var(--nk-line);
    background: var(--nk-surface-2);
  }
  .nk-drawer-foot .nk-call { width: 100%; justify-content: center; }
  .nk-drawer-foot .nk-call-label { display: inline; }
  .nk-drawer-license {
    margin: 10px 0 0;
    text-align: center;
    font-size: 12px;
    color: var(--nk-muted);
  }
  body.nk-locked { overflow: hidden; }
}

@media (min-width: 992px) {
  /* keep a wide panel from running off the viewport edge */
  .nk-nav-item:nth-last-child(-n+2) .nk-panel { left: auto; right: 0; transform-origin: top right; }
}

/* ---------- focus + motion ---------------------------------------------- */
.nk-header a:focus-visible,
.nk-header button:focus-visible,
.nk-drawer a:focus-visible,
.nk-drawer button:focus-visible,
.nk-skip:focus-visible {
  outline: 3px solid var(--nk-crimson);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .nk-panel, .nk-drawer, .nk-scrim, .nk-chev, .nk-call, .nk-item { transition: none !important; }
  .nk-panel { transform: none !important; }
}

/* ---------- no-JS fallback ----------------------------------------------
   Without JS the triggers cannot open. Reveal every panel as a plain
   stacked list so all links stay reachable, per the house rule that every
   page must be fully readable with JavaScript disabled.               */
html:not(.nk-js) .nk-panel { position: static; opacity: 1; transform: none; box-shadow: none; border: 0; padding: 0 0 10px; }
html:not(.nk-js) .nk-panel.nk-closed { display: block; }
html:not(.nk-js) .nk-nav { display: block; flex-basis: 100%; }
html:not(.nk-js) .nk-nav-list { flex-wrap: wrap; align-items: flex-start; }
html:not(.nk-js) .nk-burger { display: none; }

/* ---------- panel layout variants added for the Nalk panels ------------- */
.nk-cols-3f { grid-template-columns: repeat(3, minmax(208px, 1fr)) 224px; }
.nk-cols-2f { grid-template-columns: repeat(2, minmax(208px, 1fr)) 224px; }

/* helper row: high-intent questions surfaced from the Nalk Knows library */
.nk-helpers { display: flex; flex-wrap: wrap; gap: 8px; }
.nk-helper {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--nk-line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--nk-navy);
  text-decoration: none;
  background: var(--nk-surface);
  transition: background .14s var(--nk-ease), border-color .14s var(--nk-ease);
}
.nk-helper:hover, .nk-helper:focus-visible {
  background: var(--nk-surface-2);
  border-color: #cfd6e2;
  color: var(--nk-navy);
}
.nk-helper svg { width: 14px; height: 14px; opacity: .75; }

@media (max-width: 991px) {
  .nk-cols-3f, .nk-cols-2f, .nk-cols-3, .nk-cols-2 { grid-template-columns: 1fr; }
  .nk-helpers { flex-direction: column; align-items: stretch; }
  .nk-helper { justify-content: flex-start; }
}

/* ==========================================================================
   Neutralising the legacy Blocs stylesheet
   --------------------------------------------------------------------------
   all.css ships this rule, and it reaches into the new chrome:

     h1,h2,h3,h4,h5,h6,p,label,.btn,a {
       line-height:1.5em; font-family:"Helvetica";
       color:var(--swatch-var-6892)!important; font-weight:700; }

   It forces every link and paragraph in the header to one navy and to bold,
   which flattened the panels and made the feature card unreadable: dark navy
   text on the navy card. The colour declaration is !important, so these
   overrides have to be too.

   Typography stays on the site's Helvetica stack on purpose, so the new nav
   matches the rest of the pages instead of introducing a second typeface. If
   the site ever moves to Inter properly (only Inter-Regular and Inter-Light
   are actually shipped in fonts/, Inter-SemiBold is referenced but missing),
   change the stack here in one place.
   ========================================================================== */

.nk-header, .nk-drawer,
.nk-header a, .nk-header p, .nk-header button,
.nk-drawer a, .nk-drawer p, .nk-drawer button {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.35;
}

.nk-header .nk-nav-trigger,
.nk-drawer .nk-acc-trigger { color: var(--nk-ink) !important; font-weight: 600; }
.nk-header .nk-nav-trigger[aria-expanded="true"] { color: var(--nk-navy) !important; }

.nk-header .nk-item, .nk-drawer .nk-item { color: var(--nk-ink) !important; font-weight: 400; }
.nk-item .nk-item-label { color: var(--nk-ink) !important; font-weight: 600; }
.nk-item .nk-item-desc { color: var(--nk-muted) !important; font-weight: 400; }
.nk-header .nk-group-title,
.nk-drawer .nk-group-title { color: var(--nk-muted) !important; font-weight: 700; }

.nk-header .nk-feature, .nk-drawer .nk-feature { color: #fff !important; }
.nk-feature .nk-feature-title { color: #fff !important; font-weight: 700; }
.nk-feature .nk-feature-text { color: #fff !important; font-weight: 400; }
.nk-feature .nk-feature-cue { color: #fff !important; font-weight: 700; }

.nk-header .nk-call, .nk-drawer .nk-call { color: #fff !important; font-weight: 700; }
.nk-header .nk-helper, .nk-drawer .nk-helper { color: var(--nk-navy) !important; font-weight: 600; }
.nk-skip { color: #fff !important; }
.nk-drawer .nk-drawer-license { color: var(--nk-muted) !important; font-weight: 400; }

/* The drawer chevron should turn like the desktop one. */
.nk-acc-trigger[aria-expanded="true"] .nk-chev { transform: rotate(180deg); opacity: 1; }