/* SWC Solutions: institutional, dense, documentary, high-contrast, unsentimental.
   No webfonts on purpose: government workstations are often locked down and
   offline-hostile. System stacks render instantly and never flash. */

:root {
  color-scheme: light dark;

  --paper:      #fbfaf7;
  --surface:    #ffffff;
  --surface-2:  #f4f2ec;
  --ink:        #12161c;
  --ink-2:      #414a57;
  --ink-3:      #5f6875;
  --rule:       #d9d5cc;
  --rule-hard:  #b9b3a6;
  --navy:       #16314f;
  --navy-deep:  #0d1f34;
  --brass:      #7a5a12;
  --brass-lift: #a8802a;
  --brass-wash: #f6efdd;
  --on-brass:   #ffffff;

  --ok:      #2c6742;
  --ok-wash: #e7f1ea;
  --wait:      #8a5509;
  --wait-wash: #fbeedb;
  --off:      #5f6875;
  --off-wash: #eeece7;

  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Charter, "Bitstream Charter", Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --measure: 68ch;
  --gut: 1.5rem;
  --max: 76rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:     #0e1116;
    --surface:   #151a21;
    --surface-2: #1b212a;
    --ink:       #e9e7e2;
    --ink-2:     #b3b8c0;
    --ink-3:     #8b929c;
    --rule:      #2a313b;
    --rule-hard: #3c4552;
    --navy:      #9dc0e8;
    --navy-deep: #0a121c;
    --brass:      #d9ae52;
    --brass-lift: #e5c072;
    --brass-wash: #2a2315;
    --on-brass:   #12161c;

    --ok:      #77c295;
    --ok-wash: #16281d;
    --wait:      #e0ae62;
    --wait-wash: #2c2113;
    --off:      #8b929c;
    --off-wash: #1e232b;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---------- typography ---------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.35rem); }
h4 { font-size: 1rem; }

p, li { text-wrap: pretty; }
p { margin: 0 0 1em; max-width: var(--measure); }

a { color: var(--brass); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--brass-lift);
  outline-offset: 2px;
  border-radius: 1px;
}

strong, b { font-weight: 600; }

code, .mono { font-family: var(--font-mono); font-size: .9em; font-variant-ligatures: none; }

.eyebrow {
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 .75rem;
}
.lede { font-size: 1.12rem; color: var(--ink-2); max-width: 62ch; }
.small { font-size: .85rem; color: var(--ink-3); }
.tight { max-width: 58ch; }

/* ---------- layout ---------- */

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--ink); color: var(--paper); padding: .6rem 1rem; font-weight: 600;
}
.skip:focus { left: .5rem; top: .5rem; }

section { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
section + section { border-top: 1px solid var(--rule); }
section.snug { padding-block: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); }
section.band { background: var(--surface-2); }

.grid { display: grid; gap: clamp(1.25rem, 1rem + 1vw, 2rem); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.split { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 62rem) { .split { grid-template-columns: 1.35fr 1fr; align-items: start; } }

/* ---------- masthead ---------- */

.masthead { background: var(--surface); border-bottom: 2px solid var(--ink); }
.masthead-top {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: flex-end; justify-content: space-between;
  padding-block: 1rem .85rem;
}
.wordmark { display: inline-flex; align-items: baseline; gap: .55rem; text-decoration: none; color: inherit; }
.wordmark .mark {
  font-family: var(--font-display);
  font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink);
}
.wordmark .sub {
  font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--brass);
}
.wordmark:hover .mark { color: var(--brass); }

.mast-data { display: flex; flex-wrap: wrap; gap: .25rem 1.4rem; font-size: .74rem; }
.mast-data div { display: flex; gap: .4rem; align-items: baseline; }
.mast-data dt, .mast-data .k {
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-size: .68rem;
}
.mast-data dd, .mast-data .v { margin: 0; font-family: var(--font-mono); color: var(--ink); font-size: .78rem; }

/* ---------- nav ---------- */

nav.primary { border-top: 1px solid var(--rule); }
nav.primary ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0 .25rem;
}
nav.primary a {
  display: block; padding: .7rem .7rem; font-size: .87rem; font-weight: 500;
  color: var(--ink-2); text-decoration: none; border-bottom: 3px solid transparent;
}
nav.primary a:hover { color: var(--ink); background: var(--surface-2); }
nav.primary a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--brass); font-weight: 600; }

/* ---------- hero (deliberately not a centered hero) ---------- */

.hero { background: var(--surface); border-bottom: 1px solid var(--rule); }
.hero .wrap { padding-block: clamp(2rem, 1.25rem + 3vw, 3.75rem); }
.hero h1 { max-width: 22ch; }
.hero .lede { font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); }

.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

.btn {
  display: inline-block; padding: .7rem 1.15rem; font-size: .9rem; font-weight: 600;
  text-decoration: none; border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
}
.btn:hover { background: var(--brass); border-color: var(--brass); color: var(--on-brass); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }

/* ---------- panels, callouts ---------- */

.panel { background: var(--surface); border: 1px solid var(--rule); padding: 1.25rem 1.35rem; }
.panel > :last-child { margin-bottom: 0; }
.panel h3 { margin-top: 0; }

.callout {
  background: var(--brass-wash); border-left: 4px solid var(--brass);
  padding: 1.1rem 1.25rem; margin-block: 1.5rem;
}
.callout > :last-child { margin-bottom: 0; }
.callout h3 { margin-top: 0; font-size: 1.1rem; }

.note {
  border-left: 3px solid var(--rule-hard); padding: .35rem 0 .35rem 1rem;
  color: var(--ink-2); font-size: .9rem; margin-block: 1.25rem;
}
.note > :last-child { margin-bottom: 0; }

/* ---------- spec table (the document-cover-sheet look) ---------- */

.spec { border: 1px solid var(--ink); background: var(--surface); }
.spec caption, .spec-head {
  caption-side: top; text-align: left;
  background: var(--ink); color: var(--paper);
  font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  padding: .55rem .85rem;
}
.spec dl, .spec-body { margin: 0; }
.spec .row {
  display: grid; grid-template-columns: minmax(8.5rem, 38%) 1fr;
  gap: 0 1rem; padding: .6rem .85rem; border-top: 1px solid var(--rule);
}
.spec .row:first-of-type { border-top: 0; }
.spec dt, .spec .k {
  font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); align-self: center;
}
.spec dd, .spec .v { margin: 0; font-size: .9rem; }
.spec .v .mono, .spec .v code { font-size: .95em; letter-spacing: .02em; }

/* ---------- status pills ---------- */

.status {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .74rem; font-weight: 600; letter-spacing: .02em;
  padding: .18rem .5rem; border: 1px solid currentColor; white-space: nowrap;
}
.status::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; flex: none; }
.status.is-active { color: var(--ok); background: var(--ok-wash); }
.status.is-pending { color: var(--wait); background: var(--wait-wash); }
.status.is-assigned { color: var(--ok); background: var(--ok-wash); }
.status.is-off { color: var(--off); background: var(--off-wash); }

/* ---------- code chips ---------- */

.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.chip {
  font-family: var(--font-mono); font-size: .78rem;
  border: 1px solid var(--rule-hard); background: var(--surface);
  padding: .18rem .45rem; white-space: nowrap; color: var(--ink);
}
.chip.is-naics { border-color: var(--ink); font-weight: 600; }
.chip.is-webs { border-color: var(--brass); color: var(--brass); }
.chip.is-psc { border-color: var(--navy); color: var(--navy); }

/* ---------- service lanes ---------- */

.lane {
  background: var(--surface); border: 1px solid var(--rule); border-left: 5px solid var(--ink);
  padding: 1.4rem 1.5rem; display: flex; flex-direction: column;
}
.lane h3 { margin-bottom: .35rem; }
.lane .lane-lead { color: var(--ink-2); font-size: .95rem; }
.lane .lane-foot { margin-top: auto; padding-top: 1rem; }
.lane--millwork { border-left-color: var(--brass); }
.lane--consulting { border-left-color: var(--navy); }
.lane--training { border-left-color: var(--ok); }

.cap-list { list-style: none; margin: 0; padding: 0; }
.cap-list li { padding: .85rem 0; border-top: 1px solid var(--rule); }
.cap-list li:first-child { border-top: 0; }
.cap-list .cap-name { font-weight: 600; display: block; margin-bottom: .15rem; }
.cap-list .cap-detail { color: var(--ink-2); font-size: .93rem; margin: 0; max-width: var(--measure); }

/* ---------- procurement ladder ---------- */

.ladder { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.ladder > li { border-bottom: 1px solid var(--rule); padding: 1.1rem 0; }
.ladder .band {
  font-family: var(--font-mono); font-size: .85rem; font-weight: 600; color: var(--brass);
  display: block; margin-bottom: .15rem;
}
.ladder .rung-name { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; margin: 0 0 .4rem; }
.ladder .auth { font-size: .8rem; color: var(--ink-3); margin: .5rem 0 0; }
.ladder p { font-size: .93rem; margin-bottom: .5rem; }
.ladder .fit { font-size: .9rem; color: var(--ink-2); border-left: 3px solid var(--rule-hard); padding-left: .85rem; margin: .75rem 0 0; }

.gate {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .15rem .45rem; border: 1px solid currentColor; float: right; margin-left: 1rem;
}
.gate.open { color: var(--ok); background: var(--ok-wash); }
.gate.locked { color: var(--wait); background: var(--wait-wash); }

/* ---------- WA direct buy levels ---------- */

.levels { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.level { border: 1px solid var(--rule); background: var(--surface); padding: 1.1rem 1.2rem; }
.level .level-no { font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
.level .level-band { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 600; display: block; margin: .3rem 0 .5rem; }
.level p { font-size: .9rem; margin-bottom: 0; }
.level .who { font-weight: 600; font-size: .9rem; display: block; margin-bottom: .5rem; }
.level--hot {
  border: 2px solid var(--brass); background: var(--brass-wash);
  box-shadow: none; position: relative;
}
.level--hot .level-band, .level--hot .level-no { color: var(--brass); }
.level--hot .flag {
  position: absolute; top: -.7rem; left: 1rem;
  background: var(--brass); color: var(--on-brass); font-size: .65rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; padding: .2rem .5rem;
}

/* ---------- data tables ---------- */

.table-scroll { overflow-x: auto; border: 1px solid var(--rule); background: var(--surface); }
table.data { border-collapse: collapse; width: 100%; font-size: .88rem; min-width: 52rem; }
table.data caption { text-align: left; padding: .75rem .85rem; font-size: .85rem; color: var(--ink-2); border-bottom: 1px solid var(--rule); }
table.data th, table.data td { text-align: left; padding: .65rem .85rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.data thead th {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--paper); background: var(--ink); border-bottom: 0; position: sticky; top: 0;
}
table.data tbody tr:hover { background: var(--surface-2); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data .naics-cell { min-width: 13rem; }
table.data .naics-code { font-family: var(--font-mono); font-weight: 700; font-size: .95rem; display: block; white-space: nowrap; }
table.data .naics-title { font-size: .8rem; color: var(--ink-2); display: block; max-width: 22ch; }
table.data ul { margin: 0; padding: 0; list-style: none; }
table.data ul li { padding: .15rem 0; }
table.data .code-k { font-family: var(--font-mono); font-weight: 600; }
table.data .code-t { color: var(--ink-2); font-size: .82rem; }

.tier {
  font-size: .64rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  padding: .1rem .4rem; border: 1px solid var(--rule-hard); color: var(--ink-3); white-space: nowrap;
  display: inline-block;
}
.tier.is-primary { border-color: var(--brass); color: var(--brass); background: var(--brass-wash); }

/* ---------- code finder controls ---------- */

.finder { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end; margin-bottom: 1.25rem; }
.field { display: flex; flex-direction: column; gap: .3rem; }
.field label { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.field input, .field select {
  font: inherit; font-size: .92rem; padding: .5rem .65rem;
  border: 1px solid var(--rule-hard); background: var(--surface); color: var(--ink); min-width: 15rem;
}
.field input:focus-visible, .field select:focus-visible { outline: 2px solid var(--brass-lift); outline-offset: 1px; }
.finder .count { font-size: .85rem; color: var(--ink-2); padding-bottom: .55rem; }
.finder button {
  font: inherit; font-size: .85rem; padding: .5rem .8rem; cursor: pointer;
  border: 1px solid var(--rule-hard); background: var(--surface-2); color: var(--ink);
}
.finder button:hover { border-color: var(--ink); }
.no-js-hide { display: none; }
.js .no-js-hide { display: flex; }

/* ---------- buyers ---------- */

.buyers { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.buyers li {
  display: grid; gap: .15rem 1rem; padding: .8rem 0; border-bottom: 1px solid var(--rule);
  grid-template-columns: 1fr;
}
@media (min-width: 46rem) { .buyers li { grid-template-columns: 1.6fr 1fr auto; align-items: baseline; } }
.buyers .b-name { font-weight: 600; }
.buyers .b-sub { color: var(--ink-3); font-size: .85rem; }
.buyers .b-dist { font-family: var(--font-mono); font-size: .82rem; color: var(--ink-2); }

/* ---------- footer ---------- */

footer.site {
  background: var(--navy-deep); color: #c9d3de; border-top: 3px solid var(--brass);
  padding-block: 2.5rem 2rem; margin-top: 0;
}
footer.site a { color: #e8d5a8; }
footer.site a:hover { color: #fff; }
footer.site h2 { font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: #8fa3b8; font-family: var(--font-body); font-weight: 700; margin-bottom: .8rem; }
footer.site ul { list-style: none; margin: 0; padding: 0; }
footer.site li { padding: .2rem 0; font-size: .9rem; }
footer.site .foot-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
footer.site .legal {
  margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid #223449;
  font-size: .8rem; color: #8fa3b8;
}
footer.site .legal p { max-width: 80ch; }
footer.site .foot-mark { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: #fff; }

/* ---------- print ----------
   A capability statement that runs nine pages is not a capability statement.
   Page-break-inside on whole sections was the culprit: a section taller than
   one sheet pushes the entire block to the next page and leaves a gap. Break
   avoidance belongs on components, not on sections. */

@page { margin: 0.5in 0.55in; }

@media print {
  :root {
    --paper: #fff; --surface: #fff; --surface-2: #fff;
    --ink: #000; --ink-2: #1f1f1f; --ink-3: #404040;
    --rule: #9a9a9a; --rule-hard: #6a6a6a;
    --brass: #000; --brass-lift: #000; --brass-wash: #f0ede4; --on-brass: #fff;
    --navy: #000; --navy-deep: #fff;
    --ok: #000; --wait: #000; --off: #333;
    --ok-wash: #f2f2f2; --wait-wash: #f2f2f2; --off-wash: #f2f2f2;
  }

  html, body { background: #fff; color: #000; font-size: 9pt; line-height: 1.34; }

  nav.primary, .hero-actions, .finder, .skip, .no-print,
  footer.site .foot-grid, .masthead .mast-data { display: none !important; }

  a { color: #000; text-decoration: none; }
  a[href^="http"]::after { content: " " attr(href); font-size: 7pt; color: #444; word-break: break-all; }
  a[href^="mailto"]::after, a[href^="#"]::after, .btn::after { content: none; }

  .masthead { border-bottom: 1.5pt solid #000; }
  .masthead-top { padding-block: 0 .3rem; }
  .wordmark .mark { font-size: 15pt; }

  section, section.snug, section.band { padding-block: .45rem; border-top: .5pt solid var(--rule); break-inside: auto; }
  section.band { background: #fff; }
  .hero { border-bottom: .5pt solid var(--rule); }
  .hero .wrap { padding-block: .3rem .5rem; }

  h1 { font-size: 17pt; margin-bottom: .2em; }
  h2 { font-size: 12pt; margin: .45em 0 .25em; }
  h3, .ladder .rung-name { font-size: 10pt; margin-bottom: .2em; }
  h1, h2, h3 { break-after: avoid; }
  p { margin-bottom: .45em; max-width: none; }
  .lede { font-size: 9.5pt; max-width: none; }
  .small, .cap-detail, .code-t, .auth { font-size: 8pt; }
  .eyebrow { font-size: 6.5pt; margin-bottom: .3rem; }

  .split { grid-template-columns: 1.3fr 1fr; gap: 1rem; }
  .grid { gap: .7rem; }
  .g3 { grid-template-columns: repeat(3, 1fr); }
  .g2 { grid-template-columns: repeat(2, 1fr); }

  .panel, .level, .spec, .lane, .callout, .note { break-inside: avoid; border-color: var(--rule) !important; }
  .panel, .lane, .level { padding: .55rem .65rem; }
  .callout { background: var(--brass-wash) !important; border-left: 2pt solid #000 !important; padding: .55rem .7rem; }
  .spec .row { padding: .28rem .6rem; }
  .spec caption, .spec-head { padding: .3rem .6rem; font-size: 6.5pt; background: #000 !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .cap-list li, .ladder > li, .buyers li { padding: .35rem 0; break-inside: avoid; }
  .chip, .status, .tier, .gate { border-color: #666 !important; background: #fff !important; color: #000 !important; }
  .status::before { background: #000; }

  .table-scroll { overflow: visible; border-color: var(--rule); }
  table.data { min-width: 0; font-size: 7.5pt; }
  table.data th, table.data td { padding: .3rem .45rem; }
  table.data thead { display: table-header-group; }
  table.data thead th { background: #e8e8e8 !important; color: #000 !important; border-bottom: .75pt solid #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; position: static; }
  table.data tr { break-inside: avoid; }
  table.data .naics-title { max-width: none; }

  footer.site { background: #fff !important; color: #000; border-top: 1pt solid #000; padding-block: .5rem; }
  footer.site .legal { margin-top: .3rem; padding-top: .3rem; border-top: 0; color: #333; font-size: 7pt; }
  footer.site .legal p { max-width: none; margin-bottom: .3em; }

  /* The capability statement is the page people actually print. Two sheets. */
  .page-capabilities .hero .lede { font-size: 9pt; }
  .page-capabilities .cap-list { columns: 2; column-gap: 1.2rem; }
  .page-capabilities .cap-list li { break-inside: avoid; padding: .25rem 0; }
  .page-capabilities .ladder { columns: 2; column-gap: 1.2rem; border-top: 0; }
  .page-capabilities .ladder > li { border-bottom: .5pt solid var(--rule); padding: .25rem 0; }
  .page-capabilities .ladder .gate { float: none; margin: 0 0 0 .3rem; }
}
