/* northbaseworks.com — shared design tokens, base elements, and small components reused
   across 2+ pages (index.html, scavenger/privacy.html, scavenger/support.html,
   scavenger/case-study.html). Linked before each page's own <style> block, so a page can
   still override a shared rule locally when its layout genuinely needs to (e.g.
   .section-head h2's font-size differs between the homepage and the narrower
   case-study column — that's a deliberate, existing visual difference, not
   inconsistency, and is preserved as a local override rather than forced identical here).

   Page-specific layout — hero/services/work grids (index), FAQ details/summary + contact
   form (support), the disclaimer callout (privacy), tier/fact card grids (case-study) —
   stays inline in each page's own <style> block. This file is deliberately just the
   common ground, not an attempt to centralize everything. */

:root{
  --bg: #101215;
  --bg-raised: #191C20;
  --line: #2C3036;
  --ink: #EDEBE3;
  --ink-dim: #9CA3AB;
  --tan: #838B94;
  --coral: #D85A30;
  --coral-text: #FF7A47;
  --max: 1080px; /* narrower detail pages override this in their own <style> block */
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; background-color:var(--bg); }
body{
  margin:0;
  background-color:var(--bg);
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size:48px 48px;
  color:var(--ink);
  font-family:'Space Grotesk', sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
.mono{ font-family:'IBM Plex Mono', monospace; }
::selection{ background:var(--coral); color:#fff; }
:focus-visible{ outline:2px solid var(--coral); outline-offset:3px; }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 24px; }

/* Simple detail-page header: back link only. index.html has its own richer header (logo
   + nav) defined inline there instead of using this. */
header.top{ display:flex; align-items:center; justify-content:space-between; max-width:var(--max); margin:0 auto; padding:28px 24px 0; }
header.top a.back{ font-family:'IBM Plex Mono', monospace; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-dim); text-decoration:none; }
header.top a.back:hover{ color:var(--coral); }

/* Footer — shared text/link treatment, centered layout by default (privacy/support/
   case-study). index.html opts into the wider flex-spread layout via .footer-flex. */
footer{ border-top:1px solid var(--line); padding:24px; text-align:center; }
footer p, footer a{ font-family:'IBM Plex Mono', monospace; font-size:0.75rem; color:var(--tan); margin:0; text-decoration:none; }
footer a:hover{ color:var(--coral); }
footer .foot-links{ display:flex; gap:16px; justify-content:center; margin-top:8px; }
footer.footer-flex{ padding:28px 24px; text-align:left; }
footer.footer-flex .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; }
footer.footer-flex .foot-links{ gap:20px; margin-top:0; }

/* Status chip — "status: X" pill, used on the homepage hero and the case-study hero. */
.status-chip{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--bg-raised); border:1px solid var(--line);
  border-radius:3px; padding:8px 16px;
}
.status-chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--coral); display:inline-block; }
.status-chip .status-text{ font-family:'IBM Plex Mono', monospace; font-size:0.78rem; color:var(--ink-dim); }
.status-chip .cursor{ font-family:'IBM Plex Mono', monospace; font-size:0.78rem; color:var(--coral-text); animation:nbw-blink 1.1s step-start infinite; }

/* Section header pattern — h2 + mono numbered marker in the top-right. Font-size is the
   homepage's original value; case-study.html overrides it smaller locally to fit its
   denser, narrower single-column layout (existing, deliberate difference). */
.section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:24px; gap:20px; flex-wrap:wrap; }
.section-head h2{ font-size:1.6rem; margin:0; font-weight:600; color:var(--ink); }
.section-head .heading-tag{ font-family:'IBM Plex Mono', monospace; font-size:0.78rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--tan); white-space:nowrap; }

@keyframes nbw-blink{ 0%,100%{ opacity:1; } 50%{ opacity:0; } }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}