/* ==========================================================================
   Russell SPC shared site layer
   --------------------------------------------------------------------------
   ONE source of truth for design tokens and page chrome. Every public page
   links this file BEFORE its own inline <style>, then defines only what is
   unique to that page.

   Why this file exists: the eight public pages each carried their own copied
   :root block, nav, footer, button and form CSS, and they had drifted. The
   homepage rendered body text in navy while every other page used gray, the
   About page loaded Inter 300 to 800 while the homepage H1 asked for 900, and
   the Templates page had lost its mobile menu entirely. Chrome markup stays
   inline per page (a fixed nav injected by JS would shift layout and would
   leave crawlers and no-JS visitors with no navigation), but its CSS and its
   behaviour now live here.

   CANONICAL CHROME MARKUP. Copy these two blocks verbatim into every public
   page. site.js marks the current item with aria-current, so the blocks are
   byte-identical on every page.

   <a class="skip-link" href="#main">Skip to content</a>

   <nav id="navbar" aria-label="Primary">
     <a href="/" class="nav-logo">Russell <span>SPC</span></a>
     <div class="nav-menu" id="nav-menu">
       <ul class="nav-links">
         <li><a href="/services">Services</a></li>
         <li><a href="/#products">Products</a></li>
         <li><a href="/templates">Templates</a></li>
         <li><a href="/about">About</a></li>
         <li><a href="/faq">FAQ</a></li>
         <li><a href="/#contact">Contact</a></li>
       </ul>
     </div>
     <button class="nav-mobile-toggle" id="mobile-toggle" aria-label="Menu"
             aria-expanded="false" aria-controls="nav-menu">
       <span></span><span></span><span></span>
     </button>
   </nav>

   <footer>
     <div class="footer-inner">
       <div>
         <div class="footer-logo">Russell <span>SPC</span> LLC</div>
         <div class="footer-tagline">Systems. Products. Consulting.</div>
       </div>
       <nav class="footer-nav" aria-label="Footer">
         <ul class="footer-links">
           <li><a href="/services">Services</a></li>
           <li><a href="/#products">Products</a></li>
           <li><a href="/templates">Templates</a></li>
           <li><a href="/about">About</a></li>
           <li><a href="/faq">FAQ</a></li>
           <li><a href="/#contact">Contact</a></li>
           <li><a href="/privacy">Privacy</a></li>
           <li><a href="/terms">Terms</a></li>
         </ul>
       </nav>
       <div class="footer-meta">
         <div class="footer-copy">&copy; 2026 Russell SPC LLC. All rights reserved.</div>
         <a class="footer-admin" href="/admin/">Admin</a>
       </div>
     </div>
   </footer>

   Page content must be wrapped in <main id="main" tabindex="-1"> so the skip
   link has a target.
   ========================================================================== */

/* --- Fonts: Lora for headings, Nunito for everything else. Both self-hosted
   as variable latin subsets, so there is no third-party origin in the critical
   path and no per-page weight drift. 37 KB + 38 KB.

   Lora's weight axis stops at 700. Do NOT ask a heading for 800 or 900: the
   browser clamps to 700 and some will synthesise a faux bold that smears a
   serif. 700 is the heaviest heading weight on this site. --- */
@font-face {
  font-family: 'Lora';
  src: url('/assets/fonts/lora-var-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  src: url('/assets/fonts/nunito-var-latin.woff2') format('woff2');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}

:root {
  /* Brand */
  --navy: #24425F;          /* headings, nav, dark bands */
  --navy-deep: #16283A;     /* deepest band */
  --navy-mid: #517293;      /* hover */

  /* Text */
  --ink: #1B2A3A;           /* body copy, 14.6:1 on white */
  --muted: #55657A;         /* secondary copy, 5.9:1 on white */

  /* Surfaces */
  --bg: #FFFFFF;
  --bg-alt: #F4F6F8;        /* light gray bands */
  --line: #D9DFE6;

  /* Accent. --accent is the only teal safe for TEXT on a light surface
     (5.1:1). --accent-bright is 2.1:1 on white: decoration, or text on navy
     only. Never set --accent-bright as a text color on a light background. */
  --accent: #007A8A;
  --accent-deep: #00454E;   /* accent dark enough for 4.5:1 on mid-grey photography */
  --accent-bright: #00C4D9;
  --accent-soft: rgba(0,122,138,0.10);

  /* Finding severity, all AA on white and on --bg-alt */
  --sev-critical: #B42318;
  --sev-high: #C2410C;
  --sev-medium: #8A5A00;
  --sev-low: #1F7A4D;

  --font-head: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --weight-head: 700;      /* the heaviest Lora has; never ask for more */

  /* --- Legacy aliases -------------------------------------------------
     Page CSS still references the old token names. These keep it rendering
     while the palette moves in one step. Deleted once every page has been
     rewritten (see the rebrand plan, phase 6). --- */
  --linen: var(--bg-alt);
  --gun: var(--ink);
  --gun-light: var(--muted);
  --gunmetal: var(--muted);
  --cyan: var(--accent-bright);
  --cyan-dim: rgba(0,196,217,0.15);
  --cyan-glow: rgba(0,196,217,0.08);
  --cyan-pastel: #E3EDF1;
  --sky-deep: var(--navy-deep);
  --white: #FFFFFF;
  --mint: var(--accent);
  --mint-deep: var(--accent);
  --mint-light: var(--accent-soft);
  --mint-soft: var(--accent-soft);
  --mint-glow: var(--accent-soft);
  --mermaid-mint: var(--bg-alt);
  --border-light: rgba(255,255,255,0.08);
  --border-navy: var(--line);
  --border: var(--line);
  --font: var(--font-body);
}

/* --- Reset and document ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 17px;
  scroll-behavior: smooth;
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--bg-alt);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Headings carry the serif. Weight is capped at 700 because that is where
   Lora's axis ends. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: var(--weight-head);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

p, li { text-wrap: pretty; }
a, button, summary { touch-action: manipulation; -webkit-tap-highlight-color: rgba(0,122,138,0.18); }
img, video { max-width: 100%; }

/* Anchor targets must clear the fixed header, else a jump lands under it and
   the focused element is obscured (WCAG 2.2, 2.4.11). */
[id] { scroll-margin-top: 90px; }

/* One visible focus indicator everywhere. Individual components must not
   remove it; the social row used to set outline:none. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}
#navbar :focus-visible, .btn-primary:focus-visible {
  outline-color: var(--accent-bright);
}

/* --- Skip link --------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 300;
  padding: 0.65rem 1.1rem;
  background: var(--navy);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 4px 4px;
  transition: top 0.15s ease-in;
}
.skip-link:focus { top: 0; }

main:focus { outline: none; }

/* --- Nav ---------------------------------------------------------------
   Scoped to #navbar, never the bare `nav` element: the footer wraps its own
   links in a <nav> for landmark purposes, and a bare selector turned that
   into a second fixed navy bar. */
#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 4rem;
  padding-left: max(4rem, env(safe-area-inset-left));
  padding-right: max(4rem, env(safe-area-inset-right));
  background: var(--navy);
  border-bottom: 1px solid rgba(0,196,217,0.15);
  box-shadow: 0 2px 16px rgba(0,0,0,0.18);
  transition: background 0.3s, box-shadow 0.3s;
}
#navbar.scrolled { box-shadow: 0 2px 24px rgba(0,0,0,0.28); }

.nav-logo {
  font-family: var(--font-head);
  font-weight: var(--weight-head);
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  color: #fff;
  text-decoration: none;
}
.nav-logo span { color: var(--accent-bright); }

.nav-menu { display: flex; align-items: center; gap: 2.5rem; }
.nav-links { display: flex; gap: 2.5rem; list-style: none; }
.nav-links a {
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.2s;
}
.nav-links a:hover { color: #fff; }
.nav-links a.active,
.nav-links a[aria-current="page"] { color: var(--accent-bright); }

.nav-mobile-toggle { display: none; background: none; border: none; cursor: pointer; }

/* Reduced chrome, used by focused conversion pages. */
.nav--minimal .nav-back {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  transition: color 0.2s;
}
.nav--minimal .nav-back:hover { color: #fff; }

/* --- Buttons ----------------------------------------------------------- */
.btn-primary,
.btn-outline {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 2rem;
  font-family: var(--font-body);
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
}
.btn-primary {
  background: var(--accent-bright);
  color: var(--navy);
  font-weight: 600;
  border: none;
  box-shadow: 0 0 20px rgba(0,196,217,0.25);
  transition: box-shadow 0.25s, transform 0.2s;
}
.btn-primary:hover {
  box-shadow: 0 0 36px rgba(0,196,217,0.55);
  transform: translateY(-1px);
}
.btn-outline {
  background: transparent;
  color: var(--navy);
  font-weight: 500;
  border: 1px solid var(--line);
  transition: border-color 0.25s, color 0.25s, box-shadow 0.25s;
}
.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 24px var(--accent-soft);
}
.btn-primary:active, .btn-outline:active { scale: 0.98; }

/* --- Forms ------------------------------------------------------------- */
.form-group { margin-bottom: 1.25rem; }
.form-group label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-group textarea { resize: vertical; min-height: 120px; }

/* Honeypot. Kept out of the accessibility tree as well as out of sight. */
.form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-submit {
  width: 100%;
  padding: 1rem;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}
.form-submit:hover { background: var(--navy-mid); }
.form-submit[disabled] { opacity: 0.75; cursor: default; }

/* Submission feedback, announced to screen readers via role="status". */
.form-status {
  margin-top: 0.75rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
  min-height: 1.2em;
}

/* --- Section primitives ------------------------------------------------ */
section { padding: 7rem 4rem; }
.section-inner { max-width: 1200px; margin: 0 auto; }
.section-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}
.section-label.light { color: var(--accent-bright); }
h2.section-title {
  font-weight: var(--weight-head);
  font-size: clamp(2rem, 4vw, 3.25rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--navy);
  margin-bottom: 1.25rem;
}
h2.section-title.light { color: #fff; }
.section-sub {
  font-size: 1rem;
  font-weight: 400;
  color: var(--muted);
  max-width: 480px;
  line-height: 1.7;
}
.section-sub.light { color: rgba(255,255,255,0.72); }

/* --- Severity chips. Used by the findings and methodology pages. ------- */
.sev {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 3px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}
.sev--critical { background: var(--sev-critical); }
.sev--high { background: var(--sev-high); }
.sev--medium { background: var(--sev-medium); }
.sev--low { background: var(--sev-low); }
.sev--enhancement { background: var(--muted); }

/* --- Footer ------------------------------------------------------------ */
footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  padding: 3rem 4rem;
}
.footer-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 2rem;
}
.footer-logo {
  font-family: var(--font-head);
  font-weight: var(--weight-head);
  font-size: 1rem;
  color: var(--navy);
  letter-spacing: -0.02em;
}
.footer-logo span { color: var(--accent); }
.footer-tagline {
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: 0.06em;
  margin-top: 0.25rem;
}
.footer-links {
  display: flex; gap: 1.5rem 2rem; list-style: none;
  flex-wrap: wrap; justify-content: center;
}
.footer-links a {
  font-size: 0.82rem;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--navy); }
.footer-copy { font-size: 0.75rem; color: var(--muted); }
/* Owner's way back into /admin. Cloudflare Access gates it and robots.txt
   disallows it, so there is nothing to gain by hiding it in the design, and
   plenty to lose: the previous version was rgba(...,0.1) on the old footer,
   about 1.2:1, which is a WCAG 1.4.3 failure sitting in the footer of a site
   that sells accessibility audits. It reads as a normal secondary link. */
.footer-admin {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: var(--muted);
  text-decoration: none;
}
.footer-admin:hover { color: var(--navy); text-decoration: underline; }

/* --- Scroll reveal -----------------------------------------------------
   Hidden only when JS is running, so content is never trapped at opacity 0
   for a crawler or a visitor with a blocked script. site.js sets html.js. */
.reveal { opacity: 1; }
html.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s ease, transform 0.65s cubic-bezier(.2,.7,.2,1);
}
html.js .reveal.visible { opacity: 1; transform: none; }

/* --- Mobile ------------------------------------------------------------ */
@media (max-width: 900px) {
  #navbar {
    padding: 1rem 1.5rem;
    padding-left: max(1.5rem, env(safe-area-inset-left));
    padding-right: max(1.5rem, env(safe-area-inset-right));
  }
  .nav-menu {
    display: none;
    position: fixed; inset: 0; top: 64px;
    background: var(--navy);
    flex-direction: column; justify-content: center;
    gap: 2rem; padding: 2rem;
    z-index: 99;
  }
  .nav-menu.open { display: flex; }
  .nav-links { flex-direction: column; align-items: center; gap: 1.5rem; }
  .nav-links a { font-size: 1rem; }
  .nav-mobile-toggle { display: flex; flex-direction: column; gap: 5px; padding: 0.35rem; }
  .nav-mobile-toggle span {
    display: block; width: 24px; height: 2px;
    background: #fff; transition: 0.3s;
  }
  section { padding: 5rem 1.5rem; }
  footer { padding: 2.5rem 1.5rem; }
  .footer-inner { flex-direction: column; text-align: center; align-items: center; gap: 1.5rem; }
  .footer-links { justify-content: center; gap: 1rem 1.5rem; }
}

/* --- Motion ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  html.js .reveal { opacity: 1; transform: none; }
}

/* --- Print ------------------------------------------------------------- */
@media print {
  #navbar, .skip-link, .float-cta { display: none !important; }
  body { background: #fff; color: #000; }
  a[href^="/"]::after { content: " (russellspc.com" attr(href) ")"; font-size: 0.85em; }
}