/* Cyber Central Command — page layout on top of the Nocturne system.
   Layout grids live here as classes (so media queries can collapse them);
   decorative values stay inline in the pages, copied from the design. */

.wrap { max-width: 1180px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }

/* — header — */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-divider);
}
.site-header .nav { max-width: 1180px; margin: 0 auto; padding: 14px 32px; gap: 20px 28px; flex-wrap: wrap; }
.site-header .nav-links { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; row-gap: 8px; }
.site-header .nav-links a { font-size: 13px; letter-spacing: 0.02em; text-decoration: none; padding: 6px 0; white-space: nowrap; }

/* — hero — */
.hero-grid {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 72px; align-items: start;
  padding-top: 108px; padding-bottom: 88px;
}

/* — home sections — */
.band-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; padding-top: 44px; padding-bottom: 44px; }
.cards-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.crosswalk-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }

/* — capabilities — */
.cap-article {
  border: 1px solid var(--color-divider); border-radius: var(--radius-lg);
  padding: 32px; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 240px; gap: 40px;
  background: color-mix(in srgb, var(--color-surface) 45%, transparent);
}

/* — past performance — */
.past-row {
  display: grid; grid-template-columns: 190px minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 44px; padding: 32px 0;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
}

/* — contact — */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; }
.form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* — nist tabs — */
.tab-panel[hidden] { display: none; }

/* — footer — */
.footer-grid {
  max-width: 1180px; margin: 0 auto; padding: 46px 32px 34px;
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 48px;
}

/* — responsive collapse — */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; padding-top: 64px; padding-bottom: 56px; }
  .cards-3 { grid-template-columns: 1fr 1fr; }
  .cap-article { grid-template-columns: 1fr; gap: 24px; }
  .crosswalk-grid { grid-template-columns: 1fr; gap: 32px; }
  .past-row { grid-template-columns: 1fr; gap: 16px; }
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .band-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 620px) {
  .cards-3 { grid-template-columns: 1fr; }
  .band-grid { grid-template-columns: 1fr; }
  .form-2col { grid-template-columns: 1fr; }
  .wrap { padding-left: 20px; padding-right: 20px; }
  .site-header .nav { padding-left: 20px; padding-right: 20px; }
  h1 { font-size: 36px !important; }
}

/* — tables scroll instead of crushing on narrow screens — */
.table-scroll { overflow-x: auto; }
.table-scroll .table { min-width: 720px; }