/* Flattened 2026-09-09. These six token files were pulled in with chained @import rules, which
   the browser must fetch and parse one after another before it can paint - and tokens/fonts.css
   added a seventh import to Google Fonts on top of that. Concatenated here; the webfont is now a
   <link rel=preconnect/stylesheet> in the head instead. */

/* --- tokens/fonts.css --- */
/* Degular is not available as a public webfont; per brand spec fallback rule, Manrope stands in for both display and body until licensed Degular files are supplied. Flagged in readme.md. */

:root{
--bm-font-display:"Manrope","DM Sans",Arial,sans-serif;
--bm-font-body:"Manrope","DM Sans",Arial,sans-serif;
}

/* --- tokens/colors.css --- */
:root{
--bm-navy:#000047;--bm-navy-hover:#09095f;--bm-navy-soft:#151568;--bm-navy-tint:#ededf6;
--bm-blue:#0041c4;--bm-blue-hover:#00359f;--bm-blue-active:#002b82;--bm-blue-soft:#edf3ff;--bm-blue-mist:#f5f8ff;--bm-blue-border:#c9d8fa;
--bm-yellow:#ffffa9;--bm-yellow-soft:#ffffd3;--bm-yellow-hover:#fff784;--bm-yellow-border:#e6e178;
--bm-white:#ffffff;
--bm-hero-surface:#dce7f8;
--bm-add-bg:#eaf2ff;--bm-add-text:#0849c7;--bm-add-border:#b8cdf8;--bm-add-hover:#dce9ff;
--bm-details-border:#b8c2d8;--bm-details-hover:#f4f7fc;
--bm-border-section:#e8edf5;
--bm-canvas:#ffffff;--bm-canvas-warm:#fffefa;--bm-surface-soft:#f6f8fc;--bm-surface-blue:#f4f7ff;--bm-surface-raised:#ffffff;
--bm-border-soft:#e7ecf5;--bm-border:#d8e1f0;--bm-border-strong:#afbed6;--bm-border-navy:rgba(255,255,255,0.16);
--bm-ink:#000047;--bm-body:#40506a;--bm-muted:#667085;--bm-muted-soft:#98a2b3;--bm-on-dark:#ffffff;--bm-on-dark-muted:#d5ddf0;--bm-on-yellow:#000047;
--bm-success:#147d55;--bm-success-soft:#eaf7f1;--bm-warning:#9a6700;--bm-warning-soft:#fff6d8;--bm-error:#b42318;--bm-error-soft:#feeceb;--bm-info:#175cd3;--bm-info-soft:#eaf2ff;
--bm-scrim:rgba(0,0,35,0.56);
--bm-image-scrim:linear-gradient(180deg,rgba(0,0,35,0) 35%,rgba(0,0,35,0.72) 100%);/* @kind other */
}

/* --- tokens/typography.css --- */
:root{
--bm-display-2xl:700 72px/0.98 var(--bm-font-display);--bm-display-2xl-ls:-0.045em;
--bm-display-xl:700 64px/1.02 var(--bm-font-display);--bm-display-xl-ls:-0.040em;
--bm-display-lg:700 52px/1.05 var(--bm-font-display);--bm-display-lg-ls:-0.035em;
--bm-heading-1:700 46px/1.08 var(--bm-font-display);--bm-heading-1-ls:-0.030em;
--bm-heading-2:700 38px/1.12 var(--bm-font-display);--bm-heading-2-ls:-0.025em;
--bm-heading-3:700 30px/1.18 var(--bm-font-display);--bm-heading-3-ls:-0.018em;
--bm-heading-4:700 24px/1.22 var(--bm-font-display);--bm-heading-4-ls:-0.012em;
--bm-title-lg:700 20px/1.30 var(--bm-font-body);--bm-title-lg-ls:-0.008em;
--bm-title-md:650 17px/1.35 var(--bm-font-body);
--bm-body-lg:400 20px/1.60 var(--bm-font-body);
--bm-body-md:400 17px/1.65 var(--bm-font-body);
--bm-body-sm:400 15px/1.55 var(--bm-font-body);
--bm-caption:550 13px/1.45 var(--bm-font-body);
--bm-eyebrow:700 13px/1.30 var(--bm-font-body);--bm-eyebrow-ls:0.10em;
--bm-button:700 15px/1.20 var(--bm-font-body);
--bm-micro:700 11px/1.25 var(--bm-font-body);
}
@media (max-width:1023px){:root{
--bm-display-2xl:700 62px/0.98 var(--bm-font-display);--bm-display-xl:700 52px/1.02 var(--bm-font-display);--bm-display-lg:700 44px/1.05 var(--bm-font-display);
--bm-heading-1:700 40px/1.08 var(--bm-font-display);--bm-heading-2:700 34px/1.12 var(--bm-font-display);--bm-heading-3:700 28px/1.18 var(--bm-font-display);--bm-heading-4:700 23px/1.22 var(--bm-font-display);
--bm-body-lg:400 19px/1.60 var(--bm-font-body);
}}
@media (max-width:767px){:root{
--bm-display-2xl:700 44px/0.98 var(--bm-font-display);--bm-display-xl:700 40px/1.02 var(--bm-font-display);--bm-display-lg:700 36px/1.05 var(--bm-font-display);
--bm-heading-1:700 34px/1.08 var(--bm-font-display);--bm-heading-2:700 30px/1.12 var(--bm-font-display);--bm-heading-3:700 25px/1.18 var(--bm-font-display);--bm-heading-4:700 22px/1.22 var(--bm-font-display);
--bm-title-lg:700 19px/1.30 var(--bm-font-body);--bm-body-lg:400 18px/1.60 var(--bm-font-body);--bm-body-md:400 16px/1.65 var(--bm-font-body);
}}
@media (max-width:479px){:root{
--bm-display-2xl:700 38px/1.02 var(--bm-font-display);--bm-display-xl:700 35px/1.04 var(--bm-font-display);--bm-display-lg:700 32px/1.06 var(--bm-font-display);
--bm-heading-1:700 30px/1.10 var(--bm-font-display);--bm-heading-2:700 27px/1.14 var(--bm-font-display);--bm-heading-3:700 23px/1.20 var(--bm-font-display);--bm-heading-4:700 20px/1.24 var(--bm-font-display);
--bm-body-lg:400 17px/1.60 var(--bm-font-body);
}}

/* --- tokens/spacing.css --- */
:root{
/* Header geometry is PUBLISHED AT RUNTIME by Header.jsx (measured, and 0 while the header is
   hidden). These defaults exist so every rule that reads them resolves before Header mounts and
   in any specimen rendered without a Header — an unresolved var here silently drops whole
   sticky-offset and rail-height declarations. Header overwrites both on :root at mount. */
--bm-header-h:76px;/* @kind other */
--bm-header-visible-h:76px;/* @kind other */

--bm-space-0:0px;--bm-space-1:4px;--bm-space-2:8px;--bm-space-3:12px;--bm-space-4:16px;--bm-space-5:20px;--bm-space-6:24px;--bm-space-8:32px;--bm-space-10:40px;--bm-space-12:48px;--bm-space-14:56px;--bm-space-16:64px;--bm-space-20:80px;--bm-space-24:96px;--bm-space-28:112px;--bm-space-32:128px;
--bm-container:1200px;--bm-container-wide:1320px;--bm-container-reading:760px;--bm-container-form:820px;
--bm-gutter-desktop:44px;--bm-gutter-tablet:30px;--bm-gutter-mobile:20px;
--bm-section-y-desktop:104px;--bm-section-y-tablet:82px;--bm-section-y-mobile:60px;
--bm-section-y-compact-desktop:56px;--bm-section-y-compact-mobile:44px;
/* Rev 18 responsive hero tokens. S2 art column sizes per breakpoint family. */
--bm-hero-s2-1440:520px;--bm-hero-s2-1024:473px;--bm-hero-s2-768:430px;--bm-hero-s2-390:560px;--bm-hero-s2-320:540px;
/* Compact decorative-art ENVELOPE (a max, never a fixed band height — copy always grows the band,
   including at genuine 200% zoom). */
--bm-hero-compact-env-1440:260px;--bm-hero-compact-env-1024:224px;--bm-hero-compact-env-768:200px;--bm-hero-compact-env-390:200px;
--bm-hero-pad-x:clamp(18px,4vw,48px);
--bm-hero-s2-pad-y:clamp(40px,6vw,88px);--bm-hero-s2-gap:clamp(28px,4vw,56px);
--bm-hero-compact-pad-y:clamp(28px,4vw,56px);--bm-hero-compact-gap:clamp(20px,3vw,40px);
--bm-hero-band-pad-y:clamp(28px,4vw,48px);
--bm-hero-body-measure:60ch;--bm-hero-copy-measure:640px;
--bm-hero-s2-min:clamp(360px,38vw,520px); /* @kind spacing */
}

/* --- tokens/shape.css --- */
:root{
--bm-radius-xs:8px;--bm-radius-sm:12px;--bm-radius-md:18px;--bm-radius-lg:24px;--bm-radius-xl:32px;--bm-radius-2xl:36px;--bm-radius-full:9999px;
--bm-shadow-low:0 8px 24px rgba(0,0,71,0.06);
--bm-shadow-raised:0 18px 48px rgba(0,0,71,0.10);
--bm-shadow-hero:0 28px 70px rgba(0,0,71,0.14);
--bm-shadow-rail-edge:14px 0 24px -18px rgba(0,0,71,0.16);/* Rev 19.0 — inner edge of the page-level sticky rail; see the Rail contract card */
--bm-ease:cubic-bezier(0.2,0.8,0.2,1);/* @kind other */
--bm-ease-exit:cubic-bezier(0.4,0,1,1);/* @kind other */
--bm-duration-fast:140ms;/* @kind other */
--bm-duration-base:220ms;/* @kind other */
--bm-duration-slow:380ms;/* @kind other */
--bm-duration-hero:720ms;/* @kind other */
}

/* --- tokens/base.css --- */
*{box-sizing:border-box}
body{margin:0;background:var(--bm-canvas);color:var(--bm-body);font:var(--bm-body-md);text-wrap:pretty;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;color:var(--bm-ink);font-family:var(--bm-font-display)}
/* Rev 15A — on-dark surfaces own their heading ink with a classed rule (0,1,1 beats the 0,0,1
   element rule above; no !important): headings inside .bm-on-dark are white unless a component
   sets an explicit inline color. */
.bm-on-dark :is(h1,h2,h3,h4){color:#fff}
p{margin:0}
/* Rev 10 — link/content boundary. Four link classes exist: (1) ordinary editorial/content links
   (the low-specificity :where() rule below), (2) semantic action/button links (Button variants —
   inline-styled, own all states), (3) contextual navigation links (.bm-rail-link), (4) rail CTA
   links (.bm-rail-cta). A generic content-link selector must NEVER outrank a semantic variant:
   the DS content rule is wrapped in :where() so ANY classed rule wins; host pages must write
   content-link colour rules as `:where(<main-content scope>) a:where(:not([class]))` — never
   `#id .container a{…}`, never bare `a{…}`, never !important, never restyling .bm-rail-*. */
:where(a){color:var(--bm-blue);text-decoration:none}
:where(a:hover){color:var(--bm-blue-hover);text-decoration:none}
:where(a:active){color:var(--bm-blue-active)}
.bm-on-dark :where(a){color:var(--bm-yellow)}
.bm-on-dark :where(a:hover){color:#fff}
button{font-family:var(--bm-font-body);cursor:pointer}
:focus-visible{outline:3px solid var(--bm-blue);outline-offset:2px}
.bm-on-dark :focus-visible{outline-color:var(--bm-yellow)}
/* Rev 17 card action row — the query container is declared in CSS (a React inline `container-type`
   does not survive style handling) so every card stacks on its OWN width. */
.bx-card-actions-wrap{container-type:inline-size}
@container (max-width:399px){.bx-card-actions{flex-direction:column;align-items:stretch}.bx-card-actions>*{width:100%}}
/* Rev 09/10 — classed component-link states (specificity 0,1,1 — beat any :where()-wrapped or
   element-level host rule without !important). */
a.bm-rail-cta,a.bm-rail-cta:link,a.bm-rail-cta:visited{background:var(--bm-blue);color:#fff;text-decoration:none}
a.bm-rail-cta:hover{background:var(--bm-blue-hover);color:#fff}
a.bm-rail-cta:active{background:var(--bm-blue-active);color:#fff}
a.bm-rail-cta:focus-visible{outline:3px solid var(--bm-blue);outline-offset:2px}
a.bm-rail-link,a.bm-rail-link:link,a.bm-rail-link:visited{color:var(--bm-ink);text-decoration:none}
a.bm-rail-link:hover{color:var(--bm-navy);background:var(--bm-surface-blue)}
a.bm-rail-link:active{color:var(--bm-navy)}
a.bm-rail-link[aria-current="page"],a.bm-rail-link[aria-current="page"]:visited{color:var(--bm-blue);background:var(--bm-blue-soft);box-shadow:inset 3px 0 0 var(--bm-blue)}
/* QuantityStepper hover discs (quieter in rail density) */
button:hover:not(:disabled) .bm-qs-disc{background:var(--bm-blue-soft)}
button:hover:not(:disabled) .bm-qs-disc-rail{background:var(--bm-surface-blue)}
.bm-qs-input:hover{border-color:var(--bm-border-soft)}
.bm-qs-input:focus{border-color:var(--bm-blue-border);outline:none}
.bm-qs-input:focus-visible{outline:3px solid var(--bm-blue);outline-offset:1px}
@media (prefers-reduced-motion:reduce){*{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important}}