/* KB Standard LLC
   Palette sampled directly from assets/img/kb-standard-logo.png.
   ink        #0B0C10  logo background field, 48 percent of all pixels
   navy       #1F3A6B  weighted mean of the flag canton (#1F346E), rounded
   red        #B22234  flag stripe accent, used sparingly
   steel      #C9CDD2  hexagon mid grey (sampled mean #C4C3C4)
   paper      #F5F5F5  logo wordmark off white (sampled #F2F2F2 to #FFFFFF) */

:root {
  --ink: #0B0C10;
  --ink-soft: #16171C;
  --navy: #1F3A6B;
  --navy-dark: #172C51;
  --red: #B22234;
  --steel: #C9CDD2;
  --steel-100: #E4E6E9;
  --paper: #F5F5F5;
  --white: #FFFFFF;
  --muted: #4A4F57;

  --wrap: 1140px;
  --gutter: 20px;
  --radius: 3px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

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

h1, h2, h3 { color: var(--navy); line-height: 1.25; margin: 0 0 0.5em; font-weight: 700; }
h1 { font-size: clamp(2rem, 5vw, 2.75rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.5rem, 3.2vw, 1.9rem); }
h3 { font-size: 1.125rem; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--navy); }
a:hover { color: var(--red); }

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

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

/* Layout ------------------------------------------------------------ */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: 56px 0; }
.section--tight { padding: 40px 0; }
.section--dark { background: var(--ink); color: var(--steel-100); }
.section--dark h2 { color: var(--white); }
.section--white { background: var(--white); }

.measure { max-width: 62ch; }

.eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.6em;
}
.section--dark .eyebrow { color: var(--steel); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--white);
  color: var(--navy);
  padding: 12px 18px;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

/* Header ------------------------------------------------------------ */

.site-header {
  background: var(--ink);
  border-bottom: 3px solid var(--red);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { height: 44px; width: auto; display: block; }
.brand span {
  color: var(--white);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
}

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--steel);
  color: var(--white);
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.9375rem;
  padding: 8px 14px;
  cursor: pointer;
}

.site-nav ul {
  list-style: none;
  display: flex;
  gap: 26px;
  margin: 0;
  padding: 0;
}
.site-nav a {
  color: var(--steel-100);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  display: inline-block;
}
.site-nav a:hover { color: var(--white); border-bottom-color: var(--red); }
.site-nav a[aria-current="page"] { color: var(--white); border-bottom-color: var(--steel); }

@media (max-width: 800px) {
  .nav-toggle { display: inline-block; }
  .site-header .wrap { flex-wrap: wrap; padding-bottom: 0; }
  .site-nav { flex-basis: 100%; display: none; }
  .site-nav[data-open="true"] { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; padding-bottom: 8px; }
  .site-nav li { border-top: 1px solid #24262C; }
  .site-nav a { display: block; padding: 13px 0; border-bottom: 0; }
}

/* Hero -------------------------------------------------------------- */

.hero {
  background: var(--ink);
  color: var(--steel-100);
  padding: 64px 0 60px;
}
.hero h1 { color: var(--white); margin-bottom: 0.35em; }
.hero p.lede {
  font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
  color: var(--steel-100);
  max-width: 46ch;
  margin-bottom: 1.6em;
}
.hero .actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Buttons ----------------------------------------------------------- */

.btn {
  display: inline-block;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 14px 22px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.btn--primary { background: var(--navy); border-color: var(--navy); color: var(--white); }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--red); border-color: var(--red); color: var(--white); }
.btn--secondary { background: transparent; border-color: var(--steel); color: var(--white); }
.btn--secondary:hover, .btn--secondary:focus-visible { border-color: var(--red); color: var(--white); background: rgba(178, 34, 52, 0.18); }
.btn--on-light { background: transparent; border-color: var(--navy); color: var(--navy); }
.btn--on-light:hover, .btn--on-light:focus-visible { background: var(--navy); color: var(--white); }

/* Credibility bar --------------------------------------------------- */

.credentials {
  background: var(--white);
  border-bottom: 1px solid var(--steel);
}
.credentials ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(178px, 100%), 1fr));
}
.credentials li {
  padding: 20px var(--gutter);
  border-left: 1px solid var(--steel);
}
.credentials li:first-child { border-left: 0; }
.credentials .label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.credentials .value {
  display: block;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--navy);
}
@media (max-width: 640px) {
  .credentials li { border-left: 0; border-top: 1px solid var(--steel); }
  .credentials li:first-child { border-top: 0; }
}

/* Capability grid --------------------------------------------------- */

.grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  margin-top: 28px;
}
.card {
  background: var(--white);
  border: 1px solid var(--steel);
  border-radius: var(--radius);
  padding: 22px;
}
.card h3 { margin-bottom: 0.35em; }
.card p { color: var(--muted); font-size: 0.9375rem; margin: 0; }

/* NAICS ------------------------------------------------------------- */

.naics {
  margin-top: 34px;
  background: var(--white);
  border: 1px solid var(--steel);
  border-left: 4px solid var(--navy);
  border-radius: var(--radius);
  padding: 24px;
}
.naics dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 2px 28px;
}
.naics div {
  display: flex;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--paper);
}
.naics dt { font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.naics dd { margin: 0; color: var(--muted); font-size: 0.9375rem; }
.naics .note { margin: 16px 0 0; font-size: 0.875rem; color: var(--muted); }

/* Coverage note ----------------------------------------------------- */

.coverage {
  border-top: 3px solid var(--red);
  background: var(--white);
  border-bottom: 1px solid var(--steel);
  padding: 28px 0;
}
.coverage p { max-width: 70ch; margin: 0; font-size: 1.0625rem; }

/* Closing CTA ------------------------------------------------------- */

.cta-band { background: var(--navy); color: var(--white); padding: 48px 0; }
.cta-band h2 { color: var(--white); }
.cta-band p { color: #DCE3EF; max-width: 58ch; }
.cta-band .actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.cta-band .btn--primary { background: var(--white); border-color: var(--white); color: var(--navy); }
.cta-band .btn--primary:hover, .cta-band .btn--primary:focus-visible { background: var(--red); border-color: var(--red); color: var(--white); }

/* Footer ------------------------------------------------------------ */

.site-footer {
  background: var(--ink);
  color: var(--steel-100);
  padding: 44px 0 28px;
  font-size: 0.9375rem;
  border-top: 3px solid var(--red);
}
.site-footer h2 {
  color: var(--white);
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 0.9em;
}
.footer-cols {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.site-footer a { color: var(--white); }
.site-footer a:hover { color: var(--steel); }
.site-footer address { font-style: normal; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 6px; }
.footer-legal {
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid #24262C;
  color: var(--steel);
  font-size: 0.8125rem;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.footer-legal p { margin: 0; }

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

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Interior page head ------------------------------------------------ */

.page-head {
  background: var(--ink);
  color: var(--steel-100);
  padding: 52px 0 44px;
}
.page-head h1 { color: var(--white); }
.page-head .lede {
  font-size: 1.0625rem;
  color: var(--steel-100);
  max-width: 62ch;
  margin: 0;
}

/* Agencies served strip --------------------------------------------- */

.agencies-strip {
  background: var(--white);
  border-bottom: 1px solid var(--steel);
  border-top: 3px solid var(--red);
  padding: 26px 0;
}
.agencies-strip h2 {
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.9em;
}
.agencies-strip ul {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.agencies-strip li {
  font-weight: 600;
  color: var(--navy);
  padding: 2px 16px;
  border-left: 1px solid var(--steel);
}
.agencies-strip li:first-child { border-left: 0; padding-left: 0; }
.strip-note { margin: 0; font-size: 0.9375rem; color: var(--muted); max-width: 72ch; }

/* Past performance grid --------------------------------------------- */

.summary {
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 8px;
}
.agency { margin-top: 34px; }
.agency:first-of-type { margin-top: 18px; }
.agency h2 {
  font-size: 1.25rem;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--steel);
}
.agency .grid { margin-top: 16px; }
.card.project h3 { font-size: 1.0625rem; margin-bottom: 0.3em; }
.card-place { color: var(--muted); font-size: 0.9375rem; margin: 0 0 12px; }
.status {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.pip { width: 9px; height: 9px; display: inline-block; flex: 0 0 auto; }
.is-complete .pip { background: var(--navy); }
.is-progress .pip { background: var(--red); }

/* Prose ------------------------------------------------------------- */

.prose h2 { margin-top: 1.6em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.4em; }
.prose ul { padding-left: 22px; }
.prose li { margin-bottom: 8px; }

.callout {
  background: var(--white);
  border: 1px solid var(--steel);
  border-left: 4px solid var(--navy);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin: 28px 0;
}
.callout h2, .callout h3 { margin-top: 0; font-size: 1.0625rem; }
.callout ul { margin-bottom: 0; }

/* Forms ------------------------------------------------------------- */

.form-layout {
  display: grid;
  gap: 40px;
  grid-template-columns: minmax(0, 2fr) minmax(min(280px, 100%), 1fr);
  align-items: start;
}
@media (max-width: 860px) {
  .form-layout { grid-template-columns: 1fr; }
}

.aside-card {
  background: var(--white);
  border: 1px solid var(--steel);
  border-radius: var(--radius);
  padding: 24px;
  font-size: 0.9375rem;
}
.aside-card h2 { font-size: 1.0625rem; margin-top: 0; }
.aside-card dl { margin: 0; }
.aside-card dt {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 14px;
}
.aside-card dd { margin: 2px 0 0; font-weight: 600; color: var(--navy); }

form.kb {
  background: var(--white);
  border: 1px solid var(--steel);
  border-radius: var(--radius);
  padding: 26px;
}

.fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 30px;
}
.fieldset:last-of-type { margin-bottom: 22px; }
.fieldset > legend {
  padding: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 2px solid var(--steel);
  width: 100%;
  padding-bottom: 8px;
  margin-bottom: 18px;
}

.field { margin-bottom: 18px; }
.field label, .field > .label {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: 6px;
}
.field .hint {
  display: block;
  font-weight: 400;
  font-size: 0.8125rem;
  color: var(--muted);
  margin-top: 2px;
}
.req { color: var(--red); font-weight: 700; }
.opt { color: var(--muted); font-weight: 400; font-size: 0.8125rem; }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="url"],
.field input[type="number"],
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid #9AA1AA;
  border-radius: var(--radius);
  padding: 11px 12px;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { border-color: var(--navy); }
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"] { border-color: var(--red); border-width: 2px; }

.two-up {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

/* Checkbox and radio groups */

.choice-group {
  border: 1px solid var(--steel);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 0;
}
.choice-group.scroll { max-height: 340px; overflow-y: auto; }
.choices {
  display: grid;
  gap: 2px 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}
.choice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 6px 0;
  font-size: 0.9375rem;
  font-weight: 400;
  margin: 0;
  cursor: pointer;
}
.choice input { margin: 3px 0 0; flex: 0 0 auto; width: 17px; height: 17px; }
.region { margin-bottom: 16px; }
.region:last-child { margin-bottom: 0; }
.region h3 {
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.region-all {
  font: inherit;
  font-size: 0.75rem;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
  background: transparent;
  border: 1px solid var(--steel);
  border-radius: var(--radius);
  color: var(--navy);
  padding: 2px 9px;
  cursor: pointer;
}
.region-all:hover { border-color: var(--navy); }

.counter { font-size: 0.8125rem; color: var(--muted); margin: 6px 0 0; }
.counter.over { color: var(--red); font-weight: 700; }

.consent {
  border: 1px solid var(--steel);
  border-left: 4px solid var(--navy);
  border-radius: var(--radius);
  padding: 16px;
  background: var(--paper);
}
.consent .choice { font-size: 1rem; }

.form-error {
  border: 2px solid var(--red);
  border-radius: var(--radius);
  background: #FCEEF0;
  color: #7A0F1F;
  padding: 16px 18px;
  margin-bottom: 22px;
  font-size: 0.9375rem;
}
.form-error h2 { color: #7A0F1F; font-size: 1rem; margin-bottom: 0.4em; }
.form-error p:last-child { margin-bottom: 0; }
.form-error a { color: #7A0F1F; }

.hp { position: absolute; left: -9999px; top: -9999px; }

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.form-actions .note { font-size: 0.8125rem; color: var(--muted); margin: 0; }

/* Confirmation page -------------------------------------------------- */

.confirmation {
  background: var(--white);
  border: 1px solid var(--steel);
  border-top: 4px solid var(--navy);
  border-radius: var(--radius);
  padding: 32px;
  max-width: 62ch;
}
.confirmation h1 { font-size: 1.75rem; }

/* Agency sections often hold a single project. auto-fill keeps the empty tracks
   so one card sits at column width instead of stretching across the row. */
.agency .grid { grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); }

/* Links inside the dark page head need to invert. The default navy link colour
   is close to unreadable on near-black. */
.page-head a, .hero a, .section--dark a {
  color: var(--white);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.page-head a:hover, .hero a:hover, .section--dark a:hover { color: var(--steel); }

/* Centred axis ------------------------------------------------------ */
/* The home page sits on a single centre line: the hero, each section heading,
   the coverage statement, the credential cells, and the closing band. Running
   body copy stays left aligned inside its centred block, because centred
   paragraphs give every line a ragged left edge and are measurably harder to
   read. */

.hero--centered { text-align: center; }
.hero--centered .lede { margin-left: auto; margin-right: auto; }
.hero--centered .actions { justify-content: center; }

.section-head {
  text-align: center;
  max-width: 64ch;
  margin: 0 auto 26px;
}
.section-head h2 { margin-bottom: 0.4em; }
.section-head p:last-child { margin-bottom: 0; }

.credentials li { text-align: center; }

.coverage p { margin-left: auto; margin-right: auto; text-align: center; }

.cta-band { text-align: center; }
.cta-band p { margin-left: auto; margin-right: auto; }
.cta-band .actions { justify-content: center; }

/* Key personnel ------------------------------------------------------ */

.people {
  list-style: none;
  margin: 0 0 34px;
  padding: 0;
  display: grid;
  /* The gap is the only separation between people, so it is deliberately wider
     than the line spacing inside a card. Name, title, and address read as one
     block; the space between people reads as the break. */
  gap: 26px;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}
.people:last-child { margin-bottom: 0; }
.people li {
  background: var(--paper);
  border: 1px solid var(--steel);
  border-left: 3px solid var(--navy);
  border-radius: var(--radius);
  padding: 16px 18px;
  line-height: 1.45;
}
.person-name,
.person-role,
.person-email { margin: 0; }
.person-name {
  font-weight: 700;
  color: var(--navy);
  font-size: 1.0625rem;
}
.person-role {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.person-email { font-size: 0.9375rem; word-break: break-word; }