/* ==========================================================================
   NEriks Air — the blueprint design system.

   Source of truth: .docs/design/NEriks-Air-Site.dc.html (Claude Design project
   827b001a-69b9-4e20-87e4-7a709869f92a). The design draws every rule with an inline style;
   blazor.md forbids inline styles in a .razor file, so each of the design's repeated inline
   recipes becomes a class here and the components emit semantic markup plus a class name.

   Layout note: the design fixes the canvas at min-width 1180px because it is an artboard.
   A real site cannot, so the composition is preserved at desktop width and collapses at two
   breakpoints (1024px, 700px). Nothing about the visual language changes — only the column
   counts and the horizontal gutter.
   ========================================================================== */

:root {
  /* Surfaces */
  --na-bg:          #0d151e;
  --na-bg-deep:     #0a1119;
  --na-bg-tint:     rgba(95, 199, 230, .06);

  /* Ink */
  --na-accent:      #5fc7e6;
  --na-ink:         #dfe8ef;
  --na-ink-prose:   #c3d2de;
  --na-ink-soft:    #9fb3c2;
  --na-ink-muted:   #5a7488;

  /* Rules — three weights, exactly as the design uses them */
  --na-rule:        rgba(120, 170, 210, .3);
  --na-rule-soft:   rgba(120, 170, 210, .22);
  --na-rule-faint:  rgba(120, 170, 210, .15);
  --na-grid-line:   rgba(120, 170, 210, .05);

  /* Type */
  --na-font-display: 'Space Grotesk', system-ui, sans-serif;
  --na-font-mono:    'IBM Plex Mono', ui-monospace, monospace;
  --na-font-prose:   'IBM Plex Sans', system-ui, sans-serif;

  /* Metrics */
  --na-gutter:      40px;
  --na-header-h:    68px;
}

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */

body.na-body {
  margin: 0;
  background: var(--na-bg);
  color: var(--na-ink);
  font-family: var(--na-font-display);
}

/* The route-change focus target - do NOT read this as a blanket outline reset.

   Routes.razor carries <FocusOnNavigate Selector="h1" />, and the Blazor runtime implements that as
   `el.hasAttribute("tabindex") || (el.tabIndex = -1), el.focus()` on the first h1 in the document.
   That focus is deliberate and load-bearing: it is what announces the new page to a screen reader
   on an SPA navigation, and CmsPage's maintenance notice picks its heading level around it. But
   nothing styled the resulting focus state, so every page load left the browser's default focus
   ring drawn around the hero heading until the visitor happened to click somewhere.

   `tabindex="-1"` is exactly what makes this safe to suppress: it takes the heading OUT of the tab
   order, so no keyboard user can ever land here by tabbing, and there is no focus indicator to owe
   them (WCAG 2.4.7 covers keyboard-operable elements). A heading a person focused ON PURPOSE would
   need a real one - hence the attribute in the selector rather than a bare `h1:focus`. */
h1[tabindex="-1"]:focus { outline: none; }

.na-site {
  background: var(--na-bg);
  background-image:
    linear-gradient(var(--na-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--na-grid-line) 1px, transparent 1px);
  background-size: 26px 26px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.na-site *,
.na-site *::before,
.na-site *::after { box-sizing: border-box; }

.na-site a { color: inherit; text-decoration: none; }
.na-site ::selection { background: var(--na-accent); color: var(--na-bg); }

.na-main { flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.na-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(6px);
  background: rgba(13, 21, 30, .86);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 var(--na-gutter);
  height: var(--na-header-h);
  border-bottom: 1px solid var(--na-rule);
}

.na-brand {
  display: flex;
  align-items: center;
  gap: 13px;
  cursor: pointer;
  flex: 0 0 auto;
}

/* The instrument mark: a square bezel, an inner ring and a vertical hairline. */
.na-brand__mark {
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--na-accent);
  position: relative;
  flex: 0 0 auto;
}
.na-brand__mark::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--na-accent);
  border-radius: 50%;
}
.na-brand__mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: var(--na-accent);
  transform: translateX(-.5px);
}

.na-brand__text {
  font: 700 19px/1 var(--na-font-display);
  letter-spacing: 1px;
  white-space: nowrap;
}
.na-brand__slash { color: var(--na-accent); }

.na-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font: 500 12.5px/1 var(--na-font-mono);
  flex: 1 1 auto;
  justify-content: center;
}

.na-nav__link {
  cursor: pointer;
  color: var(--na-ink-soft);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  background: none;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  font: inherit;
}
.na-nav__link:hover { color: var(--na-ink); }
.na-nav__link.is-active {
  color: var(--na-accent);
  border-bottom-color: var(--na-accent);
}

.na-header__cta { flex: 0 0 auto; }

.na-header__toggle {
  display: none;
  background: none;
  border: 1px solid var(--na-rule);
  color: var(--na-ink);
  font: 500 11px/1 var(--na-font-mono);
  padding: 10px 12px;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Buttons and inline actions
   -------------------------------------------------------------------------- */

.na-btn {
  display: inline-block;
  cursor: pointer;
  font: 600 13px/1 var(--na-font-mono);
  padding: 16px 26px;
  border: 1px solid transparent;
  text-align: center;
  white-space: nowrap;
  background: none;
  color: var(--na-ink);
}

.na-btn--primary { background: var(--na-accent); color: var(--na-bg); }
.na-btn--primary:hover { background: #7ad3ee; }

.na-btn--outline { border-color: rgba(120, 170, 210, .5); color: var(--na-ink); }
.na-btn--outline:hover { border-color: var(--na-accent); color: var(--na-accent); }

.na-btn--accentline { border-color: var(--na-accent); color: var(--na-accent); }
.na-btn--accentline:hover { background: var(--na-bg-tint); }

.na-btn--ghost { color: var(--na-accent); }
.na-btn--ghost:hover { text-decoration: underline; }

.na-btn--sm { font-size: 11.5px; padding: 11px 18px; }
.na-btn--md { font-size: 12px; padding: 13px 22px; }

/* The cyan underlined text action ("DISCUSS A PROJECT →"). */
.na-link {
  display: inline-block;
  cursor: pointer;
  font: 600 12px/1 var(--na-font-mono);
  color: var(--na-accent);
  border-bottom: 1px solid var(--na-accent);
  padding-bottom: 3px;
}
.na-link:hover { color: #7ad3ee; border-bottom-color: #7ad3ee; }

/* A .na-link that is a <button> rather than an <a>. Sign out has to be a button: /Logout is a
   server endpoint, and Blazor swallows same-origin anchor clicks inside an interactive circuit
   (Routes.razor, AdminLayout). A button carries the browser's own chrome, so it is reset back to
   the link it replaced - the visitor must not be able to tell the difference. */
.na-signout {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--na-accent);
  padding: 0 0 3px;
}

/* The bare cyan mono action in a section header ("ALL CAPABILITIES →"). */
.na-action {
  cursor: pointer;
  font: 500 11px/1 var(--na-font-mono);
  color: var(--na-accent);
  white-space: nowrap;
}
.na-action:hover { text-decoration: underline; }

.na-actions {
  display: flex;
  gap: 12px;
  margin-top: 32px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Section primitives
   -------------------------------------------------------------------------- */

.na-section {
  padding: 52px var(--na-gutter);
  position: relative;
}

.na-section--ruled { border-bottom: 1px solid var(--na-rule); }
.na-section--ruled-top { border-top: 1px solid var(--na-rule); }

/* The technical-drawing corner stamp. Section.Meta, pipe-separated, one line per part. */
.na-stamp {
  position: absolute;
  top: 30px;
  right: var(--na-gutter);
  font: 500 10px/1.7 var(--na-font-mono);
  color: var(--na-ink-muted);
  text-align: right;
  pointer-events: none;
}

.na-kicker {
  font: 500 11px/1 var(--na-font-mono);
  color: var(--na-accent);
  letter-spacing: .1em;
  margin-bottom: 20px;
}

.na-kicker--tight { margin-bottom: 14px; font-weight: 600; letter-spacing: 0; }

.na-heading {
  font: 700 30px/1 var(--na-font-display);
  letter-spacing: -.8px;
  margin: 0;
}

.na-section__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 26px;
}

.na-lead {
  font: 400 16px/1.6 var(--na-font-prose);
  color: var(--na-ink-soft);
  max-width: 600px;
  margin-top: 20px;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

/* position: relative IS LOAD-BEARING, and it is what the design has (its hero div carries
   `padding:74px 40px 58px;position:relative`). It was dropped in translation, and the consequence
   was invisible in the editor and visible only on the live site.

   .na-stamp is position: absolute. Without a positioned ancestor it resolves against the INITIAL
   containing block instead of the hero, so `top: 30px` measured from the top of the PAGE - putting
   the corner stamp underneath .na-header, which is sticky, translucent and z-index 50. The stamp is
   about three lines tall, so the first two sat behind the header and the last poked out below it:
   "not entirely visible", exactly as reported.

   WHY THE EDITOR LOOKED RIGHT, which is the part that makes this hard to believe: EditorPreview
   wraps every section in .na-edit-band, which IS position: relative. The band silently supplied the
   containing block the hero should have had, so the preview rendered the design correctly while the
   public page did not. A preview that is more forgiving than the real page will hide this class of
   bug again - the other two stamp containers (.na-section, .na-callout) both set it, so the hero was
   the only one relying on that accident. */
.na-hero { padding: 60px var(--na-gutter) 44px; position: relative; }
.na-hero--home { padding: 74px var(--na-gutter) 58px; }

.na-hero__title {
  font: 700 52px/1.03 var(--na-font-display);
  letter-spacing: -1.5px;
  max-width: 860px;
  margin: 0;
}
.na-hero--home .na-hero__title { font-size: 62px; line-height: 1.02; letter-spacing: -1.8px; }

.na-hero__lead {
  font: 400 16px/1.6 var(--na-font-prose);
  color: var(--na-ink-soft);
  max-width: 600px;
  margin-top: 20px;
}
.na-hero--home .na-hero__lead { font-size: 17px; max-width: 560px; margin-top: 24px; }

/* Article hero: a back link, then the category/date pair above the title. */
.na-hero--article { max-width: 900px; padding-top: 26px; }

.na-hero__back {
  display: inline-block;
  cursor: pointer;
  font: 500 11px/1 var(--na-font-mono);
  color: var(--na-accent);
  padding: 34px var(--na-gutter) 0;
}
.na-hero__back:hover { text-decoration: underline; }

.na-meta-row {
  display: flex;
  gap: 14px;
  align-items: center;
  font: 500 10.5px/1 var(--na-font-mono);
  color: var(--na-accent);
  margin-bottom: 18px;
}
.na-meta-row__tag { border: 1px solid rgba(95, 199, 230, .5); padding: 4px 8px; }
.na-meta-row__date { color: var(--na-ink-muted); }

.na-hero--article .na-hero__title { font-size: 44px; line-height: 1.06; letter-spacing: -1.3px; }
.na-hero--article .na-hero__lead { font-size: 17px; max-width: none; }

/* --------------------------------------------------------------------------
   StatRow
   -------------------------------------------------------------------------- */

.na-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--na-rule);
  padding: 0;
}

.na-stat {
  padding: 26px var(--na-gutter);
  border-right: 1px solid var(--na-rule-soft);
}
.na-stat:last-child { border-right: 0; }

.na-stat__value { font: 700 32px/1 var(--na-font-display); }
.na-stat:last-child .na-stat__value { color: var(--na-accent); }

.na-stat__label {
  font: 500 10px/1.4 var(--na-font-mono);
  color: var(--na-ink-muted);
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   ImageBand
   -------------------------------------------------------------------------- */

.na-imageband { padding: 36px var(--na-gutter); border-bottom: 1px solid var(--na-rule); }

.na-imageband__frame {
  border: 1px solid var(--na-rule);
  height: 260px;
  position: relative;
  overflow: hidden;
  background: var(--na-bg-deep);
}
.na-imageband__frame--tall { height: 340px; }
.na-imageband__frame--auto { height: auto; }

.na-imageband__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05);
}
.na-imageband__frame--auto .na-imageband__img { height: auto; }

/* The section-cut marks: "A" top-left, "A′" bottom-right, hairlines at the mid-span. */
.na-mark {
  position: absolute;
  font: 500 10px/1 var(--na-font-mono);
  color: var(--na-accent);
  background: rgba(13, 21, 30, .6);
  padding: 3px 6px;
}
.na-mark--tl { left: 16px; top: 16px; }
.na-mark--br { right: 16px; bottom: 16px; }

.na-imageband__tick {
  position: absolute;
  left: 50%;
  width: 1px;
  height: 14px;
  background: var(--na-accent);
}
.na-imageband__tick--top { top: -1px; }
.na-imageband__tick--bottom { bottom: -1px; }

.na-imageband__placeholder {
  width: 100%;
  height: 100%;
  min-height: 130px;
  background: repeating-linear-gradient(135deg, #12202c 0 10px, #152633 10px 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 500 10px/1 var(--na-font-mono);
  color: var(--na-ink-muted);
}

/* --------------------------------------------------------------------------
   ItemList — six variants, all sharing the numbered-row idea
   -------------------------------------------------------------------------- */

/* Default: the home page's compact service index. */
.na-rows { display: block; }

.na-row {
  display: grid;
  grid-template-columns: 64px 1.1fr 2fr auto;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid var(--na-rule-soft);
  color: inherit;
}
.na-row:last-child { border-bottom: 1px solid var(--na-rule-soft); }
.na-row--link { cursor: pointer; }
.na-row--link:hover { background: var(--na-bg-tint); }

.na-row__num { font: 500 12px/1 var(--na-font-mono); color: var(--na-ink-muted); }
.na-row__title { font: 600 19px/1.2 var(--na-font-display); }
.na-row__body { font: 400 13px/1.5 var(--na-font-prose); color: var(--na-ink-soft); }
.na-row__cta { font: 500 13px/1 var(--na-font-mono); color: var(--na-accent); }

/* "detail": the services page's long-form capability blocks. */
.na-detail-list { padding: 12px var(--na-gutter) 20px; }

.na-detail {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 20px;
  padding: 34px 0;
  border-bottom: 1px solid var(--na-rule-soft);
}
.na-detail:last-child { border-bottom: 0; }

.na-detail__num { font: 500 13px/1 var(--na-font-mono); color: var(--na-accent); }
.na-detail__title { font: 700 24px/1.2 var(--na-font-display); letter-spacing: -.5px; }
.na-detail__body {
  font: 400 14px/1.6 var(--na-font-prose);
  color: var(--na-ink-soft);
  max-width: 640px;
  margin-top: 10px;
}

.na-tags { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.na-tag {
  font: 500 10px/1 var(--na-font-mono);
  color: var(--na-ink-soft);
  padding: 6px 11px;
  border: 1px solid var(--na-rule);
}

/* "process": four numbered steps divided by vertical rules. */
.na-steps { display: grid; grid-template-columns: repeat(4, 1fr); }

.na-step { padding: 0 24px; border-right: 1px solid var(--na-rule-soft); }
.na-step:first-child { padding-left: 0; }
.na-step:last-child { padding-right: 0; border-right: 0; }

.na-step__num { font: 700 24px/1 var(--na-font-display); color: var(--na-accent); }
.na-step__title { font: 600 15px/1.2 var(--na-font-display); margin: 10px 0 6px; }
.na-step__body { font: 400 12.5px/1.5 var(--na-font-prose); color: var(--na-ink-soft); }

/* "partners": three columns of prose divided by vertical rules. */
.na-columns { display: grid; grid-template-columns: repeat(3, 1fr); }

.na-column { padding: 0 28px; border-right: 1px solid var(--na-rule-soft); }
.na-column:first-child { padding-left: 0; }
.na-column:last-child { padding-right: 0; border-right: 0; }

.na-column__title { font: 600 17px/1.3 var(--na-font-display); margin-bottom: 8px; }
.na-column__body { font: 400 13px/1.6 var(--na-font-prose); color: var(--na-ink-soft); }

/* "modules" / "categories" / "capabilities": the hairline cell grid. The 1px gap over a
   rule-coloured background is what draws the interior rules — the design's own trick. */
.na-cells {
  display: grid;
  gap: 1px;
  background: var(--na-rule-soft);
  border: 1px solid var(--na-rule-soft);
}
.na-cells--3 { grid-template-columns: repeat(3, 1fr); }
.na-cells--4 { grid-template-columns: repeat(4, 1fr); }

.na-cell { background: var(--na-bg); padding: 26px; }
.na-cell__code { font: 500 11px/1 var(--na-font-mono); color: var(--na-accent); }
.na-cell__title { font: 600 18px/1.25 var(--na-font-display); margin: 12px 0 8px; }
.na-cell__body { font: 400 13px/1.5 var(--na-font-prose); color: var(--na-ink-soft); }

/* --------------------------------------------------------------------------
   CardGrid
   -------------------------------------------------------------------------- */

.na-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.na-cards--4 { grid-template-columns: repeat(4, 1fr); }

.na-card { border: 1px solid var(--na-rule); display: block; color: inherit; }
.na-card--link { cursor: pointer; }
.na-card--link:hover { border-color: var(--na-accent); }

.na-card__figure { height: 150px; overflow: hidden; }
.na-card__figure--sm { height: 130px; }
.na-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }

.na-card__body { padding: 18px; }
.na-card__label { font: 500 10px/1.4 var(--na-font-mono); color: var(--na-accent); }
.na-card__title { font: 600 16px/1.25 var(--na-font-display); margin: 8px 0 6px; }
.na-card__text { font: 400 12px/1.5 var(--na-font-prose); color: var(--na-ink-soft); }

/* "products": the price/store footer row. */
.na-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}
.na-card__price { font: 600 14px/1 var(--na-font-mono); }
.na-card__store {
  cursor: pointer;
  font: 500 10px/1 var(--na-font-mono);
  color: var(--na-accent);
  border: 1px solid var(--na-rule);
  padding: 6px 10px;
}
.na-card--products .na-card__label { color: var(--na-ink-muted); }
.na-card--products .na-card__title { font-size: 14px; margin: 7px 0 10px; }

/* "related": the hairline cell grid again, but each cell is a link. */
.na-cards--related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
                     background: var(--na-rule-soft); border: 1px solid var(--na-rule-soft); }
.na-cards--related .na-card { border: 0; background: var(--na-bg); padding: 26px; }
.na-cards--related .na-card__body { padding: 0; }
.na-cards--related .na-card__label { font-size: 10.5px; }
.na-cards--related .na-card__title { font-size: 17px; line-height: 1.3; margin: 12px 0 8px; }
.na-cards--related .na-card__text { font-size: 13px; line-height: 1.55; }

/* --------------------------------------------------------------------------
   SplitPanel
   -------------------------------------------------------------------------- */

.na-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--na-rule);
}
.na-split--boxed {
  border: 1px solid var(--na-rule);
  border-top: 1px solid var(--na-rule);
  margin: 0 var(--na-gutter) 52px;
  padding: 36px;
}

.na-split__panel { padding: 46px var(--na-gutter); border-right: 1px solid var(--na-rule); }
.na-split__panel:last-child { border-right: 0; }
.na-split--boxed .na-split__panel { padding: 0 36px; }
.na-split--boxed .na-split__panel:first-child { padding-left: 0; border-right-color: var(--na-rule-soft); }
.na-split--boxed .na-split__panel:last-child { padding-right: 0; }

.na-split__title { font: 700 28px/1.05 var(--na-font-display); letter-spacing: -.6px; }
.na-split__body {
  font: 400 14px/1.6 var(--na-font-prose);
  color: var(--na-ink-soft);
  margin-top: 16px;
  max-width: 420px;
}
.na-split__actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   CalloutBand — the accent-bordered module strip
   -------------------------------------------------------------------------- */

.na-callout {
  margin: 46px var(--na-gutter);
  border: 1px solid var(--na-accent);
  padding: 36px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 28px;
  position: relative;
  background: linear-gradient(180deg, var(--na-bg-tint), transparent);
}
.na-callout--plain {
  border-color: var(--na-rule);
  background: none;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.na-callout__stamp {
  position: absolute;
  top: 12px;
  right: 16px;
  font: 500 10px/1 var(--na-font-mono);
  color: var(--na-ink-muted);
}

.na-callout__title { font: 700 30px/1.1 var(--na-font-display); letter-spacing: -.8px; }
.na-callout--plain .na-callout__title { font-size: 24px; line-height: 1.15; letter-spacing: -.5px; }

.na-callout__body {
  font: 400 14px/1.6 var(--na-font-prose);
  color: var(--na-ink-soft);
  margin-top: 12px;
  max-width: 620px;
}

.na-callout__left { padding-right: 36px; border-right: 1px solid var(--na-rule-soft); }
.na-callout__right {
  padding-left: 36px;
  font: 400 14px/1.7 var(--na-font-prose);
  color: var(--na-ink-soft);
}
/* The right column is the only body Prose.razor draws with no class of its own, so its paragraphs
   would otherwise take the UA's 1em margins — including a top one the single-paragraph case never
   had. */
.na-callout__right p { margin: 0 0 14px; }
.na-callout__right p:last-child { margin-bottom: 0; }

.na-callout__actions { display: flex; flex-direction: column; gap: 10px; }

/* --------------------------------------------------------------------------
   CtaBand
   -------------------------------------------------------------------------- */

.na-ctaband {
  padding: 60px var(--na-gutter);
  border-top: 1px solid var(--na-rule);
  text-align: center;
  background: linear-gradient(180deg, transparent, rgba(95, 199, 230, .05));
}
.na-ctaband .na-kicker { margin-bottom: 18px; }

.na-ctaband__title {
  font: 700 40px/1.05 var(--na-font-display);
  letter-spacing: -1.2px;
  max-width: 680px;
  margin: 0 auto;
}
.na-ctaband__body {
  font: 400 15px/1.6 var(--na-font-prose);
  color: var(--na-ink-soft);
  max-width: 500px;
  margin: 16px auto 0;
}
.na-ctaband .na-actions { justify-content: center; margin-top: 26px; }

/* CtaBand variant used at the foot of a full-width section (services / about). */
.na-ctaband--left { text-align: left; background: none; }
.na-ctaband--left .na-ctaband__title,
.na-ctaband--left .na-ctaband__body { margin-left: 0; margin-right: 0; }
.na-ctaband--left .na-actions { justify-content: flex-start; }

/* --------------------------------------------------------------------------
   NoteBand — the bordered aside on the services hero
   -------------------------------------------------------------------------- */

.na-note {
  margin: 22px var(--na-gutter) 0;
  padding: 16px 18px;
  border-left: 2px solid var(--na-accent);
  background: var(--na-bg-tint);
  font: 400 13px/1.6 var(--na-font-prose);
  color: var(--na-ink-soft);
  max-width: 660px;
}
.na-note__label {
  font: 500 11px/1 var(--na-font-mono);
  color: var(--na-accent);
  margin-right: 8px;
}

/* --------------------------------------------------------------------------
   DefinitionList
   -------------------------------------------------------------------------- */

.na-deflist { max-width: 720px; }

.na-deflist__row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 0;
  border-top: 1px solid var(--na-rule-soft);
}
.na-deflist__row:last-child { border-bottom: 1px solid var(--na-rule-soft); }

.na-deflist__key { font: 400 13px/1.4 var(--na-font-prose); color: var(--na-ink-soft); }
.na-deflist__value { font: 500 13px/1.4 var(--na-font-mono); text-align: right; }

/* --------------------------------------------------------------------------
   PlanTable
   -------------------------------------------------------------------------- */

.na-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.na-plan { border: 1px solid var(--na-rule); padding: 28px; position: relative; }
.na-plan--featured { border-color: var(--na-accent); }

.na-plan__badge {
  position: absolute;
  top: -1px;
  right: -1px;
  font: 500 10px/1 var(--na-font-mono);
  background: var(--na-accent);
  color: var(--na-bg);
  padding: 5px 10px;
}

.na-plan__name { font: 600 16px/1.2 var(--na-font-display); }
.na-plan__for { font: 400 12px/1.4 var(--na-font-prose); color: var(--na-ink-soft); margin-top: 6px; }
.na-plan__price { font: 700 34px/1 var(--na-font-display); margin: 18px 0 4px; }
.na-plan__price small { font: 500 12px/1 var(--na-font-mono); color: var(--na-ink-muted); }
.na-plan__includes {
  font: 400 12.5px/1.7 var(--na-font-prose);
  color: var(--na-ink-soft);
  margin-top: 12px;
}

.na-plans__note {
  margin-top: 22px;
  font: 400 12px/1.5 var(--na-font-prose);
  color: var(--na-ink-muted);
}

/* --------------------------------------------------------------------------
   ContactRouter — the enquiry-type picker and the enquiry form
   -------------------------------------------------------------------------- */

.na-contact { display: grid; grid-template-columns: 1fr 1.2fr; }

.na-contact__routes { padding: 44px var(--na-gutter); border-right: 1px solid var(--na-rule); }
.na-contact__form { padding: 44px var(--na-gutter); }

.na-route {
  cursor: pointer;
  padding: 18px;
  border: 1px solid var(--na-rule);
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-align: left;
  background: none;
  color: inherit;
}
.na-route:hover { border-color: rgba(95, 199, 230, .6); }
.na-route.is-selected { border-color: var(--na-accent); background: var(--na-bg-tint); }

.na-route__title { font: 600 16px/1.2 var(--na-font-display); }
.na-route__body { font: 400 12px/1.4 var(--na-font-prose); color: var(--na-ink-soft); margin-top: 4px; }
.na-route__arrow { font: 500 12px/1 var(--na-font-mono); color: var(--na-accent); }

.na-contact__direct {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--na-rule-soft);
  font: 400 12.5px/1.8 var(--na-font-prose);
  color: var(--na-ink-soft);
}
.na-contact__direct-label {
  font: 500 10px/1 var(--na-font-mono);
  color: var(--na-ink-muted);
  margin-bottom: 8px;
}
.na-contact__direct a { color: var(--na-accent); }

.na-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.na-field { display: block; }
.na-field--wide { margin-top: 16px; }

.na-field__label {
  display: block;
  font: 500 10px/1 var(--na-font-mono);
  color: var(--na-ink-muted);
  margin-bottom: 7px;
}

.na-field__input,
.na-field__textarea {
  width: 100%;
  height: 44px;
  border: 1px solid var(--na-rule);
  background: rgba(120, 170, 210, .04);
  color: var(--na-ink);
  font: 400 13px/1.4 var(--na-font-prose);
  padding: 0 12px;
  outline: none;
}
.na-field__textarea { height: 120px; padding: 12px; resize: vertical; }
.na-field__input:focus,
.na-field__textarea:focus { border-color: var(--na-accent); }
.na-field__input::placeholder,
.na-field__textarea::placeholder { color: var(--na-ink-muted); }

.na-form__foot { display: flex; align-items: center; gap: 16px; margin-top: 20px; flex-wrap: wrap; }

.na-form__selected { font: 600 11px/1 var(--na-font-mono); color: var(--na-accent); margin-bottom: 22px; }

/* Honeypot. Must NOT be display:none or type=hidden — a bot skips those, which defeats the trap.
   Moved out of view instead, and taken out of the accessibility tree by aria-hidden in the markup. */
.na-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.na-form__result { margin-top: 1rem; }
.na-form__result--failed { color: var(--na-accent); }

/* --------------------------------------------------------------------------
   NewsList
   -------------------------------------------------------------------------- */

.na-news__featured {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  border-bottom: 1px solid var(--na-rule);
}
.na-news__featured-figure {
  border-right: 1px solid var(--na-rule);
  padding: 36px var(--na-gutter);
}
.na-news__featured-frame { height: 340px; position: relative; overflow: hidden; }
.na-news__featured-body {
  padding: 44px var(--na-gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.na-news__featured-title { font: 700 32px/1.12 var(--na-font-display); letter-spacing: -.8px; }
.na-news__featured-excerpt {
  font: 400 14.5px/1.7 var(--na-font-prose);
  color: var(--na-ink-soft);
  margin-top: 18px;
}
.na-news__featured-body .na-link { align-self: flex-start; margin-top: 26px; }

.na-filters {
  display: flex;
  border-bottom: 1px solid var(--na-rule);
  padding: 0 var(--na-gutter);
  flex-wrap: wrap;
}
.na-filter {
  cursor: pointer;
  font: 500 11px/1 var(--na-font-mono);
  padding: 16px 20px;
  color: var(--na-ink-soft);
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
}
.na-filter:hover { color: var(--na-ink); }
.na-filter.is-active { color: var(--na-accent); border-bottom-color: var(--na-accent); }

.na-posts { padding: 8px var(--na-gutter) 56px; }

.na-post {
  cursor: pointer;
  display: grid;
  grid-template-columns: 120px 1fr 200px;
  gap: 28px;
  align-items: start;
  padding: 28px 0;
  border-bottom: 1px solid var(--na-rule-soft);
  color: inherit;
}
.na-post:hover { background: var(--na-bg-tint); }

.na-post__date { font: 500 11px/1.8 var(--na-font-mono); color: var(--na-accent); }
.na-post__cat { color: var(--na-ink-muted); display: block; }
/* Both are spans inside one grid cell, so they need display:block to take their own row -
   inline, they run together and na-post__excerpt's margin-top does nothing. */
.na-post__title {
  display: block;
  font: 600 21px/1.25 var(--na-font-display);
  letter-spacing: -.3px;
}
.na-post__excerpt {
  display: block;
  font: 400 13.5px/1.65 var(--na-font-prose);
  color: var(--na-ink-soft);
  margin-top: 9px;
  max-width: 640px;
}
.na-post__thumb { height: 88px; overflow: hidden; position: relative; }
.na-post__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.na-posts__empty {
  padding: 40px 0;
  font: 400 14px/1.6 var(--na-font-prose);
  color: var(--na-ink-soft);
}

/* --------------------------------------------------------------------------
   RichText
   -------------------------------------------------------------------------- */

.na-prose { padding: 44px var(--na-gutter); }
.na-prose p {
  font: 400 15px/1.75 var(--na-font-prose);
  color: var(--na-ink-prose);
  max-width: 660px;
  margin: 0 0 20px;
}
.na-prose p:last-child { margin-bottom: 0; }

/* "direct": the contact card block — mono, tight, no max width. */
.na-prose--direct p {
  font: 400 12.5px/1.8 var(--na-font-prose);
  color: var(--na-ink-soft);
  max-width: none;
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

/* THE color AND font-size HERE ARE NOT REDUNDANT. Do not delete them as "already inherited".

   Cosmos.Common.AspNetCore.css - loaded before this file, from the Themes package - carries a bare
   element rule:

       footer { background-color: var(--cosmos-brand-soft); color: var(--cosmos-fg); font-size: 12px; }

   and --cosmos-fg resolves through cosmos-light.css to #0f1722, a near-black meant for a LIGHT
   background. Our <footer class="na-footer"> declared no colour of its own, so every descendant
   that does not set one inherited near-black on a near-black ground. That is why the footer
   wordmark rendered almost invisible while the header's was correct: `header` has no such rule, and
   .na-footer__blurb / __links / __heading all set their own colour, so the ONLY thing that showed
   the leak was the one element relying on inheritance.

   Specificity is not what saved the background: `background` here (0,1,0) already beat the element
   rule. Colour was never declared at all, and inheritance has no specificity to win with - the leak
   came in above us, not beside us. Naming the ink explicitly is the fix, and it also inoculates
   anything added to this footer later. */
.na-footer {
  border-top: 1px solid var(--na-rule);
  background: var(--na-bg-deep);
  color: var(--na-ink);
  font-size: inherit;
}

.na-footer__cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 24px;
  padding: 48px var(--na-gutter) 36px;
}

/* A DELIBERATE DEVIATION FROM .docs/design/NEriks-Air-Site.dc.html - do not "correct" it back.

   The design draws the footer mark WITHOUT the vertical needle the header mark has (compare its
   header and footer blocks: both carry the square and the inset circle, only the header adds the
   1px line). At a glance that does not read as the same logo scaled down, it reads as a different
   logo, which is how it was reported. The needle is added here so the footer carries the SAME
   mark; the smaller sizes stay exactly as designed, because a lighter footer brand is intentional
   hierarchy rather than an inconsistency.

   Stroke weights are NOT scaled, matching what the design already does - the 1.5px border is
   identical at both sizes, so the 1px needle and its 2px end insets are too. */
.na-footer__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.na-footer__mark {
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--na-accent);
  position: relative;
  /* Never let a narrow footer column squash the square into a rectangle - the header mark carries
     the same guard. Safe at any width: it fixes 24px, it does not force the row to be wider. */
  flex: 0 0 auto;
}
.na-footer__mark::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--na-accent);
  border-radius: 50%;
}
.na-footer__mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: var(--na-accent);
  transform: translateX(-.5px);
}
.na-footer__wordmark { font: 700 16px/1 var(--na-font-display); letter-spacing: 1px; }

.na-footer__blurb {
  font: 400 12.5px/1.7 var(--na-font-prose);
  color: var(--na-ink-soft);
  max-width: 280px;
}

.na-footer__heading {
  font: 500 10px/1 var(--na-font-mono);
  color: var(--na-accent);
  margin-bottom: 14px;
}
.na-footer__links { font: 400 12.5px/2.1 var(--na-font-prose); color: var(--na-ink-soft); }
.na-footer__link { display: block; }
a.na-footer__link:hover { color: var(--na-accent); }

.na-footer__bar {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 18px var(--na-gutter);
  border-top: 1px solid var(--na-rule-faint);
  font: 500 10px/1.6 var(--na-font-mono);
  color: var(--na-ink-muted);
  flex-wrap: wrap;
}
.na-footer__bar a:hover { color: var(--na-accent); }
.na-footer__legal { display: flex; gap: 18px; }

/* The editor-only shortcut into /admin. Deliberately quieter than the legal links beside it -
   it is a convenience for one person, not navigation for visitors, and only an editor ever
   sees it (SiteFooter gates it on AuthorizeView). */
.na-footer__admin { opacity: 0.55; letter-spacing: 0.08em; }
.na-footer__admin:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   States: loading, not-found, error
   -------------------------------------------------------------------------- */

.na-state { padding: 90px var(--na-gutter); max-width: 720px; }
.na-state__title { font: 700 34px/1.1 var(--na-font-display); letter-spacing: -1px; }
.na-state__body { font: 400 15px/1.7 var(--na-font-prose); color: var(--na-ink-soft); margin-top: 16px; }
.na-state__body a { color: var(--na-accent); }

/* --------------------------------------------------------------------------
   Legal pages — Privacy Policy and Terms of Use.

   These are plain prose written before the design existed: bare h1/h2/p, no classes. They are not
   CMS content and are not part of the design, but they are linked from the footer, so they get the
   page gutter and the prose type rather than sitting full-bleed against the viewport edge.
   -------------------------------------------------------------------------- */

.na-legal { padding: 60px var(--na-gutter) 72px; max-width: 820px; }

.na-legal h1 {
  font: 700 40px/1.06 var(--na-font-display);
  letter-spacing: -1.2px;
  margin: 0 0 28px;
}
.na-legal h2 {
  font: 600 20px/1.25 var(--na-font-display);
  letter-spacing: -.3px;
  margin: 36px 0 12px;
}
.na-legal h3 { font: 600 16px/1.3 var(--na-font-display); margin: 26px 0 10px; }

.na-legal p,
.na-legal li {
  font: 400 14.5px/1.75 var(--na-font-prose);
  color: var(--na-ink-soft);
}
.na-legal p { margin: 0 0 16px; }
.na-legal ul, .na-legal ol { margin: 0 0 16px; padding-left: 22px; }
.na-legal li { margin-bottom: 8px; }
.na-legal a { color: var(--na-accent); }
.na-legal a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Responsive. The design is a fixed 1180px artboard; these two steps are the
   only additions, and they change column counts and gutters, nothing else.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  :root { --na-gutter: 28px; }

  .na-nav { display: none; }
  .na-nav.is-open {
    display: flex;
    position: absolute;
    top: var(--na-header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--na-bg-deep);
    border-bottom: 1px solid var(--na-rule);
    padding: 8px 0;
  }
  .na-nav.is-open .na-nav__link { padding: 14px var(--na-gutter); width: 100%; border-bottom: 0; }
  .na-header__toggle { display: block; }

  .na-hero--home .na-hero__title { font-size: 46px; }
  .na-hero__title { font-size: 40px; }
  .na-stamp { display: none; }

  .na-stats { grid-template-columns: repeat(2, 1fr); }
  .na-stat:nth-child(2n) { border-right: 0; }
  .na-stat:nth-child(-n+2) { border-bottom: 1px solid var(--na-rule-soft); }

  .na-cells--4 { grid-template-columns: repeat(2, 1fr); }
  .na-cards, .na-cards--4, .na-cards--related { grid-template-columns: repeat(2, 1fr); }
  .na-plans { grid-template-columns: 1fr; }
  .na-steps, .na-columns { grid-template-columns: repeat(2, 1fr); }
  .na-step, .na-column { padding: 0 18px 24px; }
  .na-news__featured { grid-template-columns: 1fr; }
  .na-news__featured-figure { border-right: 0; }
  .na-post { grid-template-columns: 110px 1fr; }
  .na-post__thumb { display: none; }
}

@media (max-width: 700px) {
  :root { --na-gutter: 20px; }

  .na-brand__text { font-size: 15px; }
  .na-header__cta { display: none; }

  .na-hero--home .na-hero__title,
  .na-hero__title { font-size: 32px; letter-spacing: -1px; }
  .na-ctaband__title { font-size: 28px; }

  .na-stats { grid-template-columns: 1fr; }
  .na-stat { border-right: 0; border-bottom: 1px solid var(--na-rule-soft); }

  .na-cells--3, .na-cells--4 { grid-template-columns: 1fr; }
  .na-cards, .na-cards--4, .na-cards--related { grid-template-columns: 1fr; }
  .na-steps, .na-columns { grid-template-columns: 1fr; }
  .na-step, .na-column { border-right: 0; padding: 0 0 24px; }

  .na-row { grid-template-columns: 44px 1fr auto; }
  .na-row__body { display: none; }
  .na-detail { grid-template-columns: 1fr; gap: 8px; }

  .na-split, .na-split--boxed { grid-template-columns: 1fr; }
  .na-split__panel { border-right: 0; border-bottom: 1px solid var(--na-rule); }
  .na-split__panel:last-child { border-bottom: 0; }
  .na-split--boxed .na-split__panel { padding: 0 0 24px; }
  .na-split--boxed .na-split__panel:first-child { border-right: 0; }

  .na-callout, .na-callout--plain { grid-template-columns: 1fr; padding: 24px; }
  .na-callout__left { padding-right: 0; border-right: 0; padding-bottom: 20px; }
  .na-callout__right { padding-left: 0; }

  .na-contact { grid-template-columns: 1fr; }
  .na-contact__routes { border-right: 0; border-bottom: 1px solid var(--na-rule); }
  .na-field-grid { grid-template-columns: 1fr; }

  .na-post { grid-template-columns: 1fr; gap: 10px; }
  .na-footer__cols { grid-template-columns: 1fr 1fr; }
}

/* Shared rows - two or more bands side by side, per Section.ShareRowWithPrevious.
   Named na-section-row (not na-row) - .na-row is already the ItemList component's own row class
   (ItemListSection.razor), and reusing it here would re-style every service-index row on the site.
   The bands' own horizontal padding is neutralised HERE, by descendant selectors, and never by
   editing a section component: the bUnit suite pins that markup element by element, and a
   row-aware class added to a band would forfeit it. */
.na-section-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
}

.na-section-row > * {
  flex: 1 1 0;
  min-width: 0;              /* without this a long unbroken string blows the column out */
}

@media (max-width: 900px) {
  .na-section-row {
    display: block;          /* stack again on narrow viewports - a half-width band is unreadable */
  }
}

/* --------------------------------------------------------------------------
   Maintenance — the holding screen, the editor banner and the per-page notice.

   The holding screen is the ONLY thing an anonymous visitor can see while site-wide maintenance is
   on, so it carries the site's own type and surface rather than a bare fallback: it is the site,
   for the duration. Tokens, never literal colours, so it follows the palette with everything else.
   -------------------------------------------------------------------------- */

.na-maintenance        { max-width: 46rem; margin: 8rem auto; padding: 0 var(--na-gutter); text-align: center; }
.na-maintenance__title { font: 700 clamp(1.75rem, 4vw, 3rem)/1.1 var(--na-font-display); letter-spacing: -1px; margin: 0 0 1rem; }
.na-maintenance__body  { font: 400 1.05rem/1.6 var(--na-font-prose); color: var(--na-ink-soft); }
.na-maintenance__foot  { padding: 2rem var(--na-gutter); text-align: center; font: 400 .8rem/1.6 var(--na-font-mono); color: var(--na-ink-muted); }

/* The holding screen's own surface, and a DELIBERATE styling hook rather than a stray class name -
   do not remove it as unused. It is the only branch of the layout with no SiteHeader and no footer,
   so it has no chrome to give it height: without this the grid backdrop stops at the height of one
   heading and one paragraph, leaving the page bottomed out against raw body background. */
.na-site--maintenance          { display: flex; flex-direction: column; min-height: 100vh; }
.na-site--maintenance .na-main { flex: 1; display: flex; align-items: center; justify-content: center; }

/* Editor-only, so it may be loud — being unmissable is the point. An editor bypasses the gate and
   sees the real site, so without this there is nothing to tell them the public cannot, and
   maintenance mode gets left on for a week. The per-page note's editor arm shares the treatment
   because it says the same kind of thing about one page that the banner says about the site. */
.na-maintenance-banner,
.na-maintenance-note--editor   { padding: .6rem 1rem; text-align: center; font: 500 .85rem/1.5 var(--na-font-mono); background: var(--na-accent); color: var(--na-bg-deep); }
.na-maintenance-banner a,
.na-maintenance-note--editor a { color: var(--na-bg-deep); margin-left: .5rem; text-decoration: underline; }

.na-maintenance-note          { margin: 4rem auto; max-width: 46rem; padding: 0 var(--na-gutter); text-align: center; }
.na-maintenance-note__title   { font: 700 clamp(1.5rem, 3vw, 2.25rem)/1.1 var(--na-font-display); letter-spacing: -1px; margin: 0 0 .75rem; }
.na-maintenance-note__body    { font: 400 15px/1.7 var(--na-font-prose); color: var(--na-ink-soft); }
.na-maintenance-note__body a  { color: var(--na-accent); }