/* 16cyber.com, v3: the sections of NASA's example holder website, in 16 Cyber's look.
   Royal blue (#0033CC) carries text and structure.
   Orange (#FF6600) is for rules, tile top edges and one dot only. Never text:
   orange text fails the contrast check. */

/* Self-hosted Barlow (OFL license), latin subset only. No third-party font call. */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/barlow-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/barlow-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/barlow-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/barlow-700.woff2') format('woff2');
}

:root {
  --blue: #0033CC;
  --blue-dark: #00227a;
  --orange: #FF6600;
  --ink: #141414;
  --ink-muted: #44494f;
  --line: #d9dde3;
  --field: #6b7380;
  --paper: #ffffff;
  --paper-tint: #f5f7fb;
  --foot-ink: #e9edf7;
  --foot-muted: #c9d3ee;
  --max: 1080px;
  --gutter: 24px;
  --header-h: 120px;
  --font: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* A variable that is not filled yet carries the hidden attribute. This rule
   makes hidden win over every display rule below, so a hidden row, tile or
   line can never show on the live page. */
[hidden] {
  display: none !important;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  font-size: 17px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--blue);
  text-underline-offset: 2px;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--blue);
  color: #fff;
  padding: 12px 18px;
  z-index: 100;
  border-radius: 0 0 6px 0;
}

.skip-link:focus {
  left: 0;
}

.wrap {
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

h1,
h2 {
  color: var(--ink);
  font-weight: 700;
}

h1 {
  font-size: clamp(33px, 4.6vw, 52px);
  line-height: 1.08;
  margin: 0 0 14px;
}

h2 {
  font-size: clamp(25px, 3vw, 30px);
  line-height: 1.2;
  margin: 0 0 12px;
}

p {
  margin: 0 0 14px;
  color: var(--ink-muted);
}

.email {
  color: var(--ink);
  font-weight: 600;
}

/* ===== Identity strip + header ===== */
/* The dark-blue band with its orange rule, now without text (owner, 10-12). */
.id-strip {
  height: 13px;
  background: var(--blue-dark);
  border-bottom: 3px solid var(--orange);
}

/* Sticky header (owner, 10-12). CSS only: it stays at the top while the
   page scrolls (static cut, 10-13). */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

/* Jump targets (the skip link's #main and every section) clear the sticky
   header's height. */
#main,
main section[id] {
  scroll-margin-top: var(--header-h);
}

.head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  padding-top: 22px;
  padding-bottom: 22px;
}

.logo {
  width: 196px;
  flex: none;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-left: auto;
  font-size: 16px;
  font-weight: 500;
}

.nav a {
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 4px;
}

.nav a:hover {
  box-shadow: inset 0 -3px 0 var(--orange);
}

/* ===== Section scaffolding ===== */
.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  padding-bottom: 8px;
  border-bottom: 3px solid var(--orange);
  margin-bottom: 18px;
}

.sec {
  padding: 56px 0;
}

.sec-tint {
  background: var(--paper-tint);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.intro {
  max-width: 700px;
}

/* ===== 1. Top ===== */
.hero {
  background: var(--paper-tint);
  border-bottom: 1px solid var(--line);
  padding: 56px 0 50px;
}

.hero h1 {
  margin: 0;
}

/* The contract number, shown once it is in writing. */
.hero-contract {
  display: inline-block;
  margin: 24px 0 0;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--orange);
  border-radius: 0 0 8px 8px;
  padding: 14px 18px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.hero-contract span {
  display: block;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 4px;
}

/* ===== 3. Fair opportunity: the A.1.13 clause ===== */
.clause {
  max-width: 760px;
  border-left: 3px solid var(--orange);
  background: var(--paper);
  padding: 16px 20px;
  margin: 8px 0 0;
  font-size: 15px;
}

/* ===== 4, 5, 6. The cards: SEWP help desk, contract information, contacts ===== */
.card {
  max-width: 860px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  margin: 24px 0 0;
}

.after-card {
  margin: 18px 0 0;
}

.fact {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 4px 24px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
}

/* Stripes and the top rule count only the rows that are shown, so the card
   reads the same whichever variables are still hidden. */
.fact:nth-child(1 of :not([hidden])) {
  border-top: none;
}

.fact:nth-child(odd of :not([hidden])) {
  background: var(--paper-tint);
}

.fact dt {
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--blue);
  padding-top: 2px;
}

.fact dd {
  margin: 0;
  color: var(--ink);
}

/* ===== 8. Vendors ===== */
.brands {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.brands li {
  min-height: 74px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 8px;
  font-size: 13px;
  line-height: 1.3;
  border: 1px solid var(--line);
  border-radius: 8px;
}

/* ===== Footer ===== */
footer.site-footer {
  background: var(--blue-dark);
  color: var(--foot-ink);
  border-top: 3px solid var(--orange);
  padding: 42px 0 26px;
  font-size: 15px;
  line-height: 1.6;
}

.site-footer p {
  color: var(--foot-ink);
  margin: 0 0 8px;
}

.site-footer :focus-visible {
  outline-color: #fff;
}

.fcols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}

.flogo {
  width: 150px;
  background: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  margin-bottom: 12px;
}

.fids {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* The links line: small and light on the dark footer. */
.site-footer .frefs {
  font-size: 14px;
  color: var(--foot-muted);
}

.frefs a {
  color: var(--foot-ink);
}

.fids li {
  margin: 0 0 6px;
}

.fh {
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.site-footer .fh {
  color: #fff;
  margin-bottom: 2px;
}

.fbase {
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  margin-top: 28px;
  padding-top: 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 24px;
  font-size: 13.5px;
  color: var(--foot-muted);
}

/* ===== Narrower screens ===== */
@media (max-width: 900px) {
  /* The logo and the nav share one row here too (nowrap keeps them side by
     side down to 601px). Below about 740px the four links wrap to two lines
     and the header grows to about 124px, so jump targets clear 128px. */
  :root {
    --header-h: 128px;
  }

  .head-row {
    flex-wrap: nowrap;
  }

  .brands {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Phone (the book's 375-pixel layout): menu links drop, the logo stays alone. */
@media (max-width: 600px) {
  :root {
    --gutter: 16px;
    --header-h: 90px;
  }

  .head-row {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .logo {
    width: 138px;
  }

  .nav {
    display: none;
  }

  .hero {
    padding: 30px 0;
  }

  .hero-contract {
    display: block;
    padding: 11px 14px;
    font-size: 19px;
  }

  .sec {
    padding: 38px 0;
  }

  .fact {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    padding: 12px 14px;
  }

  .brands {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  footer.site-footer {
    padding-top: 32px;
  }

  .fcols {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
}