/* ==========================================================================
   SITE NAVIGATION — "Alignment" (composition 01, picked 2026-09-06)

   Two levels in one header block:
     row 1  the site's real pages, the current one marked
     row 2  THAT page's own sections, beginning at the exact left edge of the
            current page's tab above

   The child row has no ground, no box, no pill, no number and no border of
   its own. The hierarchy is carried by one shared alignment plus scale
   (12.5px against 14px). --home-x is measured live by nav.js, so the
   alignment is exact at any width and with any page name.

   Loaded LAST in every page's head so it settles the cascade at matching
   specificity. Nothing dark: white ground, navy and accent as text only.
   ========================================================================== */

/* The component owns its own positioning. On the original pages this repeats
   what their own sheet already says; on any NEW page it is the only place the
   header is made fixed — without it a new page's header scrolled away. */
.bar{ position: fixed; inset: 0 0 auto; z-index: 60;
  display: block; padding: 0;
  background: var(--paper); border-bottom: 1px solid var(--line-2); }
/* The gutter is set HERE, not taken from --wpad / --grid-edge: those resolve
   differently from page to page (--wpad is undefined on two of them), which
   moved the whole right-aligned row 28px between pages. */
.bar{ --nav-gutter: clamp(18px, 4vw, 72px); }
@media (min-width: 1281px){ .bar{ --nav-gutter: clamp(28px, 3.6vw, 58px); } }
.brow{ display: flex; align-items: center; gap: clamp(14px, 2.2vw, 34px);
  padding: 14px var(--nav-gutter) 0; }

/* The brand is part of the component too. On the original pages this repeats
   their own rule; on a NEW page it is the only sizing the drawn roundel gets,
   and without it the SVG fell back to its default box and made the row 215px
   tall instead of 54px. */
.wm{ display: flex; align-items: center; flex: 0 0 auto;
  font-size: 16px; font-weight: 800; letter-spacing: -.035em;
  white-space: nowrap; color: var(--navy); }
.mark{ flex: none; display: block; width: 36px; height: 36px; margin-right: 11px; }
.mark svg{ display: block; width: 100%; height: 100%; }
@media (min-width: 1281px){
  .wm{ font-size: 17.5px; }
  .mark{ width: 40px; height: 40px; margin-right: 12px; }
}

/* ---------- row 1 · the site's pages -------------------------------------- */
.nav{ margin-left: auto; display: flex; align-items: center;
  gap: clamp(14px, 2vw, 28px); }
/* ---------- the menu unit sits IN from the right edge ---------------------
   `margin-left:auto` alone parked the tabs hard against the Menu button, which
   left a large dead space beside the brand AND — because the section row is
   indented to its current tab (--home-x) — pushed that row off its own right
   edge. Measured on the home page: the eight items need 924px inside a 1336px
   track at 1440, yet the row began at 522px and the last two items were cut.

   The fix is to stop shoving the unit right, so BOTH rows move left together
   and the section row stays flush under its tab. The value is bounded by the
   real slack beside the brand (~90px at 1281, ~216px at 1440), never more, or
   .nav would shrink and its nowrap tabs would spill.
   Below 1281 there is no slack to give: placeRow()'s cap handles those. */
@media (min-width: 1281px){ .nav{ margin-right: clamp(0px, 5vw, 90px); } }
@media (min-width: 1400px){ .nav{ margin-right: clamp(90px, 8vw, 170px); } }
.nav a:not(.ptab)::after{ display: none !important; }
/* Every tab reserves the width of its own BOLD state, so becoming the current
   page cannot widen it and shove the row sideways. The ghost shares one grid
   cell with the label — as a flex item with overflow:hidden it measured 0px
   and reserved nothing. */
/* Two levels, two voices. Level 1 is the site — it is meant to be read first
   and clicked without hunting, so it carries the size and the weight. Level 2
   is where you are INSIDE this page; it should be findable, never competing.
   The gap between them is deliberate: 14.5/650 against 11.75/450. */
.nav a.ptab{ position: relative; display: inline-grid; grid-template-areas: "t";
  padding: 3px 0; font-size: 14.5px; font-weight: 650;
  color: var(--ink-2); white-space: nowrap; letter-spacing: -.006em;
  transition: color .16s ease; }
.nav a.ptab > span{ grid-area: t; }
.nav a.ptab::after{ grid-area: t; content: attr(data-label); font-weight: 750;
  letter-spacing: -.006em; visibility: hidden; pointer-events: none;
  /* the live sheets set .nav a::after{position:absolute} for their own
     underline — an out-of-flow ghost reserves no width at all */
  position: static; inset: auto; width: auto; height: auto; background: none; }
.nav a.ptab:hover{ color: var(--ink); }
.nav a.ptab.cur{ color: var(--navy); font-weight: 750; }
.nav a.ptab.cur::before{ content: ""; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 2px; border-radius: 2px; background: var(--accent); }

.baract{ display: flex; align-items: center; gap: 10px; flex: none;
  margin-left: clamp(10px, 1.6vw, 20px); }
.sitemenu{ display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--paper);
  font-size: 13px; font-weight: 650; color: var(--ink-2); cursor: pointer;
  white-space: nowrap; transition: border-color .16s ease, color .16s ease; }
.sitemenu svg{ width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; }
.sitemenu:hover{ border-color: var(--ink-4); color: var(--ink); }
.sitemenu[aria-expanded="true"]{ border-color: var(--ink); color: var(--ink);
  background: var(--ground, #F4F7FC); }
.barmenu{ display: none; width: 36px; height: 36px; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 8px; background: var(--paper);
  color: var(--ink-2); cursor: pointer; transition: border-color .16s ease, color .16s ease; }
.barmenu svg{ width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8;
  stroke-linecap: round; }
.barmenu:hover{ border-color: var(--ink-4); color: var(--ink); }

/* ---------- row 2 · this page's sections, flush to the current page tab --- */
.krow{ background: transparent; padding: 13px var(--nav-gutter) 14px; }
@media (min-width: 1281px){ .krow{ padding: 15px var(--nav-gutter) 15px; } }
.kids{ display: flex; align-items: baseline; justify-content: flex-start;
  gap: clamp(20px, 2.6vw, 38px);
  padding-left: var(--home-x, 0px);
  overflow-x: auto; scrollbar-width: none; }
/* NO transition on padding-left. The row's resting place is under the current
   tab, but its starting value is 0 — so a transition animated it from the far
   left edge, under the logo, across to its tab on every single page load.
   Measured: 0 -> 694px over 300ms on about-us. It must simply be there. */
.kids::-webkit-scrollbar{ display: none; }
/* Smaller, lighter and very slightly tracked out — the tracking is what keeps
   11.75px legible while the weight drops, so the row reads as quiet rather
   than as small print. The colour STAYS at --ink-3: it is #767E8B, 4.5:1 on
   white and the lightest step in the ladder that still passes for text this
   size. Going a step lighter (--ink-4) would drop it to 2.6:1 — quiet is the
   goal, unreadable is not. Size and weight carry the demotion instead. */
a.kid{ flex: none; position: relative; white-space: nowrap;
  font-size: 11.75px; font-weight: 450; letter-spacing: .012em; color: var(--ink-3);
  padding: 0 0 3px; transition: color .18s ease; }
a.kid:hover{ color: var(--ink-2); }
a.kid.on{ color: var(--navy); font-weight: 600; }
a.kid.on::after{ content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1.25px; border-radius: 2px; background: var(--accent); }

/* ---------- the Our Services menu · "Connected tab" -----------------------
   "Our Services" has no page of its own — the tab opens a menu, and the tab IS
   the top edge of that menu: one continuous white surface, no gap and no notch.

   The panel hangs from the TAB's own baseline (--svc-b), not from the bottom of
   the header, so it crosses the section row and covers it instead of appearing
   to belong to it. It is absolutely positioned against the bar, so opening it
   moves nothing: not the header, not the section row, not the page.

   --svc-lip is how far the tab's white tongue reaches past its label on each
   side; the panel starts at the same place, which is what makes the two read as
   one piece. It shrinks where the tabs sit closer together. */
.nav a.ptab[data-svc] > span{ display: inline-flex; align-items: center; }
.chev{ flex: none; width: 9px; height: 6px; margin-left: 5px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .18s cubic-bezier(.4,0,.2,1); }
/* the ghost reserves the bold label; the chevron's 14px has to be added to it
   or the tab still changes width when it becomes current */
.nav a.ptab[data-svc]::after{ padding-right: 14px; }
.nav a.ptab[data-svc][aria-expanded="true"] .chev{ transform: rotate(180deg); }

.bar{ --svc-lip: 14px; --svc-drop: 8px; }
.nav a.ptab[data-svc]{ z-index: 59; }        /* the tab caps the panel's top edge */
.nav a.ptab[data-svc] > span{ position: relative; z-index: 1; }
.nav a.ptab[data-svc][aria-expanded="true"]{ color: var(--navy); font-weight: 750; }
/* the tongue: the open tab stops being a word in a row and becomes the lid of
   the panel below it */
.nav a.ptab[data-svc][aria-expanded="true"]::before{ content: ""; position: absolute;
  left: calc(-1 * var(--svc-lip)); right: calc(-1 * var(--svc-lip));
  top: -10px; bottom: -9px; height: auto; border-radius: 10px 10px 0 0;
  background: var(--paper); border: 1px solid var(--line); border-bottom: 0; }
/* One accent at a time. While the menu is open the accent belongs to the tab
   that opened it; the page you are on keeps its place with a quiet rule, and
   takes the accent back the moment the menu closes. */
.bar.svc-open .nav a.ptab.cur:not([data-svc])::before{ background: var(--line); }

.svcm[hidden]{ display: none !important; }   /* author display beats the UA sheet */
.nav .svcm{ position: absolute; z-index: 58;
  top: calc(var(--svc-b, 48px) + var(--svc-drop));
  left: calc(var(--svc-x, 0px) - var(--svc-lip));
  margin-top: 0; padding: 12px 9px 9px; width: max-content; min-width: 232px;
  background: var(--paper); border: 1px solid var(--line);
  /* square where the tab sits on it, rounded everywhere else */
  border-radius: 0 12px 12px 12px;
  box-shadow: 0 2px 8px rgba(11,13,18,.05), 0 26px 60px -18px rgba(15,27,61,.22); }
.svcm ul{ margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 1px; }
.svcm li{ display: flex; }
.svcm a, .svcm .nd-na{ display: inline-flex; align-items: center; gap: 14px; width: 100%;
  justify-content: space-between; margin: 0; padding: 9px 11px; border-radius: 9px;
  font-size: 13.5px; font-weight: 550; line-height: 1.3; white-space: nowrap;
  color: var(--ink-2); }
.svcm a:hover{ background: var(--ground, #F4F7FC); color: var(--ink); }
.svcm a:has(.nd-live){ font-weight: 650; color: var(--ink); }
.svcm a[aria-current]{ background: var(--ground, #F4F7FC); color: var(--navy); font-weight: 700; }
.svcm .nd-na{ color: var(--ink-4); cursor: default; }
.svcm .nd-live, .svcm .nd-soon{ margin-top: 0; }

/* the one hint that the tab opens something, shown only on hover and gone the
   moment it has been acted on */
/* fixed, not absolute: anchored to the tab it belongs to but hung below the
   WHOLE header, so it never lands on top of the section row. The bar is fixed
   at the top of the viewport, so --svc-cx is simply the tab's centre. */
.ptip{ position: fixed; left: var(--svc-cx, 50%); top: calc(var(--barh, 103px) + 9px); z-index: 62;
  padding: 5px 9px; border-radius: 7px; white-space: nowrap; pointer-events: none;
  background: var(--paper); border: 1px solid var(--line);
  box-shadow: 0 6px 18px -8px rgba(15,27,61,.3);
  font-size: 11px; font-style: normal; font-weight: 600; letter-spacing: .004em;
  color: var(--ink-3);
  opacity: 0; visibility: hidden; transform: translate(-50%, -3px);
  transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s; }
.nav a.ptab[data-svc]:hover .ptip,
.nav a.ptab[data-svc]:focus-visible .ptip{
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
  transition: opacity .14s ease .4s, transform .18s ease .4s, visibility 0s; }
.nav a.ptab[data-svc][aria-expanded="true"] .ptip{ display: none; }
@media (prefers-reduced-motion: reduce){ .chev, .ptip{ transition-duration: 0s; } }

/* ---------- the site page list behind the Menu button --------------------- */
.nd-p{ display: none; }
.nd[data-open="true"] .nd-p{
  display: grid; position: absolute; top: 100%; right: var(--grid-edge); z-index: 61;
  margin-top: 10px; padding: 24px 26px; width: min(620px, calc(100vw - 2 * var(--pad)));
  grid-template-columns: repeat(2, minmax(0,1fr)); gap: 4px clamp(20px,3vw,44px);
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 2px 8px rgba(11,13,18,.05), 0 26px 60px -18px rgba(15,27,61,.22); }
.nd-h{ margin: 0 0 12px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-4); font-weight: 500; }
.nd-p ul{ margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.nd-p li{ display: flex; }
.nd-p a, .nd-na{ display: inline-flex; align-items: flex-start; gap: 8px; width: 100%;
  padding: 9px 10px; margin-left: -10px; border-radius: 8px;
  font-size: 14px; font-weight: 550; color: var(--ink-2); line-height: 1.35; }
.nd-p a:hover{ background: var(--ground, #F4F7FC); color: var(--ink); }
.nd-na{ color: var(--ink-4); cursor: default; }
.nd-live{ width: 6px; height: 6px; flex: none; margin-top: 6px; border-radius: 50%;
  background: var(--g-green, #188038); box-shadow: 0 0 0 3px rgba(52,168,83,.16); }
.nd-soon{ flex: none; margin-top: 1px; padding: 2px 7px; border-radius: 5px;
  border: 1px solid var(--line); font-family: var(--mono); font-size: 9px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); font-weight: 500; }
.nd-p a:has(.nd-live){ font-weight: 650; color: var(--ink); }

/* ---------- tablet · one step down so six pages and the Menu still fit ----
   Measured need on the home page at 1024 before this block: 993px of content
   in 942px of room. The brand and level 1 step down; nothing is pushed off. */
@media (min-width: 901px) and (max-width: 1180px){
  .brow{ gap: 12px; }
  .wm{ font-size: 15.5px; }
  .mark{ width: 32px; height: 32px; margin-right: 9px; }
  .nav{ gap: 11px; }
  .nav a.ptab{ font-size: 13px; }
  .sitemenu{ height: 34px; padding: 0 11px; font-size: 12.5px; }
  .kids{ gap: clamp(16px, 2vw, 26px); }
  /* level 1 does NOT grow here — this band was measured at 993px of content in
     942px of room. The hierarchy is kept by dropping level 2 instead. */
  a.kid{ font-size: 11.25px; }
  /* .nav gap is 11px here, so 14 would collide; and the shorter row puts the
     tab 2px higher, so the panel has to hang a little less far */
  .bar{ --svc-lip: 5px; --svc-drop: 5px; }
  .svcm a, .svcm .nd-na{ font-size: 13px; padding: 8px 10px; }
}

/* ---------- phone --------------------------------------------------------- */
@media (max-width: 900px){
  .brow{ padding: 12px 14px 0; gap: 10px; }
  .barmenu{ display: flex; }
  .sitemenu{ display: none; }
  .baract{ margin-left: auto; }
  .bar .nav{ display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 59;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    padding: 4px var(--pad) 14px; background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px -24px rgba(11,13,18,.5);
    max-height: calc(100dvh - var(--barh)); overflow-y: auto; }
  .bar .nav[data-open="true"]{ display: flex; }
  .nav a.ptab{ display: grid; padding: 13px 0; font-size: 15.5px; color: var(--ink);
    border-bottom: 1px solid var(--line-2); }
  .nav a.ptab.cur{ color: var(--navy); }
  .nav a.ptab.cur::before{ left: -10px; right: auto; top: 14px; bottom: 14px;
    width: 2px; height: auto; }
  .bar .nav .nd{ order: 9; width: 100%; }
  .nd[data-open="true"] .nd-p, .nd .nd-p{
    display: grid; position: static; width: auto; margin: 0; padding: 0;
    grid-template-columns: minmax(0,1fr); gap: 0;
    background: none; border: 0; border-radius: 0; box-shadow: none; }
  .nd-h{ margin: 14px 0 2px; }
  .nd-p a, .nd-na{ margin-left: 0; padding: 12px 0; border-radius: 0; font-size: 15.5px; }
  .nav .nd-p a{ border-bottom: 0; }
  .nd-p li{ border-bottom: 1px solid var(--line-2); }
  /* On a phone the menu is already open around it, so the services drop into
     the list in place — indented under their tab rather than floating over it. */
  .bar .nav .svcm{ position: static; width: auto; min-width: 0;
    margin: 0 0 0 12px; padding: 0; background: none; border: 0;
    border-left: 1px solid var(--line-2); border-radius: 0; box-shadow: none; }
  .bar .nav .svcm::before{ display: none; }
  /* the tongue belongs to a floating panel; inside the menu the open tab takes
     the same vertical accent the current page uses */
  .bar .nav a.ptab[data-svc][aria-expanded="true"]::before{
    left: -10px; right: auto; top: 12px; bottom: 12px; width: 2px; height: auto;
    background: var(--accent); border: 0; border-radius: 2px; }
  .svcm ul{ gap: 0; }
  .svcm li{ border-bottom: 1px solid var(--line-2); }
  .svcm li:last-child{ border-bottom: 0; }
  .svcm a, .svcm .nd-na{ justify-content: flex-start; gap: 10px;
    padding: 12px 0 12px 14px; border-radius: 0; font-size: 15px; }
  .ptip{ display: none; }
  /* the child row keeps its idiom and scrolls sideways */
  .krow{ padding: 11px 14px 12px; }
  .kids{ padding-left: 0; gap: 20px; }
}

/* ---------- --barh, published by the header itself ------------------------
   Every page declared --barh: 66px — the height of the old one-row header —
   and only script corrected it to the real two-row height, so everything built
   on it (the hero's min-height, sticky offsets, scroll margins) could paint
   22–35px short and then jump. These are the heights the bar renders at in its
   own four layout bands (identical on all six pages). The header's inline
   script still measures before the first paint, and nav.js on resize, so a
   platform whose system font runs a pixel taller corrects itself unseen. */
/* Re-measured 2026-09-23 on all six live pages at 22 widths from 360 to 1920.
   Every page reports the same three heights, and the two boundaries are exact
   (the bar is 118px from 901 to 1023 and 108px from 1024 up — it wraps to a
   taller two-row form in that middle band and fits again at 1024).

   The four values that were here — 88 / 90 / 94 / 101 — were stale by 16, 28,
   24 and 7px. Nothing was seen to jump only because the header's inline script
   overwrites --barh during the parse, so the wrong value never reached a frame;
   the ladder's whole purpose, though, is to be right WITHOUT that script, which
   is what a page gets before the script runs, with JS off, or if that inline
   block is ever edited out. Re-measure these if the header's type or padding
   changes. */
:root{ --barh: 104px; }
@media (min-width: 901px){ :root{ --barh: 118px; } }
@media (min-width: 1024px){ :root{ --barh: 108px; } }