/* ==========================================================================
   FLASHPOINT PCBA — base layer: reset, type, layout primitives, controls
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink-900);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }
a:hover { color: var(--c-ignite); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sharp);
}

hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-7) 0; }

/* ---- headings ------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--track-tight);
  color: inherit;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); line-height: 1.1; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); letter-spacing: 0; }
p  { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.15rem; }
li { margin-bottom: var(--sp-2); }
li:last-child { margin-bottom: 0; }
strong, b { font-weight: 600; }

/* ---- inline text utilities ---------------------------------------- */
.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--fg-muted);
  max-width: var(--w-prose);
}
.muted  { color: var(--fg-muted); }
.faint  { color: var(--fg-faint); }
.mono   { font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: 0; }
.num    { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.accent { color: var(--c-ignite); }
.nowrap { white-space: nowrap; }
.prose  { max-width: var(--w-prose); }
.prose p + h2, .prose p + h3 { margin-top: var(--sp-6); }
.prose ul { margin-top: var(--sp-3); }

/* Monospace micro-label — the drafting annotation voice. */
.eyebrow, .kicker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--c-ignite);
  margin: 0 0 var(--sp-3);
}
.band--dark .eyebrow, .band--dark .kicker { color: var(--c-ignite); }

/* Numbered section index, e.g. "03 / QUALITY GATES" */
.sec-index {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--fg-faint);
  display: block;
  margin-bottom: var(--sp-2);
}

/* ---- layout -------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--w-container); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: var(--w-wide); }
.wrap--narrow { max-width: var(--w-narrow); }

.grid { display: grid; gap: var(--gutter); }
.g-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.g-2-1 { grid-template-columns: minmax(0,1.65fr) minmax(0,1fr); }
.g-1-2 { grid-template-columns: minmax(0,1fr) minmax(0,1.65fr); }
.g-side { grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; }
.gap-tight { gap: var(--sp-4); }
.gap-loose { gap: clamp(1.5rem, 4vw, 4rem); }

@media (max-width: 1000px) {
  .g-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .g-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .g-2-1, .g-1-2, .g-side { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 680px) {
  .g-2, .g-3, .g-4 { grid-template-columns: minmax(0,1fr); }
}

.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); align-items: center; }
.split-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }

/* ---- section shell ------------------------------------------------- */
.section { background: var(--bg); color: var(--fg); padding-block: var(--sec-y); }
.section--tight { padding-block: var(--sec-y-tight); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }
.section--alt { background: var(--bg-alt); }
.section--raised { background: var(--bg-raised); }
.section--dark { background: var(--c-graphite-800); color: #E9EEF0; }
.section--graphite { background: var(--c-graphite-900); color: #E9EEF0; }

.sec-head { max-width: var(--w-narrow); margin-bottom: var(--sp-6); }
.sec-head--wide { max-width: 62rem; }
.sec-head h2 + .lead { margin-top: var(--sp-4); }
.sec-head--row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-6); max-width: none; flex-wrap: wrap; }

/* Dimension-line divider: hairline with end ticks and an optional mono caption. */
.dim {
  position: relative;
  height: 1px;
  background: var(--line);
  margin: var(--sp-7) 0;
}
.dim::before, .dim::after {
  content: ""; position: absolute; top: -4px; width: 1px; height: 9px; background: var(--line-strong);
}
.dim::before { left: 0; } .dim::after { right: 0; }
.dim--label { margin-top: var(--sp-8); }
.dim__cap {
  position: absolute; top: -0.7em; left: 50%; transform: translateX(-50%);
  background: var(--bg); padding: 0 var(--sp-3);
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--track-wide);
  text-transform: uppercase; color: var(--fg-faint); white-space: nowrap;
}

/* Registration crosshair corner marks (hero / figure motif). */
.regmark { position: relative; }
.regmark::before, .regmark::after {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
  border-top: 1px solid var(--line-strong); border-left: 1px solid var(--line-strong);
}
.regmark::before { top: 10px; left: 10px; }
.regmark::after  { bottom: 10px; right: 10px; transform: rotate(180deg); }

/* ---- buttons ------------------------------------------------------- */
.btn {
  --btn-bg: var(--c-ignite); --btn-fg: #fff; --btn-bd: var(--c-ignite);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 46px; padding: 0.7rem 1.2rem;
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: 0.01em; line-height: 1;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd); border-radius: var(--r-sharp);
  cursor: pointer; transition: transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.btn:hover { background: var(--c-ignite-deep); border-color: var(--c-ignite-deep); color: #fff; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--ghost { --btn-bg: transparent; --btn-fg: currentColor; --btn-bd: var(--line-strong); }
.btn--ghost:hover { background: transparent; color: var(--c-ignite); border-color: var(--c-ignite); }
.btn--light { --btn-bg: var(--c-white); --btn-fg: var(--c-ink-900); --btn-bd: var(--c-white); }
.btn--light:hover { background: #fff; border-color: #fff; color: var(--c-ignite-deep); }
.btn--sm { min-height: 38px; padding: 0.5rem 0.85rem; font-size: var(--fs-xs); }
.btn--block { width: 100%; }

/* Text link with a drafting underline */
.tlink {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-weight: 600; font-size: var(--fs-sm); color: var(--c-ignite);
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.tlink:hover { color: var(--c-ignite-deep); }
.tlink--quiet { color: var(--fg); border-bottom-color: var(--line-strong); }
.tlink--quiet:hover { color: var(--c-ignite); border-bottom-color: var(--c-ignite); }
.tlink::after { content: "→"; font-family: var(--font-mono); font-size: 1em; }

/* ---- forms --------------------------------------------------------- */
.field { display: block; margin-bottom: var(--sp-4); }
.field__label {
  display: block; font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted);
  margin-bottom: var(--sp-2);
}
.field__hint { font-size: var(--fs-sm); color: var(--fg-faint); margin-top: var(--sp-2); }
.input, .select, .textarea {
  width: 100%; min-height: 46px; padding: 0.65rem 0.8rem;
  font-family: var(--font-sans); font-size: var(--fs-body); color: var(--fg);
  background: var(--bg-raised); border: 1px solid var(--line-strong); border-radius: var(--r-sharp);
  transition: border-color var(--dur-1) var(--ease);
}
.textarea { min-height: 130px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--c-ignite); outline: none; box-shadow: 0 0 0 3px rgba(255,90,30,.16); }
.checkline { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-sm); }
.checkline input { width: 24px; height: 24px; margin-top: 2px; accent-color: var(--c-ignite); flex: none; }
/* Contact links are blockified when they sit in a flex/grid block, so they need their
   own 24 px hit box rather than the inline-text exemption (WCAG 2.5.8). */
a[href^="tel:"], a[href^="mailto:"] { display: inline-block; min-height: 24px; line-height: 24px; }

/* ---- accessibility helpers ---------------------------------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--c-ignite); color: #fff; padding: 0.6rem 1rem; font-weight: 600;
}
.skip-link:focus { left: 0; }
.vh {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media print {
  .site-nav, .site-foot, .btn { display: none; }
}