/* ==========================================================================
   Method 21 design system

   This snippet is the single source of the site's CSS. It lives in WPCodeBox so
   it is editable from the WordPress backend rather than requiring a deploy.

   FONTS ARE NOT DECLARED HERE. Stag Black Italic, Stag Bold Italic and Avenir
   Next are registered as Bricks custom fonts (Bricks > Custom Fonts), which
   emits the @font-face rules and makes them selectable in the builder. Adding
   @font-face here as well would load the files twice.

   Rules that are not negotiable:
     - Yellow (--m21-accent) is a FIELD that ink sits on, never text.
       #f9cd17 text on the page ground is ~1.4:1 contrast. Ink on yellow ~11:1.
     - No thick coloured left border on callouts, cards or quote blocks.
     - SPECIFICITY: base rules are scoped by area ID (#brx-content p), which is
       (1,0,1). Any component override of font-size, colour or background on
       those elements MUST also carry the area ID or it silently loses.
   ========================================================================== */
/* ==========================================================================
   Method 21 design system

   Structure:
     1. Fonts
     2. Tokens
     3. Base
     4. Typography
     5. Components (applied via Bricks _cssClasses, not per-element CSS)
     6. Utilities

   Rules that are not negotiable:
     - Yellow (--m21-accent) is a FIELD that ink sits on, never text.
       #f9cd17 text on the page ground is ~1.4:1 contrast. Ink on yellow is ~11:1.
     - No thick coloured left border on callouts, cards or quote blocks.
       Set boxed content apart with a full thin border, a subtle tint,
       a bold label, or whitespace.
     - Component styling lives here as reusable classes. Do not push design
       into per-element _cssCustom: that does not survive 83 pages.
     - SPECIFICITY: the base rules are scoped by area ID (#brx-content p,
       #brx-header .brxe-button), which is (1,0,1). Any component override of
       a font-size, colour or background on those elements MUST also carry the
       area ID or it silently loses. A bare .m21-thing is (0,1,0) and will not
       win. This has bitten the primary button, the hero h1 and the lede.
   ========================================================================== */

/* 2. Tokens
   ========================================================================== */

:root {
  /* Colour. Ground and ink are the existing brand values.
     Accent is sampled from the Round 1 ad creative (#f9cd17). */
  --m21-bg:            #f8f7f4;
  --m21-bg-sunk:       #f1efe9;  /* subtle tint for set-apart blocks */
  --m21-text:          #1a1a1a;
  --m21-ink:           #1a1a1a;  /* alias, prefer --m21-ink in new code */
  --m21-ink-deep:      #030303;  /* the ad system's black field */
  --m21-ink-muted:     #5a5751;  /* 7.0:1 on --m21-bg, AA for body text */
  --m21-rule:          #dedbd4;  /* hairline borders */
  --m21-rule-strong:   #b8b3a8;
  --m21-accent:        #f9cd17;  /* FIELD ONLY, never text */

  /* Type families */
  --m21-font:          Georgia, Cambria, "Palatino Linotype", Palatino, serif;
  --m21-heading-font:  'Stag Black Italic', Georgia, serif;
  --m21-heading-h2:    'Avenir Next', Helvetica, Arial, sans-serif;

  /* Type scale. Bricks roots at 62.5%, so 1rem = 10px.
     Fluid between mobile and desktop; the existing 1.9 / 3.1 / 4.6 sizes
     are preserved as the desktop values so nothing reflows unexpectedly. */
  --m21-size-xs:       1.4rem;
  --m21-size-sm:       1.6rem;
  --m21-size-base:     2.0rem;
  /* md floors above base on purpose. It sets the lede, the answer paragraph
     and h3, all of which must read as larger than body copy at every width.
     Floor it at base and the hierarchy flattens on narrow screens. */
  --m21-size-md:       clamp(2.2rem, 1.9rem + 0.9vw, 2.6rem);
  --m21-size-lg:       clamp(2.4rem, 1.9rem + 1.6vw, 3.1rem);
  --m21-size-xl:       clamp(3.2rem, 2.2rem + 3.2vw, 4.6rem);
  --m21-size-display:  clamp(4.0rem, 2.4rem + 5.2vw, 6.4rem);

  /* Spacing ramp. One scale for all padding and margins. */
  --m21-space-3xs:     0.4rem;
  --m21-space-2xs:     0.8rem;
  --m21-space-xs:      1.2rem;
  --m21-space-sm:      2.0rem;
  --m21-space-md:      3.2rem;
  --m21-space-lg:      4.8rem;
  --m21-space-xl:      6.4rem;
  --m21-space-2xl:     9.6rem;

  /* Measure and layout */
  --m21-measure:       68ch;
  --m21-container:     116rem;  /* header, footer, card grids */
  --m21-container-text: 84rem;  /* single-post reading column */
  --m21-radius:        6px;
}

/* 3. Base
   ========================================================================== */

body.brx-body {
  background-color: var(--m21-bg);
  color: var(--m21-ink);
  font-family: var(--m21-font);
  margin: 0;
  padding: 0;
}

#brx-content {
  background-color: var(--m21-bg);
  margin: var(--m21-space-md) auto;
  padding: 0 var(--m21-space-sm);
}

/* Bricks paints its own section and container backgrounds. Clear them so the
   page ground shows through and components control their own fields. */
#brx-header .brxe-section,
#brx-header .brxe-container,
#brx-content .brxe-section,
#brx-content .brxe-container,
#brx-footer .brxe-section,
#brx-footer .brxe-container {
  background-color: transparent;
  background-image: none;
}

/* 4. Typography
   ========================================================================== */

/* H1: Stag Slab Black Italic, site-wide. The face is drawn italic, so this
   deliberately does NOT set font-style: italic. Doing so makes the browser
   synthesise an oblique on top of glyphs that already slant. The !important is load-bearing: Bricks
   writes inline typography onto heading elements from the builder panel. */
h1,
h1.brxe-heading,
.brxe-heading[data-tag="h1"],
#brx-header h1,
#brx-content h1,
#brx-footer h1,
.brxe-post-title {
  font-family: var(--m21-heading-font) !important;
  font-weight: 900 !important;
  font-size: var(--m21-size-xl);
  line-height: 1.05;
  letter-spacing: 1px;
  color: var(--m21-ink);
  margin: 0 0 var(--m21-space-sm);
}

/* Page titles are centred and set at one size site-wide. The previous
   left-aligned block read as a masthead, which is not what an internal page
   should look like. */
#brx-content h1 {
  font-size: var(--m21-size-display);
  text-align: center;
  margin-inline: auto;
}

/* H2 through H6: Avenir */
#brx-header h2, #brx-header h3, #brx-header h4, #brx-header h5, #brx-header h6,
#brx-content h2, #brx-content h3, #brx-content h4, #brx-content h5, #brx-content h6,
#brx-footer h2, #brx-footer h3, #brx-footer h4, #brx-footer h5, #brx-footer h6 {
  font-family: var(--m21-heading-h2);
  color: var(--m21-ink);
  margin: var(--m21-space-lg) 0 var(--m21-space-xs);
  text-wrap: balance;
}

#brx-header h2, #brx-content h2, #brx-footer h2 {
  font-size: var(--m21-size-lg);
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

#brx-content h3 {
  font-size: var(--m21-size-md);
  font-weight: 700;
  line-height: 1.25;
  margin-top: var(--m21-space-md);
}

#brx-content h4 {
  font-size: var(--m21-size-base);
  font-weight: 700;
  line-height: 1.3;
  margin-top: var(--m21-space-sm);
}

/* Body copy */
#brx-header p, #brx-header li,
#brx-content p, #brx-content li,
#brx-footer p, #brx-footer li,
.brxe-text, .brxe-text-basic {
  font-family: var(--m21-font);
  font-size: var(--m21-size-base);
  color: var(--m21-ink);
  line-height: 1.7;
}

#brx-content p {
  max-width: var(--m21-measure);
  margin: 0 0 var(--m21-space-xs);
}

#brx-content ul, #brx-content ol,
#brx-header ul, #brx-header ol,
#brx-footer ul, #brx-footer ol {
  font-size: var(--m21-size-base);
  max-width: var(--m21-measure);
  padding-left: var(--m21-space-sm);
}

#brx-content li {
  margin-bottom: var(--m21-space-2xs);
}

/* Links */
#brx-header a, #brx-content a, #brx-footer a {
  color: var(--m21-ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

#brx-header a:hover, #brx-content a:hover, #brx-footer a:hover {
  opacity: 0.7;
}

#brx-header a:focus-visible,
#brx-content a:focus-visible,
#brx-footer a:focus-visible {
  outline: 2px solid var(--m21-ink);
  outline-offset: 3px;
}

/* Buttons */
#brx-header .brxe-button,
#brx-content .brxe-button,
#brx-footer .brxe-button {
  background: transparent;
  border: 1px solid var(--m21-ink);
  color: var(--m21-ink);
  padding: var(--m21-space-xs) var(--m21-space-sm);
  text-decoration: none;
  font-family: var(--m21-heading-h2);
  font-size: var(--m21-size-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: background-color 0.2s ease, color 0.2s ease;
}

#brx-header .brxe-button:hover,
#brx-content .brxe-button:hover,
#brx-footer .brxe-button:hover {
  background: var(--m21-ink);
  color: var(--m21-bg);
  opacity: 1;
}

/* Primary button: the one place the accent carries a call to action.
   Ink on yellow, ~11:1.

   All three area IDs are listed because the generic button rule above is
   `#brx-header .brxe-button` (specificity 1,1,0), which beats a bare
   `.m21-btn-primary.brxe-button` (0,2,0). Matching the ID keeps this winning
   without reaching for !important. */
#brx-header .m21-btn-primary.brxe-button,
#brx-content .m21-btn-primary.brxe-button,
#brx-footer .m21-btn-primary.brxe-button {
  background: var(--m21-accent);
  border-color: var(--m21-accent);
  color: var(--m21-ink);
}

#brx-header .m21-btn-primary.brxe-button:hover,
#brx-content .m21-btn-primary.brxe-button:hover,
#brx-footer .m21-btn-primary.brxe-button:hover {
  background: var(--m21-ink);
  border-color: var(--m21-ink);
  color: var(--m21-bg);
}

/* 5. Components
   Applied to Bricks elements via the _cssClasses setting.
   ========================================================================== */

/* 5.0 Header and footer
   The site frame. Both are Bricks templates; see scripts/build-templates.php. */

.m21-header {
  padding: var(--m21-space-sm) var(--m21-space-md);
  border-bottom: 1px solid var(--m21-rule);
  background: var(--m21-bg);
}

/* flex-direction is explicit: Bricks containers default to column, so setting
   display:flex alone leaves the header stacked. Same applies to any container
   this design system takes over. */
.m21-header-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--m21-space-md);
  max-width: var(--m21-container);
  margin-inline: auto;
  width: 100%;
}

.m21-wordmark {
  font-family: var(--m21-heading-font);
  font-weight: 900;
  font-size: var(--m21-size-md);
  line-height: 1;
  flex-shrink: 0;
}

#brx-header .m21-wordmark a {
  text-decoration: none;
}

/* Nav sits between the wordmark and the call to action. */
.m21-nav {
  margin-left: auto;
}

#brx-header .m21-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--m21-space-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}

#brx-header .m21-nav li {
  margin: 0;
}

#brx-header .m21-nav a {
  font-family: var(--m21-heading-h2);
  font-size: var(--m21-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  white-space: nowrap;
}

#brx-header .m21-nav a:hover {
  text-decoration: underline;
  text-underline-offset: 0.3em;
  opacity: 1;
}

.m21-header-cta {
  flex-shrink: 0;
}

/* Footer */
.m21-footer {
  border-top: 1px solid var(--m21-rule);
  margin-top: var(--m21-space-2xl);
  padding: var(--m21-space-xl) var(--m21-space-md) var(--m21-space-lg);
  background: var(--m21-bg);
}

.m21-footer-inner {
  display: block; /* override the Bricks container default of flex-column */
  max-width: var(--m21-container);
  margin-inline: auto;
  width: 100%;
}

/* Flex rather than grid, so each column is a wrapper that can hold any number
   of elements. The bases reproduce the previous 1.5 / 1 / 1 proportion while
   still allowing the columns to wrap on narrow viewports. */
.m21-footer-cols {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  row-gap: 40px;
  column-gap: var(--m21-space-lg);
}

.m21-footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 180px;
  min-width: 0;
}

.m21-footer-col-brand {
  flex: 1.5 1 260px;
}

/* The classic seal, above the wordmark in column one. Bricks puts custom
   classes on the img itself, so this class is the image, not a wrapper. */
.m21-footer-seal,
.m21-footer-seal img {
  width: 56px;
  height: 56px;
  display: block;
  margin-bottom: var(--m21-space-sm);
}

/* Each column item was previously a single text block carrying its own
   spacing. Now that labels and bodies are separate elements, the label needs
   its own bottom margin. */
#brx-footer .m21-footer-col > * {
  margin-bottom: 0;
}

#brx-footer .m21-footer-col > * + * {
  margin-top: var(--m21-space-xs);
}

#brx-footer .m21-footer-cols p,
#brx-footer .m21-footer-cols li,
#brx-footer .m21-footer-cols address {
  font-size: var(--m21-size-sm);
  line-height: 1.6;
  max-width: 40ch;
}

.m21-footer-wordmark {
  font-family: var(--m21-heading-font);
  font-weight: 900;
  font-size: var(--m21-size-md) !important;
  line-height: 1;
  margin-bottom: var(--m21-space-2xs) !important;
}

.m21-footer-label {
  font-family: var(--m21-heading-h2);
  font-size: var(--m21-size-xs) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--m21-ink-muted);
  margin-bottom: var(--m21-space-xs) !important;
}

#brx-footer .m21-nap address {
  font-style: normal;
  margin-bottom: var(--m21-space-xs);
}

#brx-footer .m21-footer-hours {
  color: var(--m21-ink-muted);
}

#brx-footer .m21-footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#brx-footer .m21-footer-nav li {
  margin-bottom: var(--m21-space-2xs);
}

.m21-footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--m21-space-sm);
  margin-top: var(--m21-space-xl);
  padding-top: var(--m21-space-sm);
  border-top: 1px solid var(--m21-rule);
}

#brx-footer .m21-footer-legal p {
  font-size: var(--m21-size-xs);
  color: var(--m21-ink-muted);
  margin: 0;
  max-width: none;
}

/* 5.1 Hero
   Opening block. H1, one positioning line, call to action. */
.m21-hero {
  padding: var(--m21-space-xl) 0 var(--m21-space-md);
  text-align: center;
}

.m21-hero h1 {
  max-width: 22ch;
  margin-inline: auto;
}

#brx-content .m21-hero .m21-lede,
#brx-content .m21-hero p {
  font-size: var(--m21-size-md);
  line-height: 1.5;
  max-width: 56ch;
  margin-inline: auto;
  color: var(--m21-ink-muted);
  text-align: center;
}

/* 5.1b Single-post layout
   Used by the per-CPT content templates. See scripts/build-single-templates.php.
   Every container here sets display explicitly, because Bricks containers
   default to flex-column. */

/* The reading column. Narrower than the site container so the body text, the
   hero and the CTA band all share one edge instead of a 68ch paragraph
   floating inside a 116rem box. */
.m21-hero-inner,
.m21-body-inner {
  display: block;
  max-width: var(--m21-container-text);
  margin-inline: auto;
  width: 100%;
}

/* Beats '#brx-content h1' (1,0,1), which would otherwise hold the H1 at the
   standard size and never let the hero reach display scale. */
#brx-content .m21-hero h1 {
  font-size: var(--m21-size-display);
}

.m21-body {
  padding: 0;
}

/* The rendered post_content. Headings and paragraphs inherit the base
   typography; this only governs rhythm and measure. */
.m21-prose > :first-child {
  margin-top: 0;
}

.m21-prose h2 {
  margin-top: var(--m21-space-xl);
}

/* Body copy in prose is one size. There is deliberately no `h2 + p` rule here:
   the content standard puts an answer directly under every question heading,
   and under every FAQ heading, so a structural selector caught roughly two
   thirds of the paragraphs on a page. Emphasis applied that widely stops
   reading as emphasis and starts reading as inconsistent sizing.

   To emphasise a specific answer, wrap it in .m21-answer, which is opt-in. */

.m21-prose table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--m21-heading-h2);
  font-size: var(--m21-size-sm);
  margin: var(--m21-space-md) 0;
}

.m21-prose th,
.m21-prose td {
  text-align: left;
  padding: var(--m21-space-xs) var(--m21-space-sm);
  border-bottom: 1px solid var(--m21-rule);
  vertical-align: top;
}

.m21-prose thead th {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: var(--m21-size-xs);
  border-bottom: 2px solid var(--m21-ink);
}

/* Wide tables scroll inside their own box rather than the page body. */
.m21-prose > table {
  display: block;
  overflow-x: auto;
}

/* 5.2 Answer block
   The workhorse of the content standard: a question heading with a dense
   1 to 3 sentence answer directly beneath it. Must survive extraction, so
   it carries no styling that depends on surrounding context. */
.m21-answer {
  margin: var(--m21-space-lg) 0;
}

.m21-answer > h2,
.m21-answer > h3 {
  margin-top: 0;
  text-transform: none;
  letter-spacing: 0;
}

/* The answer paragraph itself: set slightly larger than body so the
   extractable claim reads as the point of the section. */
#brx-content .m21-answer > p:first-of-type,
#brx-content .m21-answer .m21-answer-text {
  font-size: var(--m21-size-md);
  line-height: 1.55;
  max-width: 62ch;
}

/* 5.3 Proof row
   Named outcomes with real figures. No unnamed or unsourced numbers. */
.m21-proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
  gap: var(--m21-space-md);
  margin: var(--m21-space-lg) 0;
  padding: var(--m21-space-md) 0;
  border-top: 1px solid var(--m21-rule);
  border-bottom: 1px solid var(--m21-rule);
}

.m21-proof-figure {
  font-family: var(--m21-heading-font);
  font-weight: 900;
  font-size: var(--m21-size-xl);
  line-height: 1;
  display: block;
  margin-bottom: var(--m21-space-2xs);
}

.m21-proof-label {
  font-family: var(--m21-heading-h2);
  font-size: var(--m21-size-sm);
  color: var(--m21-ink-muted);
  line-height: 1.4;
  display: block;
}

/* 5.4 Comparison table
   Scrolls inside its own container. The page body never scrolls sideways. */
.m21-table {
  margin: var(--m21-space-md) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.m21-table table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--m21-heading-h2);
  font-size: var(--m21-size-sm);
  min-width: 48rem;
}

.m21-table th,
.m21-table td {
  text-align: left;
  padding: var(--m21-space-xs) var(--m21-space-sm);
  border-bottom: 1px solid var(--m21-rule);
  vertical-align: top;
}

.m21-table thead th {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: var(--m21-size-xs);
  border-bottom: 2px solid var(--m21-ink);
  white-space: nowrap;
}

.m21-table tbody tr:last-child th,
.m21-table tbody tr:last-child td {
  border-bottom: none;
}

/* 5.5 Definition / spec list */
.m21-deflist {
  margin: var(--m21-space-md) 0;
  border-top: 1px solid var(--m21-rule);
}

.m21-deflist dl {
  margin: 0;
}

.m21-deflist dt {
  font-family: var(--m21-heading-h2);
  font-weight: 700;
  font-size: var(--m21-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-top: var(--m21-space-sm);
}

.m21-deflist dd {
  margin: var(--m21-space-3xs) 0 0;
  padding-bottom: var(--m21-space-sm);
  border-bottom: 1px solid var(--m21-rule);
  max-width: var(--m21-measure);
}

/* 5.6 FAQ stack
   Question and answer structure is retained even though FAQPage no longer
   yields a rich result: it still aids passage extraction. */
.m21-faq {
  margin: var(--m21-space-lg) 0;
  border-top: 1px solid var(--m21-rule);
}

/* 5.7 Call to action band
   Ink field, page ground as the text colour. Full-bleed within its section. */
.m21-cta {
  background: var(--m21-ink-deep);
  color: var(--m21-bg);
  padding: var(--m21-space-xl) var(--m21-space-md);
  margin: var(--m21-space-2xl) 0 0;
  border-radius: var(--m21-radius);
}

.m21-cta h2,
#brx-content .m21-cta h2 {
  color: var(--m21-bg);
  margin-top: 0;
}

.m21-cta p,
#brx-content .m21-cta p {
  color: var(--m21-bg);
  max-width: 56ch;
}

.m21-cta a,
#brx-content .m21-cta a {
  color: var(--m21-bg);
}

.m21-cta .brxe-button {
  border-color: var(--m21-accent);
  background: var(--m21-accent);
  color: var(--m21-ink);
}

.m21-cta .brxe-button:hover {
  background: var(--m21-bg);
  border-color: var(--m21-bg);
  color: var(--m21-ink);
}

/* 5.8 Card grid
   Replaces the bare bordered-box query loop. Full thin border on all sides,
   never a coloured edge bar. */
.m21-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  gap: var(--m21-space-md);
  margin: var(--m21-space-md) 0;
}

.m21-card {
  display: flex;
  flex-direction: column;
  padding: var(--m21-space-md);
  border: 1px solid var(--m21-rule);
  border-radius: var(--m21-radius);
  background: var(--m21-bg);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.m21-card:hover {
  border-color: var(--m21-ink);
  transform: translateY(-2px);
}

.m21-card h3,
#brx-content .m21-card h3 {
  margin: 0 0 var(--m21-space-2xs);
  font-family: var(--m21-heading-font);
  font-weight: 900;
  font-size: var(--m21-size-md);
  text-transform: none;
}

.m21-card p,
#brx-content .m21-card p {
  color: var(--m21-ink-muted);
  font-size: var(--m21-size-sm);
  line-height: 1.6;
  margin-bottom: var(--m21-space-sm);
  flex: 1;
}

.m21-card .m21-card-link {
  font-family: var(--m21-heading-h2);
  font-size: var(--m21-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: auto;
}

/* 5.9 Forms
   Fluent Forms, restyled to the design system. Its own stylesheet is generic,
   so this overrides the parts that would otherwise look bolted on. */

.m21-form {
  max-width: var(--m21-measure);
  margin: var(--m21-space-md) 0 var(--m21-space-lg);
}

#brx-content .m21-form .ff-el-group {
  margin-bottom: var(--m21-space-sm);
}

#brx-content .m21-form .ff-el-input--label label {
  font-family: var(--m21-heading-h2);
  font-size: var(--m21-size-sm);
  font-weight: 700;
  color: var(--m21-ink);
  margin-bottom: var(--m21-space-3xs);
}

#brx-content .m21-form input[type="text"],
#brx-content .m21-form input[type="email"],
#brx-content .m21-form input[type="url"],
#brx-content .m21-form input[type="tel"],
#brx-content .m21-form textarea {
  width: 100%;
  font-family: var(--m21-font);
  font-size: var(--m21-size-base);
  color: var(--m21-ink);
  background: var(--m21-bg);
  border: 1px solid var(--m21-rule-strong);
  border-radius: var(--m21-radius);
  padding: var(--m21-space-xs);
  line-height: 1.5;
}

#brx-content .m21-form input:focus,
#brx-content .m21-form textarea:focus {
  outline: 2px solid var(--m21-ink);
  outline-offset: 1px;
  border-color: var(--m21-ink);
}

/* The accent as a field with ink on it, consistent with every other primary
   action on the site. */
#brx-content .m21-form .ff-btn-submit {
  font-family: var(--m21-heading-h2);
  font-size: var(--m21-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background: var(--m21-accent);
  color: var(--m21-ink);
  border: 1px solid var(--m21-accent);
  border-radius: var(--m21-radius);
  padding: var(--m21-space-xs) var(--m21-space-sm);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

#brx-content .m21-form .ff-btn-submit:hover {
  background: var(--m21-ink);
  border-color: var(--m21-ink);
  color: var(--m21-bg);
}

#brx-content .m21-form .text-danger,
#brx-content .m21-form .error {
  color: #a3261a;
  font-family: var(--m21-heading-h2);
  font-size: var(--m21-size-xs);
}

#brx-content .m21-form .ff-message-success {
  border: 1px solid var(--m21-rule);
  background: var(--m21-bg-sunk);
  border-radius: var(--m21-radius);
  padding: var(--m21-space-sm) var(--m21-space-md);
}

/* 6. Utilities
   ========================================================================== */

/* Set-apart block. Full thin border and a subtle tint. Never an edge bar. */
.m21-note {
  padding: var(--m21-space-sm) var(--m21-space-md);
  border: 1px solid var(--m21-rule);
  background: var(--m21-bg-sunk);
  border-radius: var(--m21-radius);
  margin: var(--m21-space-md) 0;
}

.m21-note > :last-child {
  margin-bottom: 0;
}

/* Chip: the accent as a small field with ink on it. */
.m21-chip {
  display: inline-block;
  background: var(--m21-accent);
  color: var(--m21-ink);
  font-family: var(--m21-heading-h2);
  font-size: var(--m21-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--m21-space-3xs) var(--m21-space-2xs);
  border-radius: 3px;
}

/* Lede: the front-loaded conclusion at the top of a page. Sits centred
   directly under the H1. .introtext is the same thing on the older
   hand-built pages. */
#brx-content .m21-lede,
#brx-content .introtext {
  font-size: var(--m21-size-md);
  line-height: 1.55;
  max-width: 62ch;
  margin: 0 auto var(--m21-space-lg);
  text-align: center;
  color: var(--m21-ink-muted);
}

/* The dividing rule belongs only where the introduction runs into body prose.
   Hub pages that open into a card grid or block layout do not get one: the
   blocks already provide the visual break, and a rule on top of them reads as
   clutter. In practice that means the rule appears when the lede is the first
   element of the rendered post content, and not when it was authored into the
   hero of a hub page. */
#brx-content .m21-prose > .m21-lede {
  padding-bottom: var(--m21-space-lg);
  border-bottom: 1px solid var(--m21-rule);
}

/* Except where the page opens into a stat row, which supplies its own break. */
#brx-content .m21-prose > .m21-lede:has(+ .m21-stats) {
  padding-bottom: 0;
  border-bottom: 0;
}


/* Preserved from the previous stylesheet: centred intro text. */
.introtext {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.m21-container {
  max-width: var(--m21-container);
  margin-inline: auto;
}

.m21-muted { color: var(--m21-ink-muted); }
.m21-measure { max-width: var(--m21-measure); }

/* Screen reader only, for skip links and labels */
.m21-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Spacing between stacked Bricks text blocks */
#brx-content .brxe-text,
#brx-content .brxe-heading {
  margin-bottom: var(--m21-space-xs);
}

#brx-content .brxe-text:last-child {
  margin-bottom: 0;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .m21-card,
  #brx-content .brxe-button,
  #brx-header .brxe-button,
  #brx-footer .brxe-button {
    transition: none;
  }
  .m21-card:hover {
    transform: none;
  }
}

/* Narrow screens */
@media (max-width: 991px) {
  .m21-footer-cols {
    grid-template-columns: 1fr 1fr;
  }

  .m21-footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  #brx-content {
    padding: 0 var(--m21-space-xs);
  }

  .m21-hero {
    padding: var(--m21-space-lg) 0 var(--m21-space-md);
  }

  .m21-cta {
    padding: var(--m21-space-lg) var(--m21-space-sm);
  }

  .m21-header {
    padding: var(--m21-space-xs) var(--m21-space-sm);
  }

  .m21-header-inner {
    flex-wrap: wrap;
    gap: var(--m21-space-xs);
  }

  #brx-header .m21-nav ul {
    gap: var(--m21-space-xs);
  }

  #brx-header .m21-nav a {
    font-size: var(--m21-size-xs);
  }

  .m21-footer {
    padding: var(--m21-space-lg) var(--m21-space-sm) var(--m21-space-md);
  }

  .m21-footer-cols {
    grid-template-columns: 1fr;
    gap: var(--m21-space-md);
  }
}

/* FLUENT FORMS TEXT COLOUR
   Fluent Forms' own stylesheet sets grey label and input colours at a
   specificity a bare class does not beat, so these carry the area ID and name
   the plugin's classes directly. All form text is ink. */
#brx-content .m21-form,
#brx-content .m21-form label,
#brx-content .m21-form .ff-el-input--label label,
#brx-content .m21-form .ff-el-input--content input,
#brx-content .m21-form .ff-el-input--content textarea,
#brx-content .m21-form .ff-el-form-control,
#brx-content .m21-form input[type="text"],
#brx-content .m21-form input[type="email"],
#brx-content .m21-form input[type="url"],
#brx-content .m21-form input[type="tel"],
#brx-content .m21-form textarea,
#brx-content .m21-form select {
  color: var(--m21-ink);
}

/* The asterisk on a required field, which Fluent Forms also greys out. */
#brx-content .m21-form .ff-el-is-required.asterisk-right label:after,
#brx-content .m21-form .ff-el-is-required.asterisk-left label:before {
  color: var(--m21-ink);
}

/* Placeholders stay lighter than the value so the two remain distinguishable,
   but at the muted ink rather than an arbitrary grey. */
#brx-content .m21-form ::placeholder {
  color: var(--m21-ink-muted);
  opacity: 1;
}

/* Help text and section headings inside the form. */
#brx-content .m21-form .ff-el-help-message,
#brx-content .m21-form .ff-section-title,
#brx-content .m21-form .ff-custom_html {
  color: var(--m21-ink);
}
/* FLUENT FORMS: ink, not grey. Targets the plugin wrapper because the
   .m21-form div does not survive HTML-to-Bricks conversion. */
#brx-content .fluentform label,
#brx-content .fluentform .ff-el-input--label label,
#brx-content .fluentform input,
#brx-content .fluentform textarea,
#brx-content .fluentform select,
#brx-content .fluentform .ff-el-form-control {
  color: var(--m21-ink) !important;
}

#brx-content .fluentform .ff-el-input--label label {
  font-family: var(--m21-heading-h2);
  font-size: var(--m21-size-sm);
  font-weight: 700;
}

#brx-content .fluentform input[type="text"],
#brx-content .fluentform input[type="email"],
#brx-content .fluentform input[type="url"],
#brx-content .fluentform input[type="tel"],
#brx-content .fluentform textarea {
  font-family: var(--m21-font);
  font-size: var(--m21-size-base);
  background: var(--m21-bg);
  border: 1px solid var(--m21-rule-strong);
  border-radius: var(--m21-radius);
  padding: var(--m21-space-xs);
  width: 100%;
}

#brx-content .fluentform ::placeholder {
  color: var(--m21-ink-muted) !important;
  opacity: 1;
}

#brx-content .fluentform .ff-btn-submit {
  font-family: var(--m21-heading-h2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background: var(--m21-accent) !important;
  color: var(--m21-ink) !important;
  border: 1px solid var(--m21-accent);
  border-radius: var(--m21-radius);
  padding: var(--m21-space-xs) var(--m21-space-sm);
}

#brx-content .fluentform .ff-btn-submit:hover {
  background: var(--m21-ink) !important;
  color: var(--m21-bg) !important;
  border-color: var(--m21-ink);
}

/* Answer engine logo row. Sits above the lede on /ai-visibility/ and gives
   the page a visual anchor for the engines the measurement covers. Marks are
   the owned colour assets from the ad campaign, normalised to one optical
   height rather than one box, since the glyphs have different proportions. */
.m21-engine-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  row-gap: var(--m21-space-sm);
  column-gap: var(--m21-space-lg);
  margin: 0 auto var(--m21-space-lg);
}

.m21-engine-row img,
.m21-engine-row .brxe-image img {
  height: 68px;
  width: auto;
  max-width: none;
  display: block;
}

.m21-engine-row .brxe-image {
  margin: 0;
  line-height: 0;
}

@media (max-width: 767px) {
  .m21-engine-row {
    column-gap: var(--m21-space-md);
  }
  .m21-engine-row img,
  .m21-engine-row .brxe-image img {
    height: 52px;
  }
}


/* An intro followed directly by a heading stacks two margins, because the
   Bricks container is flex and flex margins do not collapse. The intro
   already supplies the space, so the heading contributes none. This is
   deliberately an adjacent-sibling selector: it matches only the heading
   that immediately follows an intro, not headings generally. */
#brx-content .introtext + h2,
#brx-content .m21-lede + h2 {
  margin-top: 0;
}


/* ==========================================================================
   Mobile
   ========================================================================== */

/* The 2-up card grids stack below tablet. The ids are the three bespoke
   builds that draw cards at calc(50% - 15px): homepage services loop,
   services hub, industries hub. Per-element Bricks widths are id-scoped,
   hence the !important. */
@media (max-width: 767px) {
  #brxe-cd242f > .brxe-div,
  #brxe-6d9656 > .brxe-div,
  #brxe-76e773 > .brxe-div {
    width: 100% !important;
  }
}

/* Mobile navigation panel. Bricks clones the menu into
   .bricks-mobile-menu-wrapper, where the desktop nav's flex-row and small
   type leaked in on top of Bricks' dark default panel. */
/* Bricks paints the panel through a ::before pseudo-element, not the
   wrapper background. Styling only the wrapper looks correct in computed
   styles and renders charcoal anyway. */
.bricks-mobile-menu-wrapper::before {
  background: var(--m21-bg) !important;
}

.bricks-mobile-menu-wrapper {
  background: var(--m21-bg) !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 80px 28px 32px !important;
  overflow-y: auto !important;
}

.bricks-mobile-menu-wrapper ul.bricks-mobile-menu {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 0 !important;
  width: 100%;
  background: transparent !important;
}

.bricks-mobile-menu-wrapper .bricks-mobile-menu li {
  width: 100%;
  margin: 0 !important;
}

.bricks-mobile-menu-wrapper .bricks-mobile-menu a {
  display: block;
  width: 100%;
  padding: 9px 0 !important;
  font-size: 2rem !important;
  line-height: 1.4 !important;
  color: var(--m21-ink) !important;
  border-bottom: 1px solid var(--m21-rule);
}

/* Scrim behind the panel, and the toggle stays ink and above the panel. */
.bricks-mobile-menu-overlay {
  background: rgba(26, 26, 26, 0.4) !important;
}

.brxe-nav-menu .bricks-mobile-menu-toggle {
  z-index: 1002;
  color: var(--m21-ink);
}

.brxe-nav-menu .bricks-mobile-menu-toggle span {
  background-color: var(--m21-ink) !important;
}

/* The Contact menu item exists for the mobile panel only. On desktop the
   header CTA button already covers it, so the duplicate stays hidden. */
ul.bricks-nav-menu .m21-mobile-only {
  display: none;
}

/* In the mobile panel the Contact item wears the CTA button's clothes:
   accent ground, centred, no hairline. It is the same yellow button the
   desktop header shows, relocated into the menu. */
.bricks-mobile-menu-wrapper .bricks-mobile-menu .m21-mobile-only a {
  background: var(--m21-accent);
  border-bottom: none;
  text-align: center;
  font-weight: 700;
  padding: 14px 20px !important;
  margin-top: 16px;
}

/* The wordmark is an SVG with no intrinsic size; it takes its height here.
   558 x 109.5 viewBox, so 28px tall renders about 143px wide. */
/* With a link set, Bricks puts the custom class on the A, not the img,
   which is the opposite of the unlinked footer seal. Cover both. */
img.m21-wordmark,
.m21-wordmark img {
  height: 28px;
  width: auto;
  display: block;
}

/* On mobile the hamburger sits far right, after the Contact button. The
   desktop order (wordmark, nav, button) is untouched above 767px. */
@media (max-width: 767px) {
  .m21-header-inner .m21-wordmark { order: 1; }
  .m21-header-inner .m21-header-cta { order: 2; margin-left: auto; }
  .m21-header-inner .m21-nav { order: 3; }
}

/* H1s run slightly smaller on mobile. The clamp's middle term dominates at
   phone widths, so the token is overridden rather than the clamp floor. */
@media (max-width: 767px) {
  :root {
    --m21-size-display: 3.6rem;
  }
}

/* Dark table scheme, selected per table via the M21 Table element's
   Colour scheme control. Deep gray body with ground-coloured text, pure
   black header row. */
.m21-table--dark {
  border-color: #000;
}

.m21-table--dark tbody td,
.m21-table--dark tbody th {
  background: #333333;
  color: var(--m21-bg);
  border-color: rgba(248, 247, 244, 0.18);
}

.m21-table--dark thead th {
  background: #000000;
  color: var(--m21-bg);
  border-color: #000000;
}

.m21-table--dark a {
  color: var(--m21-bg);
}


/* Dark table links need the area id to outrank the base content link rule. */
#brx-content .m21-table--dark a,
.m21-table--dark a {
  color: var(--m21-bg);
}

/* The M21 Table ELEMENT renders <table class="m21-table"> directly, unlike
   converter tables which wrap a bare <table> in a div.m21-table. Outside
   .m21-prose the element inherited no typography at all, so the base look
   lives here unscoped: same face and size as prose tables, full width. */
table.m21-table {
  border-collapse: collapse;
}

/* In a flex parent the element wrapper shrinks to content width, which
   makes the Width option meaningless. The wrapper always spans; the table
   width inside it is the element setting. */
.m21-table-wrap {
  width: 100%;
}

/* The dark scheme is a rounded panel. Radius on a table needs separate
   borders plus its own overflow clip. */
.m21-table--dark {
  border-radius: 10px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

.m21-table--dark tbody tr:last-child > * {
  border-bottom: none;
}

/* MOBILE H1 SCALE */
/* The H1 sits at the clamp floor on a phone, which reads small against
   the display face. Raised here only, so nothing above 767px moves. */
@media (max-width: 767px) {
  #brx-content h1,
  #brx-content .m21-hero h1 {
    font-size: clamp(4.6rem, 3.4rem + 4.4vw, 5.6rem);
  }
}


/* LIST ELEMENT */
/* Bricks' list element renders
   <ul><li><div class="content"><a><span class="title"></a><span class="separator"></div>
   <div class="description"></div></li>
   and ships essentially unstyled, so it inherits nothing from the type scale.
   Lists are built with this element rather than raw <ul> markup in a text
   element, so that every item stays editable in the builder. */
#brx-content .brxe-list {
  list-style: none;
  margin: 0 0 var(--m21-space-md);
  padding: 0;
}

#brx-content .brxe-list li {
  padding: var(--m21-space-xs) 0;
  border-bottom: 1px solid var(--m21-rule);
}

#brx-content .brxe-list li:last-child {
  border-bottom: 0;
}

/* justify-content overrides Bricks, which ships
     @layer bricks { :where(.brxe-list) .content { justify-content: space-between } }
   Under space-between an icon throws the title to the far edge of the row
   instead of sitting it alongside. No !important needed: an unlayered rule
   beats a layered one, and :where() adds no specificity. */
#brx-content .brxe-list .content {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: var(--m21-space-2xs);
}

#brx-content .brxe-list .title {
  font-family: var(--m21-heading-h2);
  font-weight: 600;
  font-size: var(--m21-size-base);
  color: var(--m21-ink);
}

/* Bricks emits an empty separator span between title and meta. Nothing to show. */
#brx-content .brxe-list .separator {
  display: none;
}

#brx-content .brxe-list .description {
  color: var(--m21-ink-muted);
  font-size: var(--m21-size-sm);
  line-height: 1.5;
  margin-top: var(--m21-space-3xs);
}
/* FAQ ACCORDION */
/* The FAQs are the native Bricks accordion-nested element. Bricks supplies the
   fold and the ARIA wiring (role=button, aria-expanded, aria-controls on the
   title; role=region, aria-labelledby on the panel). Everything here is the
   house look only: do not add show/hide rules, they are Bricks' job.
   Answers are separate elements inside .accordion-content-wrapper, so each
   paragraph stays individually editable in the builder. */
.m21-faq > .brxe-block {
  border-bottom: 1px solid var(--m21-rule);
}

.m21-faq .accordion-title-wrapper {
  padding: var(--m21-space-sm) 0;
  gap: var(--m21-space-sm);
}

#brx-content .m21-faq .accordion-title-wrapper .brxe-heading {
  margin: 0;
  font-size: var(--m21-size-md);
  text-transform: none;
}

.m21-faq .accordion-content-wrapper {
  padding-bottom: var(--m21-space-sm);
}

#brx-content .m21-faq .accordion-content-wrapper > *:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Case study figures and charts

   Single series throughout, so there is no legend: the figcaption names the
   series. Marks are ink on ground, axes are deliberately recessive, and the
   only labels are the first point, the peak and the last. Hover is the SVG
   <title> element, which needs no JavaScript and is announced by screen
   readers.
   --------------------------------------------------------------------------- */

.m21-figure {
	margin: 2.5rem 0 3rem;
}

#brx-content .m21-figure figcaption {
	text-align: center;
	font-family: "Avenir Next", system-ui, sans-serif;
	font-size: var(--m21-size-sm);
	font-weight: 700;
	line-height: 1.4;
	color: #1a1a1a;
	margin-top: 1.6rem;
	max-width: none;
}

.m21-chart {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.m21-chart-line {
	fill: none;
	stroke: #1a1a1a;
	stroke-width: 2;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.m21-chart-dot,
.m21-chart-unit {
	fill: #1a1a1a;
}

/* Bigger than the mark, invisible until used. */
.m21-chart-hit {
	fill: transparent;
	stroke: none;
	cursor: crosshair;
}

.m21-chart-hit:hover {
	fill: #1a1a1a;
	fill-opacity: 0.12;
}

.m21-chart-grid {
	stroke: #d9d5cd;
	stroke-width: 1;
}

.m21-chart-axis-line {
	stroke: #b3ada2;
	stroke-width: 1;
}

/* The break across missing data, so a gap never reads as a decline. */
.m21-chart-gap {
	stroke: #b3ada2;
	stroke-width: 1.5;
	stroke-dasharray: 3 4;
}

.m21-chart-axis,
.m21-chart-note {
	font-family: "Avenir Next", system-ui, sans-serif;
	font-size: 12px;
	fill: #8a847a;
}

.m21-chart-note {
	font-style: italic;
}

.m21-chart-value,
.m21-chart-lede {
	font-family: "Avenir Next", system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
	fill: #1a1a1a;
}

.m21-chart-lede {
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	fill: #8a847a;
}

@media (max-width: 640px) {
	.m21-chart-axis,
	.m21-chart-note { font-size: 14px; }
	.m21-chart-value { font-size: 15px; }
}

/* Print and forced-colors: keep the marks, drop the hover affordance. */
@media (forced-colors: active) {
	.m21-chart-line { stroke: CanvasText; }
	.m21-chart-dot,
	.m21-chart-unit { fill: CanvasText; }
}

/* Bars, and the before/after numerals set in the site's own heading face. */

.m21-chart-bar {
	fill: #1a1a1a;
}

.m21-chart-bar:hover {
	fill: #33312d;
}

.m21-chart-big {
	font-family: "Avenir Next", system-ui, sans-serif;
	font-size: 30px;
	font-weight: 700;
	fill: #1a1a1a;
}

/* Stag is drawn italic and registered as font-style: normal. Never set italic
   here or the browser obliques glyphs that already slant. */
.m21-chart-numeral {
	font-family: var(--m21-heading-font);
	font-weight: 900;
	font-size: 116px;
	fill: #1a1a1a;
}

.m21-chart-numeral--was {
	fill: #bcb6aa;
}

.m21-chart-eyebrow {
	font-family: "Avenir Next", system-ui, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	fill: #8a847a;
}

.m21-chart-divider {
	stroke: #ddd8cf;
	stroke-width: 1;
}

@media (max-width: 640px) {
	.m21-chart-numeral { font-size: 86px; }
	.m21-chart-big { font-size: 26px; }
}

@media (forced-colors: active) {
	.m21-chart-bar,
	.m21-chart-numeral { fill: CanvasText; }
}

/* The headline percentage row. */

.m21-chart-stat {
	font-family: var(--m21-heading-font);
	font-weight: 900;
	font-size: 54px;
	fill: #1a1a1a;
}

.m21-chart-statlabel {
	font-family: "Avenir Next", system-ui, sans-serif;
	font-size: 15px;
	font-weight: 600;
	fill: #1a1a1a;
}

@media (max-width: 640px) {
	.m21-chart-stat { font-size: 44px; }
	.m21-chart-statlabel { font-size: 17px; }
}

@media (forced-colors: active) {
	.m21-chart-stat { fill: CanvasText; }
}

/* ---------------------------------------------------------------------------
   Case study stat rows

   HTML rather than SVG on purpose. These are typography, not drawings, and an
   SVG scales as a single unit: inside an 860-wide viewBox a 15px label lands at
   roughly 7px on a 390px screen. HTML reflows, and the type stays legible.

   Stag is drawn italic and registered as font-style: normal. Never set italic.
   --------------------------------------------------------------------------- */

.m21-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	margin: 2.5rem 0 3rem;
	border-top: 1px solid #ddd8cf;
	border-bottom: 1px solid #ddd8cf;
	padding: 2rem 0;
}

.m21-stat {
	text-align: center;
	padding: 0 1.25rem;
}

.m21-stat + .m21-stat {
	border-left: 1px solid #ddd8cf;
}

#brx-content .m21-stat-figure {
	font-family: var(--m21-heading-font);
	font-weight: 900;
	font-size: clamp(3.4rem, 1.6rem + 3.4vw, 5.4rem);
	line-height: 1.05;
	color: #1a1a1a;
	margin: 0 0 0.6rem;
}

#brx-content .m21-stat-label {
	font-family: "Avenir Next", system-ui, sans-serif;
	font-size: var(--m21-size-sm);
	font-weight: 600;
	line-height: 1.35;
	color: #1a1a1a;
	margin: 0 0 0.35rem;
}

#brx-content .m21-stat-detail,
#brx-content .m21-ba-detail {
	font-family: "Avenir Next", system-ui, sans-serif;
	font-size: var(--m21-size-xs);
	color: #8a847a;
	margin: 0;
}

.m21-beforeafter {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: end;
	gap: 2rem;
	margin: 2.5rem 0 0.75rem;
}

.m21-ba {
	text-align: center;
}

.m21-ba + .m21-ba {
	border-left: 1px solid #ddd8cf;
}

#brx-content .m21-ba-eyebrow {
	font-family: "Avenir Next", system-ui, sans-serif;
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #8a847a;
	margin: 0 0 0.75rem;
}

#brx-content .m21-ba-figure {
	font-family: var(--m21-heading-font);
	font-weight: 900;
	font-size: clamp(5.6rem, 2.0rem + 7.5vw, 11.2rem);
	line-height: 1;
	color: #1a1a1a;
	margin: 0 0 0.6rem;
}

#brx-content .m21-ba-figure--was {
	color: #bcb6aa;
}

#brx-content .m21-figure-note {
	font-family: "Avenir Next", system-ui, sans-serif;
	font-size: var(--m21-size-sm);
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	color: #1a1a1a;
	margin: 0 0 4rem;
	max-width: none;
}

@media (max-width: 700px) {
	.m21-stats {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.m21-stat + .m21-stat {
		border-left: 0;
		border-top: 1px solid #ddd8cf;
		padding-top: 2rem;
	}
}

/* The first cell in a row labels it, so it reads as a heading rather than data. */
.m21-table tbody tr > td:first-child,
.m21-table tbody tr > th:first-child,
.m21-prose table tbody tr > td:first-child,
.m21-prose table tbody tr > th:first-child {
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   Case study CTA
   A full-width card on /case-studies/. The whole card is the hit target: the
   anchor carries a stretched ::after rather than wrapping the block, so the
   eyebrow, title, figures and summary each stay separately editable in the
   builder. Bordered all the way round, never a coloured edge bar. The figures
   use the same face and treatment as the case study page's own stat row.
   -------------------------------------------------------------------------- */
#brx-content .m21-casecta {
	position: relative;
	display: block;
	border: 1px solid var(--m21-rule-strong);
	padding: var(--m21-space-md);
	margin: var(--m21-space-lg) 0;
	transition: background-color 0.18s ease, border-color 0.18s ease;
}

#brx-content .m21-casecta:hover {
	background-color: rgba(26, 26, 26, 0.035);
	border-color: var(--m21-ink);
}

#brx-content .m21-casecta-eyebrow {
	font-family: var(--m21-heading-h2);
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--m21-ink-muted);
	margin: 0 0 var(--m21-space-2xs);
}

#brx-content .m21-casecta-title {
	font-family: var(--m21-heading-h2);
	font-size: var(--m21-size-lg);
	line-height: 1.15;
	margin: 0 0 var(--m21-space-xs);
}

#brx-content .m21-casecta-summary {
	font-family: var(--m21-font);
	font-size: var(--m21-size-base);
	max-width: 62ch;
	margin: 0 0 var(--m21-space-md);
}

#brx-content .m21-casecta-figures {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: var(--m21-space-sm);
	border-top: 1px solid var(--m21-rule);
	padding-top: var(--m21-space-sm);
	margin: 0 0 var(--m21-space-md);
}

#brx-content .m21-casecta-num {
	font-family: var(--m21-heading-font);
	font-weight: 900;
	font-size: clamp(2.8rem, 1.6rem + 2.4vw, 4.2rem);
	line-height: 1.05;
	color: var(--m21-ink);
	margin: 0 0 var(--m21-space-3xs);
}

#brx-content .m21-casecta-cap {
	font-family: var(--m21-heading-h2);
	font-size: var(--m21-size-xs);
	color: var(--m21-ink-muted);
	margin: 0;
}

#brx-content .m21-casecta-go {
	font-family: var(--m21-heading-h2);
	font-size: var(--m21-size-sm);
	font-weight: 600;
	margin: 0;
}

#brx-content .m21-casecta-go a {
	color: var(--m21-ink);
	text-decoration: none;
	border-bottom: 2px solid var(--m21-ink);
	padding-bottom: 0.2rem;
}

#brx-content .m21-casecta-go a::after {
	content: "";
	position: absolute;
	inset: 0;
}

@media (max-width: 599px) {
	#brx-content .m21-casecta {
		padding: var(--m21-space-sm);
	}
}

/* --------------------------------------------------------------------------
   Hub page body
   /services/ and /industries/ hold prose and a card grid inside one container.
   The grid wants the wide measure and the prose does not, so without this the
   copy under the cards runs the full container width while every other page
   holds the 84rem reading column. Constrain the prose; leave the nested grid
   container alone.
   -------------------------------------------------------------------------- */
#brx-content .m21-hub-body > :not(.brxe-container) {
	max-width: var(--m21-container-text);
	margin-inline: auto;
}