/* ============================================================================
   LXXXIV LLC — shared stylesheet
   ----------------------------------------------------------------------------
   Palette from the LXXXIV brand kit (Graphics/deliver):
     Slate        #2F4858   primary — accent, rules, headings
     Reverse fld  #1A2328   the only approved dark field for the mark
     Paper        #FFFFFF   card field
     Support      #F4F6F7 page field · #D9DFE3 hairline

   One exception: the kit's support grey #6B7A85 measures 4.42:1 on white and
   4.08:1 on #F4F6F7, below the 4.5:1 AA floor, and it carries every field
   label in the company table. --grey is that grey darkened within the same hue
   to 5.5:1. Nothing else departs from the kit.

   No third-party requests: system font stack rather than a hosted webfont,
   the mark inlined as SVG, the favicon a data URI. This file is the only
   subresource, and it is same-origin.
   ========================================================================== */

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

:root {
  --charcoal:  #1A2328;   /* brand reverse field */
  --ink:       #333E45;
  --grey:      #5A6B76;   /* AA-safe darkening of kit #6B7A85 */
  --paper:     #F4F6F7;
  --card:      #FFFFFF;
  --rule:      #D9DFE3;
  --rule-soft: #E4E9EC;
  --accent:    #2F4858;   /* brand slate */
  --on-dark:   #FFFFFF;
  --on-dark-2: #C2CCD3;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

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

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

a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
a:hover, a:focus { color: #1F3543; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

p { margin: 0 0 0.9rem; }
p:last-child { margin-bottom: 0; }

.wrap {
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3.5rem);
}

/* Skip link — seven pages of nav means keyboard users need a way past it. */
.skip {
  position: absolute; left: -9999px;
  background: var(--accent); color: var(--on-dark);
  padding: 0.6rem 1rem; z-index: 10; text-decoration: none;
}
.skip:focus { left: 0; top: 0; }

/* ---------- Masthead ----------------------------------------------------- */

.masthead {
  background: var(--charcoal);
  color: var(--on-dark);
  border-top: 4px solid var(--accent);
  padding-block: clamp(1.35rem, 3.5vw, 1.75rem) 0;
}

.masthead-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.1rem 2rem;
}

/* Mark + name. The kit requires clear space of one arm thickness — 24 of the
   100 grid units, so 24% of the rendered mark width. At 44px that is 10.5px;
   the 1.35rem gap and the masthead padding both clear it. No container shape,
   no outline, no shadow, never off-square — all per the mark spec. */
.ident { display: flex; align-items: flex-start; gap: 1.35rem; min-width: 0; }

.mark {
  flex: none;
  width: 44px; height: 44px;
  margin-top: 0.15rem;
  color: var(--on-dark);   /* single flat fill via currentColor */
}

.ident a { color: inherit; text-decoration: none; }
.ident a:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 3px; }

h1, .wordmark {
  margin: 0;
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 1.8rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.15;
}

.tagline {
  margin: 0.4rem 0 0;
  max-width: 52ch;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--on-dark-2);
}

.phone-block {
  display: inline-block;
  background: var(--accent);
  color: var(--on-dark);
  font-family: var(--mono);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 0.7rem 1.1rem;
  white-space: nowrap;
}
.phone-block:hover, .phone-block:focus { background: #3E5D70; color: var(--on-dark); }
.phone-block:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 2px; }

/* ---------- Navigation --------------------------------------------------- */

.nav { margin-top: clamp(1.1rem, 3vw, 1.5rem); }

.nav ul {
  display: flex; flex-wrap: wrap; gap: 0 1.75rem;
  margin: 0; padding: 0; list-style: none;
}

.nav a {
  display: block;
  padding: 0.6rem 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--on-dark-2);
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
.nav a:hover { color: var(--on-dark); }
.nav a[aria-current="page"] { color: var(--on-dark); border-bottom-color: var(--accent); }
.nav a:focus-visible { outline: 2px solid var(--on-dark); outline-offset: -2px; }

/* ---------- Page header (interior pages) --------------------------------- */

.page-head { padding-block: clamp(2rem, 4vw, 2.75rem) 0; }
.page-head h1 {
  font-size: clamp(1.55rem, 1.2rem + 1.6vw, 2.05rem);
  letter-spacing: -0.01em;
  color: var(--charcoal);
}
.page-head .stand {
  margin: 0.65rem 0 0;
  max-width: 66ch;
  font-size: 1.02rem;
  color: var(--ink);
}

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

main.layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 2.5rem) 3rem;
  align-items: start;
  padding-block: clamp(2rem, 4vw, 2.75rem) clamp(2.5rem, 5vw, 3.5rem);
}

main.stack {
  display: flex;
  flex-direction: column;
  gap: clamp(1.9rem, 3.5vw, 2.6rem);
  padding-block: clamp(1.9rem, 4vw, 2.5rem) clamp(2.5rem, 5vw, 3.5rem);
}

.full { grid-column: 1 / -1; }

/* ---------- Section headings --------------------------------------------- */

h2 {
  margin: 0 0 0.9rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 2px solid var(--charcoal);
  padding-bottom: 0.4rem;
}

h3 {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey);
}

.prose { max-width: 74ch; }
.prose + .prose { margin-top: 0; }

/* ---------- Federal Supply Class lists ----------------------------------- */

.fsc {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--charcoal);
  font-variant-numeric: tabular-nums;
}

.fsc-list {
  margin: 0; padding: 0; list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 3rem;
}

.fsc-list li {
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1fr);
  gap: 0 0.85rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule);
  line-height: 1.45;
}

/* Bottom row closes without a trailing rule. Parity-aware: in a two-column
   grid the final row is the last child, plus the second-to-last only when it
   sits in the left column (odd position). A flat :nth-last-child(-n+2) would
   strip the rule from a top-row item in any odd-length group. */
.fsc-list li:last-child,
.fsc-list li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }

.fsc-list + h3 { margin-top: 1.4rem; }

/* Wider variant for the detail page, where each class carries a description. */
.fsc-detail { display: flex; flex-direction: column; gap: 0; }
.fsc-detail > div {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--rule);
}
.fsc-detail > div:last-child { border-bottom: 0; }
.fsc-detail .name { font-weight: 600; color: var(--charcoal); }
.fsc-detail .desc { margin: 0.15rem 0 0; font-size: 0.9375rem; color: var(--ink); }

/* ---------- Company information (visual anchor) -------------------------- */

.factbox { border: 2px solid var(--charcoal); background: var(--card); }

.factbox > h2 {
  margin: 0;
  background: var(--charcoal);
  color: var(--on-dark);
  border-bottom: 0;
  padding: 0.7rem clamp(1rem, 2.5vw, 1.5rem);
}

.facts {
  margin: 0;
  padding: 0.25rem clamp(1rem, 2.5vw, 1.5rem) 0.75rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 3rem;
}

.fact {
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr);
  gap: 0 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.fact--wide { grid-column: 1 / -1; }
.fact:last-child { border-bottom: 0; }

.facts dt {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--grey);
  padding-top: 0.12rem;
}

.facts dd { margin: 0; font-size: 1rem; line-height: 1.45; color: var(--charcoal); }

.stack-list { display: flex; flex-direction: column; gap: 0.2rem; }

.mono {
  font-family: var(--mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* ---------- Capability blocks -------------------------------------------- */

.blocks { display: flex; flex-direction: column; gap: 0; }
.block {
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--rule);
}
.block:first-child { padding-top: 0; }
.block:last-child { border-bottom: 0; }
.block h3 { margin-bottom: 0.35rem; }
.block p { max-width: 74ch; font-size: 0.9688rem; }

/* Line card: the manufacturers row under each product family. Reads "Lines in
   progress." until an account is open, so it is set quieter than the family
   description and never bolder than a name would be. */
.lines { margin-top: 0.45rem; font-size: 0.9rem; color: var(--grey); }
.lines-label {
  display: inline-block;
  margin-right: 0.45rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Secondary note under a value, inside or outside a form field. */
.hint { font-size: 0.8125rem; color: var(--grey); }

/* Card grid for the home page summary. */
.cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.card {
  background: var(--card);
  border: 1px solid var(--rule);
  padding: 1rem 1.05rem;
}
.card h3 { margin-bottom: 0.4rem; color: var(--accent); }
.card p { font-size: 0.9375rem; margin-bottom: 0.6rem; }

/* ---------- FAQ: native disclosure, no JavaScript ------------------------ */

.faq { border-top: 1px solid var(--rule); }

.faq details { border-bottom: 1px solid var(--rule); }

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 0.95rem 2.25rem 0.95rem 0;
  position: relative;
  font-weight: 600;
  color: var(--charcoal);
}
.faq summary::-webkit-details-marker { display: none; }

/* Chevron drawn in CSS so there is no image request and no script. */
.faq summary::after {
  content: "";
  position: absolute; right: 0.35rem; top: 1.3rem;
  width: 9px; height: 9px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.5rem; }
.faq summary:hover { color: var(--accent); }
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.faq .answer { padding: 0 0 1.05rem; max-width: 74ch; }
.faq .answer p { font-size: 0.9688rem; }

@media (prefers-reduced-motion: reduce) {
  .faq summary::after { transition: none; }
}

/* ---------- Contact list ------------------------------------------------- */

.contact-list { margin: 0; }

.contact-list > div {
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr);
  gap: 0 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule);
}
.contact-list > div:last-child { border-bottom: 0; }

.contact-list dt {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--grey);
  padding-top: 0.12rem;
}

.contact-list dd { margin: 0; }
.contact-list address { font-style: normal; line-height: 1.45; }

/* ---------- Supplier form: native POST, no JavaScript ---------------------
   Posts cross-origin to the CRM's public form endpoint, which answers with a
   303 back to /thank-you. Nothing here needs script: the honeypot is hidden
   with CSS, and required/type attributes do the validation the browser already
   knows how to do. ---------------------------------------------------------- */

.form { max-width: 46rem; }

.form-grid {
  display: grid;
  gap: 0.9rem 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.field-wide { grid-column: 1 / -1; }

.field > label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--grey);
}
.field .hint { font-size: 0.8125rem; color: var(--grey); }

.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: 0.9688rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 0.5rem 0.6rem;
  width: 100%;
  min-width: 0;
}
.field textarea { resize: vertical; min-height: 5.5rem; }

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

/* Required marker carries meaning, so it is not colour alone. */
.field .req { color: var(--accent); font-weight: 700; }

/* Honeypot. Off-screen rather than display:none so a naive bot still fills it,
   and removed from the tab order and the accessibility tree for real users. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.15rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--rule);
}
.btn {
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.875rem;
  color: var(--on-dark);
  background: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.62rem 1.5rem;
  cursor: pointer;
}
.btn:hover { background: var(--charcoal); border-color: var(--charcoal); }
.btn:focus-visible { outline: 2px solid var(--charcoal); outline-offset: 2px; }

@media screen and (max-width: 620px) {
  .form-grid { grid-template-columns: 1fr; }
}

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

.site-footer {
  border-top: 1px solid var(--rule);
  padding-block: 1.4rem 1.8rem;
  font-size: 0.8125rem;
  color: var(--grey);
}
.site-footer p { margin: 0; }

.foot-nav {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem;
  margin: 0 0 0.9rem; padding: 0; list-style: none;
}
.foot-nav a { color: var(--grey); }

/* ---------- Narrow screens -----------------------------------------------
   Scoped to `screen`: the print page box is ~710px wide, so unscoped
   max-width queries would fire on paper and collapse the columns.
--------------------------------------------------------------------------- */

@media screen and (max-width: 860px) {
  main.layout { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; column-gap: 0; }
  .fsc-list { grid-template-columns: 1fr; column-gap: 0; }
  /* Single column: every item is its own row, so only the last closes. */
  .fsc-list li:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--rule); }
  .fsc-list li:last-child { border-bottom: 0; }
}

@media screen and (max-width: 620px) {
  .masthead-inner { display: block; }
  /* Mark drops to 38px; the 1rem gap still exceeds its 9.1px clear space. */
  .ident { gap: 1rem; }
  .mark { width: 38px; height: 38px; }
  .phone-block {
    display: block;
    margin-top: 1.1rem;
    text-align: center;
    padding: 0.85rem 1rem;
  }
  .nav ul { gap: 0 1.15rem; }
  .fact,
  .contact-list > div,
  .fsc-detail > div { grid-template-columns: 1fr; gap: 0.1rem; }
  .facts dt,
  .contact-list dt { padding-top: 0; }
}

/* ---------- Print -------------------------------------------------------- */

@page { margin: 14mm; }

@media print {
  /* Scale the root so every rem-based measure (label columns, gaps, padding)
     shrinks with the type. Setting body alone leaves rem at 16px and the
     definition-list label columns swallow the value column. */
  html { font-size: 10.5pt; }

  body { background: #fff; color: #000; font-size: 1rem; line-height: 1.4; }
  .wrap { max-width: none; padding-inline: 0; }

  .masthead {
    background: #fff; color: #000;
    border-top: 0; border-bottom: 2pt solid #000;
    padding-block: 0 0.55rem;
  }
  .tagline { color: #000; max-width: 46ch; }
  .masthead-inner { gap: 0.75rem 1.5rem; }
  .ident { gap: 1rem; }
  /* Masthead prints white, so the mark reverts to slate on a white field —
     the kit forbids it on anything but white or the reverse field. */
  .mark { color: #2F4858; width: 40px; height: 40px; }

  .phone-block {
    background: none; color: #000;
    border: 1pt solid #000;
    padding: 0.3rem 0.6rem;
    font-size: 1.05rem;
  }

  /* Navigation is a screen affordance; on paper it is dead weight. */
  .nav, .skip, .foot-nav { display: none; }

  /* The home page's supply and capability summaries restate pages of their
     own. Printed, the home page is the verification sheet a credit desk
     asks for, so it carries the company table and contact only. */
  .no-print { display: none; }

  main.layout { padding-block: 0.75rem 0; gap: 1rem 2rem; }
  main.stack { padding-block: 0.75rem 0; gap: 1.1rem; }

  .page-head { padding-block: 0.8rem 0; }

  h2 { color: #000; border-bottom: 1.5pt solid #000; margin-bottom: 0.6rem; }
  h3 { color: #000; }

  .factbox { border: 1pt solid #000; }
  .factbox > h2 { background: #fff; color: #000; border-bottom: 1pt solid #000; }

  .facts { column-gap: 2rem; padding-bottom: 0.4rem; }
  .fact { padding: 0.42rem 0; }
  .fsc-list { column-gap: 2rem; }
  .fsc-list li { padding: 0.28rem 0; }
  .fact,
  .contact-list > div { grid-template-columns: 9rem minmax(0, 1fr); }
  .facts dt,
  .contact-list dt { font-size: 0.8125rem; letter-spacing: 0.03em; color: #000; }
  .facts dd,
  .contact-list dd { font-size: 1rem; }
  /* Slightly narrower labels here so the street line stays unbroken. */
  .contact-list > div { padding: 0.36rem 0; grid-template-columns: 8.25rem minmax(0, 1fr); }

  .card { border: 1pt solid #000; }

  /* Every answer prints, whether or not the reader expanded it on screen.
     A closed <details> hides its content through the UA's details-content
     box, which `display:block` on the child cannot reach — ::details-content
     is the hook that can. */
  .faq details { border-bottom: 1pt solid #000; }
  .faq details::details-content { content-visibility: visible !important; }
  .faq details > .answer { display: block !important; }
  .faq summary::after { display: none; }

  .site-footer { color: #000; border-top: 1pt solid #000; padding-block: 0.7rem 0; }

  a { color: #000; text-decoration: underline; }

  /* Never split a verification record across a page boundary. */
  .factbox, .fact, .contact-list > div, .block, .faq details { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
  p { orphans: 3; widows: 3; }

  /* A blank form on paper is noise: print the address to send a quote to instead. */
  .form { display: none; }
  .form-print { display: block !important; }
}