/* ============================================================
   TRIPLEX LINERS — V2 · NAVIGATION
   Answers "they may have a reason to see something specific."
   Two layers:
     1. Site nav — always reachable, transparent over the hero,
        solid the moment you scroll. Never traps anyone in the story.
     2. Section jump bar — appears after the hero on long pages so a
        visitor who came for one thing can skip straight to it.
   ============================================================ */

.tlp-nav { position: fixed; inset: 0 0 auto 0; z-index: 60;
  transition: background var(--tlp-dur) var(--tlp-ease),
              box-shadow var(--tlp-dur) var(--tlp-ease),
              backdrop-filter var(--tlp-dur) var(--tlp-ease); }
.tlp-nav__in { display: flex; align-items: center; gap: var(--tlp-4);
  max-width: var(--tlp-container-wide); margin-inline: auto;
  padding: 14px var(--tlp-3); }
/* The logo is a dark navy wordmark, so on a dark header it sits on a white
   plate rather than being recoloured. The mark ships as drawn. */
.tlp-nav__mark { display: inline-flex; align-items: center; margin-right: auto;
  background: #fff; border-radius: 3px; padding: 7px 11px; line-height: 0;
  box-shadow: 0 1px 0 rgba(0,0,0,.12); }
.tlp-nav__mark img { height: 30px; width: auto; display: block; }
@media (min-width: 700px) { .tlp-nav__mark img { height: 36px; } }
.tlp-nav__links { display: none; gap: var(--tlp-3); align-items: center; }
@media (min-width: 1000px) { .tlp-nav__links { display: flex; } }
.tlp-nav__links a { color: var(--tlp-inverse-ink); text-decoration: none;
  font-size: var(--tlp-size-sm); font-weight: 500; padding: 10px 2px;
  border-bottom: 2px solid transparent; transition: border-color 260ms var(--tlp-ease); }
.tlp-nav__links a:hover, .tlp-nav__links a[aria-current] { border-bottom-color: var(--tlp-accent); }
.tlp-nav__cta { display: none; }
@media (min-width: 1000px) { .tlp-nav__cta { display: inline-flex; min-height: 44px;
  padding: 0 18px; font-size: var(--tlp-size-sm); } }

.tlp-nav.is-stuck { background: rgba(11,18,30,.94); backdrop-filter: saturate(140%) blur(10px);
  box-shadow: 0 1px 0 rgba(255,255,255,.10); }

/* mobile drawer */
.tlp-nav__toggle { display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.32); border-radius: 2px;
  background: transparent; color: var(--tlp-inverse-ink); cursor: pointer; }
@media (min-width: 1000px) { .tlp-nav__toggle { display: none; } }
.tlp-nav__toggle span { display: block; width: 20px; height: 2px; background: currentColor;
  position: relative; }
.tlp-nav__toggle span::before, .tlp-nav__toggle span::after { content: ""; position: absolute;
  left: 0; width: 20px; height: 2px; background: currentColor; }
.tlp-nav__toggle span::before { top: -6px; } .tlp-nav__toggle span::after { top: 6px; }

.tlp-drawer { position: fixed; inset: 0; z-index: 70; background: rgba(11,18,30,.98);
  display: flex; flex-direction: column; padding: var(--tlp-3);
  opacity: 0; visibility: hidden; transition: opacity 300ms var(--tlp-ease), visibility 300ms; }
.tlp-drawer.is-open { opacity: 1; visibility: visible; }
.tlp-drawer__close { align-self: flex-end; width: 46px; height: 46px; background: none;
  border: 1px solid rgba(255,255,255,.32); color: #fff; font-size: 22px; cursor: pointer; }
.tlp-drawer nav { display: flex; flex-direction: column; gap: 4px; margin-top: var(--tlp-4); }
.tlp-drawer nav a { color: #fff; text-decoration: none; font-family: var(--tlp-font-display);
  font-size: 1.55rem; padding: 14px 4px; border-bottom: 1px solid rgba(255,255,255,.12); }

/* ---------- Section jump bar ---------- */
.tlp-jump { position: sticky; top: 64px; z-index: 40;
  background: var(--tlp-paper); border-bottom: 1px solid var(--tlp-line); }
.tlp-jump__in { display: flex; gap: var(--tlp-1); overflow-x: auto; scrollbar-width: none;
  max-width: var(--tlp-container); margin-inline: auto; padding: 10px var(--tlp-3); }
.tlp-jump__in::-webkit-scrollbar { display: none; }
.tlp-jump a { flex: none; font-size: var(--tlp-size-sm); font-weight: 500; text-decoration: none;
  color: var(--tlp-ink-soft); padding: 10px 14px; border-radius: 999px; white-space: nowrap;
  border: 1px solid transparent; transition: color 240ms, border-color 240ms, background 240ms; }
.tlp-jump a:hover { color: var(--tlp-ink); border-color: var(--tlp-line); }
.tlp-jump a.is-active { color: var(--tlp-ink); border-color: var(--tlp-accent);
  background: color-mix(in srgb, var(--tlp-accent) 10%, transparent); }

.tlp-root { scroll-padding-top: 120px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }