/*
 * base.css — the five rules that are byte-identical in all six global blocks.
 *
 * Verified, not assumed: every one of these lines appears character-for-character
 * in the global <style> of index, solutions, consulting, about, resources,
 * contact, legal-privacy and article-template.
 *
 * What is deliberately NOT here:
 *
 *   @keyframes            page-scoped, always. Names collide across pages with
 *                         different bodies (D3). Even the ones that happen to be
 *                         identical today stay per-page — hoisting them would
 *                         make the next collision silent.
 *   prefers-reduced-motion  index.html's version also pins
 *                         animation-iteration-count; the other seven pages only
 *                         set animation-duration. Not shared, so not shared here.
 *
 * Loaded on every page, before the page-scoped file. Work unit W1.3.
 * Hover/focus rules from style-hover arrive with the chrome in W2.x; additive
 * a11y in W9.2.
 */

html { scroll-behavior: smooth; }
body { margin: 0; background: #FAFAF7; color: #0C1D18; font-family: 'Hanken Grotesk', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: #39598C; }
a:hover { color: #0C1D18; }
::selection { background: rgba(57,89,140,0.18); }

/* ── Custom properties ───────────────────────────────────────────────────────
 * 02 §1: the design's logic classes set these at runtime purely to serve the
 * design tool's live prop editor. Reproducing the VALUES is required;
 * reproducing the mechanism is not, so they are declared once here.
 *
 * Every use in the markup is written var(--rcm-accent, #39598C) — with a
 * fallback. That is the trap in 03 §9: omit these declarations and the page
 * still looks correct, right up until something depends on --rcm-glow, which
 * has no sensible fallback. Declared together so that cannot happen.
 */
:root {
  --rcm-accent: #39598C;
  --rcm-glow: #39598C1A;
  --rcm-play: running;
  --cta-bg: #39598C;
  --cta-fg: #FFFFFF;
  --cta-bd: #39598C;
}

/* ── Hover states ────────────────────────────────────────────────────────────
 * style-hover is Claude Design syntax and does nothing in a browser, so every
 * hover in the design is currently dead (D4). Each rule below is the declaration
 * block from a style-hover attribute, copied byte-for-byte.
 *
 * :focus-visible is paired with each one — additive a11y (02 §4.2), invisible at
 * rest, so it cannot affect a visual diff. It carries the same declarations as
 * the hover so keyboard users get the identical affordance, plus a ring.
 *
 * W2.1 — sticky header.
 */
[data-h="nav-link"]:hover { color: #0C1D18; }
[data-h="nav-link"]:focus-visible { color: #0C1D18; outline: 2px solid var(--rcm-accent); outline-offset: 3px; }

[data-h="header-phone"]:hover { color: var(--rcm-accent, #39598C); }
[data-h="header-phone"]:focus-visible { color: var(--rcm-accent, #39598C); outline: 2px solid var(--rcm-accent); outline-offset: 3px; }

[data-h="header-linkedin"]:hover { color: var(--rcm-accent, #39598C); background: rgba(12,29,24,0.05); }
[data-h="header-linkedin"]:focus-visible { color: var(--rcm-accent, #39598C); background: rgba(12,29,24,0.05); outline: 2px solid var(--rcm-accent); outline-offset: 3px; }

/* Two CTA variants, because the design uses two different custom-property sets
 * for the same button — var(--cta-fg) on index/solutions/consulting/resources,
 * a literal #FFFFFF on about/contact/legal/article. Identical at default values;
 * kept apart so neither page's markup is altered to suit the other's. */
[data-h="header-cta"]:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -16px rgba(57,89,140,0.5); color: var(--cta-fg, #FFFFFF); }
[data-h="header-cta"]:focus-visible { transform: translateY(-2px); box-shadow: 0 16px 32px -16px rgba(57,89,140,0.5); color: var(--cta-fg, #FFFFFF); outline: 2px solid var(--rcm-accent); outline-offset: 3px; }

[data-h="header-cta-accent"]:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -16px rgba(57,89,140,0.5); color: #FFFFFF; }
[data-h="header-cta-accent"]:focus-visible { transform: translateY(-2px); box-shadow: 0 16px 32px -16px rgba(57,89,140,0.5); color: #FFFFFF; outline: 2px solid var(--rcm-accent); outline-offset: 3px; }

/* ── Neutralise WordPress's inline-border heuristics ─────────────────────────
 * wp-block-library ships ten rules of this shape:
 *
 *     html :where([style*="border-color"]) { border-style: solid; }
 *
 * They exist so a block editor user writing style="border-color:#000" gets a
 * visible border. They match on a SUBSTRING of the style attribute, so they also
 * fire on any element whose inline style merely mentions border-color — including
 * inside a `transition` list, where it is a property name and not a border at all.
 *
 * This is not hypothetical. The sticky header's inline style ends with
 *   transition: background 0.35s …, border-color 0.35s …, box-shadow 0.35s …
 * so it matched, took border-style: solid on all four sides, and the three sides
 * the design never declares fell back to the default `medium` width. The header
 * rendered 76px tall against the reference's 73px — a 3px top border made of
 * nothing. It took a box-model dump to find, because every child element measured
 * correct and only the container was wrong.
 *
 * 204 inline styles across the eight design pages contain border-*, 28 of them
 * only inside a transition. The design supplies every border it wants, so these
 * rules can only ever do damage here. Same selectors, same specificity, loaded
 * later — they lose.
 *
 * W6.1 MUST REVISIT THIS. Once single.php renders real block content, a client
 * writing an inline border-color on a block would be silently overridden too.
 * The fix then is to scope this by excluding the post-content wrapper, not to
 * delete it. See DECISIONS.md D19.
 */
html :where([style*="border-color"]),
html :where([style*="border-top-color"]),
html :where([style*="border-right-color"]),
html :where([style*="border-bottom-color"]),
html :where([style*="border-left-color"]),
html :where([style*="border-width"]),
html :where([style*="border-top-width"]),
html :where([style*="border-right-width"]),
html :where([style*="border-bottom-width"]),
html :where([style*="border-left-width"]) {
  border-style: initial;
}

/* W2.2 — footer + back-to-top. */
[data-h="footer-link"]:hover { color: var(--rcm-accent, #39598C); }
[data-h="footer-link"]:focus-visible { color: var(--rcm-accent, #39598C); outline: 2px solid var(--rcm-accent); outline-offset: 3px; }

[data-h="footer-legal"]:hover { color: var(--rcm-accent, #39598C); }
[data-h="footer-legal"]:focus-visible { color: var(--rcm-accent, #39598C); outline: 2px solid var(--rcm-accent); outline-offset: 3px; }

/* legal-privacy inverts its own bottom-bar link — accent at rest, #0C1D18 on
 * hover — where every other page is the other way round. */
[data-h="footer-legal-active"]:hover { color: #0C1D18; }
[data-h="footer-legal-active"]:focus-visible { color: #0C1D18; outline: 2px solid var(--rcm-accent); outline-offset: 3px; }

[data-h="back-to-top"]:hover { color: var(--rcm-accent, #39598C); box-shadow: 0 18px 38px -14px rgba(12,29,24,0.45); }
[data-h="back-to-top"]:focus-visible { color: var(--rcm-accent, #39598C); box-shadow: 0 18px 38px -14px rgba(12,29,24,0.45); outline: 2px solid var(--rcm-accent); outline-offset: 3px; }

/* W3.1 — legal page sticky index. */
[data-h="legal-index"]:hover { color: var(--rcm-accent, #39598C); border-left-color: var(--rcm-accent, #39598C); }
[data-h="legal-index"]:focus-visible { color: var(--rcm-accent, #39598C); border-left-color: var(--rcm-accent, #39598C); outline: 2px solid var(--rcm-accent); outline-offset: 3px; }

/* W4.2 — about, founder card. */
[data-h="founder-linkedin"]:hover { color:#0C1D18; }
[data-h="founder-linkedin"]:focus-visible { color:#0C1D18; outline: 2px solid var(--rcm-accent); outline-offset: 3px; }

/* W4.3 — about CTA button. */
[data-h="about-cta"]:hover { transform:translateY(-2px); box-shadow:0 30px 60px -24px rgba(57,89,140,0.6); filter:brightness(1.08); color:#FFFFFF; }
[data-h="about-cta"]:focus-visible { transform:translateY(-2px); box-shadow:0 30px 60px -24px rgba(57,89,140,0.6); filter:brightness(1.08); color:#FFFFFF; outline: 2px solid var(--rcm-accent); outline-offset: 3px; }

/* W4.4 — solutions hero, engagement profiles. */
[data-h="solutions-profile"]:hover { background:rgba(57,89,140,0.045); transform:translateX(4px); }
[data-h="solutions-profile"]:focus-visible { background:rgba(57,89,140,0.045); transform:translateX(4px); outline: 2px solid var(--rcm-accent); outline-offset: 3px; }

/* W5.1 — homepage hero CTA. Its shadow is 0 20px 42px -18px, not the
 * 0 30px 60px -24px of the about/solutions/consulting CTAs, so it is a separate
 * hook rather than a reuse of [data-h="about-cta"]. */
[data-h="home-hero-cta"]:hover { transform: translateY(-2px); box-shadow: 0 20px 42px -18px rgba(57,89,140,0.6); filter: brightness(1.08); color: #FFFFFF; }
[data-h="home-hero-cta"]:focus-visible { transform: translateY(-2px); box-shadow: 0 20px 42px -18px rgba(57,89,140,0.6); filter: brightness(1.08); color: #FFFFFF; outline: 2px solid var(--rcm-accent); outline-offset: 3px; }

/* W5.3 — homepage hexagons. The declaration is identical to the ACTIVE state, but
 * it must exist as a hover rule too: hovering an inactive hexagon lifts it, and no
 * screenshot at rest can show that (D4). */
[data-h="home-hex"]:hover { transform: translateY(-9px); filter: drop-shadow(0 30px 46px rgba(57,89,140,0.28)); }
[data-h="home-hex"]:focus-visible { transform: translateY(-9px); filter: drop-shadow(0 30px 46px rgba(57,89,140,0.28)); outline: 2px solid var(--rcm-accent); outline-offset: 3px; }

/* W5.4 — homepage "What We Do".
 * Three visually similar CTAs in this build carry three DIFFERENT shadows:
 * about-cta 0 30px 60px -24px, home-hero-cta 0 20px 42px -18px, and this one
 * 0 18px 38px -18px. Reusing either of the others would be a design change, and
 * no gate would catch it — hover is invisible to a resting screenshot (D4). */
[data-h="home-wwd-cta"]:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -18px rgba(57,89,140,0.6); filter: brightness(1.08); color: #FFFFFF; }
[data-h="home-wwd-cta"]:focus-visible { transform: translateY(-2px); box-shadow: 0 18px 38px -18px rgba(57,89,140,0.6); filter: brightness(1.08); color: #FFFFFF; outline: 2px solid var(--rcm-accent); outline-offset: 3px; }

/* The six waypoint nodes on the pathway diagram. They are absolutely positioned
 * with translate(-50%, -50%), so the hover transform must restate it — dropping
 * it would re-anchor the node to its top-left corner and shift it visibly. */
[data-h="home-jw-node"]:hover { transform: translate(-50%, -50%) scale(1.14); background: var(--rcm-accent, #39598C); color: #FFFFFF; }
[data-h="home-jw-node"]:focus-visible { transform: translate(-50%, -50%) scale(1.14); background: var(--rcm-accent, #39598C); color: #FFFFFF; outline: 2px solid var(--rcm-accent); outline-offset: 3px; }

/* W5.5 — homepage "Systems We Work In".
 * A FOURTH distinct CTA shadow: 0 24px 48px -20px, after about-cta's
 * 0 30px 60px -24px, home-hero-cta's 0 20px 42px -18px and home-wwd-cta's
 * 0 18px 38px -18px. Four similar buttons, four different shadows. */
[data-h="home-systems-cta"]:hover { transform:translateY(-2px); box-shadow:0 24px 48px -20px rgba(57,89,140,0.6); filter:brightness(1.08); color:#FFFFFF; }
[data-h="home-systems-cta"]:focus-visible { transform:translateY(-2px); box-shadow:0 24px 48px -20px rgba(57,89,140,0.6); filter:brightness(1.08); color:#FFFFFF; outline: 2px solid var(--rcm-accent); outline-offset: 3px; }

/* The seven system chips. */
[data-h="home-system"]:hover { color:var(--rcm-accent, #39598C); }
[data-h="home-system"]:focus-visible { color:var(--rcm-accent, #39598C); outline: 2px solid var(--rcm-accent); outline-offset: 3px; }

/* W6.2 — resources "Diagnostic Directory".
 * The more-row's background is rgba(57,89,140,0.05); solutions-profile uses
 * 0.045. Two hundredths apart, and a reuse would have been invisible to every
 * gate, since hover never appears in a resting screenshot (D4). */
[data-h="resources-symptom"]:hover { background:rgba(57,89,140,0.05); }
[data-h="resources-symptom"]:focus-visible { background:rgba(57,89,140,0.05); outline: 2px solid var(--rcm-accent); outline-offset: -2px; }
[data-h="resources-primary"]:hover { padding-left:26px; }
[data-h="resources-primary"]:focus-visible { padding-left:26px; outline: 2px solid var(--rcm-accent); outline-offset: 3px; }
[data-h="resources-more-row"]:hover { background:rgba(57,89,140,0.05); transform:translateX(4px); }
[data-h="resources-more-row"]:focus-visible { background:rgba(57,89,140,0.05); transform:translateX(4px); outline: 2px solid var(--rcm-accent); outline-offset: 3px; }

/* W6.3 — the article page. Values from the HOVERS table in tools/gen-article.py,
 * which fails the build on any style-hover it does not recognise. */
[data-h="article-crumb"]:hover { color:#0C1D18; }
[data-h="article-crumb"]:focus-visible { color:#0C1D18; outline: 2px solid var(--rcm-accent); outline-offset: 3px; }
[data-h="article-share"]:hover { color:var(--rcm-accent, #39598C); border-color:rgba(57,89,140,0.4); background:var(--rcm-glow, rgba(57,89,140,0.08)); }
[data-h="article-share"]:focus-visible { color:var(--rcm-accent, #39598C); border-color:rgba(57,89,140,0.4); background:var(--rcm-glow, rgba(57,89,140,0.08)); outline: 2px solid var(--rcm-accent); outline-offset: 3px; }
[data-h="article-toc"]:hover { color:var(--rcm-accent, #39598C); border-left-color:var(--rcm-accent, #39598C); }
[data-h="article-toc"]:focus-visible { color:var(--rcm-accent, #39598C); border-left-color:var(--rcm-accent, #39598C); outline: 2px solid var(--rcm-accent); outline-offset: -2px; }

/* W6.4 — homepage blog block. Two of its four hovers reuse the resources hooks
 * (identical values); these two do not. The primary card lifts to
 * padding-left:24px here and 26px on resources — two pixels apart, and invisible
 * to every gate, since hover never appears in a resting screenshot (D4). */
[data-h="home-blog-more"]:hover { color:var(--rcm-accent, #39598C); }
[data-h="home-blog-more"]:focus-visible { color:var(--rcm-accent, #39598C); outline: 2px solid var(--rcm-accent); outline-offset: 3px; }
[data-h="home-blog-primary"]:hover { padding-left:24px; }
[data-h="home-blog-primary"]:focus-visible { padding-left:24px; outline: 2px solid var(--rcm-accent); outline-offset: 3px; }

/* W7.1 — contact page.
 * contact-submit is NOT about-cta: that value ends with `color:#FFFFFF;` and this
 * one does not. One declaration apart, and reusing it would have changed the
 * button's hover text colour with no screenshot able to show it (D4). */
[data-h="contact-direct"]:hover { color:var(--rcm-accent, #39598C); }
[data-h="contact-direct"]:focus-visible { color:var(--rcm-accent, #39598C); outline: 2px solid var(--rcm-accent); outline-offset: 3px; }
[data-h="contact-submit"]:hover { transform:translateY(-2px); box-shadow:0 30px 60px -24px rgba(57,89,140,0.6); filter:brightness(1.08); }
[data-h="contact-submit"]:focus-visible { transform:translateY(-2px); box-shadow:0 30px 60px -24px rgba(57,89,140,0.6); filter:brightness(1.08); outline: 2px solid var(--rcm-accent); outline-offset: 3px; }

/* The error summary is focused by js/site.js after a failed submission (Phase 1
 * QA remediation, L5). Only ever visible in that state; the same ring every other
 * focused control gets. */
[data-rcm-error-summary]:focus { outline: 2px solid var(--rcm-accent); outline-offset: 3px; }