/* ==========================================================================
   TEMPLATE — Standalone page   (rebuild/templates/page.html)
   --------------------------------------------------------------------------
   Drives twelve pages: about, contact, faq, financial-services-guide-2,
   get-started, blog, home, the four city landing pages (Brisbane / Melbourne
   / Perth / Sydney) and plumber-insurance-australia.

   It is the most varied group on the site, so this is a PROSE CONTAINER, not
   a composition. Nothing here assumes an order, a count or a shape. Every
   rule is keyed off an element, because the body HTML is generated from a
   WordPress export and cannot carry classes.

   WHAT THE CONTENT ACTUALLY CONTAINS
   --------------------------------------------------------------------------
   Counted across all twelve files, not assumed from the brief. The brief's
   vocabulary (p, h2, h3, ul/li, strong, a, figure/img, blockquote,
   details/summary) is a subset. The real set is:

     p 296   h2 155   a 114   h3 58   li 50   svg 45   details 35   summary 35
     img 21  ul 18    figure 10  br 22  strong 10  article 20  iframe 5
     h1 5    button 2  div 1    object 1

   The five that are NOT in the brief are the five that break a template that
   only styles paragraphs, so each one is handled below and named in its own
   comment: <iframe> (Google Maps, five of them), <object> (the Financial
   Services Guide PDF — that page is an embed, not the dense legal text the
   brief describes), <button role="tab"> (dead Elementor tab controls),
   <article> and <div> (transparent wrappers), inline <svg> with no width or
   height (FontAwesome glyphs that render at 300x150 if left alone), and <h1>
   inside the body on five pages.

   And one thing that is not an element at all: BARE TEXT NODES. The Elementor
   pages flattened whole sections to unwrapped text sitting directly in the
   body HTML — "Our Location", "Gold Coast Office - 2/36 Eighth Avenue", four
   entire FAQ answers on the contact page. The prose container therefore sets
   font, colour and measure on ITSELF rather than on `p`, so text that never
   got a paragraph still reads as body copy. It cannot get the paragraph's
   margins; nothing in CSS can give a text node a margin. Flagged for the
   generator, not paperable over here.

   WHAT IS SHARED WITH THE HOME PAGE
   --------------------------------------------------------------------------
   Everything visual. There is not one hex, one radius, one duration and one
   font size in this file that is not a token, and no token is new — including
   --br-measure-prose, which the listing template added on the same day and
   which this file reuses rather than inventing a second running-text width.
   The type ramp is the site's own: the page title is .br-display-md (58.5px
   at 1440, the "Built for operational industries" scale), body h2 is
   --br-prose-h2-* (34px at 1440), h3 is 26px, body copy is --br-body-*.

   BODY h2 IS NOT THE SECTION RUNG, and that is a correction, not a choice.
   The first draft set it at --br-h2-size (45.457px), which is the size the
   home page puts on "Built for operational industries" — a label for a
   1240px band with nothing else at that size anywhere near it. Inside a
   680px reading column it is a different job and it fails at it: the
   Melbourne page carries 23 h2s, and at 45px against 18px copy a five-word
   heading takes three lines and the page reads as a stack of shouted
   posters rather than as prose. --br-prose-h2-* is the rung the system
   already keeps for exactly this — see the long note at the foot of
   tokens.css, which names this template as one of its intended consumers.

   Gold appears in exactly three places on a page built from this template:
   the eyebrow-coloured inline icons, the standalone-link pill on hover, and
   the "Call 0422 131 401" button in the shared contact block. All three are
   things you can act on. None is decoration. That is the home page's
   discipline, held.

   WHERE THIS FILE DEFERS TO ITS SIBLINGS
   --------------------------------------------------------------------------
   Four components here were drawn twice on this site before they were drawn
   once. article.css, listing.css, service.css and industry.css are the other
   long-prose templates in this rebuild and they set the same elements; where
   this file disagreed with all four it was this file that was wrong, and it
   has been brought into line rather than the other way round:

     · the accordion marker — was a 48px hairline circle holding a plus, on
       35 instances. Now the .br-select chevron every other template uses.
     · the list marker — was an 8px gold disc at a 32px indent. Now the
       native ::marker in --br-ink-olive, at article.css's two indents.
     · the blockquote — was a gold left rule. Now the --br-bg-wash card.
     · the reading column — was flush left. Now centred, like every other
       measure-capped block on the site including the contact card that sits
       directly beneath it.
   ========================================================================== */

/* ==========================================================================
   1. MASTHEAD
   One quiet neutral band holding the h1 and the standfirst.

   --br-bg-band (#ededeb) is the same surface the services section and the
   footer are painted in, so a page reads band → white → band. It is here
   because an interior page has no hero photograph — every `hero` field in
   content/pages/page/ is empty — and a title starting flush against a white
   page under a white sticky header has no head at all.
   ========================================================================== */

.br-page__masthead {
  background: var(--br-bg-band);
  /* 3u top, 2u bottom. The asymmetry is deliberate and it is the home page's
     own: the hero opens with more air above the headline than it leaves
     under the sub-line, so the title sits on the band rather than in the
     middle of it. */
  padding-block: var(--br-section-y-lg) var(--br-section-y);
}

/* The masthead's own column, held to the reading measure and CENTRED — the
   same cap and the same centre line the prose below it takes, so the title,
   the standfirst, the body copy and the shared contact card all sit on one
   axis and share two edges.

   Before this the inner ran the full 1240px container while the standfirst
   inside it was capped at 680, which put the title's right edge 560px past
   the standfirst's for no reason a reader could see. Capping the inner puts
   the longest of the twelve titles onto two lines at 1440 ("Get Started With
   Broad Risk", "Frequently Asked Questions", "Financial Services Guide",
   "Plumber Insurance Australia"); the other eight stay on one. Two lines of
   display type in a masthead is the home page's own hero, so this costs
   nothing and buys the alignment. */
.br-page__masthead-inner {
  max-width: var(--br-measure-prose);
  margin-inline: auto;
}

.br-page__title {
  margin: 0;
  /* .br-display-md carries family, weight, size, leading and colour. The
     only thing added here is the wrap mode: display type opts OUT of
     text-wrap in base.css because the home page's five display headings are
     art-directed with hand-placed breaks, and a page title is not — it is
     whatever the CMS holds, from "FAQ" to "Get Started With Broad Risk", so
     it wants the balanced rag the h1–h6 rule would otherwise have given it. */
  text-wrap: balance;
}

/* The cap is now carried by .br-page__masthead-inner above and this one is
   redundant at every width. Kept because it is the standfirst's OWN
   requirement rather than a borrowed one: if the masthead ever gains a
   full-width element and the inner's cap has to come off, the lead must not
   silently widen to 1240 with it. Same value, same token, no disagreement. */
.br-page__standfirst {
  margin: var(--br-flow-xs) 0 0;
  max-width: var(--br-measure-prose);
}

/* An empty description must not leave a gap. :empty is exact here — the
   generator writes the string or nothing, never whitespace. */
.br-page__standfirst:empty { display: none; }

/* --------------------------------------------------------------------------
   Hero variant. IN USE by five of the twelve pages since 2026-08-19 — the
   four city pages and /plumber-insurance-australia/ — and the note below,
   which said "unused by all twelve", was written before that. It was one
   content field away from needing it, and this is that field: his own
   location pages open on a full-bleed photograph of the city and ours opened
   on a 293px grey band. The founder's words were "big beautiful images".

   The generator emits `data-hero style="--br-page-hero: url('…')"`. Nothing
   here fires without that attribute, so the plain band above is not at risk.

   --br-photo-overlay is the hero's own measured overlay, so the photograph
   sits under exactly the same 84%/78% ink wash the signed-off home page uses
   — not a second, nearly-identical scrim.
   -------------------------------------------------------------------------- */
.br-page__masthead[data-hero] {
  background-color: var(--br-ink);
  background-image: var(--br-photo-overlay), var(--br-page-hero);
  background-size: cover;
  background-position: center;
  /* .br-on-photo hands the gold press ramp back to its light-surface values
     over a photograph — see the long note in tokens.css. Applied by attribute
     rather than by class so the generator has one thing to emit, not two.

     THE WASH IS THE SHARED ONE NOW. What stood here was a local copy of the
     warm-ink overlay — rgba(31,25,2,.84/.78) — written when that was also what
     the home page used. The home page was corrected to pure black on
     2026-08-19 (the founder: "there's just a semi opaque black layer on top of
     it, I think you have added some other colour layer"); this copy was not,
     so the four city mastheads went on serving a sepia cast under a comment
     promising they matched. Pointing at --br-photo-wash is what makes the
     promise true. */
  --br-photo-overlay: var(--br-photo-wash);
  --br-text: var(--br-on-dark);
  --br-text-heading: var(--br-white);
  --br-focus: var(--br-gold);
  color: var(--br-text);

  /* A PHOTOGRAPH NEEDS ROOM TO BE ONE. The band above is sized for type on a
     tint — 3u/2u, which rendered 293px tall on the Brisbane page. At that
     height a cover-positioned city skyline is a texture behind a title, not a
     picture of the city, which is the thing the page is about.

     6u/5u, and both numbers are off the existing ramp rather than picked:
     --br-flow-xl is 3u, so this is the band's own 3u/2u doubled, and it lands
     the masthead at 519px @1440 against the home hero's 724px and his own
     743px. Deliberately short of both — the home page's hero carries a
     headline, a standfirst, two buttons and a proof strip, and this one
     carries a title and one line, so matching its height would be matching
     its air rather than its presence. */
  padding-block: calc(var(--br-flow-xl) * 2) calc(var(--br-flow-lg) * 2.5);
}

/* ==========================================================================
   2. BODY
   ========================================================================== */

.br-page__body {
  background: var(--br-bg);
  padding-block: var(--br-section-y-lg);
}

/* AN EMPTY BODY MUST NOT PAINT A BAND OF NOTHING.

   content/pages/page/blog.json is 370 bytes and its `body` is the empty
   string — /blog/ is a listing rendered by another template and this page is
   only its title and standfirst. Without this rule the prose div collapses to
   0px but .br-page__body still paints --br-section-y-lg above and below it,
   which is 169px of white between the standfirst and the contact card at
   1440 and 96px at 390. It reads as a page that failed to load.

   The listing template guards exactly this at listing.css:497; this file
   already guarded the standfirst at :97 and missed the prose.

   Two rules, because they answer two different questions: :empty removes the
   column, and :has() removes the padding that was reserving space for it.
   :empty is exact — the generator writes `<div class="br-page__prose">` and
   the body string with no whitespace between them, so an empty body leaves an
   element with no child nodes at all. */
.br-page__prose:empty { display: none; }

.br-page__body:not(:has(.br-page__prose:not(:empty))) { padding-block: 0; }

/* --------------------------------------------------------------------------
   THE PROSE CONTAINER.

   Type and colour are set HERE, not on `p`, so the unwrapped text the
   Elementor export left behind still reads as body copy. See the note at the
   top of this file.

   The measure is --br-measure-prose (680px at root 16), CENTRED in the
   container.

   The first draft left it flush left, on the reasoning that every block on
   the home page starts at the container's left edge. That reasoning was
   wrong, because every block on the home page also FILLS the container — a
   680px column inside a 1240px container is not a home-page block, it is a
   reading measure, and the site already has an answer for those. All three
   sibling long-prose templates centre theirs (article.css:120, industry.css
   :305, service.css:227), and so does the "Speak directly with your broker"
   card spliced in directly beneath this one: measured at 1440 it occupies
   x 349..1090, dead centre of the 100..1340 container.

   Left-aligned, the prose sat at x 100..780 with 560px of empty white down
   its right for the full 10,976px of the Melbourne page, and shared no edge
   with the card below it — a visible seam between two blocks of the same
   page. Centred, both sit on x 720 and the seam is gone.
   -------------------------------------------------------------------------- */
.br-page__prose {
  max-width: var(--br-measure-prose);
  margin-inline: auto;
  font-size: var(--br-body-size);
  line-height: var(--br-body-lh);
  letter-spacing: var(--br-body-ls);
  color: var(--br-text);
  /* The body HTML is not ours and it is not curated. One pasted URL, one
     un-spaced product name, and an unbreakable token would run past the
     measure. base.css guards p and h1–h6; this guards everything else,
     including the bare text nodes that are in no element at all. */
  overflow-wrap: break-word;
}

/* Whatever arrives first must not push the column down past the padding
   already set on .br-page__body, and whatever arrives last must not add to
   the padding below it. Stated for every block the content can open or close
   with rather than for `*`, because `* { margin: 0 }` on a first child would
   also hit the first paragraph INSIDE it. */
.br-page__prose > :first-child { margin-block-start: 0; }
.br-page__prose > :last-child { margin-block-end: 0; }

/* ==========================================================================
   3. PROSE — BLOCK FLOW

   Rhythm comes from the --br-flow-* scale, which is the same fluid unit the
   home page's section spacing is built on, so the vertical beat of an
   interior page is the beat of the home page divided down rather than a
   second system.

     h2   2u   above   (56.31 @1440)
     h3   4u/3 above   (37.54)
     h4   1u   above   (28.15)
     p    2u/3 below   (18.77)

   The type ladder those intervals separate, at 1440:

     h2  34.000   --br-prose-h2-size   the shared long-form rung
     h3  24.629   --br-h3-size         the card-title scale
     h4  20.000   --br-h4-size         the lead scale
     p   18.000   --br-body-size

   Ratios 1.38 / 1.23 / 1.11 — tightening as it descends, which is what keeps
   three heading levels legible inside one 680px column.

   Adjacent margins collapse, so a paragraph followed by an h2 gets 2u, not
   2u + 2u/3. That is the intent.
   ========================================================================== */

.br-page__prose p {
  margin-block: 0 var(--br-flow-xs);
}

/* Headings inside the body start at h2 — the page's one h1 is the title.
   Five of the twelve pages ship an <h1> in the body anyway (a WordPress
   artefact), and the generator is asked to demote it. This rule means a page
   where that step is skipped still LOOKS right; the document outline is
   still wrong until the generator does its job.

   --br-prose-h2-*, not --br-h2-*. The section rung (45.457px at 1440) labels
   a full-width band on the home page and there is never a second one near it;
   this template stacks 23 h2s in one 680px column on the Melbourne page
   alone. tokens.css keeps a rung between the section heading and the card
   title for precisely this, and its comment names the page template as an
   intended consumer alongside the industry template that added it. Using the
   shared rung rather than restating a fourth near-identical step is the whole
   point of the token existing.

   The intervals are unchanged: --br-flow-lg above, --br-flow-xs below, which
   is what article.css sets on its own body h2. Only the size moved. */
.br-page__prose :is(h1, h2) {
  font-size: var(--br-prose-h2-size);
  line-height: var(--br-prose-h2-lh);
  letter-spacing: var(--br-prose-h2-ls);
  margin-block: var(--br-flow-lg) var(--br-flow-xs);
}

.br-page__prose h3 {
  margin-block: var(--br-flow-md) var(--br-flow-3xs);
}

.br-page__prose :is(h4, h5, h6) {
  margin-block: var(--br-flow-sm) var(--br-flow-3xs);
}

/* A heading immediately after another heading is a PAIR, not two sections.
   The export makes this common and it is not a defect in every case: the
   contact page sets "Managing Director: Warren Reid" and then his two phone
   numbers as three consecutive h2s, and the About page sets a card title and
   its subtitle the same way. At the section gap they read as three unrelated
   sections with a hole between each; closed up they read as one block.

   It does not RESCUE those pages — a phone number marked up as a top-level
   heading is still wrong in the document outline, and only the content can
   fix that. It stops the template from making it worse. */
.br-page__prose :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) {
  margin-block-start: var(--br-flow-xs);
}

/* Transparent wrappers. The export leaves <article> around single paragraphs
   (a ChatGPT-export artefact — they still carry data-turn-id) and one <div>
   around the FSG embed. Neither means anything; neither may add a beat. */
.br-page__prose :is(article, div, section) {
  margin: 0;
}

.br-page__prose hr {
  margin-block: var(--br-flow-lg);
}

/* ==========================================================================
   4. PROSE — INLINE
   ========================================================================== */

/* <em> takes nothing but the browser's own italic, and it is stated rather
   than left implicit for the same reason article.css:322, service.css:438 and
   industry.css:393 all state it: this file's claim is that every element the
   generated body can contain is styled BY SELECTOR, and an element with no
   rule is indistinguishable from an element somebody forgot. Inter's true
   italic is loaded, so the default is also the right answer — but the next
   person to read this file should be able to see that it was decided.

   Zero instances across today's twelve bodies. This template is explicitly
   written for markup it does not author, so that is not a reason to omit it. */
.br-page__prose :is(em, i) { font-style: italic; }

/* Mirrors .br-link in base.css. Restated rather than referenced because the
   body HTML is generated and cannot carry a class — if the generator learns
   to add class="br-link" this block becomes redundant, and until it does,
   base.css section 6 is the source of truth for these five values. */
.br-page__prose a {
  color: var(--br-text-strong);
  font-weight: var(--br-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 0.3em;
  text-decoration-thickness: 1px;
  border-radius: var(--br-radius-xs);
  transition: color var(--br-dur) var(--br-ease),
              text-decoration-thickness var(--br-dur) var(--br-ease);
}

.br-page__prose a:hover { color: var(--br-ink-hover); text-decoration-thickness: 2px; }
.br-page__prose a:active { color: var(--br-ink-active); }

/* A link that IS a heading — the contact page sets the phone number and the
   email address as <h2><a>, and the city pages set every industry card title
   as <h3><a>. At 45px a 0.3em offset on a 1px rule reads as a stray line
   halfway down the page, so the underline is pulled in tight and left there:
   these are the most tappable things on the contact page and removing the
   underline entirely would hide that. */
.br-page__prose :is(h1, h2, h3, h4, h5, h6) a {
  text-underline-offset: 0.12em;
  text-decoration-thickness: 1px;
}
.br-page__prose :is(h1, h2, h3, h4, h5, h6) a:hover { text-decoration-thickness: 2px; }

/* --------------------------------------------------------------------------
   A STANDALONE LINK IS A BUTTON.

   Twenty-two of the 114 links in this content are calls to action sitting on
   their own at the top level of the body — "Get Started Today", "Talk to a
   Broker", "Email Policy Documents", "Open Gold Coast in Google Maps". They
   were buttons in Elementor and the export dropped the class. Rendered as
   inline underlined text they are the one place these pages would look
   markedly less finished than the home page.

   Top level is the whole test, and it is a reliable one: an inline link is
   always inside a p, li, h2 or span, and a CTA never is.

   The `> div > a` half of the selector is for exactly one page. The Financial
   Services Guide is a WordPress file block: a <div> holding the PDF <object>
   and then two links to the same file, "Financial Services Guide" and
   "Download". They are the only way to READ that page on any browser that
   will not render an inline PDF — iOS Safari will not — and as two 18px
   underlined words under an empty grey box they do not look like the page's
   only working exit. There is exactly one <div> in all twelve pages of this
   type and this is it; if a later page wraps running prose in a <div>, its
   inline links would wrongly become pills, so re-check this selector rather
   than assuming it still holds.

   Geometry and states are .br-btn + .br-btn--outline restated — same reason
   as the inline link above, same source of truth (base.css section 5). The
   OUTLINE variant, not the gold primary: a page can carry four of these and
   four gold pills in a column would make gold the page's background noise
   rather than its accent. Outline is what the home page's card CTAs wear,
   and it fills with gold on hover, which is where the accent belongs.
   -------------------------------------------------------------------------- */
:is(.br-page__prose, .br-page__prose > div) > a {
  --_btn-bg: transparent;
  --_btn-border: var(--br-border-strong);
  --_btn-color: var(--br-text-strong);

  /* flex, not inline-flex, which .br-btn uses. The difference matters here
     and it does not on the home page: this content is riddled with bare text
     nodes, and an INLINE pill joins the run of text next to it — on the
     Melbourne page the word "Businesses", left over from a flattened
     strapline, ends up sitting on the same line as the "Talk to a Broker"
     pill, touching it. A block-level pill cannot be caught in someone else's
     line box. `width: fit-content` keeps it the size of its label rather
     than the width of the column. Two consecutive CTAs stack instead of
     sitting side by side; that is the price, it is the same stack they take
     on a phone anyway, and it is never wrong. */
  display: flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  gap: var(--br-space-2);
  min-height: var(--br-btn-h);
  padding: 11px var(--br-btn-px);
  margin-block: var(--br-flow-xs);

  font-family: var(--br-font-body);
  font-size: var(--br-ui-size);
  line-height: var(--br-ui-lh);
  font-weight: var(--br-ui-weight);
  letter-spacing: var(--br-ui-ls);
  text-align: center;
  text-decoration: none;

  background: var(--_btn-bg);
  color: var(--_btn-color);
  border: 1px solid var(--_btn-border);
  border-radius: var(--br-radius-pill);
  transition: background-color var(--br-dur) var(--br-ease),
              border-color var(--br-dur) var(--br-ease),
              color var(--br-dur) var(--br-ease);
}

:is(.br-page__prose, .br-page__prose > div) > a:hover {
  --_btn-bg: var(--br-gold-hover);
  --_btn-border: var(--br-gold-hover);
  --_btn-color: var(--br-ink);
  text-decoration: none;
}
:is(.br-page__prose, .br-page__prose > div) > a:active { --_btn-bg: var(--br-gold-active); --_btn-border: var(--br-gold-active); }

:is(.br-page__prose, .br-page__prose > div) > a:focus-visible {
  outline: 2px solid var(--br-focus);
  outline-offset: 2px;
}

/* NOT white-space: nowrap, which .br-btn sets. A CTA on the home page is a
   string the design team chose; these are strings WordPress holds, and "Get a
   Plumbing Insurance Quote" is 32 characters — nowrap would push it past a
   390px viewport and take the document's scroll width with it. */
:is(.br-page__prose, .br-page__prose > div) > a {
  white-space: normal;
  max-width: 100%;
}

/* NO min-width, which .br-btn--primary and --dark both set to 200px. That
   floor is right for a designed CTA row and wrong here: the content holds
   CTAs as short as "Download", and a 200px pill holding one word reads as a
   placeholder. `width: fit-content` above sizes each pill to its label.

   THE ICON-ONLY LINKS ARE GONE, AND THEY WERE NOT A CSS PROBLEM.

   Each city page shipped four top-level links whose entire content was one
   aria-hidden <svg> — an Elementor industry tile whose label the export
   dropped. Rendered through the rule above they became 64-70px x 48px
   outline pills holding a single 20px glyph, sitting directly under a large
   underlined h3 link to the same destination: the least deliberate-looking
   thing on this page type, and on half of them the link had no accessible
   name at all, so a screen reader announced "link".

   The generator now drops them, because every one is a duplicate — measured,
   not assumed: each has between one and three sibling links with real text
   pointing at the same href, so no destination is lost. See the placeholder
   contract in templates/page.html.

   THERE IS DELIBERATELY NO CSS BACKSTOP. The obvious one —
   `> a:not(:has(:not(svg))) { display: none }` — was tested and it hides
   EVERY standalone link, including "Talk to a Broker": :has() sees elements
   and a text node is not one, so a text-only <a> also has no non-svg child
   element and matches. There is no selector that distinguishes "contains
   only an icon" from "contains only text", so this belongs where it can be
   done correctly, in the generator, and nowhere else. */

/* ==========================================================================
   5. PROSE — LISTS

   The native ::marker in --br-ink-olive, which is article.css §7 exactly —
   same ink, same two indents, same two intervals.

   The first draft drew an 8px --br-gold disc at a --br-space-7 (32px) indent
   instead. Rendered beside an article page it was roughly three times the
   visual mass and a different hue, on an element the site has 442 of, and it
   spent the brand colour on a mark that cannot be acted on. article.css had
   already argued this out for its own 392 items and reached the opposite
   answer: "not gold: 392 gold dots is decoration." That argument does not
   change because a different template is asking. One system, one marker.

   --br-ink-olive (#4a3c0a) is the warm ink the home page's difference cards
   already use on their filled proof-point badge, so the marker is not a new
   colour either — it is the darkest thing the system already puts next to
   running text, which is what a marker beside a semibold label has to be.
   ========================================================================== */

/* Two indents, not one, and article.css:474-478 has the reasoning: an outside
   marker is laid out to the LEFT of the item, so the padding on the list has
   to hold it. A bullet needs about a third of what a two-digit numeral does,
   and giving both the wider value pushes every bullet list a visible step
   further from the column edge than the paragraphs around it for no reason.

   The trailing margin is --br-flow-xs, not article's --br-flow-sm, and that
   is the same rule rather than a different one: both files set the list's
   bottom margin to their own paragraph gap, so a list separates from the next
   paragraph by exactly as much as two paragraphs separate from each other.
   This template's paragraph gap is 2u/3; article's is 1u. */
.br-page__prose ul {
  margin-block: 0 var(--br-flow-xs);
  padding-inline-start: var(--br-flow-xs);
}

.br-page__prose ol {
  margin-block: 0 var(--br-flow-xs);
  padding-inline-start: var(--br-flow-sm);
}

.br-page__prose li {
  /* The gap between two items has to be smaller than the gap between two
     paragraphs, or the list stops reading as one thing: u/2 against 2u/3. */
  margin-block-end: var(--br-flow-2xs);
  /* And a third of a unit between the marker and the label it introduces —
     without it a bullet sits hard against a semibold run and the two read as
     one mark. */
  padding-inline-start: var(--br-flow-3xs);
}

.br-page__prose li:last-child { margin-block-end: 0; }

.br-page__prose li::marker {
  color: var(--br-ink-olive);
}

/* A numbered step is information, so the numeral is weighted to be read
   rather than skimmed past. Colour comes from the rule above. */
.br-page__prose ol > li::marker {
  font-weight: var(--br-weight-semibold);
}

/* The city pages ship list items that already carry an icon (a FontAwesome
   circle or a handset) as their first child. One mark per item, so the
   marker is suppressed — but the INDENT stays.

   That is the correction. The first draft zeroed the padding as well, which
   pulled those four items flush against the column edge while every other
   item on the same page sat one indent in, and produced a third list look on
   a page that should have had one. list-style: none removes the mark and
   leaves the geometry alone, so an icon item now starts on exactly the same
   vertical as a bulleted one. */
.br-page__prose li:has(> svg),
.br-page__prose li:has(> a > svg) { list-style: none; }

/* Nested lists keep the rhythm but lose the trailing gap. */
.br-page__prose li :is(ul, ol) { margin-block: var(--br-flow-3xs) 0; }

/* A paragraph inside a list item is still a paragraph, but it must not add a
   beat at the end of its own item. */
.br-page__prose li > p:last-child { margin-block-end: 0; }

/* ==========================================================================
   6. PROSE — INLINE SVG
   Forty-five FontAwesome glyphs arrive with a viewBox and NO width or height.
   Left alone, a replaced element with no intrinsic size and no CSS size falls
   back to 300x150 — so the contact page's phone icon would render as a black
   rectangle wider than the column. This is the single largest visual failure
   in the extracted content and it is invisible until you render it.

   Sized off the text, not off a fixed pixel value, so the glyph tracks the
   line it sits on at any root font size. Coloured --br-text-accent (#8a6d00,
   the eyebrow gold that clears AA on white) rather than brand gold: these sit
   at 16px against body copy, and #f1c305 at that size on white is a smear.
   ========================================================================== */

.br-page__prose svg {
  display: inline-block;
  block-size: 1em;
  inline-size: auto;
  max-inline-size: 1.6em;
  vertical-align: -0.125em;
  fill: currentColor;
  color: var(--br-text-accent);
}

/* Inside a link the glyph belongs to the link, not to the page's accent — it
   must move with the label on hover or the two halves of one control change
   colour at different times. */
.br-page__prose a svg { color: inherit; }

/* A list item whose only child is an icon-link (the city pages' industry
   tiles) has the icon standing alone; give it the badge scale rather than the
   text scale so it does not read as a typo. */
.br-page__prose li > a > svg { block-size: 1.25em; }

/* ==========================================================================
   7. PROSE — MEDIA
   ========================================================================== */

.br-page__prose figure {
  margin-block: var(--br-flow-md);
}

.br-page__prose figure a {
  display: block;
  text-decoration: none;
  border-radius: var(--br-radius-lg);
}

/* No forced width. A 2560px photograph fills the measure; a 64px icon (the
   plumber page sets six of them as bare <img>) stays 64px. Both are correct,
   and a rule that said `width: 100%` would blow the icons up to 680px.

   max-block-size caps the portraits: the About page's founder shot is
   1707x2560, which at full measure is 1020px tall — one image taller than a
   laptop viewport. A replaced element with auto width, auto height and both
   maxima set shrinks on its longest axis and keeps its ratio.

   The radius is the card radius. On the transparent PNGs and SVGs in this
   content it is invisible, which is the right outcome — it costs nothing
   there and it matches the home page wherever there is a real photograph. */
.br-page__prose img {
  max-inline-size: 100%;
  max-block-size: 80vh;
  inline-size: auto;
  block-size: auto;
  border-radius: var(--br-radius-lg);
}

.br-page__prose figcaption {
  margin-block-start: var(--br-space-3);
  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);
}

/* --------------------------------------------------------------------------
   <iframe> — five Google Maps embeds across contact and the four city pages.
   They arrive as width="600" height="450", which on a 390px phone is 210px of
   horizontal scroll on the whole document.

   aspect-ratio rather than a height, so the frame is the same shape at every
   width. 3:2 rather than the source's 4:3 — a map is a landscape, and 4:3 at
   full measure is 510px of it.
   -------------------------------------------------------------------------- */
.br-page__prose iframe {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 3 / 2;
  margin-block: var(--br-flow-md);
  border: 0;
  border-radius: var(--br-radius-lg);
  /* A third-party iframe paints its own white; without this the corners are
     square whatever the radius says. */
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   <object> — one instance, the Financial Services Guide PDF.

   Worth saying plainly, because the brief describes this page as "dense legal
   text": it is not. financial-services-guide-2.json is 413 bytes and holds a
   PDF embed plus two links to the same file. There is no prose on it to set.

   An <object> has no intrinsic size, so it needs a real height or it collapses
   to nothing. A page's worth of A4 at 680px wide is ~960px; capped against the
   viewport so it never exceeds the screen it is being read on.
   -------------------------------------------------------------------------- */
.br-page__prose object {
  display: block;
  inline-size: 100%;
  block-size: min(80vh, 960px);
  min-block-size: 420px;
  margin-block: var(--br-flow-md);
  border: 1px solid var(--br-border);
  border-radius: var(--br-radius-lg);
  background: var(--br-bg-band);
}

/* The FSG's two links are the page's only working exit on a browser that
   will not render an inline PDF, so they take the standalone-link pill — see
   the `> div > a` half of that selector in section 4. Stacked, tightened:
   they are one pair of actions on the same file, not two sections. */
:is(.br-page__prose, .br-page__prose > div) > a + a { margin-block-start: 0; }

/* ==========================================================================
   8. PROSE — QUOTATION

   Not present in this template's twelve pages; present elsewhere on the site
   and named in the brief's vocabulary, so it is styled rather than left to
   the browser.

   article.css §6 exactly. The first draft drew a 3px gold left rule on a
   transparent ground instead — a defensible treatment on its own, and the
   wrong one here, because article.css had already committed the site to the
   --br-bg-wash card and BOTH rules were in the repo waiting for the day a
   content page gained a quotation. Two treatments that never render at the
   same time are not a small problem; they are a problem that is invisible
   until it is shipped.

   The wash card is also the better of the two on its own merits, and
   article.css:424-436 has that argument: a blockquote in running copy is a
   change of voice, not a change of section, and the cream tile is the
   quietest way the system already says "this is set apart". --br-ink-on-gold
   (#3a341c) is the warm ink the system uses on its warm surfaces, measured
   11.62:1 on the wash — darker than the body copy it interrupts, which is
   the right direction for a passage the design is raising its voice on.
   ========================================================================== */

.br-page__prose blockquote {
  margin-block: var(--br-flow-lg);
  padding: var(--br-card-py) var(--br-card-px);
  background: var(--br-bg-wash);
  border-radius: var(--br-radius-lg);
  color: var(--br-ink-on-gold);
}

.br-page__prose blockquote p {
  font-size: var(--br-body-lg-size);
  line-height: var(--br-body-lg-lh);
  letter-spacing: var(--br-body-lg-ls);
  font-weight: var(--br-weight-semibold);
  margin-block-end: var(--br-flow-xs);
}

/* strong inside a quotation would take --br-text-strong (#1f1902) and read
   colder than the quote around it. */
.br-page__prose blockquote :is(strong, b) { color: inherit; }

.br-page__prose blockquote > :last-child { margin-block-end: 0; }

/* ==========================================================================
   9. PROSE — ACCORDION  <details> / <summary>
   Thirty-five of them: eight on the FAQ page, eight on Get started, four on
   Contact, five on each city page. This is where a prose template falls over,
   so it gets the most care.

   Shape: hairline-separated rows, the question at the --br-h4 scale in
   heading ink, and THE CHEVRON on the right, rotating 180 degrees on open.

   THE CHEVRON IS THE SELECT CHEVRON — byte-for-byte the data URI base.css
   draws on .br-select, at the same 14px and the same 1.85 stroke, which is
   also what article.css:629, listing.css:698 and service.css:539 draw. Four
   templates, one mark. If that path, weight or size is ever re-measured (see
   the long note above .br-select), change it in all four and re-run
   scripts/_r4-chev.mjs.

   THIS IS A CORRECTION AND IT IS THE LARGEST ONE IN THE FILE. The first
   draft drew a 48px hairline circle holding a plus that collapsed to a
   minus. Taken alone it was good work — .br-icon-circle's exact geometry,
   and the plus-to-minus was a real transition rather than a glyph swap
   instead of a rotation. Taken beside the rest of the rebuild it was wrong,
   and wrong on the most repeated component on this page type: 35 instances
   across twelve pages, against four other templates that all draw the
   chevron. listing.css:620 had already stated the rule out loud — "there is
   no reason for this page to carry a second, differently-weighted chevron" —
   and this file was the one page carrying it. Put side by side, an article
   FAQ row and a page FAQ row read as two different products.

   The circle is not missed. .br-icon-circle is a 48px module the home page
   uses to hold an ICON as content — the trust row, the feature discs. An
   accordion marker is not content, it is a state indicator, and every other
   template on this site indicates that state at 14px.

   Keyboard operation is native. The one thing that has to be repaired is the
   export's tabindex="-1" on every summary after the first, which is done in
   the template's script — see the comment there.
   ========================================================================== */

.br-page__prose details {
  border-block-start: 1px solid var(--br-border);
}

/* Close the group. :has() picks the last row of a run rather than the last
   row on the page, so two separate accordions on one page (the city pages
   have exactly that) each get their own bottom rule. */
.br-page__prose details:not(:has(+ details)) {
  border-block-end: 1px solid var(--br-border);
}

/* Air around a run, not between its rows. Same test in reverse. */
.br-page__prose details:not(details + details) { margin-block-start: var(--br-flow-md); }
.br-page__prose details:not(:has(+ details)) { margin-block-end: var(--br-flow-md); }

.br-page__prose summary {
  /* display:flex is what removes the disclosure triangle in Chrome and
     Safari; list-style covers Firefox; the -webkit pseudo covers older
     Safari. All three are needed and none is redundant. */
  display: flex;
  /* flex-start, not center: these questions run to three lines at 390 and a
     centred chevron would float halfway down the block instead of sitting on
     the first line, where the reader's eye already is. article.css:597 makes
     the same call for the same reason. */
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--br-flow-xs);
  list-style: none;

  padding-block: var(--br-flow-xs);

  font-size: var(--br-h4-size);
  line-height: var(--br-h4-lh);
  letter-spacing: var(--br-h4-ls);
  font-weight: var(--br-heading-weight);
  color: var(--br-text-heading);
  cursor: pointer;
  transition: color var(--br-dur) var(--br-ease);
}

.br-page__prose summary::-webkit-details-marker { display: none; }
/* Firefox draws its triangle from ::marker on the summary itself, which
   list-style: none above already handles; service.css:538 states this
   second belt as well and it costs nothing. */
.br-page__prose summary::marker { content: ""; }

/* Some of the extracted questions wrap their text in <strong>, which would
   otherwise take the button ink (#1f1902) while the summary itself is on
   heading ink (#0e0f0c) — two near-blacks in the same row. */
.br-page__prose summary :is(strong, b) {
  font-weight: inherit;
  color: inherit;
}

/* THE chevron. Flow-laid rather than absolutely positioned, so it is a real
   flex item that `justify-content: space-between` pushes to the end of the
   row and that a three-line question cannot run underneath. `height` is the
   question's own line-height, which is what lands the mark optically on the
   first line without a magic offset. */
.br-page__prose summary::after {
  content: "";
  flex: 0 0 auto;
  inline-size: var(--br-icon);
  block-size: var(--br-h4-lh);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f1902' stroke-width='1.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.62 8.82 12 14.67 17.38 8.82'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  transition: transform var(--br-dur) var(--br-ease);
}

.br-page__prose details[open] > summary::after { transform: rotate(180deg); }

/* The row answers the pointer on its text, not on a fill behind the marker —
   there is no longer a shape there to fill. Same hover the other three
   templates give their summaries. */
.br-page__prose summary:hover { color: var(--br-ink-hover); }

/* The row's own focus ring, not the global one: base.css draws that at
   --br-radius-xs around a full-width flex box, which on a 680px row is a
   rectangle that reads as a page-level outline. Held tight to the row and
   given the row's own inset so it cannot sit under the container edge. */
.br-page__prose summary:focus-visible {
  outline: 2px solid var(--br-focus);
  outline-offset: -2px;
  border-radius: var(--br-radius-sm);
}

/* The answer. Contact's four answers are bare text nodes, not paragraphs, so
   the padding has to live on the <details> — there is no element to put it
   on. */
.br-page__prose details[open] { padding-block-end: var(--br-flow-sm); }
.br-page__prose details > :not(summary) { margin-block-start: 0; }
.br-page__prose details > p:last-child { margin-block-end: 0; }

/* ==========================================================================
   10. PROSE — DEAD CONTROLS

   Two <button role="tab"> on the contact page, left over from an Elementor
   tab set whose panels and script the export did not keep. They label the two
   maps below them ("Gold Coast", "Sydney") and they control nothing.

   THEY SHOULD BE DELETED AT GENERATION. Until they are, this is the honest
   treatment: they keep the system's pill geometry so they do not read as
   broken markup, and they get no hover state and no pointer cursor, so
   nothing invites a press that will do nothing. The template's script strips
   role="tab", aria-selected and aria-controls, which are the parts that make
   a screen reader announce a tab that cannot be selected.

   :not(.br-btn) — AND THAT IS NOT DEFENSIVE TIDYING, IT IS A MEASURED BUG.

   The selector was a bare element rule, which is (0,1,1) and therefore beats
   every .br-btn class in base.css at (0,1,0). The moment /contact/, /about/
   and /get-started/ gained a real enquiry form, its gold submit button was
   repainted as a dead tab. Measured at 1440 before this exclusion was added:
   background transparent instead of #f1c305, 40px tall instead of 48, 14px
   type instead of 16, and `cursor: default` — on the one control on the page
   that has to look pressable. /industry/ and /insurance/ rendered the same
   button correctly the whole time, because their form is not in a prose
   column, which is what made the cause obvious.

   An override in enquiry.css would have had to restate thirteen properties to
   win, and would leave the NEXT real button anyone puts in a body broken in
   exactly this way. Excluding the class the design system uses to mean "this
   is a real button" fixes it once. The two dead tabs carry no class, so
   nothing about them moves.
   ========================================================================== */

.br-page__prose button:not(.br-btn) {
  display: inline-flex;
  align-items: center;
  min-height: var(--br-btn-h-sm);
  padding: var(--br-space-2) var(--br-btn-px-sm);
  margin: 0 var(--br-space-2) var(--br-space-3) 0;
  font-size: var(--br-small-size);
  line-height: var(--br-small-lh);
  letter-spacing: var(--br-small-ls);
  font-weight: var(--br-weight-semibold);
  color: var(--br-text-strong);
  background: transparent;
  border: 1px solid var(--br-border);
  border-radius: var(--br-radius-pill);
  cursor: default;
}

/* ==========================================================================
   11. PROSE — TABLE
   Nothing in this template's twelve pages ships one. It is here because the
   body HTML is generated: the day one arrives, a 6-column table at 680px is
   a horizontal scrollbar on the whole document, and `display: block` on the
   table makes it scroll inside its own box instead.
   ========================================================================== */

.br-page__prose table {
  display: block;
  overflow-x: auto;
  max-inline-size: 100%;
  margin-block: var(--br-flow-md);
  font-size: var(--br-body-sm-size);
  line-height: var(--br-body-sm-lh);
}

.br-page__prose :is(th, td) {
  padding: var(--br-space-3) var(--br-space-4);
  border-block-end: 1px solid var(--br-border);
  text-align: start;
  vertical-align: top;
}

.br-page__prose th { font-weight: var(--br-weight-semibold); color: var(--br-text-strong); }

/* ==========================================================================
   12. NARROW WIDTHS
   Nothing about the prose column needs a breakpoint — it is capped, not
   fixed, so it is the gutter that moves. Two things do.
   ========================================================================== */

@media (max-width: 575px) {
  /* The masthead's 3u/2u band is 84/56 at 390, which is most of a phone
     screen given over to a title. The home page's own hero does not do that;
     it fills the screen with something to read. Stepped down to 2u/4u3. */
  .br-page__masthead { padding-block: var(--br-section-y) var(--br-flow-md); }
  .br-page__body { padding-block: var(--br-section-y); }

  /* The accordion needs nothing here any more, and that is the point.

     The circle version did: 48px of marker plus a 24px gap took 72 of a
     358px column, which put a six-word question on four lines, so the whole
     module had to be re-sized at this width — a second geometry to keep
     right. The chevron is 24px of flex track and one --br-flow-xs gap at
     every width, so it is the same mark on a phone as on a desktop and there
     is nothing to step down. Four fewer rules, one fewer thing to get wrong.

     The tap target is unaffected either way: the target is the whole
     <summary> row, which measures 58-110px tall at 390. */
}

/* ==========================================================================
   13. MOTION, FORCED COLOURS, PRINT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .br-page__prose summary,
  .br-page__prose summary::after,
  .br-page__prose > a,
  .br-page__prose a { transition: none; }
}

@media (forced-colors: active) {
  /* Forced colours discards background-image outright, which takes the
     chevron with it and would leave the accordion with no open/closed
     affordance at all. Repainted as a CSS triangle in the system ink —
     listing.css:724-732 solved this first and this is that fix, so the two
     templates degrade identically rather than one degrading better.

     block-size has to be reset from --br-h4-lh: the triangle IS its borders,
     so a box with height would push it off the first line. */
  .br-page__prose summary::after {
    background: none;
    inline-size: 0;
    block-size: 0;
    margin-block-start: calc(var(--br-h4-lh) / 2 - 3px);
    border-inline: 6px solid transparent;
    border-block-start: 7px solid CanvasText;
  }
  .br-page__prose details { border-block-start-color: CanvasText; }
  .br-page__prose details:not(:has(+ details)) { border-block-end-color: CanvasText; }

  /* The standalone-link pill distinguishes itself by border, which survives,
     but its colour does not — name it so it cannot come through as the same
     ink as the body text around it. */
  :is(.br-page__prose, .br-page__prose > div) > a { border-color: LinkText; }

  /* The quotation card distinguishes itself by fill alone, and the fill is
     discarded. Same boundary article.css:793 gives its own. */
  .br-page__prose blockquote { border: 1px solid CanvasText; }
}

@media print {
  /* A neutral band prints as a solid grey block on most drivers and costs a
     page of toner for no information. */
  .br-page__masthead { background: none; padding-block: 0 var(--br-space-6); }
  .br-page__body { padding-block: var(--br-space-6) 0; }
  .br-page__prose { max-width: none; }
  /* An embedded PDF and a Google Map both print as an empty box. */
  .br-page__prose :is(iframe, object) { display: none; }
  /* Every closed accordion prints as a question with no answer, which on the
     FAQ page is the entire page. */
  .br-page__prose details > :not(summary) { display: block !important; }
  /* A chevron on paper points at nothing. */
  .br-page__prose summary::after { display: none; }
}