/* siegestack.com -- shared stylesheet
 *
 * THE CONTENT HASH IN THE FILENAME IS NOT COSMETIC.
 * netlify.toml serves /*.css with max-age=31536000, immutable, and its comment
 * has been waiting for this file: "whoever adds the first stylesheet needs to
 * know it will be frozen for a year and needs the same ?v= treatment on the day
 * they add it." A hashed filename is that treatment done by construction rather
 * than by memory -- change the CSS and the name changes, so no returning
 * visitor can be served a stale copy for a year. /consultant-form.js was fixed
 * on 2026-08-16 and reached first-time visitors only, because nothing forced it.
 *
 * WHAT IS IN HERE: rules every page already had, identically, plus class-rooted
 * rules identical wherever they appeared -- those are inert on a page whose
 * markup lacks the class, so hoisting them cannot change rendering. Element
 * selectors were only hoisted when every page in scope already agreed.
 *
 * WHAT IS NOT: this site has TWO page templates and consolidating them into one
 * would have restyled 21 pages. They are doc.css and article.css.
 * See docs/css-consolidation-2026-08-26.md.
 *
 * NO WEBFONTS HERE, AND THAT IS A MEASURED DECISION, NOT AN OVERSIGHT.
 * Phase 6 briefly wired var(--font-body) into this file and linked
 * assets/fonts.<hash>.css from all 22 pages, which handed every one of them
 * Inter. Measured, that was: one extra render-blocking request, and between
 * 23.7 KB and 137.8 KB of woff2, on pages that previously fetched ZERO font
 * bytes in ZERO requests and painted their final text on the first frame.
 *
 * The webfonts exist to serve two long-form article pages that were already
 * paying that cost through Google. Extending it to the commercial pages was a
 * side effect of consolidating stylesheets, not a decision anyone made, and
 * this site does not publish unmeasured claims about performance either.
 *
 * The system stack is the choice. If that is ever revisited, measure it first
 * and say so here.
 *
 * ONE :root, ONE --blue-bright. Family A omitted the token and wrote
 * var(--blue-bright, #57cbff); Family B defined it and wrote var(--blue-bright).
 * Same colour, two spellings. The token is defined once here and the fallback
 * is gone.
 */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --navy-dark: #0a192f;
  --navy: #112240;
  --blue-accent: #64ffda;
  --slate: #8892b0;
  --light-slate: #a8b2d1;
  --lightest-slate: #ccd6f6;
  --white: #e6f1ff;
  --blue-bright: #57cbff;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  background: var(--navy-dark);
  color: var(--lightest-slate);
  line-height: 1.6;
}
nav {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(10, 25, 47, 0.95);
  backdrop-filter: blur(10px);
  z-index: 1000;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(100, 255, 218, 0.1);
}
.nav-logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--white);
  text-decoration: none;
  letter-spacing: -1px;
}
.nav-links a:hover {
  color: var(--blue-accent);
}
.content {
  max-width: 800px;
  margin: 0 auto;
  padding: 4rem 2rem;
}
li {
  margin-bottom: 0.5rem;
}
.last-updated {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(100, 255, 218, 0.1);
  color: var(--slate);
  font-style: italic;
}
.site-footer {
  background: var(--navy-dark);
  border-top: 1px solid rgba(100,255,218,0.1);
  padding: 3rem 2rem 2rem;
}
.foot-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
}
.foot-grid h3 {
  color: var(--white);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: .9rem;
  font-weight: 600;
}
.foot-grid a {
  display: block;
  color: var(--slate);
  text-decoration: none;
  font-size: .9rem;
  margin-bottom: .5rem;
}
.foot-grid a:hover, .foot-grid a:focus-visible {
  color: var(--blue-accent);
  text-decoration: underline;
}
.foot-bottom {
  max-width: 1200px;
  margin: 2.5rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(136,146,176,.2);
  text-align: center;
}
.foot-bottom p {
  color: var(--slate);
  font-size: .85rem;
  margin-bottom: .4rem;
}
.foot-bottom a {
  color: var(--blue-accent);
  text-decoration: underline;
  text-underline-offset: .15em;
}
.foot-bottom a:hover, .foot-bottom a:focus-visible {
  color: var(--white);
}
.btn {
  display: inline-block;
  padding: .75rem 1.5rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
  transition: all .2s;
  cursor: pointer;
  border: none;
  font-size: .9rem;
}
.btn-primary {
  background: var(--blue-accent);
  color: var(--navy-dark);
}
.btn-primary:hover {
  background: var(--blue-bright);
  transform: translateY(-2px);
}
.nav-links a.btn-primary, .nav-links a.btn-primary:hover {
  color: var(--navy-dark);
}
.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  color: var(--light-slate);
  font-size: 1.5rem;
  cursor: pointer;
}
.subtitle {
  color: var(--slate);
  font-size: 1.15rem;
  max-width: 720px;
  margin: 0 auto;
}
.om-wrap {
  max-width: 980px;
  margin: 0 auto;
  padding: 2rem;
}
.om-callout {
  border-left: 4px solid var(--blue-accent, #64ffda);
  background: rgba(100,255,218,0.06);
  padding: 1.2rem 1.5rem;
  border-radius: 6px;
  margin: 2rem 0;
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
  }
  .content {
    padding: 3rem 1.5rem;
  }
  .mobile-menu-btn {
    display: block;
  }
}

@media (max-width: 1280px) {
  .nav-links {
    display: none;
  }
  .mobile-menu-btn {
    display: block;
  }
}