.site-header {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 30px;
  min-height: 92px;
  border-bottom: 1px solid var(--color-line-dark);
}

.brand-mark-lockup { display: inline-flex; align-items: center; gap: 11px; width: max-content; font-size: 0.95rem; font-weight: 800; letter-spacing: 0.12em; }
.brand-symbol { position: relative; width: 19px; height: 19px; border: 4px solid var(--color-signal); border-radius: 50%; }
.brand-symbol::after { position: absolute; inset: 50% auto auto 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--color-signal); content: ""; transform: translate(-50%, -50%); }

.desktop-nav { display: flex; align-items: center; gap: clamp(24px, 3vw, 44px); color: var(--color-fog); font: 500 0.68rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.desktop-nav a, .header-cta, .text-link { transition: color 180ms ease; }
.desktop-nav a:hover { color: var(--color-white); }

.header-cta { justify-self: end; display: flex; align-items: center; gap: 10px; color: var(--color-mint); font: 500 0.66rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.header-cta:hover { color: var(--color-signal); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-signal); box-shadow: 0 0 0 5px rgba(203,255,79,.1), 0 0 18px var(--color-signal); }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 52px; padding: 14px 20px; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out), background 180ms ease; }
.button-primary { background: var(--color-signal); color: var(--color-ink); }
.button-primary:hover { box-shadow: var(--shadow-glow); transform: translateY(-2px); }
.button-secondary { border-color: var(--color-line-dark); background: transparent; color: var(--color-mint); }
.button-secondary:hover { border-color: var(--color-signal); color: var(--color-signal); }
.text-link { display: inline-flex; align-items: center; gap: 11px; border: 0; background: transparent; color: var(--color-ink); font-size: 0.8rem; font-weight: 750; }
.text-link:hover { color: #4a6817; }
.text-link-light { color: var(--color-mint); }
.text-link-light:hover { color: var(--color-signal); }

.mobile-nav { display: none; justify-self: end; }
.mobile-nav-toggle { position: relative; z-index: 22; display: grid; align-content: center; gap: 6px; width: 42px; height: 42px; padding: 9px; border: 1px solid var(--color-line-dark); border-radius: var(--radius-sm); background: rgba(6, 19, 15, .88); }
.mobile-nav-toggle span { display: block; width: 100%; height: 1px; background: var(--color-mint); transition: transform 180ms ease; }
.mobile-nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.mobile-nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.mobile-menu { position: fixed; inset: 0; z-index: 21; display: flex; visibility: hidden; flex-direction: column; align-items: flex-start; gap: 28px; padding: 118px var(--page-gutter) 40px; opacity: 0; background: rgba(3, 11, 8, .98); color: var(--color-mint); font-size: 1.8rem; font-weight: 650; transition: opacity 180ms ease, visibility 180ms ease; }
.mobile-menu.is-open { visibility: visible; opacity: 1; }
.mobile-menu .button { margin-top: auto; font-size: .78rem; }

.site-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; padding-block: 38px; border-top: 1px solid var(--color-line-dark); color: var(--color-fog); font: 0.64rem/1.4 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.site-footer .brand-mark-lockup { color: var(--color-white); font-family: var(--font-sans); font-size: .78rem; text-transform: none; }
.site-footer > p { text-align: center; }
.site-footer > div { display: flex; justify-content: flex-end; gap: 28px; }

@media (max-width: 940px) {
  .site-header { grid-template-columns: 1fr auto; }
  .desktop-nav, .header-cta { display: none; }
  .mobile-nav { display: block; }
  .site-footer { grid-template-columns: 1fr 1fr; }
  .site-footer > p { display: none; }
}

@media (max-width: 600px) {
  .site-header { min-height: 76px; }
  .brand-mark-lockup { font-size: .78rem; letter-spacing: .08em; }
  .site-footer { grid-template-columns: 1fr; }
  .site-footer > div { justify-content: flex-start; }
}