/* ============================================================
BC SECURITY — SHARED STYLESHEET
============================================================
This is the ONE stylesheet for the whole site. Every page links
to it directly (``)
— there is no build step, no Sass/PostCSS, no bundler. Editing
this file changes every page at once.
HOW THE FILE IS ORGANISED
- Design tokens (colours, type, spacing) as CSS custom properties
on :root, right below this comment.
- Global element defaults (h1/h2/p/etc.), then layout primitives
(.container, .section, .btn, .card...), then one block per
page section/component, roughly in the order those components
were introduced. It is NOT organised by page — a single page
draws from many scattered locations in this file.
- Search by class name is the fastest way to find a rule; the
file is too long to read top-to-bottom.
NAMING CONVENTIONS
- BEM-ish: `.block`, `.block__element`, `.block--modifier`
(e.g. `.related-tile`, `.related-tile__icon`, `.section--tint`).
- Colour tokens: --ink (headings/dark bands), --navy (body text),
--steel/--steel-2 (captions, muted labels), --signal/--signal-deep
(the one brand-blue accent — used sparingly, never as a large
fill), --paper/--tint/--tint-2 (light band backgrounds), --line/
--line-2 (hairline borders/dividers).
- Fonts: Fraunces for display headings (h1/h2, loaded via Google
Fonts in every page's ), Hanken Grotesk for everything
else (body copy, UI labels, buttons). Never introduce a third
face or an off-system colour — extend the token list instead.
PAGE-LOCAL CSS
Several pages (mostly Solutions and Technology Platform pages)
have a small page-scoped `