/* ==========================================================================
   Honour Guard — shared site chrome
   Loaded LAST in <head> on every page, so its rules win ties against the
   page-local inline <style> block. Owns, site-wide:

     1. additive canonical tokens
     2. licence display gate
     3. the floating rounded-square nav  (Protex-style)
     4. the full-screen mobile menu
     5. the universal footer
     6. two-tone headings
     7. the card treatment
     8. smooth scroll + anchor offsets

   Typography is deliberately Honour Guard's own — Space Grotesk (display),
   DM Sans (body), JetBrains Mono (labels). Protex is DM Sans throughout; we
   take Protex's nav, hero and card *geometry*, not its type.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. tokens */
:root {
  /* Additive: pages already define the canvas/emerald family identically.
     These are the tokens only index.html had, so legal + insights pages now
     get the same action green, labels and tracking as the rest of the site. */
  --action: #53DC78;
  --action-hi: #5FE686;
  --on-action: #02120A;
  --action-10: rgba(83, 220, 120, .10);
  --action-30: rgba(83, 220, 120, .30);
  --action-45: rgba(83, 220, 120, .45);
  --action-halo: rgba(83, 220, 120, .25);
  --label: #5DDC9A;
  --kick: #8EE6BC;
  --track-label: .12em;
  --track-wide: .2em;
  --track-kick: .24em;
  --pill-radius: 999px;
  /* Nav geometry. The bar is a rounded SQUARE (Protex's shape), not a capsule:
     a 12px radius on the bar and 9px on the links inside it. --pill-radius is
     kept for the hero brand badge, which is a badge and stays a capsule. */
  --nav-radius: 12px;
  --nav-radius-sm: 9px;
}

/* ------------------------------------------------- 2. licence display gate */
/* Only ever HIDES — never forces a display value, so it cannot fight the
   page-local rules on index.html and services.html. */
body:not([data-licensed="true"]) .licensed-only { display: none !important; }
body[data-licensed="true"] .prelicence-only { display: none !important; }

/* --------------------------------------------------------- 8. smooth scroll */
/* Lenis drives scrolling when it is available; this is the no-JS fallback and
   the reduced-motion resting state. */
html { scroll-behavior: smooth; }
html.lenis { scroll-behavior: auto; }          /* Lenis takes over */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Anchors must clear the fixed nav. */
:target, [id] { scroll-margin-top: 96px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * , *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* --------------------------------------------------------------- 3. the nav */
/* The full-width bar is OMITTED. #nav is a transparent fixed band and each of
   the three pieces — brand chip, centred nav bar, CTA — floats on its own
   ground. The band keeps the height of the old bar (72px) on purpose: every
   page sizes its hero and its scroll offsets from `--nav-h`, so keeping the
   band the same height means the float gap (the ~13px of empty band above and
   below the 46px chips) appears without moving a single hero or anchor. */
#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 400;
  height: var(--nav-h, 72px);
  display: flex;
  align-items: center;
  background: transparent;      /* the bar itself: omitted */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
  transition: transform .32s var(--ease, ease);
}
/* Auto-hide. Pinned over the page, three floating chips still cover content as
   you read, so the nav slides out when you scroll down and returns when you
   scroll up or bring the pointer back to the top edge (see hg-chrome.js §4).

   visibility is deliberately NOT set to hidden here: that would drop the links
   out of the tab order, and a keyboard user could then never reveal the nav.
   pointer-events:none is the safe half-measure — it only stops clicks landing
   on links that are off-screen anyway.

   Under prefers-reduced-motion the global reduce block above forces the
   transition to ~0ms, so the nav snaps instead of sliding. */
#nav.nav-hidden {
  transform: translateY(-102%);
  pointer-events: none;
}
/* Scrolled: the bar stays omitted, but each floating piece firms up its own
   backdrop so it still reads over bright hero imagery and page content. */
#nav.scrolled .brand,
#nav.scrolled .nav-pill { background: rgba(4, 23, 17, .92); }
#nav.scrolled .cta { background: var(--action-45); }
#nav .container {
  position: relative;          /* the reference for the centred bar */
  display: flex;               /* overrides index.html's grid nav layout */
  align-items: center;
  gap: 14px;
  width: 100%;
}

/* --- the inner-page hero has to reach the very top --------------------------
   Omitting the bar has one real consequence on the pages whose hero lives
   inside <main>. Those pages carry `main { padding-top: var(--nav-h) }`, which
   pushes the hero down by the nav height. While the nav still painted a
   translucent bar, that strip was hidden underneath it; with the bar gone, the
   first 72px of those pages showed flat body background and then stepped to the
   hero's own gradient — a visible black band under the nav. Measured on
   /insights/ before this rule: #000D01 from y=0, stepping to #061D0D at exactly
   y=72.

   Pulling the hero up over that padding and adding the same amount back as
   padding-top lets its background start at y=0 — the continuous look
   services.html already has, because its hero is not inside a <main> — while
   every child element stays at the identical y. The content does not move.

   Scoped to a .page-hero that is the FIRST child of <main>, so it matches only
   the three pages that have one (the insights hub and both articles). The four
   legal pages and the 404 have no hero, and home/services have no <main> at
   all, so nothing else is touched. */
main > .page-hero:first-child {
  margin-top: calc(-1 * var(--nav-h, 72px));
  padding-top: calc(var(--nav-h, 72px) + 70px);
}

/* brand — floating chip, its own ground rather than a slice of a shared bar */
#nav .brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 15px 7px 9px;
  border: 1px solid rgba(18, 59, 52, .85);
  border-radius: var(--nav-radius);
  background: rgba(4, 23, 17, .62);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 14px 34px -24px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .03);
  color: var(--text, #F2F5EF);
  font-family: var(--disp, 'Space Grotesk', sans-serif);
  font-weight: 600;
  flex: none;
  transition: background .3s var(--ease, ease), border-color .2s var(--ease, ease);
}
#nav .brand:hover { border-color: var(--line-hi, #1C5547); }
#nav .brand .logo-ico { width: 30px; height: 30px; display: grid; place-items: center; flex: none; }
#nav .brand .logo-ico img { height: 30px; width: auto; display: block; }
#nav .brand-text {
  font-family: var(--body, 'DM Sans', sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text, #F2F5EF);   /* --text, not the legacy ivory (DESIGN.md §1) */
  white-space: nowrap;
}

/* --- the nav bar: floating, rounded square (the Protex shape) --- */
/* Centred on the CONTAINER, not on the leftover space between brand and CTA.
   `margin: 0 auto` in a flex row only centres within whatever the two outer
   items leave behind, so the bar sat off-centre whenever the brand and the CTA
   were different widths — visible on every page. Taking it out of flow and
   centring it on the container fixes that at any width. */
#nav .nav-pill {
  display: flex;
  align-items: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 5px;
  border: 1px solid var(--line-hi, #1C5547);
  border-radius: var(--nav-radius);
  background: rgba(4, 23, 17, .66);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 16px 44px -26px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: background .3s var(--ease, ease);
}
#nav .nav-links { display: flex; align-items: center; gap: 2px; }
#nav .nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 16px;
  border-radius: var(--nav-radius-sm);
  color: var(--text-2, #C6D3C8);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: color .2s, background .2s;
}
#nav .nav-links a:hover { color: var(--text, #F2F5EF); background: rgba(255, 255, 255, .05); }
/* Active state. The fill alone was only ~2:1 against the capsule behind it —
   below the 3:1 that WCAG 1.4.11 requires of a state indicator — so the state
   is now carried by a solid emerald ring (6.4:1 against the bar, 5.5:1
   against its own fill) with the tint as reinforcement, not as the signal. */
#nav .nav-links a.active {
  color: var(--text, #F2F5EF);
  background: rgba(83, 220, 120, .14);
  box-shadow: inset 0 0 0 1px var(--em-br, #35A876);
}

/* right side */
#nav .nav-cta { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; }
#nav .cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid var(--action);
  border-radius: var(--nav-radius);
  background: var(--action-30);
  backdrop-filter: blur(12px) saturate(1.25);
  -webkit-backdrop-filter: blur(12px) saturate(1.25);
  color: var(--text, #F2F5EF) !important;
  font-family: var(--body, 'DM Sans', sans-serif);
  font-weight: 500 !important;
  font-size: 14px !important;
  white-space: nowrap;
  transition: background .2s var(--ease, ease), box-shadow .2s var(--ease, ease), transform .2s var(--ease, ease);
}
#nav .cta:hover {
  background: var(--action-45);
  box-shadow: 0 0 22px var(--action-halo);
  transform: translateY(-1px);
}

/* burger — 44x44 touch target, and hidden above the collapse breakpoint.
   (index.html's page-local rule declared display:none then display:grid in the
   same block, so the burger never hid at desktop width. This wins.) */
#nav .nav-burger {
  display: none;
  place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 1px solid var(--line-hi, #1C5547);
  border-radius: var(--nav-radius);
  background: rgba(4, 23, 17, .72);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  color: var(--text, #F2F5EF);
  cursor: pointer;
  flex: none;
  transition: border-color .2s, background .2s;
}
#nav .nav-burger:hover { border-color: var(--line-hi, #1C5547); background: rgba(7, 33, 28, .9); }
#nav .nav-burger svg { width: 22px; height: 22px; }

/* ------------------------------------------------- 4. full-screen menu */
#mmenu {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 24px;
  background: rgba(0, 13, 1, .97);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  opacity: 0;
  visibility: hidden;           /* keeps closed links out of the tab order */
  pointer-events: none;
  transition: opacity .3s var(--ease, ease), visibility .3s var(--ease, ease);
}
#mmenu.open { opacity: 1; visibility: visible; pointer-events: auto; }
#mmenu a {
  font-family: var(--disp, 'Space Grotesk', sans-serif);
  font-size: clamp(24px, 6vw, 32px);
  font-weight: 600;
  color: var(--text, #F2F5EF);
  padding: 12px 18px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: 12px;
}
#mmenu a:hover, #mmenu a:focus-visible { color: var(--em-br, #35A876); background: rgba(255, 255, 255, .04); }
#mmenu .mmenu-close {
  position: absolute;
  top: 18px; right: 22px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--line-hi, #1C5547);
  border-radius: var(--nav-radius);
  background: rgba(4, 23, 17, .8);
  color: var(--text, #F2F5EF);
  cursor: pointer;
}
#mmenu .mmenu-meta {
  margin-top: 26px;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--muted, #8CA89B);
  text-align: center;
  line-height: 2;
}
body.hg-menu-open { overflow: hidden; }

/* ------------------------------------------------------------- 5. footer */
footer {
  border: 0;
  background: transparent;
  padding: 52px 0;
  position: relative;
  overflow: hidden;
}
footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
footer .foot-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
footer .brandline { display: flex; align-items: center; gap: 12px; }
footer .foot-brand .logo-ico { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; overflow: hidden; flex: none; }
footer .foot-brand .logo-ico img { width: 100%; height: 100%; object-fit: contain; display: block; }
footer .foot-brand b { font-family: var(--disp, 'Space Grotesk', sans-serif); font-weight: 600; font-size: 18px; color: var(--text, #F2F5EF); }
footer .brand-sub {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted, #8CA89B);
}
footer .foot-licence {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--muted, #8CA89B);
  line-height: 2;
  text-align: right;
  max-width: 520px;
}
footer .foot-licence .hl { color: var(--text-2, #C6D3C8); }
footer .foot-licence a { color: var(--em-br, #35A876); }
footer .foot-legal {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  display: inline-block;
  margin-top: 4px;
}
footer .foot-legal a { color: var(--muted, #8CA89B); text-decoration: underline; text-underline-offset: 2px; }
footer .foot-legal a:hover { color: var(--em-br, #35A876); }

/* ------------------------------------------------- 6. two-tone headings */
/* The Protex hero gesture: line one in full-strength text, line two dimmed at
   the same size. Copy is unchanged — only its treatment. */
.tt { display: block; }
.tt-line { display: block; }
/* services.html wraps each line in its own .line/.line-in reveal pair, so the
   two-tone class has to sit on those rather than on .tt-line. */
h1.tt > .line, h1.tt > .tt-line { display: block; }
.tt-dim {
  display: block;
  color: var(--muted, #8CA89B);
}
/* Strengthen the dimmed line where the canvas behind it is lighter. */
.hero .tt-dim, .page-hero .tt-dim { color: #9DB4A6; }

/* --- the homepage hero only (#hero) ------------------------------------- */
/* Protex puts a small badge above a dominant headline. index.html's brand
   lockup takes the badge role, so it has to shrink: left at brand-bar sizing it
   was 41.6px against a 32px UA-default H1, which made the lockup louder than
   the page's own headline. Scoped to #hero so services.html keeps the larger
   hero H1 its own stylesheet already sets. */
#hero .brand-bar {
  flex-direction: row;
  gap: 10px;
  padding: 8px 18px;
  border-radius: var(--pill-radius);
  background: rgba(4, 23, 17, .72);
}
#hero .brand-bar-logo img { width: 26px; height: 26px; }
#hero .brand-bar-text {
  font-size: clamp(.8rem, 1.25vw, 1.05rem);
  letter-spacing: .16em;
  white-space: nowrap;
}
#hero h1.tt {
  margin: 24px 0 0;
  font-size: clamp(1.6rem, 3.1vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  max-width: 100%;
}

/* -------------------------------------------------------- 7. card treatment */
/* Protex anatomy: prominent illustration plate, bright eyebrow, white title,
   muted body — on a hairline card with a lift on hover.
   Applied to every card family the site uses. */
.prox-card,
.post-card,
.contact-card,
.dest-card,
.service {
  position: relative;
  border: 1px solid var(--line, #123B34);
  border-radius: var(--radius, 18px);
  background: linear-gradient(180deg, var(--bg-2, #07211C), var(--bg-0, #02120A));
  transition: transform .35s var(--ease, ease), border-color .35s var(--ease, ease), box-shadow .35s var(--ease, ease);
}
.prox-card:hover,
.post-card:hover,
.contact-card:hover,
.dest-card:hover,
.service:hover {
  transform: translateY(-6px);
  border-color: var(--line-hi, #1C5547);
  box-shadow: 0 26px 60px -28px rgba(0, 0, 0, .9), 0 0 30px -14px var(--em-glow, rgba(45, 140, 100, .32));
}

/* The illustration plate. */
.prox-card .ic,
.post-card .ic,
.contact-card .ic,
.dest-card .ic {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border: 1px solid var(--em-edge, rgba(53, 168, 118, .55));
  border-radius: 16px;
  background:
    radial-gradient(120% 120% at 30% 0%, rgba(45, 140, 100, .40), rgba(4, 23, 17, .2) 70%),
    var(--bg-1, #041711);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 0 24px -12px var(--em-glow, rgba(45, 140, 100, .32));
  transition: background .35s var(--ease, ease), box-shadow .35s var(--ease, ease), border-color .35s var(--ease, ease);
}
.prox-card .ic svg,
.post-card .ic svg,
.contact-card .ic svg,
.dest-card .ic svg {
  width: 30px;
  height: 30px;
  stroke: var(--em-br, #35A876);   /* AA-safe emerald for a graphic on this fill */
  fill: none;
}
.prox-card:hover .ic,
.post-card:hover .ic,
.contact-card:hover .ic,
.dest-card:hover .ic {
  border-color: var(--em-br, #35A876);
  box-shadow: 0 0 28px -8px var(--em-glow, rgba(45, 140, 100, .32));
}

/* Eyebrow / category kicker — bright label green, Protex-style. */
.prox-card .num,
.post-card .cat,
.contact-card .k,
.dest-card .d-kicker {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 11.5px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--label, #5DDC9A);
}

/* Titles + body. */
.prox-card h3,
.post-card h3,
.contact-card h3,
.dest-card h3 {
  font-family: var(--disp, 'Space Grotesk', sans-serif);
  color: var(--text, #F2F5EF);
  letter-spacing: -.01em;
}
.prox-card p,
.post-card .excerpt,
.contact-card p,
.dest-card p {
  color: var(--muted, #8CA89B);
}

/* Insights read-more + card links: emerald TEXT uses --em-br (AA), not --em-l. */
.post-card .readmore,
.post-card .cat { color: var(--em-br, #35A876); }
.post-card .readmore { font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }

/* Local-card links on the 404 page. */
.dest-card .t svg, .dest-card .t { color: inherit; }

/* ------------------------------------------------------------ breakpoints */
/* Laptop and below: the capsule no longer fits beside brand + CTA, so it
   collapses to the burger. Matches the site's existing 1080px nav breakpoint. */
@media (max-width: 1180px) {
  #nav .nav-pill { display: none; }
  #nav .nav-burger { display: grid; }
}

/* Tablet: tighten the CTA. */
@media (max-width: 768px) {
  #nav .cta { min-height: 40px; padding: 0 14px; font-size: 13px !important; }
  #nav .brand-text { display: none; }   /* mark alone reads cleaner at this width */
  #nav .brand .logo-ico { width: 34px; height: 34px; }
  #nav .brand .logo-ico img { height: 34px; }
  footer { padding: 44px 0; }
  footer .container { flex-direction: column; align-items: center; text-align: center; }
  footer .foot-brand { align-items: center; }
  footer .foot-licence { text-align: center; }
}

/* Phone: keep the CTA. It used to be hidden here, but the pages carry their own
   `#nav .nav-cta .cta { display: flex }` rule — one id + two classes — which
   out-specifies `#nav .cta` in a media query regardless of load order. So the
   hide only ever took effect on the seven pages that lacked that override, and
   the mobile nav rendered differently depending on which page you were on: the
   primary action present on home/services/404, absent on the legal and insights
   pages. Showing it everywhere is both the consistent choice and the better
   one — "Request an Audit" is the site's main conversion path, and it fits at
   390px with the brand mark and the burger, verified with no overflow. */
@media (max-width: 560px) {
  footer { padding: 38px 0 46px; }
  footer .foot-licence { font-size: 13px; line-height: 1.85; }
}