/* ============================================================
   nat.css — natireva site component layer (Design B)
   Page glue on top of letbe-ds. Tokens only; every raw value
   carries a design-intent comment. All selectors .nat- prefixed.
   Spec: design/design-b-token-spec.md. Page grammar: opener
   (eyebrow → display headline → standfirst), 820/620 splits,
   navy panels with brass rule, ledger rows, journal-XL cards,
   newsletter split, centred-brand header.
   ============================================================ */

/* ---- canvas ---- */
.nat-body {
  margin: 0;
  background: var(--lb-surface-bg-default);
  color: var(--lb-fg-default);
  font-family: var(--lb-t-body-l-font-family);
  font-size: var(--lb-t-body-l-font-size);
  font-weight: var(--lb-t-body-l-font-weight);
  line-height: var(--lb-t-body-l-line-height);
  letter-spacing: var(--lb-t-body-l-letter-spacing);
}

/* ---- the frame — ONE container for every content zone ----
   Bound to the lb-header inner box (max-width 1200 + 24px padding,
   plus the nav-link's 12px so text meets the "about" glyph). Every
   section rides this frame, so all left text edges align with the
   nav item and all right edges stop at the "our philosophy" CTA —
   the alignment system proven on the article pages, promoted
   site-wide after the same wide-screen breakage showed up on the
   Home/About/Product splits. */
.nat-frame {
  width: 100%;
  max-width: 75rem; /* design-intent: the lb-header inner box */
  margin-inline: auto;
  box-sizing: border-box;
  padding-inline: calc(var(--lb-size-6x) + var(--lb-size-3x)) var(--lb-size-6x); /* +12px left = nav-link padding */
}

/* ---- section rhythm ---- */
.nat-section { padding-block: var(--lb-size-16x); }
.nat-panel {
  background: var(--lb-bg-accent-bolder);
  color: var(--lb-fg-inverse-strong);
  padding-block: var(--lb-size-24x);
}

/* ---- facts band — a compact strip, not a full panel (Design B: size/8x) ---- */
.nat-facts { padding-block: var(--lb-size-8x); }

/* ---- the brass rule — 8px gold band above navy panels + footer ---- */
.nat-rule-brass { border-top: var(--lb-size-2x) solid var(--lb-brand-2-400); } /* decorative: exact wordmark gold */

/* ---- hairline divider between white sections ---- */
.nat-divider { border: 0; border-top: var(--lb-border-width-thin) solid var(--lb-border-muted); margin: 0; }

/* ---- typography roles, composed from token slices ----
   Mobile steps one size down the same token ramp (no free values). */
.nat-display-xl, .nat-display-m, .nat-display-s, .nat-display-xs {
  margin: 0;
  color: inherit;
}
.nat-display-xl {
  font-family: var(--lb-t-display-xl-font-family);
  font-size: var(--lb-t-display-xl-font-size);
  font-weight: var(--lb-t-display-xl-font-weight);
  line-height: var(--lb-t-display-xl-line-height);
  letter-spacing: var(--lb-t-display-xl-letter-spacing);
}
.nat-display-m {
  font-family: var(--lb-t-display-m-font-family);
  font-size: var(--lb-t-display-m-font-size);
  font-weight: var(--lb-t-display-m-font-weight);
  line-height: var(--lb-t-display-m-line-height);
  letter-spacing: var(--lb-t-display-m-letter-spacing);
}
.nat-display-s {
  font-family: var(--lb-t-display-s-font-family);
  font-size: var(--lb-t-display-s-font-size);
  font-weight: var(--lb-t-display-s-font-weight);
  line-height: var(--lb-t-display-s-line-height);
  letter-spacing: var(--lb-t-display-s-letter-spacing);
}
.nat-display-xs {
  font-family: var(--lb-t-display-xs-font-family);
  font-size: var(--lb-t-display-xs-font-size);
  font-weight: var(--lb-t-display-xs-font-weight);
  line-height: var(--lb-t-display-xs-line-height);
  letter-spacing: var(--lb-t-display-xs-letter-spacing);
}
.nat-heading-xl {
  margin: 0;
  font-family: var(--lb-t-heading-xl-font-family);
  font-size: var(--lb-t-heading-xl-font-size);
  font-weight: var(--lb-t-heading-xl-font-weight);
  line-height: var(--lb-t-heading-xl-line-height);
  letter-spacing: var(--lb-t-heading-xl-letter-spacing);
}
/* the lead paragraph under every headline: heading-xl metrics, regular weight */
.nat-standfirst {
  margin: 0;
  font-family: var(--lb-t-heading-xl-font-family);
  font-size: var(--lb-t-heading-xl-font-size);
  font-weight: var(--lb-font-weight-regular);
  line-height: var(--lb-t-heading-xl-line-height);
  letter-spacing: var(--lb-t-heading-xl-letter-spacing);
  max-width: 34rem; /* design-intent: 544px lead measure */
}
.nat-prose {
  color: var(--lb-fg-subtle);
  max-width: 34rem; /* design-intent: 544px body measure */
  margin: 0;
}
.nat-prose p { margin: 0 0 var(--lb-size-6x); }
.nat-prose p:last-child { margin-bottom: 0; }
.nat-caption {
  font-family: var(--lb-t-body-s-font-family);
  font-size: var(--lb-t-body-s-font-size);
  font-weight: var(--lb-t-body-s-font-weight);
  line-height: var(--lb-t-body-s-line-height);
  letter-spacing: var(--lb-t-body-s-letter-spacing);
  color: var(--lb-fg-muted);
  max-width: 34rem; /* design-intent: 544px body measure */
  margin: 0;
}

/* ---- eyebrow — Gloock in brass with the leaf, the Design B section marker ---- */
.nat-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--lb-size-3x);
  margin: 0;
  padding-bottom: var(--lb-size-4x);
}
.nat-eyebrow__leaf {
  width: var(--lb-size-8x);
  height: auto;
  color: var(--lb-fg-success); /* leaf green, from the wordmark */
  flex: none;
}
.nat-eyebrow__text {
  font-family: var(--lb-font-family-2); /* Gloock — the wordmark serif, garnish only */
  font-size: var(--lb-font-size-3xl);
  font-weight: var(--lb-font-weight-regular);
  line-height: 1;
  color: var(--lb-fg-accent-2); /* brass 3.55:1 — large-text-only role */
}
.nat-panel .nat-eyebrow__text,
.nat-news__panel .nat-eyebrow__text { color: var(--lb-brand-2-400); } /* exact wordmark gold on navy (5.66:1) */

/* ---- green ink underline — the signature stroke, now a plain rule ---- */
.nat-underline {
  text-decoration: underline;
  text-decoration-color: var(--lb-fg-success);
  text-decoration-thickness: var(--lb-size-0-5x);
  text-underline-offset: 0.18em; /* design-intent: optical seat of the stroke */
}

/* ---- opener stack: eyebrow → headline → standfirst → body ----
   Headlines + standfirsts are brand blue on white sections and
   inherit white inside navy panels — the Design B color grammar. */
.nat-opener { display: flex; flex-direction: column; gap: var(--lb-size-5x); }
.nat-opener > .nat-eyebrow { padding-bottom: 0; }
.nat-opener__head { display: flex; flex-direction: column; gap: var(--lb-size-4x); }
.nat-opener__head :is(.nat-display-xl, .nat-display-m, .nat-display-s, .nat-display-xs),
.nat-opener > .nat-standfirst { color: var(--lb-fg-accent); }
.nat-panel .nat-opener__head :is(.nat-display-xl, .nat-display-m, .nat-display-s, .nat-display-xs),
.nat-panel .nat-standfirst { color: inherit; }
.nat-standfirst--wide { max-width: none; }
/* multi-paragraph standfirst (About philosophy lead) */
.nat-standfirst-flow {
  display: flex;
  flex-direction: column;
  gap: var(--lb-size-6x);
}
/* the ledger's bold closing line (About philosophy) */
.nat-ledger__closing {
  margin: var(--lb-size-6x) 0 0;
  font-family: var(--lb-t-heading-xl-font-family);
  font-size: var(--lb-t-heading-xl-font-size);
  font-weight: var(--lb-font-weight-bold);
  line-height: var(--lb-t-heading-xl-line-height);
  letter-spacing: var(--lb-t-heading-xl-letter-spacing);
}

/* ---- split sections — text measure + media plate on the frame ----
   Same geometry as the article grid: copy column = the 544px text
   measure, media takes the remaining frame width and stretches to
   the copy's height. DOM order picks the side (first child = left
   column). Media is a contained plate, so wide screens gain margin
   instead of ballooning the photo. */
.nat-split {
  display: grid;
  width: 100%;
  max-width: 75rem;
  margin-inline: auto;
  box-sizing: border-box;
  padding-inline: calc(var(--lb-size-6x) + var(--lb-size-3x)) var(--lb-size-6x);
  gap: 0 var(--lb-size-16x);
  align-items: stretch;
}
.nat-split--copy-first  { grid-template-columns: minmax(0, 34rem) minmax(0, 1fr); }
.nat-split--media-first { grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); }
.nat-split__media {
  position: relative;
  min-width: 0;
  min-height: 26rem; /* design-intent: floor so a short copy column never collapses the plate */
  border-radius: var(--lb-radius-media);
  overflow: hidden;
}
.nat-split__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nat-split__media--focus-right img { object-position: 85% center; } /* design-intent: subject sits right of frame (Riddarholmen spire, contact) */
.nat-split__copy {
  min-width: 0;
  padding-block: var(--lb-size-16x);
}
.nat-split--tall .nat-split__copy { padding-block: var(--lb-size-24x); }

/* ---- article grid — ONE column system for the whole article page ----
   Bound to the header box (max-width 1200 + 24px padding, plus the
   nav-link's own 12px so the text column meets the "about" glyph).
   Column 1 = the 544px text measure, column 2 = media; its right edge
   stops exactly at the "our philosophy" CTA. Sections without an image
   use the SAME grid and simply leave the media column empty, so every
   text block on the page shares one left edge. */
.nat-article-grid {
  max-width: 75rem; /* design-intent: the lb-header inner box */
  margin-inline: auto;
  box-sizing: border-box;
  padding-inline: calc(var(--lb-size-6x) + var(--lb-size-3x)) var(--lb-size-6x); /* +12px left = nav-link padding */
  display: grid;
  grid-template-columns: minmax(0, 34rem) minmax(0, 1fr);
  gap: var(--lb-size-16x);
  align-items: start;
}
.nat-article-hero__media {
  aspect-ratio: 4 / 5; /* design-intent: portrait journal plate on desktop */
  overflow: hidden;
  border-radius: var(--lb-radius-media);
}
.nat-article-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center; /* landscape sources trim equally left and right */
}
.nat-article-hero__media--focus-left img { object-position: 0% center; } /* design-intent: subject sits at the frame's left (marigold pot) */

/* ---- hero — full-bleed photo, white type, measure-aligned content ---- */
.nat-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 34rem; /* design-intent: 546px hero band */
  color: var(--lb-fg-inverse-strong);
}
.nat-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nat-hero__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--lb-size-8x);
  padding-block: var(--lb-size-16x);
}
.nat-hero__kicker {
  display: flex;
  align-items: center;
  gap: var(--lb-size-2x);
  margin: 0 0 var(--lb-size-2x);
  font-family: var(--lb-t-heading-m-font-family);
  font-size: var(--lb-t-heading-m-font-size);
  font-weight: var(--lb-t-heading-m-font-weight);
  line-height: var(--lb-t-heading-m-line-height);
  letter-spacing: var(--lb-t-heading-m-letter-spacing);
}
.nat-hero__kicker .nat-leaf { width: var(--lb-size-4x); }
.nat-hero__lead {
  margin: var(--lb-size-6x) 0 0;
  font-family: var(--lb-t-body-xl-font-family);
  font-size: var(--lb-t-body-xl-font-size);
  font-weight: var(--lb-t-body-xl-font-weight);
  line-height: var(--lb-t-body-xl-line-height);
  max-width: 34rem; /* design-intent: 544px lead measure */
}

/* ---- stats band — the four naked numbers on navy ---- */
.nat-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--lb-size-6x);
  margin: 0;
}
.nat-stats__item {
  display: flex;
  flex-direction: column-reverse; /* value above, label below; dt first in DOM */
  gap: var(--lb-size-1x);
  padding-left: var(--lb-size-6x);
  border-left: var(--lb-border-width-thin) solid var(--lb-border-muted);
}
.nat-stats__item:first-child { border-left: none; padding-left: 0; }
.nat-stats__value {
  margin: 0;
  font-family: var(--lb-t-display-s-font-family);
  font-size: var(--lb-t-display-s-font-size);
  font-weight: var(--lb-t-display-s-font-weight);
  line-height: var(--lb-t-display-s-line-height);
  letter-spacing: var(--lb-t-display-s-letter-spacing);
  color: var(--lb-brand-2-400); /* decorative numerals: exact wordmark gold, 5.66:1 on navy */
}
.nat-stats__label {
  margin: 0;
  font-family: var(--lb-t-body-s-font-family);
  font-size: var(--lb-t-body-s-font-size);
  font-weight: var(--lb-t-body-s-font-weight);
  line-height: var(--lb-t-body-s-line-height);
}

/* ---- ledger rows — numeral + title + description on navy ---- */
.nat-ledger {
  list-style: none;
  margin: var(--lb-size-8x) 0 0;
  padding: 0;
}
.nat-ledger__row {
  display: flex;
  gap: var(--lb-size-5x);
  align-items: flex-start;
  padding-block: var(--lb-size-6x);
  border-top: var(--lb-border-width-thin) solid var(--lb-border-muted);
}
.nat-ledger__num {
  flex: none;
  width: var(--lb-size-8x);
}
.nat-ledger__body { display: flex; flex-direction: column; gap: var(--lb-size-1x); min-width: 0; }
.nat-ledger__desc {
  margin: 0;
  font-family: var(--lb-t-body-l-font-family);
  font-size: var(--lb-t-body-l-font-size);
  font-weight: var(--lb-t-body-l-font-weight);
  line-height: var(--lb-t-body-l-line-height);
}

/* ---- heading helper (in-body H3s) ---- */
.nat-heading-l {
  margin: 0;
  font-family: var(--lb-t-heading-l-font-family);
  font-size: var(--lb-t-heading-l-font-size);
  font-weight: var(--lb-t-heading-l-font-weight);
  line-height: var(--lb-t-heading-l-line-height);
  letter-spacing: var(--lb-t-heading-l-letter-spacing);
}

/* ---- article body — prose column with the Design B article ramp ----
   H2 display-xs / H3 heading-l / refs heading-xl, all accent; body rides
   the page's t-body-l. Group rhythm: 24 base gap, headings pull their
   following text closer via small top margins. ---- */
.nat-article {
  display: flex;
  flex-direction: column;
  gap: var(--lb-size-6x);
  max-width: 34rem; /* design-intent: 544px article measure */
}
.nat-article h2 {
  margin: var(--lb-size-4x) 0 0;
  font-family: var(--lb-t-display-xs-font-family);
  font-size: var(--lb-t-display-xs-font-size);
  font-weight: var(--lb-t-display-xs-font-weight);
  line-height: var(--lb-t-display-xs-line-height);
  letter-spacing: var(--lb-t-display-xs-letter-spacing);
  color: var(--lb-fg-accent);
}
.nat-article h3 {
  margin: var(--lb-size-2x) 0 0;
  font-family: var(--lb-t-heading-l-font-family);
  font-size: var(--lb-t-heading-l-font-size);
  font-weight: var(--lb-t-heading-l-font-weight);
  line-height: var(--lb-t-heading-l-line-height);
  letter-spacing: var(--lb-t-heading-l-letter-spacing);
  color: var(--lb-fg-accent);
}
.nat-article p { margin: 0; color: var(--lb-fg-subtle); }
.nat-article figure {
  margin: var(--lb-size-2x) 0;
  display: flex;
  flex-direction: column;
  gap: var(--lb-size-2x);
}
.nat-article figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--lb-radius-media);
}
.nat-article figure.nat-figure--portrait img { max-width: 24rem; } /* design-intent: portrait figures don't span the full measure */
.nat-article figcaption {
  font-family: var(--lb-t-body-s-font-family);
  font-size: var(--lb-t-body-s-font-size);
  font-weight: var(--lb-t-body-s-font-weight);
  line-height: var(--lb-t-body-s-line-height);
  color: var(--lb-fg-muted);
}
.nat-article .lb-table-wrap { align-self: flex-start; }
.nat-refs-title {
  margin: var(--lb-size-4x) 0 0;
  font-family: var(--lb-t-heading-xl-font-family);
  font-size: var(--lb-t-heading-xl-font-size);
  font-weight: var(--lb-t-heading-xl-font-weight);
  line-height: var(--lb-t-heading-xl-line-height);
  letter-spacing: var(--lb-t-heading-xl-letter-spacing);
  color: var(--lb-fg-accent);
}
.nat-refs {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--lb-size-4x);
  font-family: var(--lb-t-body-m-font-family);
  font-size: var(--lb-t-body-m-font-size);
  font-weight: var(--lb-t-body-m-font-weight);
  line-height: var(--lb-t-body-m-line-height);
  color: var(--lb-fg-subtle);
}

/* ---- leaf bullet list (product features) ---- */
.nat-leaf-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--lb-size-3x);
  max-width: 34rem; /* design-intent: 544px body measure */
}
.nat-leaf-list li {
  display: flex;
  align-items: center;
  gap: var(--lb-size-3x);
}
.nat-leaf {
  flex: none;
  width: var(--lb-size-4x);
  height: auto;
  color: var(--lb-fg-success);
}

/* ---- feature leaf list — the product's headline dose trio ---- */
.nat-leaf-list--feature { gap: var(--lb-size-2x); }
.nat-leaf-list--feature li { align-items: center; }
.nat-leaf-list--feature .nat-leaf { width: var(--lb-size-8x); }
.nat-leaf-list--feature span {
  font-family: var(--lb-t-heading-xl-font-family);
  font-size: var(--lb-t-heading-xl-font-size);
  font-weight: var(--lb-font-weight-bold);
  line-height: var(--lb-t-heading-xl-line-height);
  letter-spacing: var(--lb-t-heading-xl-letter-spacing);
  color: var(--lb-fg-accent);
}

/* ---- accent color helper (stat blocks, pull-lines outside openers) ---- */
.nat-accent { color: var(--lb-fg-accent); }

/* ---- bold accent pull-line (link-block titles, stat labels) ---- */
.nat-pull {
  margin: 0;
  font-family: var(--lb-t-heading-xl-font-family);
  font-size: var(--lb-t-heading-xl-font-size);
  font-weight: var(--lb-font-weight-bold);
  line-height: var(--lb-t-heading-xl-line-height);
  letter-spacing: var(--lb-t-heading-xl-letter-spacing);
  color: var(--lb-fg-accent);
}

/* ---- sub-block: small heading + its content, tight internal rhythm ---- */
.nat-subblock > * + * { margin-top: var(--lb-size-4x); }

/* ---- inline figure inside an opener (Concordix illustration) ---- */
.nat-figure-inline { margin: 0; max-width: 34rem; }
.nat-figure-inline img { display: block; width: 100%; height: auto; border-radius: var(--lb-radius-media); }

/* tables composed inside openers hug their content width */
.nat-opener .lb-table-wrap { align-self: flex-start; }

/* ---- inline text links ("Utforska vetenskapen" rows) ---- */
.nat-textlink {
  color: var(--lb-fg-subtle);
  text-decoration: underline;
  text-underline-offset: 0.15em; /* design-intent: optical seat */
}
.nat-textlink:hover { color: var(--lb-fg-accent); }
.nat-linklist {
  display: flex;
  flex-direction: column;
  gap: var(--lb-size-2x);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---- contact form ---- */
.nat-contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--lb-size-4x);
  align-items: flex-start;
  width: 100%;
  max-width: 34rem; /* design-intent: form rides the text measure */
}
.nat-contact-form .lb-field { width: 100%; }

/* form submit status (contact + newsletter) — inherits panel color, error goes danger */
.nat-form-status {
  margin-block: var(--lb-size-4x) 0;
  font-weight: var(--lb-font-weight-semibold);
}
.nat-form-status--error { color: var(--lb-fg-danger); }

/* ---- accordion chevron (inlined SVG instead of the runtime icon loader) ---- */
.nat-chevron svg { width: var(--lb-size-6x); height: var(--lb-size-6x); }

/* ---- journal-XL cards — image, scrim, centred title, pill CTA ---- */
.nat-journal { padding-block: var(--lb-size-16x); }
.nat-journal__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--lb-size-6x);
}
.nat-card-xl {
  position: relative;
  aspect-ratio: 8 / 11; /* design-intent: 397×544 card plate */
  overflow: hidden;
  border-radius: var(--lb-radius-media);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.nat-card-xl__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nat-card-xl::after {
  content: "";
  position: absolute;
  inset: 16% 0 0; /* design-intent: scrim covers the lower 84% of the plate */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.55)); /* design-intent scrim — no token home yet (.lb-figure gap) */
}
.nat-card-xl__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lb-size-6x);
  padding: 0 var(--lb-size-6x) var(--lb-size-12x);
  text-align: center;
  color: var(--lb-fg-inverse-strong);
}
.nat-card-xl__title {
  margin: 0;
  font-family: var(--lb-t-display-s-font-family);
  font-size: var(--lb-t-display-s-font-size);
  font-weight: var(--lb-t-display-s-font-weight);
  line-height: var(--lb-t-display-s-line-height);
  letter-spacing: var(--lb-t-display-s-letter-spacing);
}

/* ---- newsletter split — full-bleed and immersive (owner call):
   photo and navy panel run edge to edge; proportional columns keep
   the balance at any width (Design B ≈ 45/55 at 1440). ---- */
.nat-news {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  align-items: stretch;
}
.nat-news__media { min-width: 0; position: relative; min-height: 26rem; overflow: hidden; }
.nat-news__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nat-news__panel {
  min-width: 0;
  box-sizing: border-box;
  background: var(--lb-bg-accent-bolder);
  color: var(--lb-fg-inverse-strong);
  padding: var(--lb-size-24x) var(--lb-size-20x);
}
.nat-news__card {
  max-width: 34rem; /* design-intent: 544px subscribe card */
  display: flex;
  flex-direction: column;
  gap: var(--lb-size-2x);
}
.nat-news__title {
  margin: 0;
  font-family: var(--lb-t-heading-xl-font-family);
  font-size: var(--lb-t-heading-xl-font-size);
  font-weight: var(--lb-t-heading-xl-font-weight);
  line-height: var(--lb-t-heading-xl-line-height);
  letter-spacing: var(--lb-t-heading-xl-letter-spacing);
}
.nat-news__form {
  display: flex;
  flex-direction: column;
  gap: var(--lb-size-2x);
  padding-top: var(--lb-size-6x);
}
.nat-news__label { color: var(--lb-fg-inverse-strong); }
.nat-news__submit { width: 100%; }
.nat-news__fineprint {
  margin: 0;
  font-family: var(--lb-t-body-xs-font-family);
  font-size: var(--lb-t-body-xs-font-size);
  font-weight: var(--lb-t-body-xs-font-weight);
  line-height: var(--lb-t-body-xs-line-height);
  color: var(--lb-fg-inverse-muted); /* on-navy muted (Figma's fg-muted here fails contrast — spec §3) */
}

/* ---- centred-brand header (three-zone; known letbe-ds gap) ---- */
@media (min-width: 769px) { /* matches lb-header's own desktop breakpoint */
  .nat-header .lb-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  .nat-header .lb-header__nav { grid-column: 1; justify-self: start; }
  .nat-header .lb-header__brand { grid-column: 2; }
  .nat-header .lb-header__actions { grid-column: 3; justify-self: end; }
}
.nat-header .lb-header__logo img { height: var(--lb-size-8x); width: auto; display: block; }

/* ---- full-screen mobile menu (Figma 448:7122) ----
   Restyles the lb-header drawer: white full-viewport overlay, wordmark
   + centred heading-xl accent links + legal line. Behavior (focus
   trap, scroll lock, Esc) stays with lb-header.js. */
.nat-drawer.lb-header__drawer {
  inset: 0;
  width: 100%;
  box-sizing: border-box; /* stock drawer is content-box; full width + padding would overflow */
  align-items: center;
  justify-content: flex-start; /* brand top, nav centred via auto margins, legal at the bottom */
  gap: 0;
  padding: var(--lb-size-4x) var(--lb-size-6x) var(--lb-size-6x);
  background: var(--lb-surface-bg-default);
}
.nat-drawer.lb-header__drawer[hidden] { display: none; }
.nat-drawer__close {
  position: absolute;
  top: var(--lb-size-4x);
  right: var(--lb-size-4x);
}
.nat-drawer__brand { margin-top: var(--lb-size-1x); } /* sits up on the close-button row */
.nat-drawer__brand img {
  display: block;
  height: var(--lb-size-10x); /* footer-size wordmark (motif docs: 40px) */
  width: auto;
}
.nat-drawer__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lb-size-4x);
  margin-block: auto; /* centres the menu between brand and legal */
}
.nat-drawer__link {
  font-family: var(--lb-t-heading-xl-font-family);
  font-size: var(--lb-font-size-4xl); /* a size up from the design's 30 — owner call */
  font-weight: var(--lb-font-weight-regular);
  line-height: var(--lb-font-line-height-4xl);
  letter-spacing: var(--lb-t-heading-xl-letter-spacing);
  color: var(--lb-fg-accent);
  text-decoration: none;
  text-align: center;
  padding: var(--lb-size-1x) var(--lb-size-4x); /* comfortable tap target */
  border-radius: var(--lb-radius-interactive);
}
.nat-drawer__link:hover { color: var(--lb-fg-accent-muted); }
.nat-drawer__link:focus-visible {
  outline: var(--lb-border-width-medium) solid var(--lb-border-focus);
  outline-offset: var(--lb-size-0-5x);
}
.nat-drawer__link[aria-current="page"] {
  color: var(--lb-fg-accent-2); /* the brass gold (AA at this large size) */
  font-weight: var(--lb-font-weight-semibold);
  pointer-events: none; /* the open page is selected, not clickable */
  text-decoration: underline;
  text-decoration-color: var(--lb-fg-success); /* the green ink stroke marks the open page */
  text-decoration-thickness: var(--lb-size-0-5x);
  text-underline-offset: 0.18em; /* design-intent: optical seat */
}
.nat-drawer__legal {
  margin: 0;
  font-family: var(--lb-t-body-s-font-family);
  font-size: var(--lb-t-body-s-font-size); /* one step up from the design's body-xs — owner call */
  font-weight: var(--lb-t-body-s-font-weight);
  line-height: var(--lb-t-body-s-line-height);
  color: var(--lb-fg-muted);
  text-align: center;
  max-width: 20rem; /* design-intent: two-line legal block */
}

/* ---- hero CTA — Design B overrides the secondary pill to a blue outline ---- */
.nat-btn-outline-accent {
  border-color: var(--lb-bg-accent);
  color: var(--lb-fg-accent-muted);
}

/* ---- language switcher (footer legal row) ---- */
.nat-lang {
  display: flex;
  align-items: center;
  gap: var(--lb-size-4x);
}
.nat-lang__item {
  display: inline-flex;
  align-items: center;
  gap: var(--lb-size-1-5x);
  font-family: var(--lb-t-body-s-font-family);
  font-size: var(--lb-t-body-s-font-size);
  font-weight: var(--lb-t-body-s-font-weight);
  line-height: var(--lb-t-body-s-line-height);
  color: var(--lb-fg-muted);
  text-decoration: none;
  border-radius: var(--lb-radius-interactive);
}
a.nat-lang__item:hover { color: var(--lb-fg-accent); }
a.nat-lang__item:focus-visible {
  outline: var(--lb-border-width-medium) solid var(--lb-border-focus);
  outline-offset: var(--lb-size-0-5x);
}
.nat-lang__item--current {
  color: var(--lb-fg-accent-2); /* brass, same selected vocabulary as the menu */
  font-weight: var(--lb-font-weight-semibold);
  text-decoration: underline;
  text-decoration-color: var(--lb-fg-success);
  text-decoration-thickness: var(--lb-size-0-5x);
  text-underline-offset: 0.18em; /* design-intent: optical seat */
}
.nat-lang__flag {
  width: var(--lb-size-5x);
  height: auto;
  border-radius: var(--lb-radius-2);
  flex: none;
}

/* ---- footer ---- */
.nat-footer { border-top: var(--lb-size-2x) solid var(--lb-brand-2-400); } /* decorative brass rule */
.nat-footer__brand img { height: var(--lb-size-10x); width: auto; display: block; } /* footer wordmark 40px per motif docs */
@media (max-width: 768px) {
  /* stock footer narrows to size-4x here; keep the site's 24px content edge */
  .nat-footer .lb-footer__inner { padding-inline: var(--lb-size-6x); }
}

/* ---- buttons row ---- */
.nat-actions { display: flex; flex-wrap: wrap; gap: var(--lb-size-4x); align-items: center; }

/* ============================================================
   Responsive — Design B ships desktop only; behavior below is
   the derived stacking order (spec §1). One shared breakpoint
   with lb-header (920) + a phone step (600).
   ============================================================ */
@media (max-width: 920px) {
  /* type steps one size down the token ramp */
  .nat-display-xl {
    font-size: var(--lb-t-display-m-font-size);
    line-height: var(--lb-t-display-m-line-height);
    letter-spacing: var(--lb-t-display-m-letter-spacing);
  }
  .nat-display-m {
    font-size: var(--lb-t-display-s-font-size);
    line-height: var(--lb-t-display-s-line-height);
    letter-spacing: var(--lb-t-display-s-letter-spacing);
  }
  .nat-display-s {
    font-size: var(--lb-t-display-xs-font-size);
    line-height: var(--lb-t-display-xs-line-height);
    letter-spacing: var(--lb-t-display-xs-letter-spacing);
  }
  .nat-display-xs {
    font-size: var(--lb-t-heading-xl-font-size);
    line-height: var(--lb-t-heading-xl-line-height);
    letter-spacing: var(--lb-t-heading-xl-letter-spacing);
  }
  .nat-standfirst, .nat-heading-xl {
    font-size: var(--lb-t-heading-l-font-size);
    line-height: var(--lb-t-heading-l-line-height);
  }
  .nat-eyebrow__text { font-size: var(--lb-font-size-2xl); }

  /* splits stack: full-bleed image plate on top, copy below */
  .nat-split, .nat-news {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--lb-size-8x);
    padding-inline: var(--lb-size-6x);
  }
  .nat-news { gap: 0; } /* photo sticks to the navy panel (owner call) */
  .nat-split__media, .nat-news__media {
    order: -1; /* image leads regardless of DOM side */
    min-height: 0;
    aspect-ratio: 3 / 2; /* one default horizontal plate */
    margin-inline: calc(-1 * var(--lb-size-6x)); /* full-bleed, immersive like the heroes */
    border-radius: 0;
  }
  .nat-split__copy,
  .nat-split--tall .nat-split__copy { padding-block: 0 var(--lb-size-12x); }
  .nat-news__panel {
    padding: var(--lb-size-16x) var(--lb-size-6x);
    margin-inline: calc(-1 * var(--lb-size-6x)); /* navy block bleeds edge to edge */
  }

  .nat-article-grid { grid-template-columns: minmax(0, 1fr); gap: var(--lb-size-8x); padding-inline: var(--lb-size-6x); }
  .nat-article-hero { padding-top: 0; } /* hero image sits flush under the header */
  .nat-article-hero__media {
    order: -1; /* image leads on small screens */
    aspect-ratio: 3 / 2; /* horizontal plate, one default size for every article regardless of source format */
    margin-inline: calc(-1 * var(--lb-size-6x)); /* full-bleed: escape the grid padding, immersive like the Home hero */
    border-radius: 0;
  }

  .nat-stats { grid-template-columns: repeat(2, 1fr); row-gap: var(--lb-size-8x); }
  .nat-stats__item:nth-child(odd) { border-left: none; padding-left: 0; }

  .nat-journal__grid { grid-template-columns: 1fr; }
  .nat-card-xl { aspect-ratio: 4 / 3; } /* stacked cards go landscape */
  .nat-card-xl__title {
    font-size: var(--lb-t-heading-xl-font-size);
    line-height: var(--lb-t-heading-xl-line-height);
  }

  .nat-hero { min-height: 28rem; } /* design-intent: shorter hero band on small screens */
}

@media (max-width: 600px) {
  .nat-stats { grid-template-columns: 1fr; row-gap: var(--lb-size-6x); }
  .nat-stats__item { border-left: none; padding-left: 0; }
}