/* ==========================================================================
   ND3 ATS JV — NASA SEWP VI Contract Holder page
   --------------------------------------------------------------------------
   Palette is taken from the two logos this page carries:
     --red    sampled from the ND3 | ATS JV mark
     --purple sampled from the NASA SEWP VI Contract Holder logo
   Purple is used ONLY where the SEWP program itself is being identified,
   so colour carries meaning rather than decoration. Keep it that way.

   Contrast: every foreground/background pair below meets WCAG 2.1 AA
   (4.5:1 for body text, 3:1 for large text and UI boundaries).
   ========================================================================== */

:root {
  --ink:        #16161A;
  --ink-2:      #4C4C4C;
  --paper:      #FFFFFF;
  --paper-2:    #F4F4F6;
  --rule:       #D8D8DE;   /* decorative divider inside a block */
  --rule-2:     #8A8A96;   /* component boundary — must clear 3:1 (WCAG 1.4.11) */
  --red:        #BD0114;
  --red-dk:     #8E0010;
  --purple:     #32255B;
  --tbd-bg:     #FFF6E5;
  --tbd-ink:    #6B4A00;
  --tbd-rule:   #E0BE7A;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --measure: 70ch;
  --gap:     clamp(1.5rem, 4vw, 3rem);
  --pad-x:   clamp(1.25rem, 4vw, 3rem);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  /* The section nav is sticky, so in-page links must land clear of it —
     for mouse users and, more importantly, for keyboard focus. */
  scroll-padding-top: 6.5rem;
}
[id] { scroll-margin-top: 6.5rem; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; }

h1, h2, h3, .eyebrow, .rail, .btn, th, caption, .subnav, .plate__head, .cat__tag,
.doc__type, .ladder__step, .notice__tag, .site-foot__name {
  font-family: var(--display);
}

h1, h2, h3 { margin: 0; line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--red-dk); text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
a:hover { color: var(--ink); }

/* ---------- focus + skip link ---------- */
:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}
/* On dark surfaces the red ring drops below 3:1 against the background,
   so switch it to white there. Both directions clear WCAG 1.4.11. */
.subnav :focus-visible,
.notice :focus-visible,
.site-foot :focus-visible,
.plate__head :focus-visible {
  outline-color: #FFFFFF;
}
.skip-link {
  position: absolute; left: 0.5rem; top: -100px; z-index: 100;
  background: var(--ink); color: #fff; padding: 0.75rem 1.25rem;
  font-family: var(--display); font-weight: 600; text-decoration: none;
  border-radius: 0 0 4px 4px; transition: top 0.15s ease;
}
.skip-link:focus { top: 0; color: #fff; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: var(--pad-x); }

.mono { font-family: var(--mono); font-size: 0.94em; letter-spacing: 0.01em; }
.strong { font-weight: 600; }

/* ---------- "to be determined" marker -------------------------------------
   Never signal status with colour alone: the pill always carries text.
   -------------------------------------------------------------------------- */
.tbd {
  display: inline-block;
  background: var(--tbd-bg);
  color: var(--tbd-ink);
  border: 1px solid var(--tbd-rule);
  border-radius: 3px;
  padding: 0.05em 0.5em;
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
}
.tbd-block {
  background: var(--tbd-bg);
  border-left: 4px solid var(--tbd-rule);
  padding: 1rem 1.25rem;
  border-radius: 0 4px 4px 0;
}
.tbd-block .tbd { margin-right: 0.4em; }

/* ---------- banner ---------- */
.banner {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.banner__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap); padding-block: 1.5rem; flex-wrap: wrap;
}
.banner__logo { width: clamp(200px, 32vw, 310px); }
.banner__sewp {
  display: block;
  border-radius: 4px;
  flex: none;
}
.banner__sewp img { width: clamp(132px, 20vw, 178px); border-radius: 3px; }
.banner__sewp:hover img { opacity: 0.9; }

/* ---------- section nav ---------- */
.subnav {
  position: sticky; top: 0; z-index: 30;
  background: var(--ink);
  border-bottom: 3px solid var(--red);
}
.subnav__list {
  display: flex; flex-wrap: wrap; list-style: none; gap: 0;
}
.subnav a {
  display: block;
  padding: 0.85rem 0.7rem;
  color: #EDEDF0;
  font-size: 0.78125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -3px;
}
.subnav a:hover { background: #26262C; color: #fff; }
.subnav a[aria-current="true"] { border-bottom-color: var(--red); color: #fff; }
.subnav :focus-visible { outline-offset: -3px; }

/* ---------- status notice ---------- */
.notice { background: var(--purple); color: #fff; }
.notice__inner {
  display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
  gap: 0.5rem var(--gap); padding-block: 1.5rem; align-items: start;
}
.notice__tag {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: #C9C2DE; margin: 0.35rem 0 0;
}
.notice__h { font-size: 1.125rem; margin-bottom: 0.4rem; }
.notice p { max-width: var(--measure); }
.notice a { color: #fff; }
.notice .tbd { background: transparent; color: #fff; border-color: #8578AC; }

/* ---------- hero ---------- */
.hero { padding-block: clamp(2.5rem, 6vw, 4.5rem); border-bottom: 1px solid var(--rule); }
.hero__inner {
  display: grid; gap: var(--gap);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: start;
}
.eyebrow {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--red-dk); margin-bottom: 0.9rem;
}
h1 {
  font-size: clamp(2.75rem, 7vw, 4.5rem);
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
}
.lede { font-size: 1.1875rem; max-width: 38ch; color: var(--ink-2); }
.lede strong { color: var(--ink); font-weight: 600; }

.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.btn {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  font-size: 0.875rem; font-weight: 600; letter-spacing: 0.02em;
  text-decoration: none; border-radius: 3px; border: 2px solid transparent;
  min-height: 44px;
}
.btn--primary { background: var(--red); color: #fff; border-color: var(--red); }
.btn--primary:hover { background: var(--red-dk); border-color: var(--red-dk); color: #fff; }
.btn--ghost { color: var(--ink); border-color: var(--rule-2); }
.btn--ghost:hover { border-color: var(--ink); background: var(--paper-2); color: var(--ink); }

/* ---------- the contract record plate ------------------------------------
   The signature element. It reads like the procurement data block a
   contracting officer already knows how to scan, because that is exactly
   what they came here for.
   -------------------------------------------------------------------------- */
.plate {
  border: 1px solid var(--rule-2);
  border-radius: 4px;
  overflow: hidden;
  background: var(--paper);
}
.plate__head {
  background: var(--ink);
  border-bottom: 3px solid var(--red);
  padding: 0.85rem 1.25rem;
}
.plate__head h2 {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: #fff;
}
.plate__body { margin: 0; }
.plate__row {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: 0.25rem 1.25rem;
  padding: 0.7rem 1.25rem;
  border-bottom: 1px solid var(--rule);
}
.plate__row:last-child { border-bottom: 0; }
.plate__row:nth-child(odd) { background: var(--paper-2); }
.plate__body dt {
  font-family: var(--display);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-2);
  padding-top: 0.15em;
}
.plate__body dd { margin: 0; font-size: 0.9375rem; }

/* ---------- sections + clause rail ---------------------------------------
   The rail prints the clause each section answers to. It is decorative for
   assistive tech (the real heading carries the meaning) but it tells a
   reviewer checking this page against A.5.1 exactly where to look.
   -------------------------------------------------------------------------- */
.sec { padding-block: clamp(2.75rem, 6vw, 4.5rem); border-bottom: 1px solid var(--rule); }
.sec--alt { background: var(--paper-2); }
.sec__grid {
  display: grid;
  grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
}
.rail {
  font-family: var(--mono);
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em;
  color: var(--ink-2);
  margin: 0; padding-top: 0.55rem;
  border-top: 3px solid var(--red);
  white-space: nowrap;
}
/* Prose is capped at a reading measure; tables and card grids are data and
   get the full column. Cap the text, not the container. */
.sec__body { max-width: 100%; }
.sec__body > h2,
.sec__body > h3,
.sec__body > p,
.sec__body > ul:not(.docs):not(.links),
.sec__body > ol:not(.ladder),
.clause, .callout, .tbd-block, .policy, .steps {
  max-width: var(--measure);
}
.sec__body > h2 { font-size: clamp(1.6rem, 3.2vw, 2.125rem); margin-bottom: 1.1rem; }
.sec__body > h3,
.policy h3, .callout h3 { font-size: 1.125rem; margin: 2rem 0 0.6rem; }
.sec__body > p, .sec__body > ul, .sec__body > ol { margin-bottom: 1.1em; }

/* ---------- fair opportunity clause ---------- */
.clause {
  margin: 1.5rem 0 0;
  padding: 1.5rem 1.75rem;
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-left: 5px solid var(--purple);
  border-radius: 0 4px 4px 0;
  font-size: 0.9375rem;
}
.sec--alt .clause { background: var(--paper); }
.clause ol { margin: 0 0 1em 1.35rem; padding-left: 0; }
.clause li { margin-bottom: 0.35em; }
.clause__cite {
  margin-top: 1.25rem; padding-top: 0.85rem;
  border-top: 1px solid var(--rule);
  font-family: var(--display); font-size: 0.8125rem; color: var(--ink-2);
}

/* ---------- numbered steps ---------- */
.steps { list-style: none; counter-reset: step; margin: 1.5rem 0 0; }
.steps > li {
  counter-increment: step;
  position: relative;
  padding: 0 0 1.5rem 3.5rem;
  border-left: 2px solid var(--rule);
  margin-left: 1.1rem;
}
.steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps > li::before {
  content: counter(step);
  position: absolute; left: -1.1rem; top: 0;
  width: 2.2rem; height: 2.2rem;
  display: grid; place-items: center;
  background: var(--ink); color: #fff;
  font-family: var(--mono); font-size: 0.875rem; font-weight: 600;
  border-radius: 50%;
}
.steps h3 { font-size: 1.0625rem; margin: 0.25rem 0 0.4rem; }
.steps p { font-size: 0.9375rem; }

/* ---------- escalation ladder ---------- */
.ladder { list-style: none; margin: 1.5rem 0 0; display: grid; gap: 1rem; max-width: 52rem; }
.ladder > li {
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-left: 5px solid var(--red);
  border-radius: 0 4px 4px 0;
  padding: 1.25rem 1.5rem;
}
.ladder__step {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--red-dk); margin-bottom: 0.3rem;
}
.ladder h3 { font-size: 1.0625rem; margin-bottom: 0.4rem; }
.ladder p { font-size: 0.9375rem; }
.ladder__contact {
  font-family: var(--mono); font-size: 0.875rem;
  margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--rule);
}

/* ---------- callout ---------- */
.callout {
  margin: 1.75rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: 4px;
}
.callout h3 { margin-top: 0; }
.callout p { font-size: 0.9375rem; }

/* ---------- category pair ---------- */
.cat-pair { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 1.5rem 0 2rem; }
.cat {
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-top: 4px solid var(--purple);
  border-radius: 0 0 4px 4px;
  padding: 1.25rem 1.4rem;
}
.cat__tag {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--purple); margin-bottom: 0.35rem;
}
.cat h3 { font-size: 1.0625rem; margin-bottom: 0.5rem; }
.cat p { font-size: 0.9375rem; }
.cat__note {
  margin-top: 0.75rem; padding-top: 0.7rem; border-top: 1px solid var(--rule);
  font-family: var(--display); font-size: 0.8125rem; color: var(--ink-2);
}

/* ---------- tables ---------- */
.tbl {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0 1.75rem;
  font-size: 0.9375rem;
  background: var(--paper);
  border: 1px solid var(--rule-2);
}
.tbl caption {
  text-align: left;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-2);
  padding-bottom: 0.6rem;
}
.tbl th, .tbl td {
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.tbl thead th {
  background: var(--ink); color: #fff;
  font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase;
  border-bottom: 0;
}
.tbl tbody th { font-family: var(--display); font-weight: 600; }
.tbl tbody tr:last-child th, .tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:nth-child(even) { background: var(--paper-2); }
.tbl--terms tbody th { width: 34%; }
.tbl--split tbody td { width: 50%; }

/* Small screens: let wide tables scroll horizontally, and make that region
   reachable by keyboard so a keyboard user can actually scroll it. */
.tbl-scroll { overflow-x: auto; }
.tbl-scroll:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

/* ---------- support policies ---------- */
.policy { padding-block: 0.25rem; }
.policy h3 { margin-top: 1.75rem; }
.policy p { font-size: 0.9375rem; }

/* ---------- documents ---------- */
.docs { list-style: none; display: grid; gap: 0.85rem; margin-top: 1.5rem; max-width: 52rem; }
.doc {
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: 4px;
  padding: 1.15rem 1.4rem;
}
.doc--pending { border-style: dashed; }
.doc__meta { display: flex; gap: 0.6rem; align-items: center; margin-bottom: 0.4rem; }
.doc__type {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--ink); color: #fff; padding: 0.15rem 0.5rem; border-radius: 3px;
}
.doc__meta span:not(.doc__type) { font-family: var(--mono); font-size: 0.8125rem; color: var(--ink-2); }
.doc h3 { font-size: 1.0625rem; margin-bottom: 0.35rem; }
.doc p { font-size: 0.9375rem; }

/* ---------- links list ---------- */
.links { list-style: none; display: grid; gap: 0.25rem; margin-top: 1.25rem; max-width: 52rem; }
.links > li { padding: 0.9rem 0; border-bottom: 1px solid var(--rule); }
.links > li:last-child { border-bottom: 0; }
.links h3 { font-size: 1.0625rem; margin-bottom: 0.2rem; }
.links p { font-size: 0.9375rem; color: var(--ink-2); }

/* ---------- addresses ---------- */
.addr-pair { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1.75rem; }
.addr {
  background: var(--paper); border: 1px solid var(--rule-2); border-radius: 4px;
  padding: 1.15rem 1.4rem;
}
.addr h3 { font-size: 0.9375rem; margin-bottom: 0.5rem; }
.addr p { font-size: 0.9375rem; line-height: 1.75; }

/* ---------- footer ---------- */
.site-foot { background: var(--ink); color: #D6D6DC; padding-block: clamp(2.5rem, 5vw, 3.5rem) 1.5rem; }
.site-foot a { color: #fff; }
.site-foot a:hover { color: #F2B8BE; }
.site-foot__inner {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  align-items: start;
}
.site-foot__name {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: #fff; margin-bottom: 0.6rem;
}
.site-foot p { font-size: 0.9375rem; line-height: 1.8; }
.site-foot .tbd { background: transparent; color: #F0DFC0; border-color: #6E6047; }
.site-foot__col--logo img { width: 168px; border-radius: 3px; }
.site-foot__col--logo a { display: inline-block; border-radius: 4px; }
.site-foot__legal {
  margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid #3A3A42;
  display: flex; flex-wrap: wrap; gap: 0.75rem var(--gap); justify-content: space-between;
}
.site-foot__legal p { font-size: 0.8125rem; color: #B4B4BE; max-width: 62ch; }

/* ==========================================================================
   Responsive. Everything reflows to a single column; nothing is hidden.
   ========================================================================== */
@media (max-width: 62rem) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .lede { max-width: var(--measure); }
  .plate { margin-top: 0.5rem; }
}

@media (max-width: 48rem) {
  .sec__grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .rail {
    padding-top: 0.5rem;
    border-top-width: 3px;
    width: max-content;
  }
  .notice__inner { grid-template-columns: minmax(0, 1fr); }
  .cat-pair, .addr-pair { grid-template-columns: minmax(0, 1fr); }
  .plate__row { grid-template-columns: minmax(0, 1fr); }
  .banner__inner { padding-block: 1.15rem; gap: 1.25rem; }
  .subnav a { padding: 0.7rem 0.75rem; font-size: 0.75rem; }
}

@media (max-width: 34rem) {
  body { font-size: 1rem; }
  .clause { padding: 1.15rem 1.25rem; }
  .steps > li { padding-left: 2.9rem; }
  .btn { width: 100%; text-align: center; }
  .cta-row { flex-direction: column; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- forced colours (Windows High Contrast) ---------- */
@media (forced-colors: active) {
  .plate, .cat, .doc, .callout, .ladder > li, .addr, .tbl { border: 1px solid CanvasText; }
  .btn { border: 2px solid ButtonText; }
  .rail, .plate__head, .subnav { border-color: CanvasText; }
  .tbd { border: 1px solid CanvasText; }
}

/* ---------- print ---------- */
@media print {
  .subnav, .skip-link, .cta-row { display: none; }
  body { font-size: 11pt; color: #000; background: #fff; }
  .sec, .hero, .banner { border-bottom: 1px solid #999; page-break-inside: avoid; }
  .sec--alt, .plate__row:nth-child(odd), .tbl tbody tr:nth-child(even) { background: transparent; }
  .subnav a, a { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  .notice { background: #fff; color: #000; border: 2px solid #000; }
  .site-foot { background: #fff; color: #000; }
  .site-foot__legal p, .site-foot a { color: #000; }
}