/* ==========================================================================
   BODY SECTIONS — .br-prose__*

   The components scripts/lib/prose-sections.mjs builds out of Warren's own
   copy: the stat row, the industry card grids, the numbered step band, the
   FAQ accordion, the risk checklists, the location cards, the contact card
   and the closing gold band. Every one of them exists on his live site as a
   designed block and arrived here as flat prose. This sheet is what makes
   them read as blocks again — in OUR type, OUR gold discipline and OUR
   spacing scale, not in his.

   ---------------------------------------------------------------------------
   WHERE IT LOADS, AND WHY LAST

   Linked from page.html, service.html, industry.html and article.html, AFTER
   each template's own stylesheet. That order is load-bearing. All four prose
   containers set their elements by SELECTOR — `.br-page__prose li`,
   `.br-service__prose > * + *`, `.br-article__body p` — which is (0,1,1), and
   a single class is (0,1,0) and loses. So:

     · every rule that has to beat a container rule is written with TWO
       classes, e.g. `.br-prose__checklist > .br-prose__check`, which is
       (0,2,0) and wins on specificity whatever the load order;
     · the handful that tie at (0,2,0) are settled by loading last.

   Nothing here uses !important, and nothing here restates a token.

   ---------------------------------------------------------------------------
   THE MEASURE, AND BREAKING OUT OF IT

   The prose column is capped at 680px and centred, which is right for reading
   and wrong for a three-up grid — his stat row and his card grids run the
   full container. `.br-prose__wide` pulls a block back out to the container
   edge with a negative inline margin, sized per breakpoint against the slack
   the gutter scale actually leaves:

     viewport   gutter   content   slack each side   bleed
     <992         ≤80      ≤832            ≤76         0     (no room; stays)
      992          80       832             76        68
     1200         100      1000            160       148
     1440         100      1240            280       256

   Deliberately NOT computed from 100vw. On a platform with classic (non
   overlay) scrollbars 100vw is ~15px wider than the box the container
   actually gets, and a bleed derived from it puts 7px of the grid past the
   right edge — which is a horizontal scrollbar on the whole document. Fixed
   steps under-fill by 8-24px and can never do that.
   ========================================================================== */

/* ==========================================================================
   0a. SECTION BANDS — the page's own rhythm  (sectionBands, 5 pages)

   THE MEASUREMENT THIS ANSWERS. /insurance-broker-brisbane/ at 1440 rendered
   as ONE band: div.br-page__body, white, 6837px tall, every component stacked
   in a single column at one volume. His own page renders the same words as
   eleven bands on five surfaces. The founder's verdict was "the sections
   aren't distinct and nor is their weighting", and both halves of that are
   this file's §0a and nothing else.

   A BAND IS A CHILD OF .br-page__body, so it is already the width of the
   viewport and paints to the edge with no 100vw arithmetic — which is the
   one thing the bleed ladder at the top of this file exists to avoid. Inside
   it the geometry is unchanged: .br-container caps at 1240 + gutters and
   .br-page__prose holds the 680px measure, so --br-prose-bleed, the section
   heads and every component behave exactly as they did in the single column.

   THE SURFACES ARE THE HOME PAGE'S, not his. His alternates through black;
   here ink is a rounded inner block (the step band, the home page's
   industries) and the full-bleed set is page white, --br-bg-band and gold —
   .br-difference and .br-services, the only two full-bleed surfaces the
   signed-off home page paints. Emitted as .br-surface-band / .br-surface-gold
   from base.css, so there is one definition of each colour on the site.

   THE WEIGHT SCALE IS THE EXISTING ONE. 4u is .br-speak's own padding, 3u is
   --br-section-y-lg, 2u is --br-section-y. Three steps, so the bands that
   carry the page (the opening, the industries, the reasons, the steps, the
   closing CTA) are physically larger than the ones that support them (the
   chip strip, a run of plain prose).
   ========================================================================== */

.br-prose__band {
  padding-block: var(--br-section-y-lg);      /* 3u — "major", the default */
}

.br-prose__band.br-prose__band--lead { padding-block: calc(var(--br-flow-lg) * 2); }   /* 4u */
.br-prose__band.br-prose__band--major { padding-block: var(--br-section-y-lg); }       /* 3u */
.br-prose__band.br-prose__band--sub { padding-block: var(--br-section-y); }            /* 2u */

/* The body's own padding was the single column's top and bottom air. The
   bands bring their own and it must not be paid twice. */
.br-page__body.br-page__body--banded { padding-block: 0; }

/* A WIDE COMPONENT AT A BAND EDGE MUST NOT ADD TO THE BAND'S PADDING.
   page.css's `.br-page__prose > :first-child { margin-block-start: 0 }` is
   (0,1,1) and the wide rule below is (0,2,0), so the wide rule won and a
   band that opens on a section head carried 56px of margin inside its own
   112px of padding. Measured before this: band 3 opened 141px below its own
   top edge instead of 84. Four classes here, so it beats both. */
.br-prose__band .br-page__prose > .br-prose__wide:first-child { margin-block-start: 0; }
.br-prose__band .br-page__prose > .br-prose__wide:last-child { margin-block-end: 0; }

/* THE CLOSING CTA IS THE BAND NOW, not a rounded block inside one. §14 gives
   it gold and a 4u/3 radius because it was sitting in a white column; on a
   gold band that is gold on gold with a corner drawn round it. The band keeps
   the colour, the block keeps the composition. */
.br-prose__band--lead.br-surface-gold .br-prose__cta-band {
  background: none;
  border-radius: 0;
  padding: 0;
}

/* ==========================================================================
   0. SHARED — the bleed, the glyph, the section beat
   ========================================================================== */

.br-page__prose,
.br-service__prose,
.br-industry__prose,
.br-article__body { --br-prose-bleed: 0px; }

@media (min-width: 992px) {
  .br-page__prose { --br-prose-bleed: 68px; }
}
@media (min-width: 1200px) {
  .br-page__prose { --br-prose-bleed: 148px; }
}
@media (min-width: 1440px) {
  .br-page__prose { --br-prose-bleed: 256px; }
}

/* BOTH AXES IN ONE RULE AT (0,2,0), and that is not tidiness.
   page.css §"transparent wrappers" sets `.br-page__prose :is(article, div,
   section) { margin: 0 }` — (0,1,1), and the shorthand, so it zeroes the
   inline margins as well. A single-class `.br-prose__wide` loses that fight
   and the div-based components (the stat row, the step band, the FAQ, the
   map, the closing band) silently stay at 680px while the list-based ones
   (the card grids, the location cards) bleed correctly. Measured, before this
   was written: cardgrid x=124 w=1192, steps x=380 w=680, on the same page.
   The doubled class wins at (0,2,0) and both behave.

   The block margin rides along for the same reason: a section is not a
   paragraph, and --br-flow-lg is the interval the prose column already puts
   above an h2, so a component reads as its own thing without inventing a
   second rhythm. :where() keeps the ancestor list free, so the specificity is
   the pair and nothing else. */
.br-prose__wide { margin-inline: calc(var(--br-prose-bleed, 0px) * -1); }

:where(.br-page__prose, .br-service__prose, .br-industry__prose, .br-article__body)
  .br-prose__wide.br-prose__wide {
  margin-block: var(--br-flow-lg);
  margin-inline: calc(var(--br-prose-bleed, 0px) * -1);
}

/* A wide block that follows its own section head closes up to it. */
:where(.br-page__prose, .br-service__prose, .br-industry__prose, .br-article__body)
  .br-prose__sectionhead.br-prose__wide {
  margin-block-end: var(--br-flow-sm);
}

/* ==========================================================================
   0b. SECTION HEAD

   The eyebrow, heading and standfirst that introduce a full-width block.
   Centred and held to the narrow measure over the width of the block below
   — the arrangement every site with full-width sections arrives at, his
   included, and the only one that stops a 680px heading reading as indented
   inside its own 1192px grid.
   ========================================================================== */

.br-prose__sectionhead {
  text-align: center;
}

.br-prose__sectionhead > * {
  max-inline-size: var(--br-measure-wide);
  margin-inline: auto;
}

/* The heading opens the block; its own lead-in is the wrapper's job now. */
.br-prose__sectionhead > :is(h1, h2, h3, h4) { margin-block-start: 0; }
.br-prose__sectionhead > :last-child { margin-block-end: 0; }
.br-prose__sectionhead > .br-eyebrow.br-prose__eyebrow { margin-block-start: 0; }

/* Our marks are stroke drawings. The containers set `fill: currentColor` on
   bare svg for the extracted FontAwesome glyphs, which would flood these
   solid — see the note in scripts/lib/prose-icons.mjs on why there are two
   classes here. */
.br-prose__glyph.br-prose__glyph--stroke {
  display: block;
  inline-size: 20px;
  block-size: 20px;
  max-inline-size: none;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  color: inherit;
  flex: none;
}

/* ==========================================================================
   1. EYEBROW  (S10)

   .br-eyebrow is the component the home page already wears — 11.5/700/0.1em,
   uppercase, --br-text-accent. His is a gold outlined pill; that is his
   design language and this is ours. All this adds is the interval, because
   an eyebrow belongs to the heading under it and must not float between two
   sections.
   ========================================================================== */

.br-eyebrow.br-prose__eyebrow {
  margin-block: var(--br-flow-lg) var(--br-space-2);
}

/* First thing in the body: no leading gap — the masthead already set it. */
:where(.br-page__prose) > .br-eyebrow.br-prose__eyebrow:first-child {
  margin-block-start: 0;
}

/* The heading an eyebrow introduces closes up to it, or the pair reads as two
   unrelated lines. --br-flow-lg is the h2's own top margin; this cancels it. */
.br-prose__eyebrow + :is(h1, h2, h3) { margin-block-start: 0; }

/* ==========================================================================
   2. PROOF STRIP  (S11)

   "Same senior broker year after year • Proactive reviews • Fast, clear
   communication". One line, small, muted, with a gold lozenge between items.
   The separator is drawn rather than typed: his bullet character sits on the
   baseline at the size of the text, and at 14px that reads as punctuation
   somebody forgot to delete.
   ========================================================================== */

.br-prose__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--br-space-2) var(--br-space-4);
  margin-block: var(--br-flow-xs);
  font-size: var(--br-small-size);
  line-height: var(--br-small-lh);
  letter-spacing: var(--br-small-ls);
  color: var(--br-text-muted);
}

.br-prose__proof > .br-prose__proof-item {
  display: inline-flex;
  align-items: baseline;
  gap: var(--br-space-4);
}

/* The dot belongs BETWEEN two items, which means equal air on both sides: the
   row's own gap on one side of it, and its own item's gap on the other. The
   first draft pulled it back with a negative start margin and it read as
   punctuation somebody had left on the end of the previous phrase.

   IT TRAILS ITS ITEM, IT DOES NOT LEAD THE NEXT ONE — and that is the whole
   point of this rule, not a preference. The dot is drawn by a pseudo-element
   INSIDE an item, so it wraps with that item; the row is `flex-wrap: wrap`
   and a three-item strip does not fit one line on a phone. Measured on
   /insurance-broker-brisbane/ at 390: the strip took two lines, and with the
   dot as a leading `::before` on item 2 and item 3, line 2 began
   "· Trusted by Brisbane Businesses" — a separator at the start of a line,
   separating it from nothing. The gold band's strip took three lines and
   opened two of them with a dot. Hung on the END of the preceding item the
   dot can never begin a line: it is either mid-line between two phrases, or
   it closes a line and reads as the continuation mark it is.

   Air is unchanged, so single-line renders are pixel-identical to the
   `::before` version: 16px (the item's own gap) in front of the dot, 16px
   (the row's column-gap) behind it, exactly as before with the two sources
   swapped. `:not(:last-child)` rather than `:last-child` negation on a
   sibling combinator, because the LAST item is the one that must not draw
   one — under the old rule that was the first. */
.br-prose__proof > .br-prose__proof-item:not(:last-child)::after {
  content: "";
  flex: none;
  inline-size: 4px;
  block-size: 4px;
  border-radius: var(--br-radius-pill);
  background: var(--br-gold);
  translate: 0 -0.35em;
}

/* On the gold band the dot would vanish into its own background. */
.br-prose__proof.br-prose__proof--band {
  justify-content: center;
  color: var(--br-ink-on-gold);
}
.br-prose__proof--band > .br-prose__proof-item:not(:last-child)::after {
  background: var(--br-ink);
}

/* ==========================================================================
   3. ACTION ROW

   page.css turns a top-level <a> into an outline pill and sets it
   `display: flex; width: fit-content`, which is right on its own terms — an
   inline pill gets caught in the line box of the bare text beside it — but it
   means two CTAs always stack. His sit side by side with the first carrying
   the weight, and so do ours.

   The variants are restated at (0,2,0) because page.css's `> a` rule is
   (0,1,2) and would otherwise win. They set the same three custom properties
   base.css section 5 uses, so this is the button, not a copy of one.
   ========================================================================== */

.br-prose__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--br-space-3);
  margin-block: var(--br-flow-sm);
  /* Drives the stacked / side-by-side switch below. The same containment the
     hero's action row uses, for the same reason: the row wraps when its COLUMN
     runs out, and at one viewport this component has two different columns —
     680px in the prose body, 310px inside the gold CTA band. A viewport media
     query cannot tell those two apart. */
  container: br-prose-actions / inline-size;
}

.br-prose__actions.br-prose__actions--center { justify-content: center; }

/* STACKED CTAs ARE THE SAME WIDTH — the home page's treatment, now this
   component's too. See sections/hero.css §"CALLS TO ACTION": the hero gives its
   children `flex: 1 1 100%` below a 445px container query, so at 390 both pills
   render 356.9px and the pair reads as one control.

   This row did not. It let each pill hug its own label, so every multi-button
   group on the site was a ragged stack on a phone. Measured at 390 before this
   rule, widest minus narrowest in each group:

     /insurance-broker-{brisbane,melbourne,perth,sydney}/
       "Talk to a Broker" 200.0  vs "1300 1BROAD" 152.8   47.2 apart
       "Get a Quote"      200.0  vs "Quick Call"  126.4   73.6 apart
     /about/ "Email Policy Documents" 231.0 vs "Request a Review" 183.5    47.5
     /plumber-insurance-australia/  four groups, 53.1 / 74.3 / 102.2 / 140.6

   445px is the hero's measured threshold, reused deliberately instead of
   re-derived: a page can carry both components, and if they switched at
   different column widths there would be a band where one row is stacked
   beside one that is not.

   `:not(:only-child)` because this is a rule about a GROUP. A lone pill — the
   closing gold band on the city pages, /faq/, /get-started/, /contact/'s
   "Email Policy Documents" — has nothing to match, and stretching it edge to
   edge would redesign a surface nobody reported. Those stay byte-identical.

   No blanket `min-width: 0` here, unlike the hero. It does not need one: the
   `.br-prose__actions > .br-btn` rule below already sets `white-space: normal`
   and `max-inline-size: 100%`, so an over-long label wraps inside its own pill
   rather than pushing the document past the viewport — measured, plumber's
   35-character CTA is a two-line 72px pill in the 310px band and document
   scrollWidth is flush at 320/360/390/430. Leaving it off also keeps base.css's
   200px floor on the gold pill intact from 992 up, which a blanket zero would
   have silently cancelled. */
.br-prose__actions > .br-btn:not(:only-child) {
  flex: 1 1 100%;
}

@container br-prose-actions (min-width: 445px) {
  .br-prose__actions > .br-btn:not(:only-child) { flex: 0 1 auto; }
}

/* Fallback for engines without container queries (pre-16 Safari). This is the
   VIEWPORT width at which the LATER of the two columns crosses 445 — measured
   on /insurance-broker-brisbane/, one pixel at a time: the prose column is
   444.41 at 477 and 445.41 at 478; the gold band's narrower column is 444.88 at
   527 and 445.88 at 528. Taking the later of the two, 528, is the conservative
   choice: between 478 and 527 a fallback engine keeps the prose row stacked and
   equal, which is never a broken layout, only an early one. */
@supports not (container-type: inline-size) {
  @media (min-width: 528px) {
    .br-prose__actions > .br-btn:not(:only-child) { flex: 0 1 auto; }
  }
}

/* THE BUTTON, RE-ASSERTED.
   page.css §"mirrors .br-link" styles every `a` inside the prose column at
   (0,1,1): semibold, underlined, --br-text-strong, and a 2px radius. That is
   right for the 114 inline links in the extracted copy and catastrophic for a
   pill — measured on the step band before this block existed, the three CTAs
   computed to `border-radius: 2px; text-decoration: underline` and the ink
   button resolved `color` to ink ON ink, which is an invisible label.

   So the skin is restated at (0,2,0). Every value is the custom property
   base.css section 5 already drives the button from; nothing here is a new
   number. */
.br-prose__actions > .br-btn,
.br-prose__contact > .br-btn {
  display: inline-flex;
  inline-size: auto;
  max-inline-size: 100%;
  margin-block: 0;
  white-space: normal;
  font-weight: var(--br-ui-weight);
  text-decoration: none;
  background: var(--_btn-bg);
  color: var(--_btn-color);
  border: 1px solid var(--_btn-border);
  border-radius: var(--br-radius-pill);
}
.br-prose__actions > .br-btn:hover,
.br-prose__contact > .br-btn:hover { text-decoration: none; }

.br-prose__actions > .br-btn--primary {
  --_btn-bg: var(--br-gold);
  --_btn-border: var(--br-gold);
  --_btn-color: var(--br-ink);
}
.br-prose__actions > .br-btn--primary:hover { --_btn-bg: var(--br-gold-hover); --_btn-border: var(--br-gold-hover); }

.br-prose__actions > .br-btn--outline {
  --_btn-bg: transparent;
  --_btn-border: var(--br-border-strong);
  --_btn-color: var(--br-text-strong);
}
.br-prose__actions > .br-btn--outline:hover {
  --_btn-bg: var(--br-gold-hover);
  --_btn-border: var(--br-gold-hover);
  --_btn-color: var(--br-ink);
}

.br-prose__actions > .br-btn--dark {
  --_btn-bg: var(--br-ink);
  --_btn-border: var(--br-ink);
  --_btn-color: var(--br-white);
}
.br-prose__actions > .br-btn--dark:hover { --_btn-bg: var(--br-ink-hover); --_btn-border: var(--br-ink-hover); }

/* The second pill on the gold band: ink outline rather than a second ink
   fill, so the row still has one loud thing in it. */
.br-prose__actions > .br-btn--dark.br-prose__btn--hollow {
  --_btn-bg: transparent;
  --_btn-color: var(--br-ink);
}
.br-prose__actions > .br-btn--dark.br-prose__btn--hollow:hover {
  --_btn-bg: var(--br-ink);
  --_btn-color: var(--br-white);
}

/* On the dark step band the outline pill needs the dark-surface border. */
.br-on-dark .br-prose__actions > .br-btn--outline {
  --_btn-border: var(--br-white);
  --_btn-color: var(--br-white);
}

/* ==========================================================================
   4. STAT ROW  (S3)   — 6 pages, 17 stats

   "20+ / Years Experience" × 3. On his site these sit inside the hero
   photograph as gold numerals; we have no photograph on an interior page, so
   they sit on the white column as one row of three, divided by the hairline.

   The brief asked for "rules or spacing rather than boxes", and it is the
   right call for more than taste: three boxed numbers on a white page read as
   a widget, and the home page never boxes a number.

   The number is set on the display face at the h2 rung — big enough to be the
   first thing read in the row, small enough that three of them do not compete
   with the section heading above.
   ========================================================================== */

.br-prose__stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

/* THE BEAT AROUND THE ROW, RE-ASSERTED.

   page.css §"transparent wrappers" zeroes the margin on every div in the
   prose column at (0,1,1). That rule was written for the export's meaningless
   <article> and <div> wrappers and it is right about those — but the stat row
   is a div too, and it was caught by it. Measured on all five pages that
   carry a row, before this rule existed: 0.00px between the bottom of the CTA
   pills and the top of the row, at 1440 AND at 390, so the gold icon circles
   touched the buttons and the two bands read as one. The gap below, to the
   tick chips, was 0.00px as well.

   Doubled class is (0,2,0) and wins whatever the load order — the same fix
   §0 already uses for .br-prose__wide, and for the same reason.

   --br-flow-sm is the page's own interval for two things that belong together
   but are not the same block: it is exactly what a section head already
   leaves above the block it introduces (28.15 @1440 / 24.12 @390). Not
   --br-flow-lg, which is the interval BETWEEN components (56.31 @1440) and
   would read as a section break — the row qualifies the lede above it and
   belongs to it. Not --br-flow-xs, which is the paragraph beat and would not
   separate the bands at all. Both edges, not just the top: a band with air
   above and none below stops reading as a band and starts reading as the
   lid of whatever follows. */
.br-prose__stats.br-prose__stats {
  margin-block: var(--br-flow-sm);
}

.br-prose__stats > .br-prose__stat {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: var(--br-space-4);
  padding-block: var(--br-flow-xs);
  border-block-start: 1px solid var(--br-border);
}
.br-prose__stats > .br-prose__stat:last-child { border-block-end: 1px solid var(--br-border); }

.br-prose__stat > .br-prose__stat-badge {
  grid-row: 1 / 3;
  inline-size: var(--br-icon-circle-sm);
  block-size: var(--br-icon-circle-sm);
}

.br-prose__stat > .br-prose__stat-value {
  font-family: var(--br-font-display);
  font-size: var(--br-prose-h2-size, 34px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: var(--br-weight-bold);
  color: var(--br-text-heading);
}

.br-prose__stat > .br-prose__stat-caption {
  font-size: var(--br-body-sm-size);
  line-height: var(--br-body-sm-lh);
  letter-spacing: var(--br-body-sm-ls);
  color: var(--br-text-muted);
  text-wrap: balance;
}

/* One row from 640, where three captions still fit without hyphenating. The
   divider turns with the axis: horizontal rules when stacked, vertical when
   in a row — the same rule doing the same job in both directions. */
@media (min-width: 640px) {
  .br-prose__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .br-prose__stats[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .br-prose__stats > .br-prose__stat {
    grid-template-columns: auto;
    grid-template-rows: auto auto auto;
    align-items: start;
    row-gap: var(--br-space-2);
    padding-block: 0;
    padding-inline: var(--br-flow-sm);
    border-block: 0;
    border-inline-start: 1px solid var(--br-border);
  }
  .br-prose__stats > .br-prose__stat:first-child { padding-inline-start: 0; border-inline-start: 0; }
  .br-prose__stats > .br-prose__stat:last-child { border-block-end: 0; }
  .br-prose__stat > .br-prose__stat-badge { grid-row: auto; }
}

/* ==========================================================================
   5. TICK CHIPS  (S5)   — 6 pages

   Three short claims under the intro CTAs: "Clear advice", "Fast turnaround",
   "Claims support". Wrap, never scroll — three of them fit one line at 390.
   ========================================================================== */

.br-prose__ticks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--br-space-2) var(--br-space-5);
  margin-block: var(--br-flow-sm);
  padding-inline: 0;
  list-style: none;
}

.br-prose__ticks > .br-prose__tick {
  display: inline-flex;
  align-items: center;
  gap: var(--br-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--br-body-sm-size);
  line-height: var(--br-body-sm-lh);
  font-weight: var(--br-weight-medium);
  color: var(--br-text-strong);
}

.br-prose__tick > .br-prose__tick-mark {
  display: inline-flex;
  color: var(--br-text-accent);
}
.br-prose__tick > .br-prose__tick-mark .br-prose__glyph--stroke { inline-size: 16px; block-size: 16px; }

/* ==========================================================================
   6. CHECKLIST  (S1)   — 45 records, 89 lists, 425 items

   THE BIG ONE. "Key Risks for Construction Professionals:" over eight items,
   each `Bold Label: explanation`. It is the shape that makes 44 of the 54
   insurance and industry pages read as prose today, and it is the only
   component in this sheet that ships on all four templates.

   A gold tick replaces the disc, the label is picked out at weight on its own
   line, and the explanation sits under it in body colour. 403 of the 425
   items carry a label; the other 22 render as one plain run — degrade, never
   force.

   No card, no fill, no rule. A checklist is reading matter, and eight boxed
   rows in a 680px column is a table pretending to be a list.
   ========================================================================== */

.br-prose__checklist-head {
  /* The heading and its list are one unit. The container gives an h2 a
     --br-flow-lg lead-in, which is right; what it must not keep is the full
     paragraph gap underneath. */
  margin-block-end: var(--br-flow-2xs);
}

.br-prose__checklist {
  margin-block: 0 var(--br-flow-sm);
  padding-inline-start: 0;
  list-style: none;
}

/* S20's lists have no heading of their own — they come out of a run of bare
   headings that followed a paragraph — so they have to supply the lead-in the
   .br-prose__checklist-head above would otherwise have given them. */
.br-prose__checklist.br-prose__checklist--loose {
  margin-block: var(--br-flow-sm) var(--br-flow-sm);
}

.br-prose__checklist > .br-prose__check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--br-space-3);
  margin-block: 0;
  padding-inline-start: 0;
  padding-block: var(--br-flow-2xs);
  list-style: none;
}
.br-prose__checklist > .br-prose__check + .br-prose__check {
  border-block-start: 1px solid var(--br-border);
}

.br-prose__check > .br-prose__check-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 22px;
  block-size: 22px;
  margin-block-start: 0.15em;
  border-radius: var(--br-radius-pill);
  background: var(--br-gold-wash);
  color: var(--br-text-accent);
}
.br-prose__check > .br-prose__check-mark .br-prose__glyph--stroke { inline-size: 14px; block-size: 14px; }

.br-prose__check > .br-prose__check-body { display: block; }

.br-prose__check-body > .br-prose__check-label {
  display: block;
  font-weight: var(--br-weight-semibold);
  color: var(--br-text-strong);
}

.br-prose__check-body > .br-prose__check-text {
  display: block;
  color: var(--br-text);
}

/* An item with no label is one run, so it must not inherit the label's own
   line box and sit a beat lower than its neighbours. */
.br-prose__check-body > .br-prose__check-label + .br-prose__check-text {
  margin-block-start: 2px;
}

/* ==========================================================================
   7. LINKED CARD GRID  (S6)   — 5 pages, 41 cards

   Two expressions of the same markup, and the content picks which: a run with
   no descriptions is a CHIP STRIP (his sets six industries on a gold band
   under the hero), a run with them is a ROW PANEL (his "Our Key Brisbane
   Industries" — icon, gold title, one line, arrow at the right).

   The card is .br-card's geometry with the hairline ring, the same object the
   home page's difference cards wear. Hover lifts and warms the ring; the
   whole card is the target, not the four words inside it.
   ========================================================================== */

.br-prose__cardgrid {
  display: grid;
  gap: var(--br-space-4);
  margin-block: var(--br-flow-sm);
  padding-inline-start: 0;
  list-style: none;
}

.br-prose__cardgrid > .br-prose__card {
  margin: 0;
  padding: 0;
  list-style: none;
}

.br-prose__card > .br-prose__card-link {
  display: grid;
  align-items: center;
  gap: var(--br-space-4);
  block-size: 100%;
  padding: var(--br-space-5);
  border-radius: var(--br-radius-md);
  box-shadow: var(--br-ring-hairline);
  background: var(--br-bg-surface);
  color: var(--br-text);
  text-decoration: none;
  transition: box-shadow var(--br-dur) var(--br-ease), transform var(--br-dur) var(--br-ease);
}

.br-prose__card > .br-prose__card-link:hover {
  box-shadow: var(--br-ring-hairline), var(--br-shadow-sm);
  transform: translateY(-2px);
  text-decoration: none;
}
.br-prose__card > .br-prose__card-link:focus-visible {
  outline: 2px solid var(--br-focus);
  outline-offset: 2px;
}

.br-prose__card-link > .br-prose__card-badge {
  inline-size: var(--br-icon-circle-sm);
  block-size: var(--br-icon-circle-sm);
}

.br-prose__card-body > .br-prose__card-title {
  display: block;
  font-family: var(--br-font-body);
  font-size: var(--br-body-size);
  line-height: var(--br-body-lh);
  font-weight: var(--br-weight-semibold);
  color: var(--br-text-strong);
  text-wrap: balance;
}

.br-prose__card-body > .br-prose__card-text {
  display: block;
  margin-block-start: var(--br-space-1);
  font-size: var(--br-body-sm-size);
  line-height: var(--br-body-sm-lh);
  letter-spacing: var(--br-body-sm-ls);
  color: var(--br-text-muted);
}

.br-prose__card-link > .br-prose__card-arrow {
  display: none;
  color: var(--br-text-muted);
  transition: transform var(--br-dur) var(--br-ease), color var(--br-dur) var(--br-ease);
}
.br-prose__card-link:hover > .br-prose__card-arrow {
  color: var(--br-text-strong);
  transform: translateX(3px);
}

/* -- chip strip: icon + label, nothing else ------------------------------- */
.br-prose__cardgrid--chips > .br-prose__card > .br-prose__card-link {
  grid-template-columns: auto minmax(0, 1fr);
}

/* -- row panel: icon, title, one line, arrow ------------------------------ */
.br-prose__cardgrid--rows > .br-prose__card > .br-prose__card-link {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
}
.br-prose__cardgrid--rows .br-prose__card-arrow { display: block; align-self: center; }
.br-prose__cardgrid--rows .br-prose__card-title { color: var(--br-text-accent); }

@media (min-width: 480px) {
  .br-prose__cardgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 860px) {
  /* Three across, which divides six and three without an orphan cell — the
     two run lengths that actually occur. A four-up would leave two holes in
     the six-item strip, which is the exact fault the home page's services
     grid was corrected for. */
  .br-prose__cardgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   8. VALUE CARDS  (S13)   — 7 pages, 48 cards

   "Why Brisbane Businesses Choose Broad Risk" and its six reasons. His are
   white cards, three up, with a gold circular icon straddling the card's top
   edge. That overlap is the one flourish of his worth keeping — it is what
   makes the row read as six objects rather than six paragraphs — and it is
   expressed here with our icon circle and our radius, not his.
   ========================================================================== */

.br-prose__valuecards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--br-space-6);
  /* The badge sits half outside the card; the row needs the room. */
  margin-block: calc(var(--br-flow-lg) + var(--br-icon-circle-sm) / 2) var(--br-flow-lg);
  padding-inline-start: 0;
  list-style: none;
}

.br-prose__valuecards > .br-card.br-prose__value {
  position: relative;
  margin: 0;
  padding: calc(var(--br-icon-circle-sm) / 2 + var(--br-space-5)) var(--br-space-6) var(--br-space-6);
  border-radius: var(--br-radius-md);
  box-shadow: var(--br-ring-hairline);
  list-style: none;
  text-align: center;
}

.br-prose__value > .br-prose__value-badge {
  position: absolute;
  inset-block-start: calc(var(--br-icon-circle-sm) / -2);
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: var(--br-icon-circle-sm);
  block-size: var(--br-icon-circle-sm);
}

.br-prose__value > .br-prose__value-title {
  margin-block: 0 var(--br-space-3);
  font-family: var(--br-font-display);
  font-size: var(--br-h4-size);
  line-height: var(--br-h4-lh);
  letter-spacing: var(--br-h4-ls);
  font-weight: var(--br-weight-bold);
  color: var(--br-text-heading);
  text-wrap: balance;
}

.br-prose__value > .br-prose__value-text {
  margin-block: 0;
  font-size: var(--br-body-sm-size);
  line-height: var(--br-body-sm-lh);
  letter-spacing: var(--br-body-sm-ls);
  color: var(--br-text-muted);
}

@media (min-width: 600px) {
  .br-prose__valuecards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .br-prose__valuecards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Four cards would leave one alone on a second row of three. Two rows of
     two is the honest shape for that count. */
  .br-prose__valuecards[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   9. STEP SEQUENCE  (S4)   — 6 pages, 18 steps

   "Step 1 / Tell us about your Brisbane business / Send your policy
   schedule(s)…" — three of them, on a dark band, with the step number as a
   gold pill straddling the card's top edge.

   .br-surface-dark + .br-on-dark is the token pair the home page's industries
   block already uses, so every colour inside this band — text, muted text,
   hairline, accent — is remapped by tokens.css rather than restated here.
   ========================================================================== */

.br-prose__steps {
  padding: var(--br-flow-lg) var(--br-flow-sm) var(--br-flow-md);
  border-radius: var(--br-radius-xl);
}

.br-prose__steps > .br-prose__steps-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--br-flow-sm) + var(--br-space-3));
  margin: 0;
  padding-inline-start: 0;
  list-style: none;
  counter-reset: none;
}

.br-prose__steps-list > .br-prose__step {
  position: relative;
  margin: 0;
  padding: var(--br-flow-md) var(--br-space-6) var(--br-space-7);
  border: 1px solid var(--br-border);
  border-radius: var(--br-radius-md);
  list-style: none;
  text-align: center;
}
.br-prose__steps-list > .br-prose__step::marker { content: ""; }

.br-prose__step > .br-prose__step-label {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  translate: -50% -50%;
  margin: 0;
  padding: 3px var(--br-space-3);
  border-radius: var(--br-radius-pill);
  background: var(--br-gold);
  color: var(--br-ink);
  font-size: var(--br-eyebrow-size);
  line-height: var(--br-eyebrow-lh);
  font-weight: var(--br-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.br-prose__step > .br-prose__step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--br-icon-circle);
  block-size: var(--br-icon-circle);
  margin-block-end: var(--br-space-4);
  border-radius: var(--br-radius-pill);
  /* A gold disc at this size on black is a lamp. The wash the tokens give a
     dark surface holds the mark without lighting the card. */
  background: var(--br-bg-wash);
  color: var(--br-gold);
}
.br-prose__step > .br-prose__step-badge .br-prose__glyph--stroke { inline-size: 22px; block-size: 22px; }

.br-prose__step > .br-prose__step-title {
  margin-block: 0 var(--br-space-3);
  font-family: var(--br-font-display);
  font-size: var(--br-h4-size);
  line-height: var(--br-h4-lh);
  letter-spacing: var(--br-h4-ls);
  font-weight: var(--br-weight-bold);
  color: var(--br-gold);
  text-wrap: balance;
}

.br-prose__step > .br-prose__step-text {
  margin-block: 0;
  font-size: var(--br-body-sm-size);
  line-height: var(--br-body-sm-lh);
  letter-spacing: var(--br-body-sm-ls);
  color: var(--br-text-muted);
}

@media (min-width: 860px) {
  .br-prose__steps { padding-inline: var(--br-flow-md); }
  .br-prose__steps > .br-prose__steps-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--br-space-6); }
}

/* ==========================================================================
   10. FAQ ACCORDION  (S2)   — 8 pages, 45 questions

   One white card holding the whole set, hairline between rows, first row
   open, a chevron at the right that turns. Native <details>/<summary> is
   kept: it gives keyboard operation and find-in-page for nothing, and
   rebuilding that in script would be a downgrade wearing a feature's clothes.

   The chevron is drawn with a border, not a glyph, so it needs no icon and
   cannot inherit the container's fill rule.
   ========================================================================== */

.br-prose__faq {
  padding: var(--br-space-3) var(--br-space-6);
  border-radius: var(--br-radius-lg);
  box-shadow: var(--br-ring-hairline);
  background: var(--br-bg-surface);
}

.br-prose__faq > .br-prose__faq-item {
  margin-block: 0;
  padding-block: 0;
  border: 0;
}
.br-prose__faq > .br-prose__faq-item + .br-prose__faq-item {
  border-block-start: 1px solid var(--br-border);
}

/* THE BLOCK CLOSES UP TO ITS OWN HEADING. §0 gives every wide component
   --br-flow-lg above and below, which is right for a component that arrives
   unannounced and wrong the moment one is introduced by a heading: measured on
   /insurance/cyber-insurance/ before this, 37.5px above the "Frequently Asked
   Questions" h2 and 56.3px between that h2 and the accordion — the gap INSIDE
   the pair larger than the gap that separates it from the section before, so
   the heading read as belonging to the paragraph above it. The value is the
   containers' own heading-to-content interval, so the h2 binds to its
   accordion exactly as every other h2 on the page binds to its paragraph.
   §0's rule is (0,2,0); the element in the middle here makes it (0,2,1).
   Same shape as §0's own `.br-prose__sectionhead.br-prose__wide` tie-break —
   that wrapper is not used here because it centres its heading, which is
   right over a bleeding grid and wrong over a card the width of the column. */
:where(.br-page__prose, .br-service__prose, .br-industry__prose, .br-article__body)
  :is(h2, h3, h4) + .br-prose__faq.br-prose__wide {
  margin-block-start: var(--br-flow-2xs);
}

.br-prose__faq .br-prose__faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--br-space-4);
  padding-block: var(--br-flow-xs);
  padding-inline: 0;
  font-family: var(--br-font-body);
  font-size: var(--br-body-size);
  line-height: var(--br-body-lh);
  font-weight: var(--br-weight-semibold);
  color: var(--br-text-strong);
  cursor: pointer;
  list-style: none;
}
.br-prose__faq .br-prose__faq-q::-webkit-details-marker { display: none; }
.br-prose__faq .br-prose__faq-q::marker { content: ""; }
.br-prose__faq .br-prose__faq-q:hover { color: var(--br-ink-hover); }

/* THE QUESTION IS A REAL HEADING — an <h3> inside the <summary>, which is how
   his page nests it and what makes the block reachable by heading navigation
   rather than only by reading every row. The block's own heading is the h2
   above it, so the questions are the level below and nothing is skipped.

   Appearance is unchanged by design: the h3 takes the summary's type, which
   the rule above sets. `font` shorthand rather than four longhands because it
   clears the browser's h3 margins in the same declaration. Two classes, so it
   beats the four prose containers' own `.br-…__prose :is(h2, h3, h4)` — see
   the note at the top of this file. `min-width: 0` because it is a flex item
   of the summary row: a long question wraps instead of pushing the chevron. */
.br-prose__faq .br-prose__faq-q > h3 {
  margin: 0;
  min-width: 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-transform: none;
}
.br-prose__faq .br-prose__faq-q:focus-visible {
  outline: 2px solid var(--br-focus);
  outline-offset: 2px;
  border-radius: var(--br-radius-xs);
}

/* TWO DECLARATIONS THAT LOOK REDUNDANT AND ARE NOT: `background` and
   `transform`. All four prose containers draw their OWN summary marker — page
   and service paint an inline-SVG chevron through `background-image` and turn
   it with `transform: rotate(180deg)` when the row opens. Those are different
   PROPERTIES from the ones below, so specificity never gets a say: without a
   reset they simply both apply, and the row carries this chevron with a 14px
   SVG clipped into the 9px box behind it, its rotation composed on top of
   this one's. Measured on /faq/ at 1440: 280 differing subpixels in the
   marker box against the same row with the container's mark switched off.
   Reset in the component, not per container — the component owns its mark. */
.br-prose__faq .br-prose__faq-q::after {
  content: "";
  flex: none;
  inline-size: 9px;
  block-size: 9px;
  margin-inline-end: 3px;
  background: none;
  transform: none;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  rotate: 45deg;
  translate: 0 -25%;
  transition: rotate var(--br-dur) var(--br-ease), translate var(--br-dur) var(--br-ease);
}
/* The open state repeats `transform: none`, and it has to. `[open]` counts in
   the class column, so the containers' own `.br-…__prose details[open] >
   summary::after { transform: rotate(180deg) }` is (0,2,3) and outranks the
   reset above it at (0,2,1) — and because `rotate` is an INDIVIDUAL transform
   property it composes with `transform` rather than replacing it: 225 + 180
   comes back round to 45, the closed angle. The mark stopped answering the
   row. Four class-column terms here, so this one wins. */
.br-prose__faq .br-prose__faq-item[open] > .br-prose__faq-q::after {
  rotate: 225deg;
  translate: 0 25%;
  transform: none;
}

.br-prose__faq .br-prose__faq-a {
  padding-block-end: var(--br-flow-xs);
  color: var(--br-text);
}
.br-prose__faq .br-prose__faq-a > :first-child { margin-block-start: 0; }
.br-prose__faq .br-prose__faq-a > :last-child { margin-block-end: 0; }

/* ==========================================================================
   11. LOCATION CARDS  (S7)   — 4 pages, 12 cards

   Three city photographs with the name beneath. His frames each in a gold
   hairline; ours takes the same hairline the rest of the system uses and puts
   the gold on the name, where it marks something you can act on.
   ========================================================================== */

.br-prose__places {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--br-space-5);
  margin-block: var(--br-flow-sm);
  padding-inline-start: 0;
  list-style: none;
}

.br-prose__places > .br-prose__place { margin: 0; padding: 0; list-style: none; }

.br-prose__place > .br-prose__place-link {
  display: block;
  overflow: hidden;
  border-radius: var(--br-radius-md);
  box-shadow: var(--br-ring-hairline);
  background: var(--br-bg-surface);
  text-decoration: none;
  transition: box-shadow var(--br-dur) var(--br-ease), transform var(--br-dur) var(--br-ease);
}
.br-prose__place > .br-prose__place-link:hover {
  box-shadow: var(--br-ring-hairline), var(--br-shadow-sm);
  transform: translateY(-2px);
  text-decoration: none;
}
.br-prose__place > .br-prose__place-link:focus-visible { outline: 2px solid var(--br-focus); outline-offset: 2px; }

/* THE SAME WASH THE MASTHEADS WEAR, ON THE THUMBNAIL.

   Four photographs by four photographers at four times of day — a sunrise
   Brisbane, a night Perth, a dusk Sydney, an overcast Melbourne. Side by side
   in one strip they read as four stock pictures rather than one set, and this
   strip runs on about 120 pages, so it is the most repeated image on the site.

   Darkening them is what makes them a set. The masthead's wash is directional
   — 88% at the left where the headline sits, easing to 51% across — and at
   384px wide with nothing written on it there is no headline to protect, so
   the card takes the same ink at an even strength. Cousin, not copy.

   A pseudo-element rather than filter: brightness() on the <img>, because the
   filter would be inherited by nothing but would still cost a compositing
   layer per card, and the ink has to be the same black the mastheads use
   rather than a percentage of whatever the photograph already is. */
.br-prose__place-link > .br-prose__place-figure {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--br-bg-band);
}
.br-prose__place-link > .br-prose__place-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--br-photo-wash-flat);
  pointer-events: none;
}
/* The card already lifts 2px on hover; the picture coming up to meet you is
   that same gesture said once more. Less ink, not a different colour. */
.br-prose__place-link:hover > .br-prose__place-figure::after,
.br-prose__place-link:focus-visible > .br-prose__place-figure::after {
  background: var(--br-photo-wash-flat-hover);
}
@media (prefers-reduced-motion: no-preference) {
  .br-prose__place-link > .br-prose__place-figure::after {
    transition: background var(--br-dur) var(--br-ease);
  }
}
.br-prose__place-figure > img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  border-radius: 0;
  object-fit: cover;
}

.br-prose__place-link > .br-prose__place-name {
  display: block;
  padding: var(--br-space-4) var(--br-space-5);
  font-size: var(--br-body-size);
  font-weight: var(--br-weight-semibold);
  color: var(--br-text-accent);
  text-align: center;
}

@media (min-width: 560px) {
  .br-prose__places { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* FOUR, on About and Contact, which carry his footer's full city set rather
     than a city page's "the other three". Three-up strands one on a row of its
     own; two-by-two is the honest shape until there is room for one line.
     Same reasoning and the same breakpoint pair as the value cards in §8.
     The three-card rule above is deliberately untouched — that is what the
     four city pages render, and it is already signed off. */
  .br-prose__places[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .br-prose__places[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   12. CONTACT CARD  (S8)   — 5 pages

   "Reach out to Warren directly:" with the two ways to reach him and the
   quote button. A quiet warm tile rather than a card — it sits inside running
   prose on the About and city pages, and a white card on a white page needs a
   shadow to exist, which is more chrome than one email address is worth.
   ========================================================================== */

.br-prose__contact {
  margin-block: var(--br-flow-sm);
  padding: var(--br-space-6);
  border-radius: var(--br-radius-md);
  background: var(--br-gold-wash);
}

.br-prose__contact > .br-prose__contact-label {
  margin-block: 0 var(--br-space-4);
  font-size: var(--br-body-size);
  font-weight: var(--br-weight-semibold);
  color: var(--br-text-strong);
}

.br-prose__contact > .br-prose__contact-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--br-space-3) var(--br-space-7);
  margin-block: 0 var(--br-space-5);
  padding-inline-start: 0;
  list-style: none;
}
.br-prose__contact-list > .br-prose__contact-item { margin: 0; padding: 0; list-style: none; }

.br-prose__contact-item > .br-prose__contact-link {
  display: inline-flex;
  align-items: center;
  gap: var(--br-space-2);
  font-weight: var(--br-weight-semibold);
  color: var(--br-text-strong);
  text-decoration-color: var(--br-gold);
  text-underline-offset: 4px;
}
.br-prose__contact-item > .br-prose__contact-link:hover { color: var(--br-ink-hover); }
.br-prose__contact-link > .br-prose__contact-glyph { display: inline-flex; color: var(--br-text-accent); }
.br-prose__contact-link > .br-prose__contact-glyph .br-prose__glyph--stroke { inline-size: 18px; block-size: 18px; }

.br-prose__contact > .br-prose__contact-cta {
  --_btn-bg: var(--br-gold);
  --_btn-border: var(--br-gold);
  --_btn-color: var(--br-ink);
}
.br-prose__contact > .br-prose__contact-cta:hover { --_btn-bg: var(--br-gold-hover); --_btn-border: var(--br-gold-hover); }

/* ==========================================================================
   13. MAP  (S9)   — 5 pages, 8 embeds

   The wrapper exists to frame the embed and to hold the radius; the ratio and
   the width are already page.css's job (it corrected the hard 600×450 the
   export left, which was 210px of horizontal scroll on a 390px phone).
   ========================================================================== */

/* THE MAP HAD NO HEIGHT OF ITS OWN, so it took the iframe's own height
   attribute and rendered 1192x795 — a map roughly the size of a laptop screen,
   twice on the contact page. His is 831x450. A map on a contact page answers
   'where roughly is this', which 450px does as well as 795, and the two of them
   were 1,590px of a page that measured 8,706 against his 4,324.

   Given an aspect ratio rather than a fixed height so it holds its shape at
   every width and reserves its space before it loads — an unsized iframe is
   also a layout shift waiting to happen. 16/9 is close to his 1.85:1 and is a
   ratio the rest of the system already uses. */
.br-prose__map {
  overflow: hidden;
  border-radius: var(--br-radius-lg);
  box-shadow: var(--br-ring-hairline);
  aspect-ratio: 16 / 9;
  max-block-size: 480px;
}
.br-prose__map > iframe {
  margin-block: 0;
  border-radius: 0;
  inline-size: 100%;
  block-size: 100%;
  display: block;
}

/* ==========================================================================
   14. CLOSING CTA BAND  (S15)   — 9 pages

   "Ready to Protect your Brisbane Business Properly?" — the gold band that
   closes almost every page of his. Ours is the same band the home page paints
   with .br-surface-gold, rounded rather than full-bleed because it sits
   inside a container rather than spanning the viewport, and the button is ink
   because gold on gold is not a button.
   ========================================================================== */

.br-prose__cta-band {
  padding: var(--br-flow-lg) var(--br-flow-sm);
  border-radius: var(--br-radius-xl);
  text-align: center;
}

.br-prose__cta-band > .br-prose__cta-inner {
  max-inline-size: var(--br-measure);
  margin-inline: auto;
}

.br-prose__cta-inner > .br-prose__cta-title {
  margin-block: 0 var(--br-space-4);
  font-family: var(--br-font-display);
  font-size: var(--br-prose-h2-size, 34px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: var(--br-weight-bold);
  color: var(--br-ink);
  text-wrap: balance;
}

.br-prose__cta-inner > .br-prose__cta-text {
  margin-block: 0 var(--br-space-6);
  font-size: var(--br-body-size);
  line-height: var(--br-body-lh);
  color: var(--br-ink-on-gold);
  text-wrap: pretty;
}

.br-prose__cta-inner > .br-prose__actions { margin-block: 0 var(--br-space-5); }
.br-prose__cta-inner > .br-prose__proof { margin-block: 0; }

@media (min-width: 860px) {
  .br-prose__cta-band { padding-inline: var(--br-flow-lg); }
}

/* ==========================================================================
   15. PAGE INTRO  (S22)   — 1 page

   The eyebrow, the standfirst and the one button his About page opens with,
   as a single centred unit rather than three left-aligned strangers under the
   masthead. Held to the same measure and the same centring the section head
   uses, because it is doing the same job at the top of the page.
   ========================================================================== */

.br-prose__intro { text-align: center; }

.br-prose__intro > * {
  max-inline-size: var(--br-measure-wide);
  margin-inline: auto;
}

.br-prose__intro > .br-eyebrow.br-prose__eyebrow { margin-block-start: 0; }

.br-prose__intro > .br-prose__intro-lead {
  margin-block: 0 var(--br-space-6);
  font-size: var(--br-body-lg-size);
  line-height: var(--br-body-lg-lh);
  letter-spacing: var(--br-body-lg-ls);
  color: var(--br-text);
  text-wrap: pretty;
}

.br-prose__intro > .br-prose__actions { margin-block: 0; }

/* ==========================================================================
   16. FOUNDER BAND  (S18)   — 1 page

   Warren, as one object: the portrait with the years-of-experience figure on
   its corner, and beside it his name, his title, the bio and the direct line
   to him. His /about/ gives the photograph 576 of 1320 and the text 704; ours
   splits 44/56 of the 1192 the bleed leaves, which is the same proportion.

   THE STAT IS A CAPTION, NOT A HEADING. It arrived as an <h2> and it is a
   figure about the man in the picture — set on the display face, on a gold
   plate straddling the portrait's lower corner, which is where his sits
   (measured: 144x97, overlapping the image's bottom edge).

   The portrait is 2:3. `aspect-ratio` + `object-fit: cover` rather than a
   fixed height, so the crop is the same shape at 390 as at 1440 and the band
   never has to guess how tall the bio will run.
   ========================================================================== */

.br-prose__founder {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--br-flow-md);
  align-items: start;
}

.br-prose__founder > .br-prose__founder-portrait {
  position: relative;
  /* Stacked, a full-measure portrait is 680px of one man; held to a plate
     the eye reads as a photograph rather than as a hero. */
  inline-size: min(100%, 420px);
  margin: 0;
  /* Room at the foot for the plate that hangs off the image. */
  padding-block-end: calc(var(--br-space-6) + var(--br-space-2));
}

.br-prose__founder-portrait > .br-prose__founder-img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 28%;
  margin-block: 0;
  border-radius: var(--br-radius-lg);
}

.br-prose__founder-portrait > .br-prose__founder-stat {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: var(--br-space-6);
  display: grid;
  gap: 2px;
  margin-block: 0;
  padding: var(--br-space-4) var(--br-space-5);
  border-radius: var(--br-radius-md);
  background: var(--br-gold);
  box-shadow: var(--br-shadow-sm);
}

.br-prose__founder-stat > .br-prose__founder-stat-value {
  font-family: var(--br-font-display);
  font-size: var(--br-h2-size);
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: var(--br-weight-bold);
  color: var(--br-ink);
}

.br-prose__founder-stat > .br-prose__founder-stat-caption {
  font-size: var(--br-body-sm-size);
  line-height: var(--br-body-sm-lh);
  letter-spacing: var(--br-body-sm-ls);
  font-weight: var(--br-weight-semibold);
  color: var(--br-ink-on-gold);
}

.br-prose__founder > .br-prose__founder-body { min-inline-size: 0; }

.br-prose__founder-body > .br-eyebrow.br-prose__eyebrow { margin-block-start: 0; }

.br-prose__founder-body > .br-prose__founder-name {
  margin-block: 0 var(--br-space-2);
  font-family: var(--br-font-display);
  font-size: var(--br-h2-size);
  line-height: var(--br-h2-lh);
  letter-spacing: var(--br-h2-ls);
  font-weight: var(--br-weight-bold);
  color: var(--br-text-heading);
}

.br-prose__founder-body > .br-prose__founder-role {
  margin-block: 0 var(--br-space-6);
  font-size: var(--br-body-sm-size);
  line-height: var(--br-body-sm-lh);
  letter-spacing: 0.06em;
  font-weight: var(--br-weight-semibold);
  text-transform: uppercase;
  color: var(--br-text-accent);
}

.br-prose__founder-body > .br-prose__founder-text {
  margin-block: 0 var(--br-space-5);
  color: var(--br-text);
  text-wrap: pretty;
}

/* The contact card closes the column; it needs the beat of a new block, not
   the beat of another paragraph. (0,2,0) beats page.css's div rule. */
.br-prose__founder-body > .br-prose__contact {
  margin-block: var(--br-space-6) 0;
}

@media (min-width: 992px) {
  .br-prose__founder {
    grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
    gap: var(--br-flow-lg);
    align-items: center;
  }
  .br-prose__founder > .br-prose__founder-portrait { inline-size: 100%; }
}

/* ==========================================================================
   17. MEDIA BAND  (S19)   — 2 pages, 3 bands

   A photograph beside its section, alternating sides down the page — the
   arrangement his /about/ uses twice in a row. `data-side` is set by the
   transform from the band's own index, so the second one mirrors the first
   without either of them knowing the other exists.

   ONE COLUMN BELOW 992, IMAGE FIRST, always. Reversing the pair on a phone
   would put a photograph above the section it belongs to on one band and
   below it on the next.
   ========================================================================== */

.br-prose__media {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--br-flow-md);
  align-items: center;
}

.br-prose__media > .br-prose__media-figure { margin: 0; min-inline-size: 0; }

.br-prose__media-figure > .br-prose__media-img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-block: 0;
  border-radius: var(--br-radius-lg);
}

.br-prose__media > .br-prose__media-body { min-inline-size: 0; }

.br-prose__media-body > .br-prose__media-title {
  margin-block: 0 var(--br-space-4);
  font-family: var(--br-font-display);
  font-size: var(--br-h2-size);
  line-height: var(--br-h2-lh);
  letter-spacing: var(--br-h2-ls);
  font-weight: var(--br-weight-bold);
  color: var(--br-text-heading);
  text-wrap: balance;
}

.br-prose__media-body > .br-prose__media-text {
  margin-block: 0 var(--br-space-4);
  color: var(--br-text);
  text-wrap: pretty;
}
.br-prose__media-body > .br-prose__media-text:last-child { margin-block-end: 0; }

/* "Proud Member of:" and the Steadfast mark, on one line — which is how his
   page sets them (label x=60, mark x=228, both at y~3220). */
.br-prose__media-body > .br-prose__media-mark {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--br-space-2) var(--br-space-4);
  margin-block: var(--br-space-6) 0;
  padding-block-start: var(--br-space-5);
  border-block-start: 1px solid var(--br-border);
}

.br-prose__media-mark > .br-prose__media-mark-label {
  font-size: var(--br-body-sm-size);
  line-height: var(--br-body-sm-lh);
  font-weight: var(--br-weight-semibold);
  color: var(--br-text-muted);
}

.br-prose__media-mark > img {
  display: block;
  inline-size: auto;
  max-inline-size: 140px;
  block-size: auto;
  margin-block: 0;
}

@media (min-width: 992px) {
  .br-prose__media {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--br-flow-lg);
  }
  /* The mirrored band. Source order is image-then-text on both, so a phone
     and a screen reader always meet them in the same sequence. */
  .br-prose__media[data-side="end"] > .br-prose__media-figure { order: 2; }
}

/* ==========================================================================
   18. TESTIMONIAL CARDS  (S21)   — 1 page, 3 quotes

   The three reviews his About page runs in a carousel, set all at once —
   three cards that are all visible beat three where two are behind an arrow.

   The home page's own testimonial component is a 2x2 of gold and ink cards
   against a display heading; that is a hero block and this is a section
   inside a reading page, so these take the quieter form — white card,
   hairline ring, the radius the value cards already use — and the section
   head above them is the one every other wide block on the page gets.
   ========================================================================== */

.br-prose__quotes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--br-space-6);
  margin-block: var(--br-flow-lg);
  padding-inline-start: 0;
  list-style: none;
}

.br-prose__quotes > .br-prose__quote { margin: 0; padding: 0; list-style: none; }

.br-prose__quote > .br-prose__quote-card {
  display: flex;
  flex-direction: column;
  gap: var(--br-space-5);
  block-size: 100%;
  margin: 0;
  padding: var(--br-space-6);
  border-radius: var(--br-radius-md);
  box-shadow: var(--br-ring-hairline);
}

.br-prose__quote-card > .br-prose__quote-body { margin: 0; padding: 0; border: 0; }

.br-prose__quote-body > .br-prose__quote-text {
  margin-block: 0;
  font-size: var(--br-body-sm-size);
  line-height: var(--br-body-sm-lh);
  letter-spacing: var(--br-body-sm-ls);
  color: var(--br-text);
  text-wrap: pretty;
}

.br-prose__quote-card > .br-prose__quote-source {
  display: grid;
  gap: 2px;
  margin-block-start: auto;
  padding-block-start: var(--br-space-4);
  border-block-start: 1px solid var(--br-border);
}

.br-prose__quote-source > .br-prose__quote-name {
  font-weight: var(--br-weight-semibold);
  color: var(--br-text-strong);
}

.br-prose__quote-source > .br-prose__quote-role {
  font-size: var(--br-body-sm-size);
  line-height: var(--br-body-sm-lh);
  color: var(--br-text-muted);
}

@media (min-width: 640px) {
  .br-prose__quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .br-prose__quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .br-prose__quotes[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   19. CONTACT SPLIT  (contactSplit)   — 1 page

   THE MEASUREMENT THIS ANSWERS. /contact/ at 1440x900 opened on a 237px grey
   masthead carrying a title and one sentence, then 338px of intro, and the
   form's first field landed at y=788 with the submit button at y=1251 — 351px
   below the fold. The contact details were all on the page and none of them
   were on the first screen: eight <h2>s starting at y=1371 carrying Warren's
   name, both numbers, the email, the street address and the areas served.
   A contact page whose first screen shows no way to make contact.

   His own page puts the details and the form side by side directly under the
   masthead, and that arrangement is the only thing taken from it. The type,
   the gold discipline, the card, the icons and the spacing are the ones the
   rest of this build already uses. There are no yellow tiles.

   DETAILS FIRST IN THE DOM, at every width — left of the form above 992,
   above it below. Nothing here uses grid `order`, so the reading order a
   screen reader and a keyboard get is the reading order the eye gets, and a
   reader who would rather ring than type reaches the number without passing
   six fields.

   THE FOLD IS THE CONSTRAINT and the numbers are tight, so two of the rules
   below are there to buy vertical room and are marked as such: the masthead
   loses 94px of its own padding, and the body's top padding drops from 3u to
   4u/3. Both are keyed off :has(.br-prose__reach) AND held above 992, so
   they exist exactly where the two-column band exists — a phone gets the
   masthead the other eleven pages give it, because on a phone nothing fits
   above the fold anyway and the padding is buying nothing.
   ========================================================================== */

/* THE MASTHEAD SHRINKS, and it keeps both its lines while doing it.

   3u/2u is right for a page whose head is the only thing above the fold. On
   this one the head is competing with a 623px form card for a 780px screen,
   and the 56px it was spending BELOW the standfirst is the seam between it
   and the band anyway — so the band's own top padding pays for that half and
   the masthead pays 1u above / 2u/3 below, which keeps the "more air above
   the title than under the sub-line" asymmetry the full-size band has.
   Measured at 1440: 237px -> 143px, same two lines, same type, same
   --br-bg-band #ededeb.

   :has() takes the specificity of its argument, so this is (0,3,0) against
   page.css's (0,1,0) and needs no !important. A browser without :has() gets
   the full-size masthead and a submit button just below the fold, which is
   the pre-existing behaviour rather than a broken one. */
@media (min-width: 992px) {
  .br-page__masthead:has(+ .br-page__body .br-prose__reach) {
    padding-block: var(--br-flow-sm) var(--br-flow-xs);
  }

  /* And the band opens closer to it. 4u/3 here plus the masthead's own 2u/3
     above it is 2u of white between the standfirst and the eyebrow — the
     interval the prose column already puts above an h2, not a new one. */
  .br-page__body:has(> .br-container > .br-page__prose > .br-prose__reach:first-child) {
    padding-block-start: var(--br-flow-md);
  }
}

/* The band carries the container-width bleed from .br-prose__wide and its own
   block margins: none above (it is the first thing in the column and the body
   padding is the air) and one component interval below. (0,2,0) and later in
   the file than §0's wide rule, which is the same weight. */
.br-prose__reach.br-prose__reach {
  margin-block: 0 var(--br-flow-lg);
}

.br-prose__reach-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--br-flow-sm);
}

/* TWO COLUMNS FROM 992, which is where --br-prose-bleed first has room to
   pull the band out to the container. Below it the band is 680px wide and two
   columns would give the form 320px, narrower than its own email placeholder
   and narrower than the 480px its two-up rows need.

   1 : 1.15 rather than even. The form is the taller and busier column and it
   holds a two-up row of its own; the details are five short lines. Measured
   at 1440: details 528, form 607 of a 1192 band. At 1024: 355 / 408. */
@media (min-width: 992px) {
  .br-prose__reach-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    column-gap: var(--br-flow-lg);
    align-items: start;
  }
}

.br-prose__reach-aside > .br-eyebrow { margin-block: 0 var(--br-space-2); }

/* (0,2,0) beats page.css's `.br-page__prose :is(h1, h2)` at (0,1,1), which
   would otherwise put 2u of margin above the first line of the column. Size,
   family and colour still come from there — only the interval is restated. */
.br-prose__reach-aside > .br-prose__reach-title { margin-block: 0 var(--br-space-4); }
.br-prose__reach-aside > .br-prose__reach-lead { margin-block: 0 var(--br-flow-sm); }

/* 16, not 20. Measured at 1440: the areas-served line wraps to two at 528px
   of column, which puts the row list 26px taller than the arithmetic wanted
   and pushed the social marks 7px below the fold. Four gaps at 16 buy that
   back with room over, and the label/value pairing already groups each row
   without needing air to do it. */
.br-prose__reach-list.br-prose__reach-list {
  display: grid;
  gap: var(--br-space-4);
  margin: 0;
  padding-inline-start: 0;
  list-style: none;
}

/* A fixed glyph column rather than a flex gap: the values wrap (the areas
   served run to two lines under about 470px of column) and a wrapped second
   line has to sit under the first, not under the icon. */
.br-prose__reach-list > .br-prose__reach-item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--br-space-3);
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.br-prose__reach-glyph { display: inline-flex; margin-block-start: 3px; color: var(--br-text-accent); }
.br-prose__reach-glyph .br-prose__glyph--stroke { inline-size: 20px; block-size: 20px; }

.br-prose__reach-body { display: block; }

/* THESE WERE THE HARDEST THING ON THE PAGE TO READ, and the measurement says
   why: 14px at weight 400 in --br-text-muted is 5.30:1 — clears AA, fails AAA —
   sitting directly above its own value at 18px/600 and 17.53:1. A threefold
   contrast step inside a single pair reads as the label fading out rather than
   as hierarchy.

   Corrected by RANK rather than by size: the label takes the same ink as body
   copy and a little weight, while the value keeps the larger size and the
   heavier one. The pair still reads label-then-value, because that distinction
   was never carried by the grey — it is carried by scale, which is untouched. */
.br-prose__reach-label {
  display: block;
  font-size: var(--br-small-size);
  line-height: var(--br-small-lh);
  letter-spacing: var(--br-small-ls);
  color: var(--br-text);
  font-weight: 500;
}

/* font-style is here for the <address> the street line is marked up as —
   the element is the right one for a postal address and its default italic
   is not. */
.br-prose__reach-value {
  display: block;
  margin-block-start: 1px;
  font-size: var(--br-body-size);
  line-height: 1.45;
  font-weight: var(--br-weight-semibold);
  font-style: normal;
  color: var(--br-text-strong);
}

/* Ink, not gold, with a gold underline — the same treatment the S8 contact
   card gives its two links. Gold is for the thing you press, and the thing
   you press on this band is the submit button. */
.br-prose__reach-value a {
  color: inherit;
  text-decoration-color: var(--br-gold);
  text-underline-offset: 4px;
}
.br-prose__reach-value a:hover { color: var(--br-ink-hover); text-decoration-thickness: 2px; }
.br-prose__reach-value a:active { color: var(--br-ink-active); }

.br-prose__reach-sep {
  margin-inline: var(--br-space-2);
  color: var(--br-text-muted);
  font-weight: var(--br-weight-regular);
}

.br-prose__reach-marks.br-prose__reach-marks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--br-space-3) var(--br-space-6);
  margin: var(--br-flow-xs) 0 0;
  padding-inline-start: 0;
  list-style: none;
}
.br-prose__reach-marks > li { margin: 0; padding: 0; list-style: none; }

/* (0,2,0), because page.css's `.br-page__prose a` is (0,1,1) and would
   otherwise give these an ink underline while the rows above them wear a
   gold one — one component, two link treatments. Same ink text, same gold
   rule, same offset as .br-prose__reach-value a. */
.br-prose__reach-marks .br-prose__reach-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--br-space-2);
  font-size: var(--br-body-sm-size);
  font-weight: var(--br-weight-semibold);
  color: var(--br-text-strong);
  text-decoration-color: var(--br-gold);
  text-underline-offset: 4px;
}
.br-prose__reach-marks .br-prose__reach-mark:hover {
  color: var(--br-ink-hover);
  text-decoration-thickness: 2px;
}
.br-prose__reach-marks .br-prose__reach-mark:active { color: var(--br-ink-active); }
.br-prose__reach-mark .br-prose__glyph--stroke {
  inline-size: 18px;
  block-size: 18px;
  color: var(--br-text-accent);
}

/* ==========================================================================
   20. STATES THE SYSTEM ALREADY PROMISES
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .br-prose__card-link,
  .br-prose__place-link,
  .br-prose__card-arrow,
  .br-prose__faq-q::after { transition: none; }
  .br-prose__card-link:hover,
  .br-prose__place-link:hover { transform: none; }
}

@media (forced-colors: active) {
  .br-prose__card-link,
  .br-prose__place-link,
  .br-prose__faq,
  .br-prose__map,
  .br-prose__value { border: 1px solid CanvasText; }
  .br-prose__checklist > .br-prose__check + .br-prose__check,
  .br-prose__faq > .br-prose__faq-item + .br-prose__faq-item { border-block-start-color: CanvasText; }
  .br-prose__step-label { border: 1px solid CanvasText; }
}

@media print {
  .br-prose__wide { margin-inline: 0; }
  .br-prose__map,
  .br-prose__card-arrow { display: none; }
  .br-prose__steps,
  .br-prose__cta-band { background: none; color: CanvasText; border: 1px solid CanvasText; }
  .br-prose__faq .br-prose__faq-a { display: block !important; }
}

/* ==========================================================================
   OFFICES — each map beside the office it belongs to.

   The page held two 480px maps stacked with nothing to say which was which,
   and their addresses, hours and Maps links several hundred pixels below under
   a separate heading. A reader had to carry the first map in their head while
   scrolling to find out where it was.

   His answer is a tab widget — one map, switched by a button. Reasonable when
   vertical space is scarce, wrong here: we have width to spend, and a tab puts
   half the answer behind a click.
   ========================================================================== */
.br-offices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--br-flow-md);
  margin-block: var(--br-flow-md);
}

.br-offices__card {
  display: flex;
  flex-direction: column;
  gap: var(--br-flow-2xs);
  min-inline-size: 0;                 /* a grid child defaults to min-content
                                         and the map would push the column */
}

.br-offices__city {
  margin: 0;
  font-size: var(--br-h3-fs);
  line-height: var(--br-h3-lh);
  font-weight: var(--br-h3-fw);
  letter-spacing: var(--br-h3-ls);
}

.br-offices__address { margin: 0; color: var(--br-text); }

/* Half the width means half the height is enough — two side by side now cost
   less than one did stacked. */
.br-offices__map {
  overflow: hidden;
  border-radius: var(--br-radius-lg);
  box-shadow: var(--br-ring-hairline);
  aspect-ratio: 4 / 3;
  max-block-size: 320px;
  margin-block-start: var(--br-flow-2xs);
}
.br-offices__map > iframe {
  inline-size: 100%;
  block-size: 100%;
  display: block;
  border: 0;
  margin: 0;
}

.br-offices__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--br-flow-3xs) var(--br-flow-sm);
}

.br-offices__hours {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--br-small-size);
  line-height: var(--br-small-lh);
  color: var(--br-text);
}

.br-offices__link { font-size: var(--br-small-size); }

/* The heading belongs to the grid beneath it, so it shares its left edge.
   Left in the reading column it sat ~255px inboard of the cards it introduces,
   which reads as two unrelated things rather than a section and its contents. */
.br-offices__head {
  margin-inline: calc(var(--br-prose-bleed, 0px) * -1);
}