/* Quiet Machines theme — light-first.
 * Loaded AFTER site.css / nav.css, so it overrides rather than forks them.
 *
 * DESIGN RULE: no filter, tint, blend mode or opacity is ever applied to
 * the original original artwork. The hero illustration and the client logos
 * are pastel/dark vectors drawn for a light ground, so the page keeps that
 * light ground and every asset renders at full fidelity. The brand shows up
 * as CHROME around the content — dark green nav, dark green footer, green
 * accents and CTAs — never as a wash over it.
 *
 * That means this file is deliberately small: site.css already gets the
 * light surfaces right, so the theme only re-points the accent and dresses
 * the chrome, instead of inverting 69 hardcoded values.
 */

:root {
  /* Deep forest for chrome, mid green for accents on light ground */
  --qm-green: #0F2A22;
  --qm-green-2: #17392E;
  --qm-accent: #27604A;
  --qm-accent-deep: #1D4C3A;
  --qm-frost: #E9EFEA;
  --qm-line-dark: rgba(233, 239, 234, 0.16);

  /* Re-point site.css's blue accent to the brand green. This single swap
     carries eyebrows, links, card arrows and the hero accent word. */
  --blue: var(--qm-accent);
  --blue-deep: var(--qm-accent-deep);
  --blue-light: #CFE3D8;
  --blue-light-2: #A8CDBA;
  --blue-tint: #DCEAE2;

  /* Stat tiles set background inline via var(--*-bg); inline styles beat any
     rule, so the token is the correct lever. Re-cut to sit in the green
     family while staying light enough for near-black text on top. */
  --blue-bg: #DCEAE2;
  --green-bg: #D6E9DC;
  --pink-bg: #E8EFE9;
  --yellow-bg: #EAF0E6;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

/* site.css declares font-family on `body` as a longhand and bakes "Neue
   Montreal" into `font:` shorthands across dozens of class selectors — both
   outrank a universal selector, so a plain * rule silently does nothing.
   !important on font-family is the one blunt instrument used in this file. */
*, *::before, *::after { font-family: var(--font-sans) !important; }
:root { --sb-font-sans: var(--font-sans); }

body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, h4, h5, .h-display { letter-spacing: -0.018em; }
.eyebrow { letter-spacing: 0.14em; }

/* ---- Logo lockup ---- */
.floatnav__logo { gap: 12px; text-decoration: none; align-items: center; display: flex; }
.floatnav__logo img.qm-logo-lockup { height: 58px; width: auto; display: block; flex: none; }

/* ---- Highlighted text, unified to the same forest green as the logo ----
   .h-accent / .eyebrow already read var(--blue), which most other accent
   uses (buttons, borders, card arrows) also share -- repointing that
   token would darken those too, not just text. These are the actual
   "highlighted text" spans site-wide (colored words inside headings, the
   small uppercase kicker above them -- including the .math section's
   own more-specific override -- and the marquee), so they're targeted
   directly instead. */
.h-accent,
.eyebrow,
.math__head .eyebrow,
.trust__term {
  color: #162A22;
}

/* Hero-only accent words ("Next Decade.", "AI-native") -- matched to
   var(--qm-accent), the same forest green as the "Learn more about
   Quiet Machines" button, rather than the darker #162A22 used elsewhere. */
.hero2__work,
.hero2__muted-accent {
  color: var(--qm-accent);
}

/* A few specific .h-accent spans ("no wrong place", "actually gets to
   work", "tailored to the way you work") get the same button green as
   the hero words above, layered on top of the shared .h-accent rule via
   this modifier -- every OTHER .h-accent on the site (there are dozens)
   stays at the darker #162A22. */
.h-accent.h-accent--brand {
  color: var(--qm-accent);
}

/* ---- Nav: dark green chrome over light content ----
   nav.css scopes these to .floatnav, not :root, so a :root override is
   shadowed for everything inside the nav. Match the scope. */
.floatnav {
  --pill-bg: var(--qm-green);
  --pill-border: rgba(233, 239, 234, 0.14);
  --pill-text: var(--qm-frost);
  --pill-accent: #8FCBAE;
  --pill-shadow: 0 1px 2px rgba(15, 42, 34, 0.14), 0 10px 30px -14px rgba(15, 42, 34, 0.45);
}
.floatnav__pill { background: var(--pill-bg); border-color: var(--pill-border); }
/* Past-hero state. nav.css sets this at .floatnav.is-scrolled .floatnav__pill
   (two classes), which outranks a single-class override — match it. */
.floatnav.is-scrolled .floatnav__pill {
  background: rgba(15, 42, 34, 0.94);
  border-color: rgba(233, 239, 234, 0.14);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 2px rgba(15, 42, 34, 0.16), 0 8px 26px -14px rgba(15, 42, 34, 0.5);
}
.floatnav__link { color: var(--qm-frost); text-transform: uppercase; font-size: 13px; letter-spacing: 0.08em; font-weight: 500; }
.floatnav__link:hover { color: #8FCBAE; }
.floatnav__caret { color: currentColor; }
/* Dropdown panels stay dark so the whole nav reads as one chrome element */
.floatnav__menu, .floatnav__sheet {
  background: var(--qm-green);
  border-color: rgba(233, 239, 234, 0.14);
  box-shadow: 0 28px 70px -34px rgba(15, 42, 34, 0.7);
}
.floatnav__menu-title, .floatnav__sheet-item { color: var(--qm-frost); }
.floatnav__menu-desc { color: rgba(233, 239, 234, 0.66); }
.floatnav__menu-label { color: rgba(233, 239, 234, 0.5); }
/* Services/Resources/About rows (.floatnav__menu-item--svc, shared by the
   desktop dropdown and the mobile sheet) hover/tap to a light --svc-tint
   pastel in nav.css with no color override, so the row's frost text (set
   above) all but disappears against it -- near-white on near-white. The
   Solutions rows (.floatnav__menu-seg) don't have this problem since
   nav.css hardcodes a dark label color there. Repointed to a transparent
   wash of the brand green (the logo's own hue) instead, so the highlight
   reads as on-brand and the row's text stays legible throughout. */
.floatnav__menu-item--svc:hover,
.floatnav__menu-item--svc.is-current,
.floatnav__sheet-item:hover {
  background: rgba(39, 96, 74, 0.38);
  border-color: rgba(39, 96, 74, 0.6);
}
.floatnav__menu-seg { color: var(--qm-frost); }
/* Solution row chips keep their per-category pastel from nav.css (--sol-chip)
   even on the dark panel — they're light enough that the #000-stroked glyph
   inside stays legible, and the colour-coding is worth keeping visible. */

/* ---- Nav buttons ----
   nav.css hardcodes these for a LIGHT pill: --secondary uses color:#0a0a0a
   (1.3:1 on dark green) and --primary pairs #fff with var(--pill-accent),
   which is a light mint (1.85:1). Both need re-pairing for dark chrome. */
.floatnav__btn--secondary {
  background: transparent;
  color: var(--qm-frost);
  border-color: rgba(233, 239, 234, 0.30);
}
.floatnav__btn--secondary:hover {
  background: rgba(233, 239, 234, 0.10);
  color: var(--qm-frost);
  border-color: rgba(233, 239, 234, 0.5);
}
.floatnav__btn--primary {
  background: #8FCBAE;
  color: var(--qm-green);
  border-color: #8FCBAE;
  box-shadow: none;
}
.floatnav__btn--primary:hover {
  background: #A5D9BF;
  border-color: #A5D9BF;
  color: var(--qm-green);
  box-shadow: none;
}
/* nav.css hardcodes the burger bars #0a0a0a for the light pill — near
   invisible on dark green chrome. */
.floatnav__hamburger span { background: var(--qm-frost); }

/* Uppercase + tracking widens the labels enough to wrap ("OUR WORK"). */
.floatnav__link { white-space: nowrap; }

/* Mobile sheet sits on the same dark green, so the shared .btn--secondary
   (green text on green) would vanish there. */
.floatnav__sheet .btn--secondary {
  color: var(--qm-frost);
  border-color: rgba(233, 239, 234, 0.30);
}
.floatnav__sheet .btn--secondary:hover {
  background: var(--qm-frost); color: var(--qm-green); border-color: var(--qm-frost);
}
.floatnav__sheet .btn--primary {
  background: #8FCBAE; color: var(--qm-green); border-color: #8FCBAE;
}
.floatnav__sheet .btn--primary:hover { background: #A5D9BF; border-color: #A5D9BF; }

/* ---- Controls ---- */
.btn--primary { background: var(--qm-accent); border-color: var(--qm-accent); color: #fff; }
.btn--primary:hover { background: var(--qm-accent-deep); border-color: var(--qm-accent-deep); }
.btn--secondary { border-color: var(--qm-green); color: var(--qm-green); }
.btn--secondary:hover { background: var(--qm-green); color: var(--qm-frost); border-color: var(--qm-green); }

/* .puzzle__b .puzzle__cta ("Learn more about Quiet Machines") hardcodes an
   old "studio green" (#3D7827) in site.css that doesn't match the brand
   accent used everywhere else -- realign it to var(--qm-accent). */
.puzzle__b .puzzle__cta {
  background: var(--qm-accent);
  border-color: var(--qm-accent);
}
.puzzle__b .puzzle__cta:hover {
  background: var(--qm-accent-deep);
  border-color: var(--qm-accent-deep);
}

/* ---- Footer: dark green anchor ----
   footer.js injects its styles into <head> at runtime, landing after this
   linked sheet, so these are prefixed with `body` to outrank it. */
body .footer { background: var(--qm-green); }
body .footer__rule { background: rgba(247, 244, 232, 0.22); }
body .footer__nav a { color: #F7F4E8; }
body .footer__nav a:hover { color: #8FCBAE; }
body .footer__bottom, body .footer__bottom a { color: rgba(247, 244, 232, 0.66); }
body .footer__bottom a:hover { color: #8FCBAE; }
body .footer__nl-title { color: #F7F4E8; }
body .footer__nl-sub { color: rgba(247, 244, 232, 0.72); }
body .footer__nl-cta { background: #8FCBAE; color: #08140F; font-weight: 600; }
body .footer__nl-cta:hover { background: #A5D9BF; }

/* The logo image already carries its own correct colors (see
   quiet-machines-logo-forest-f7f4e8.svg) — no filter needed. An earlier
   invert(1) filter here was a leftover from the old plain-black
   switchboard-wordmark.svg and was actively scrambling every custom-color
   logo asset placed here since (source of several past "why is the footer
   logo invisible" rounds). */

/* ---- Assets: explicitly untouched ----
   These rules exist to GUARANTEE full fidelity, overriding anything upstream
   that might dim or desaturate. The hero illustration and client logos are
   the original original vectors and render exactly as drawn. */
.hero2__scene, .hero2__scene * { filter: none; opacity: 1; mix-blend-mode: normal; }
.trust img, .trust svg { filter: none; opacity: 1; mix-blend-mode: normal; }
.reslatest__media img, .wwb__art, .wwb__art * { filter: none; opacity: 1; }

/* ---- Pre-existing contrast fixes ----
   These badge colours are hardcoded in site.css (not token-driven) and shipped
   below AA at 12.5px: agents 4.47:1, software 4.34:1. Darkened within the same
   hue so the original colour-coding still reads. */
.wwb__badge--agents { color: #1F5AAE; }
.wwb__badge--software { color: #2F5F1E; }

/* ---- Hardcoded brand blues ----
   jumpstart.css / compare.css / studio.css hardcode the original #397ae7
   instead of reading var(--blue), so the token swap never reaches them. On a
   green-branded site they read as the wrong brand, and several also fail AA
   (3.59-4.0:1). Re-pointed to the brand green, which is darker and clears the
   floor. This file loads last, so equal-specificity overrides win.

   NOTE: the per-industry chip colours (--sol-chip / --seg-accent, etc.) are
   deliberately NOT touched — that palette is the original categorisation
   system, not branding, and those tints already pass contrast. */

/* jumpstart.css */
.badge {
  background: rgba(39, 96, 74, 0.10);
  color: var(--qm-accent);
  border-color: rgba(39, 96, 74, 0.28);
}
.badge--blue { background: #DCEAE2; color: var(--qm-accent); }
.walk__num span { color: var(--qm-accent); }
.scopes__panel { background: var(--qm-accent); }
.scope-card__pill { background: #DCEAE2; color: var(--qm-accent); }
.js-faq__tri { border-left-color: var(--qm-accent); }

/* compare.css default accent (the --compare--green studio variant is fine) */
.compare { --cmp-accent: var(--qm-accent); }

/* Pre-existing greys: #8f8f91 measures 3.14:1 at 10-12px. Darkened to 5.25:1
   without changing the neutral character. */
.engagement__tag,
.walk__num--muted span { color: #6B6B6D; }

/* segment.css (industries/* and functions/* landers) — same pattern:
   hardcoded #397ae7 accent and #8a8a8c greys that measure 3.36-3.72:1. */
.segstart__card--jumpstart { --start-accent: var(--qm-accent); }
.seghero__more,
.chal-win__who em,
.chal-tab .is-mute { color: #6B6B6D; }