/* Liberty Works LLC — shared site chrome.
   Brand colors sourced directly from the Labor Services Agreement letterhead:
   gold #C9A84C, black #0A0A0A. Every customer-facing page should link this
   stylesheet rather than redefining :root/nav/footer/mobile-menu locally —
   this is the single source of truth for those, so a future brand tweak only
   needs one edit.

   Legacy variable names (--red, --red-light) are kept so page-specific CSS
   written against var(--red) doesn't need to be touched everywhere; both now
   resolve to the brand gold instead of the old red accent. */

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

/* Mailart Rubberstamp — used for primary display headings only (hero H1s and
   .page-header h1 on the legal/quote pages), not body text or small labels;
   a rubber-stamp display face reads best large and sparingly.
   Commercial webfont licence purchased from K-Type (k-type.com) — Regular +
   Oblique, self-hosted per that licence. Files converted from the licensed
   OTF delivery to woff2/woff via fontTools; source OTF/TTF kept outside the
   deployed site (not needed at runtime). */
@font-face {
  font-family: 'Mailart Rubberstamp';
  src: url('fonts/MailartRubberstamp-Regular.woff2') format('woff2'),
       url('fonts/MailartRubberstamp-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mailart Rubberstamp';
  src: url('fonts/MailartRubberstamp-Oblique.woff2') format('woff2'),
       url('fonts/MailartRubberstamp-Oblique.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --black: #0A0A0A;
  --dark: #161614;
  --darker: #111110;
  --gold: #C9A84C;
  --gold-light: #DFC06B;
  --red: #C9A84C;       /* legacy alias -> gold */
  --red-light: #DFC06B; /* legacy alias -> gold-light */
  --cream: #F5F2E8;
  --cream-dim: #c8bc9c;
  --gray: #3a3a36;
  --gray-light: #5a5a54;
  --white: #FFFFFF;
  --green: #2a7a2a;
}

html { scroll-behavior: smooth; }

body {
  background: var(--black);
  color: var(--cream);
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

/* NAV */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5%;
  height: 72px;
  background: rgba(10,10,10,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(201,168,76,0.3);
}

.nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav-logo img { height: 44px; width: auto; }

.nav-links { display: flex; align-items: center; gap: 32px; list-style: none; }
.nav-links a { color: var(--cream-dim); text-decoration: none; font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; transition: color 0.2s; }
.nav-links a:hover { color: var(--cream); }

.nav-cta { background: var(--gold) !important; color: var(--black) !important; font-weight: 700 !important; padding: 8px 20px !important; letter-spacing: 0.08em !important; transition: background 0.2s !important; }
.nav-cta:hover { background: var(--gold-light) !important; }
.nav-invoice { color: var(--cream-dim); }

.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
.hamburger span { display: block; width: 24px; height: 2px; background: var(--cream); transition: all 0.3s; }

.mobile-menu { display: none; position: fixed; top: 72px; left: 0; right: 0; background: var(--darker); border-bottom: 1px solid rgba(201,168,76,0.3); z-index: 99; padding: 24px 5%; flex-direction: column; gap: 20px; }
.mobile-menu.open { display: flex; }
.mobile-menu a { color: var(--cream-dim); text-decoration: none; font-family: 'Barlow Condensed', sans-serif; font-size: 18px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }

/* FOOTER */
/* Reserves roughly the footer's height before nav-footer.js injects the real
   markup, so the page doesn't visibly jump once the fetch resolves. Not
   pixel-perfect across every viewport, just reduces the jank. */
#footer-placeholder { display: block; min-height: 420px; background: var(--darker); border-top: 1px solid rgba(201,168,76,0.2); }
@media (max-width: 900px) { #footer-placeholder { min-height: 620px; } }

footer { background: var(--darker); border-top: 1px solid rgba(201,168,76,0.2); padding: 60px 5% 32px; position: relative; z-index: 1; }
.footer-inner { max-width: 1100px; margin: 0 auto; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
.footer-brand img { height: 50px; margin-bottom: 16px; }
.footer-brand p { font-size: 14px; color: var(--gray-light); line-height: 1.7; max-width: 280px; }
.footer-tagline { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin-top: 12px; }
.footer-col h4 { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: var(--cream-dim); margin-bottom: 16px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col ul li::before { display: none; }
.footer-col ul li a { color: var(--gray-light); text-decoration: none; font-size: 14px; transition: color 0.2s; }
.footer-col ul li a:hover { color: var(--cream); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer-bottom p { font-size: 13px; color: var(--gray-light); }
.footer-bottom span { color: var(--gold); }

@media (max-width: 768px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
}