/* ==========================================================================
   TEMPLATE — insurance / service page   (id: service)
   Markup: rebuild/templates/service.html      Drives 23 /insurance/<slug>/ pages.
   --------------------------------------------------------------------------
   Depends on tokens.css and base.css. Load tokens.css FIRST, base.css second.
   Nav and footer bring their own section stylesheets; nothing here touches them.

   WHAT THIS FILE IS ALLOWED TO DO. Every colour, size, radius, duration and
   space below is a token. There is exactly ONE literal length in the whole
   file that is not (§4, the 7px list bullet) and it is argued for where it
   sits. Two aspect ratios and the grid column counts are layout arithmetic,
   not values that duplicate anything in the scale.

   NO NEW TOKENS WERE NEEDED. The scale already carried an unspent rung for
   every job here:

     page title      --br-h2-lg-size    60.86 @1440 — base.css's own h1 size,
                                        measured off the reference and then
                                        spent nowhere on the assembled home
                                        page (its one candidate, the claims
                                        heading, was deliberately dropped to
                                        the section scale). Interior pages get
                                        a crown that cannot be confused with
                                        the home page's Archivo display type.
     body headings   --br-h3-size 24.63 / --br-h4-size 20 / --br-body-size 18
                                        — the reading scale. See §4 for why
                                        the section scale (45.46) is wrong for
                                        a page that sets fifteen h2s.
     reading measure --br-measure 604   — the reference's own narrow measure,
                                        about 68 characters on the 18px ramp.
     title measure   --br-measure-wide 840
     rhythm          the --br-flow-* ladder, i.e. the same fluid unit that
                                        drives the home page's section rhythm,
                                        card padding and big radii.

   CONTENT THIS FILE IS WRITTEN AGAINST — the real files, not a sample:
     · content/pages/insurance/business-insurance.json — twelve h2+p pairs, and
       every h2 wrapped in <strong>. §4 neutralises that.
     · content/pages/insurance/public-and-products-liability-insurance.json —
       the longest, fifteen h2s, two lists, three trailing link paragraphs.
     · content/pages/insurance/professional-indemnity-insurance.json — TWENTY-ONE
       consecutive single-item <ul>s (a WordPress export artefact) and two
       genuinely empty <h2></h2> elements. Both handled in §4.
     · content/pages/insurance/cyclone-insurance.json — the shortest, 644 bytes.
     · content/pages/insurance/travel-insurance.json — the only one using h3.
     · content/pages/insurance/cyber-insurance.json — mixed everything.
   Plus the vocabulary that appears elsewhere on the site and will arrive here
   the moment a page is edited: figure/img/figcaption, blockquote, ol, em, br,
   details/summary, iframe. All styled. A template that only styles paragraphs
   looks broken on two thirds of these pages.
   ========================================================================== */

/* ==========================================================================
   1. THE ARTICLE — vertical rhythm

   Two widths, and the page's whole structure is which of them a block runs at:
     cover photograph   full container      (1240 @1440)
     masthead + prose   604, centred        (--br-measure)
     gold slab + covers full container

   The full-width bands give the page its shoulders; the reading column is the
   quiet centre, and title and body share one left edge. Nothing is pinned left
   with 600px of dead white beside it, which is what a narrow column aligned to
   the container's start would have produced at 1440.

   --br-measure-wide (840) is NOT used on this template. It was tried on the
   masthead and removed — see the note there.
   ========================================================================== */

.br-service {
  /* The masthead opens the document; the home page's own section rhythm is
     what separates it from the sticky header above. */
  padding-top: var(--br-section-y);
}

/* ==========================================================================
   2. MASTHEAD — breadcrumb, title, standfirst, actions
   ========================================================================== */

/* ONE text column for the whole document, and it is the reading measure — not
   a wider one for the title.

   840 was tried first and shot at 1440 (_shots/svc-long, first pass). It puts
   three different left edges on the page: the photograph at the container edge
   (100), the title at 300 and the body at 418. Two of those are text, and the
   eye reads the 118px step between them as a mistake rather than as a
   hierarchy. Collapsing the title onto the body's own measure leaves exactly
   two edges — one full-bleed band, one column — which is a composition rather
   than a drift.

   It costs the longest title one line ("Comprehensive Business Insurance in
   QLD" sets three at 604 against two at 840) and buys the whole page a spine. */
.br-service__masthead-inner {
  max-width: var(--br-measure);
  margin-inline: auto;
}

/* -- breadcrumb -----------------------------------------------------------
   Quiet by design. It is wayfinding, not content: 14px, muted, one line, and
   the only reason it exists is that a visitor arriving on Cyber Insurance from
   a search result has no other way to discover /insurance/ exists.

   The separator is a "/" in an aria-hidden span rather than a ::before, so it
   cannot be read out as punctuation and cannot be copied with the text.
   -------------------------------------------------------------------------- */
.br-service__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--br-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--br-small-size);
  line-height: var(--br-small-lh);
  letter-spacing: var(--br-small-ls);
  color: var(--br-text-muted);
}

.br-service__crumb + .br-service__crumb::before {
  content: "/";
  margin-right: var(--br-space-2);
  color: var(--br-neutral-500);
}

.br-service__crumb-link {
  color: var(--br-text-muted);
  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-service__crumb-link:hover { color: var(--br-text-strong); text-decoration-thickness: 2px; }
.br-service__crumb-link:active { color: var(--br-ink-active); }

/* The current page is the only crumb that is not a link, so it is the only one
   that carries weight. Colour, not size — the row has to stay one line. */
.br-service__crumb-current { color: var(--br-text-strong); font-weight: var(--br-weight-semibold); }

/* -- title ----------------------------------------------------------------
   No font-size here: the element is an <h1> and base.css already gives it
   --br-h2-lg-size / --br-h2-lg-lh / --br-h2-lg-ls. Restating it would be a
   second place to miss when that ramp is re-measured.

   `balance` is inherited from the h1–h6 rule in base.css and is right here:
   these titles are two or three words over two lines and an orphaned "in QLD"
   on line three reads badly. Display headings opt out of balance because their
   breaks are art-directed; this one is not art-directed, it is generated.
   -------------------------------------------------------------------------- */
.br-service__title {
  margin-top: var(--br-flow-sm);
}

/* No max-width: the masthead column IS the reading measure now, so a second
   cap here would only be a place for the two to disagree. */
.br-service__standfirst {
  margin-top: var(--br-flow-xs);
}

.br-service__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--br-flow-2xs);
  margin-top: var(--br-flow-md);
}

/* Below the 320px break both pills go full width rather than sitting in a
   14px-wide column each. The button itself already holds 48px there (see the
   deliberate-divergence note in base.css §5); this is the row half of it. */
@media (max-width: 400px) {
  .br-service__actions > .br-btn { width: 100%; }
}

/* ==========================================================================
   3. COVER PHOTOGRAPH

   A band, not a hero — the ratio flattens as the viewport grows so it never
   takes a screen. 16:9 on a phone (where a wide crop of a stock photo is
   unreadable), 2.4:1 from 768, 3:1 from 1200 where the container is 1240 and
   3:1 gives a 413px band.

   Radius is --br-radius-xl, the same 4u/3 the home page gives its full-width
   blocks (the industries slab, the meet slab, the speak card).
   ========================================================================== */

.br-service__cover {
  margin-top: var(--br-section-y);
}

.br-service__cover-frame {
  overflow: hidden;
  border-radius: var(--br-radius-xl);
  /* The photographs are client stock at wildly different intrinsic ratios, so
     the frame owns the shape and the image fills it. Reserving the box here
     rather than from the file's own width/height is what keeps the page from
     jumping when a 1941x1440 upload arrives. */
  aspect-ratio: 16 / 9;
  background: var(--br-bg-band);
}

@media (min-width: 768px)  { .br-service__cover-frame { aspect-ratio: 2.4 / 1; } }
@media (min-width: 1200px) { .br-service__cover-frame { aspect-ratio: 3 / 1; } }

.br-service__cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Skylines and buildings: the interest is above the middle, and a centred
     crop of a 4:3 upload into a 3:1 band cuts the tops off. */
  object-position: center 40%;
}

/* ==========================================================================
   4. THE BODY — the prose

   This is the whole point of the template. Everything below is scoped to
   .br-service__prose so it can never leak into the nav, the footer, the gold
   slab or the cover-type grid.
   ========================================================================== */

.br-service__body { margin-top: var(--br-section-y-lg); }

.br-service__prose {
  max-width: var(--br-measure);
  margin-inline: auto;
  color: var(--br-text);
  font-size: var(--br-body-size);
  line-height: var(--br-body-lh);
  letter-spacing: var(--br-body-ls);
}

/* -- vertical rhythm ------------------------------------------------------
   One rule, stated once, in the fluid unit the rest of the page runs on:

     paragraph to paragraph      2u/3   18.77 @1440
     into an h2                  4u/3   37.54       ) 2.7 : 1, so a heading is
     out of an h2                u/2    14.08       ) unmistakably attached to
     into an h3                  1u     28.15       ) the text BELOW it
     out of an h3                u/3     9.38
     list item to list item      u/3     9.38

   Written as `> * + *` with per-element overrides rather than margins on each
   element, so an element the content invents tomorrow still gets a sane gap
   instead of collapsing into its neighbour.
   -------------------------------------------------------------------------- */
.br-service__prose > * { margin-top: 0; margin-bottom: 0; }
.br-service__prose > * + * { margin-top: var(--br-flow-xs); }

.br-service__prose > :is(h2, h3, h4) + * { margin-top: var(--br-flow-2xs); }
.br-service__prose > * + h2 { margin-top: var(--br-flow-md); }
.br-service__prose > * + h3 { margin-top: var(--br-flow-sm); }
.br-service__prose > * + h4 { margin-top: var(--br-flow-sm); }

/* CONSECUTIVE SINGLE-ITEM LISTS. professional-indemnity-insurance.json ships
   twenty-one <ul>s in a row, each holding exactly one <li> — a WordPress block
   export artefact, not an editorial decision, and the copy plainly reads as
   three lists of seven. At the paragraph gap they set as twenty-one separate
   objects with 18.77px of air between them and the section is 400px taller
   than it should be. Closing the gap to the list's own item gap makes them
   read as one list, which is what they are.

   Fixing it here rather than in the extractor is deliberate: the rule is
   inert on well-formed content (no other page has two adjacent lists) and it
   means the template cannot be broken by content nobody has cleaned yet. */
.br-service__prose > ul + ul,
.br-service__prose > ol + ol { margin-top: var(--br-flow-3xs); }

/* EMPTY ELEMENTS. Real content, both of them: a trailing <p></p> on eight of
   the 23 pages and two bare <h2></h2>s in professional-indemnity. Left alone
   they punch a 37px hole in the column. `:empty` matches an element with no
   children and no text at all, which is exactly what these are — a <p> holding
   a single space is NOT matched and is left to render, because that is content
   somebody typed. */
.br-service__prose :is(p, h2, h3, h4, li):empty { display: none; }

.br-service__prose > *:first-child { margin-top: 0; }

/* -- headings -------------------------------------------------------------
   The body scale is 24.63 / 20 / 18-semibold, NOT the section scale.

   The section-heading rung (--br-h2-size, 45.46 @1440) is what a <h2> gets by
   default from base.css, and it is wrong here — measured against the real
   content, not asserted. public-and-products-liability sets FIFTEEN h2s;
   business-insurance sets TWELVE. At 45.46px in a 604px measure,
   "Understanding Public Liability Insurance: What You Need to Know" runs four
   lines and 228px tall, and the page becomes a stack of section headings with
   a paragraph trapped under each one. On the home page that rung is spent
   seven times on seven genuine sections; here it would be spent fifteen times
   on the subheads of one.

   So the body steps down one rung and takes the card-title scale. The page
   title keeps the crown (60.86), the body headings sit at 24.63, and the
   distance between them is what tells you which is which.

   h3 and h4 share --br-h4-size (20px) by construction — the scale has no rung
   between 20 and 18 — so h4 is separated by size instead: it drops to the body
   ramp and earns its heading-ness from weight and colour. Only 16 h4s exist
   across the whole site and none of them on this type, so this is a guard
   rather than a decision. */
.br-service__prose :is(h2, h3, h4) {
  color: var(--br-text-heading);
  font-weight: var(--br-heading-weight);
  /* No text-wrap here on purpose. base.css sets `balance` on every h1–h6 and
     it is measured off the reference; the long question-style h2s on the
     liability page are two and three lines, which is inside the range Chrome
     balances, and even lines are what a subhead wants. Overriding it would be
     a second opinion about a value the foundation already settled. */
}

.br-service__prose h2 {
  font-size: var(--br-h3-size);
  line-height: var(--br-h3-lh);
  letter-spacing: var(--br-h3-ls);
}

.br-service__prose h3 {
  font-size: var(--br-h4-size);
  line-height: var(--br-h4-lh);
  letter-spacing: var(--br-h4-ls);
}

.br-service__prose h4 {
  font-size: var(--br-body-size);
  line-height: var(--br-body-lh);
  letter-spacing: var(--br-body-ls);
}

/* <strong> INSIDE A HEADING. business-insurance.json wraps every one of its
   twelve h2s in <strong>, and public-and-products-liability wraps four of
   fifteen — so on that page four headings would render in brand ink (#1f1902)
   and eleven in heading ink (#0e0f0c) for no reason a reader could see.
   base.css §2 gives <strong> its own colour and weight, correctly, for running
   text. In a heading it is redundant markup, so it inherits and disappears. */
.br-service__prose :is(h2, h3, h4) :is(strong, b) {
  font-weight: inherit;
  color: inherit;
}

/* -- lists ----------------------------------------------------------------
   The marker is a 7px gold disc.

   It is the one literal length in this file. The token scale has no 7px step
   because it has never needed a mark this small — --br-icon-circle-sm is the
   40px badge in the home page's services grid, and this is that badge with the
   chrome taken off. Adding a token for a value used once, in one place, would
   be the sort of one-off the tokens file explicitly asks agents not to invent.

   Gold, not ink: the page has exactly two other pieces of colour (the CTA slab
   and the cover-type badges) and a page of grey dots reads as any consultancy's
   blog. It is small enough to stay an accent — a 7px disc every 26px is under
   0.4% of the column's ink — and it is the same #f1c305 as the badges below it,
   so the list and the grid are visibly one system.

   NOT a tick. A tick was the obvious reuse of the services badge and it is
   wrong on this content: professional-indemnity and cyber both set a "What Is
   NOT Typically Covered" list in the same markup as their "What Is Covered"
   list, and a tick beside an exclusion says the opposite of the sentence next
   to it.

   Positioned against --br-body-lh rather than a fixed top, so the disc stays on
   the first line's optical centre when the user raises their default font size
   and the line box grows with it. */
.br-service__prose :is(ul, ol) {
  margin-left: 0;
  padding-left: 0;
  list-style: none;
}

.br-service__prose li {
  position: relative;
  /* 1u — enough that a wrapped second line clears the marker column with room
     to spare, which is what makes a hanging indent read as deliberate. */
  padding-left: var(--br-flow-sm);
}

.br-service__prose li + li { margin-top: var(--br-flow-3xs); }

/* Nested lists sit tighter to their parent than two top-level items do. */
.br-service__prose li > :is(ul, ol) { margin-top: var(--br-flow-3xs); }

.br-service__prose ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc((var(--br-body-lh) - 7px) / 2);
  width: 7px;
  height: 7px;
  border-radius: var(--br-radius-pill);
  background: var(--br-gold);
}

/* Ordered lists keep real numerals — they carry sequence, which a disc cannot.
   Right-aligned in the same 1u column so a two-digit step does not push its
   text out of line with a one-digit one. */
.br-service__prose ol { counter-reset: br-service-step; }

.br-service__prose ol > li { counter-increment: br-service-step; }

.br-service__prose ol > li::before {
  content: counter(br-service-step) ".";
  position: absolute;
  left: 0;
  width: calc(var(--br-flow-sm) - var(--br-flow-3xs));
  text-align: right;
  color: var(--br-text-accent);
  font-weight: var(--br-weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* A <strong> opening a list item is how this content writes a definition
   term — "<strong>Negligence: </strong>Errors or omissions…" — and it appears
   in five of the 23 pages. It needs no special rule; base.css already gives it
   the semibold ink that makes it read as a term. Recorded so the next person
   does not "fix" it. */

/* -- inline ---------------------------------------------------------------
   Links inside the body arrive with no class — the content is cleaned HTML,
   not markup we control — so the treatment has to be attached to the element.
   It is .br-link's, restated against the same tokens rather than by adding a
   class the generator would have to inject into every <a> in the body.
   -------------------------------------------------------------------------- */
.br-service__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-service__prose a:hover { color: var(--br-ink-hover); text-decoration-thickness: 2px; }
.br-service__prose a:active { color: var(--br-ink-active); }

.br-service__prose em,
.br-service__prose i { font-style: italic; }

/* -- figures --------------------------------------------------------------
   No insurance page ships one today; 39 pages elsewhere on the site do, and the
   moment Warren adds a diagram to a cover page this is what catches it.
   Full measure, same 1u radius the home page's content cards carry.
   -------------------------------------------------------------------------- */
.br-service__prose figure { margin-inline: 0; }

.br-service__prose :is(figure, p) > img {
  width: 100%;
  height: auto;
  border-radius: var(--br-radius-lg);
}

/* An SVG mark dropped in by the editor (the Steadfast lockup is the real case)
   is a logo at its own size, not a photograph to be stretched across a column. */
.br-service__prose img[src$=".svg"] { width: auto; max-width: 100%; border-radius: 0; }

.br-service__prose figcaption {
  margin-top: var(--br-flow-3xs);
  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-service__prose iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: var(--br-radius-lg);
}

/* -- pull quotes ----------------------------------------------------------
   A gold rule rather than a tinted panel. The panel version competes with the
   CTA slab further down the page, and a 3px accent on the reading edge is the
   quieter half of the same idea — it is the only other place gold touches type.
   -------------------------------------------------------------------------- */
.br-service__prose blockquote {
  margin-inline: 0;
  padding-left: var(--br-flow-sm);
  border-left: var(--br-icon-stroke) solid var(--br-gold);
  color: var(--br-text-strong);
  font-size: var(--br-body-lg-size);
  line-height: var(--br-body-lg-lh);
  letter-spacing: var(--br-body-lg-ls);
}

.br-service__prose blockquote > * + * { margin-top: var(--br-flow-2xs); }

/* -- FAQ accordions -------------------------------------------------------
   <details>/<summary>. Native, so it opens, closes, takes keyboard focus and
   announces its expanded state with no JavaScript at all — which is also why
   the summary needs no ARIA here. The global focus ring in base.css §4 already
   lists `summary`, so the keyboard state is inherited rather than reinvented.

   The chevron is the SAME mark base.css draws inside .br-select: identical
   path, identical 1.85 stroke, same data URI. If that geometry is ever
   re-measured, this is the second place to change — it is duplicated rather
   than shared because a background-image cannot be inherited from another rule.

   The rows are separated by the one hairline in the system, top and bottom, so
   a run of questions reads as a table of contents rather than a stack of
   boxes. That is the Reminders/Settings shape, not the card shape, and it is
   right for content that is scanned before it is read.
   -------------------------------------------------------------------------- */
.br-service__prose details {
  border-top: 1px solid var(--br-border);
}

.br-service__prose details:last-of-type { border-bottom: 1px solid var(--br-border); }

/* Consecutive accordions share one hairline instead of stacking two. */
.br-service__prose > details + details { margin-top: 0; }

.br-service__prose summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--br-flow-2xs);
  padding-block: var(--br-flow-xs);
  padding-right: var(--br-space-1);

  color: var(--br-text-heading);
  font-size: var(--br-h4-size);
  line-height: var(--br-h4-lh);
  letter-spacing: var(--br-h4-ls);
  font-weight: var(--br-heading-weight);

  cursor: pointer;
  list-style: none;
  transition: color var(--br-dur) var(--br-ease);
}

/* Two engines, two markers, both removed — the chevron below replaces them. */
.br-service__prose summary::-webkit-details-marker { display: none; }
.br-service__prose summary::marker { content: ""; }

.br-service__prose summary::after {
  content: "";
  flex: 0 0 auto;
  width: var(--br-icon);
  height: 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: 16px 16px;
  transition: transform var(--br-dur) var(--br-ease);
}

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

.br-service__prose summary:hover { color: var(--br-ink-hover); }

/* The answer sits under the question, indented to nothing — the hairline
   already carries the grouping, so an indent would only narrow the measure. */
.br-service__prose details > :not(summary) { margin-top: 0; }
.br-service__prose details > summary + * { margin-top: 0; }
.br-service__prose details > :not(summary):last-child { padding-bottom: var(--br-flow-xs); }
.br-service__prose details > summary ~ * + * { margin-top: var(--br-flow-xs); }

/* WordPress exports carry `aria-expanded` and `aria-controls` on the summary,
   pointing at ids that do not survive extraction. They are harmless to render
   and actively wrong to announce — a stale aria-expanded contradicts the real
   open state. The generator should strip both attributes from <summary>; this
   comment is the record of the request, because CSS cannot. */

/* -- the updated line -----------------------------------------------------
   Insurance copy goes stale, and a reader deciding whether to trust a page
   about what a policy covers is entitled to know when it was last touched.
   The date is the content's own `modified` field; nothing is claimed about it
   beyond "updated".
   -------------------------------------------------------------------------- */
.br-service__updated {
  max-width: var(--br-measure);
  margin: var(--br-flow-md) auto 0;
  padding-top: var(--br-flow-xs);
  border-top: 1px solid var(--br-border);
  font-size: var(--br-small-size);
  line-height: var(--br-small-lh);
  letter-spacing: var(--br-small-ls);
  color: var(--br-text-muted);
}

/* ==========================================================================
   5. CONVERSION PATH — the gold slab

   The home page's gold-band recipe (centred heading, one lead, an ink CTA)
   held inside the rounded slab the home page uses for its closing statement.
   Home closes on ink; interior pages close on gold. It is the only colour on
   an otherwise white document, so it is where the eye goes when the reading
   stops — which is the entire job of this block.

   .br-on-gold on the slab re-points the whole token set, so the heading ink,
   the body colour, the focus ring and the ghost button's press plate are all
   correct on #f1c305 with no rules of their own.
   ========================================================================== */

.br-service__speak { margin-top: var(--br-section-y-lg); }

.br-service__speak-slab {
  background: var(--br-bg-gold);
  border-radius: var(--br-radius-xl);
  /* 8u/3 block; inline runs 1u → 4u/3 → 2u on the speak card's own two upper
     breakpoints. Its two LOWER steps (u/2 below 480) are deliberately not
     copied.

     That card runs u/2 at 390 because it is white on white: its padding is
     invisible and all it buys is the measure. On a filled slab the padding IS
     the frame, and u/2 put the display heading 15px off a gold edge —
     measured, and cramped beside the home page's own ink slab, which sets its
     heading 51px in at the same width. At 1u the heading re-wraps from two
     long lines to three short ones and the block reads like its sibling. */
  padding-block: calc(var(--br-flow-md) * 2);
  padding-inline: var(--br-flow-sm);
}

@media (min-width: 768px)  { .br-service__speak-slab { padding-inline: var(--br-flow-md); } }
@media (min-width: 1440px) { .br-service__speak-slab { padding-inline: var(--br-flow-lg); } }

.br-service__speak-measure {
  max-width: var(--br-measure-wide);
  margin-inline: auto;
  text-align: center;
}

/* --display-md, not --display-lg. The home page spends display-lg (89px @1440)
   on its hero and on its two once-per-page moments; this block appears on
   twenty-three pages, and the rung below it is what keeps it a CTA rather than
   a second hero. `balance` because the break is generated, not art-directed —
   the same reason .br-speak__heading sets it on the home page. */
.br-service__speak-heading { text-wrap: balance; }

.br-service__speak-lead {
  margin-top: var(--br-flow-xs);
  /* Set semibold, matching the home page's own reading of this line: it is a
     claim about how Warren works, not body copy. */
  font-weight: var(--br-weight-semibold);
}

.br-service__speak-actions {
  /* The switch is driven by the width of the BUTTON ROW, not the viewport —
     the slab's inline padding steps on 480/768/1440 while the container's
     gutter steps on 576/768/992/1200, so no media query describes this row's
     real width. Threshold is the two pills plus their gap. */
  container-type: inline-size;
  container-name: br-service-speak-actions;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--br-flow-2xs);
  margin-top: var(--br-flow-md);
}

@container br-service-speak-actions (max-width: 420px) {
  .br-service__speak-cta { width: 100%; }
}

/* Engines without container queries only ever see this. 420px of row is
   reached at about a 500px viewport once the slab and gutter are removed. */
@supports not (container-type: inline-size) {
  @media (max-width: 500px) {
    .br-service__speak-cta { width: 100%; }
  }
}

.br-service__speak-cta { min-width: 0; }

/* ==========================================================================
   6. THE OTHER COVER TYPES

   The home page's services grid, minus the category chips. Same neutral band,
   same 40px gold badge with its hairline ring restored, same underlined
   semibold label on the small-print ramp, same 24px row hit-area rule.

   The chips are gone on purpose: there are 23 cover types here rather than 12,
   the categories would have to be maintained by hand in a second place, and a
   reader who has just finished one cover page is browsing, not filtering.
   ========================================================================== */

.br-service__sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.br-service__more {
  margin-top: var(--br-section-y-lg);
  padding-block: var(--br-section-y);
  background: var(--br-bg-band);
}

/* No font-size: this IS a section heading — the peer of "Commercial insurance
   services" on the home page, which is the same grid under the same words —
   so it takes the <h2> default from base.css and nothing else. */
.br-service__more-heading { margin: 0; }

/* COLUMN COUNT IS NOT THE HOME PAGE'S, and the reason is the labels.

   The home page's grid goes 4-up at 992 because its twelve labels are hand-
   written and capped at 30 characters. These labels are Warren's page TITLES,
   straight out of the CMS, and the longest is 41 ("Business Insurance (ISR /
   Material Damage)"). Measured at 4-up from 992: that title sets FOUR lines in
   a 100px label column and drags its badge 36px below the first line — exactly
   the failure the home page's content contract exists to prevent, arriving
   here because the contract cannot be enforced on content nobody writes.

   Truncating is not available: a clamp with an ellipsis would cut a cover
   type's name, and services.css already records that judgement — losing a
   name is worse than the wrap it fixes. So the grid gives way instead. 4-up
   starts at 1200, and 992–1199 holds three columns.

   There is no padding-right. The home page's grid is percentage columns on a
   flex row with no gap, so the row needed its own trailing pad to make a
   gutter; this is a real grid with a real 32px gap, and a second gutter would
   only be 24px stolen from the measure. */
.br-service__cover-list {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: var(--br-space-7);
  margin: var(--br-space-8) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 576px)  { .br-service__cover-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px)  { .br-service__cover-list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .br-service__cover-list { grid-template-columns: repeat(4, 1fr); } }

.br-service__cover-item {
  display: flex;
  /* NOT `center`. Centring works while every label is one to three lines and
     breaks the moment one is not — and with free-form titles that is a
     question about the CMS, not about this stylesheet. Pinning the badge to
     the FIRST line is true at any line count. */
  align-items: flex-start;
  gap: var(--br-space-3);
  /* The 48px badge box used to guarantee the row cleared WCAG 2.5.5's 44px
     target. The badge no longer sets the row height (its top margin is
     negative below), so the floor is stated where it cannot drift. */
  min-height: var(--br-icon-circle);
  position: relative;
}

.br-service__cover-badge {
  /* 4px each side turns the 40px disc into a 48px column of space before the
     label, without a second wrapper. Measured on the home page's grid.

     The TOP margin is arithmetic, not a nudge: it lifts the disc by half the
     difference between the label's first line box and the disc itself, which
     puts the disc's centre exactly on that line's centre. Both terms are
     tokens, so it stays correct when the small-print ramp steps at 992 (22 ->
     24) and when a user raises their default font size. Measured drift against
     the first line, all 22 rows, 320 → 1920: zero. */
  margin-inline: var(--br-space-1);
  margin-top: calc((var(--br-body-sm-lh) - var(--br-icon-circle-sm)) / 2);
  /* The shared --gold variant drops the ring; this grid keeps it, exactly as
     the home page's badge does. */
  box-shadow: var(--br-ring-hairline);
}

/* TWO CLASSES, NOT ONE, and it is load-bearing. base.css §10 sizes the glyph
   inside a gold circle with `.br-icon-circle--gold > svg { width: 20px }`,
   which is (0,1,1); a single-class rule here is (0,1,0) and LOSES no matter
   what order the files load in. Shipped that way for one round and the tick
   rendered at 20px against the home page's 11.8 — visibly heavier, and the
   optical nudge below was being applied at the wrong scale on top of it. It
   was caught by measuring both grids, not by looking at them, which is the
   reason this note exists. The home page's own rule is a two-class descendant
   for exactly the same reason.

   The three numbers are the home page's fitted values, not re-derived: the
   badge is identical, and getting a different answer would make the two grids
   disagree by a fraction of a pixel in the one place they sit side by side. */
.br-service__cover-badge .br-service__cover-tick {
  width: 11.8px;
  height: 11.8px;
  transform: translate(1.32px, 0.86px);
}

.br-service__cover-label {
  /* The small-print ramp, and it has to be stated: a flex item whose own
     line-height is taller than its content sets its line box from the strut,
     and the page default (26px at 1440) would add 2px to every wrapped line —
     enough to push a two-line label's disc off its baseline. */
  font-size: var(--br-body-sm-size);
  line-height: var(--br-body-sm-lh);
  letter-spacing: var(--br-body-sm-ls);
  min-width: 0;
}

.br-service__cover-link {
  color: var(--br-text-strong);
  font-weight: var(--br-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 0.3em;
  text-decoration-thickness: 1px;
  transition: color var(--br-dur) var(--br-ease),
              text-decoration-thickness var(--br-dur) var(--br-ease);
}

/* THE HIT AREA IS THE ROW, NOT THE TEXT — the same fix the home page's grid
   carries, for the same reason. An absolutely-positioned pseudo on an INLINE
   element gets its LAST line fragment as a containing block, not the union, so
   growing the link itself leaves the first line of a wrapped label at its raw
   ~22px line box and misses both WCAG 2.5.8 (24px) and 2.5.5 (44px). Anchoring
   to the <li> gives every link the full row — never shorter than the 48px badge
   box — at every width, and makes the disc tappable, which is what a thumb aims
   at anyway. */
.br-service__cover-link::after {
  content: "";
  position: absolute;
  /* The top matches the badge's negative margin, so the part of the disc that
     sits above the row is inside the target rather than beside it — the disc
     is what a thumb aims at. Rows are 32px apart and this reaches 9px up, so
     no two targets can meet. */
  inset: calc((var(--br-body-sm-lh) - var(--br-icon-circle-sm)) / 2) 0 0 0;
}

/* Hover moves the underline, not the colour. Measured on the home page's
   equivalent: ink to ink-hover is a 12/10/3 shift on a near-black and is
   invisible on screen, and a gold underline is 1.43:1 on this #ededeb band —
   it would read as the underline being taken away. */
.br-service__cover-link:hover { color: var(--br-ghost-hover-color); text-decoration-thickness: 2px; }
.br-service__cover-link:active { color: var(--br-ink-active); }

/* The ring belongs on the row, not on the last line fragment of the label —
   otherwise a two-line title gets a ring around half of itself. */
.br-service__cover-link:focus-visible { outline: none; }

.br-service__cover-item:has(.br-service__cover-link:focus-visible) {
  outline: 2px solid var(--br-focus);
  outline-offset: 2px;
  border-radius: var(--br-radius-sm);
}

/* Engines without :has() keep a real ring rather than none at all. */
@supports not selector(:has(*)) {
  .br-service__cover-link:focus-visible {
    outline: 2px solid var(--br-focus);
    outline-offset: 2px;
  }
}

.br-service__more-actions { margin-top: var(--br-space-8); }

/* ==========================================================================
   7. FORCED COLOURS

   Windows High Contrast throws away author background-color and box-shadow.
   Three things on this template are carried entirely by one or the other and
   would vanish: the list bullets, the cover photograph's frame, and the gold
   slab — which would take the whole conversion block down to unmarked text in
   the middle of a white page.

   base.css already repaints the buttons and the icon circles; this only covers
   what this template adds.
   ========================================================================== */

@media (forced-colors: active) {
  /* A background-painted disc disappears; a bordered one survives. */
  .br-service__prose ul > li::before {
    forced-color-adjust: none;
    background: CanvasText;
  }

  /* The slab loses its fill, so it needs an edge or the CTA reads as loose
     text. CanvasText, not a hex: the boundary has to be legible in whatever
     theme the user picked. */
  .br-service__speak-slab { border: 1px solid CanvasText; }

  /* Same for the band behind the cover-type grid and the frame around the
     photograph, both of which are pure background today. */
  .br-service__more { border-block: 1px solid CanvasText; }
  .br-service__cover-frame { border: 1px solid CanvasText; }

  /* The chevron is a background-image in a fixed ink, which forced-colors does
     NOT recolour — so on a dark theme it becomes a black mark on black. Drawn
     as a rotated border corner instead, in the system palette. */
  .br-service__prose summary::after {
    background-image: none;
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.4rem;
    border-right: 2px solid CanvasText;
    border-bottom: 2px solid CanvasText;
    transform: rotate(45deg);
  }
  .br-service__prose details[open] > summary::after { transform: rotate(225deg); }
}

/* ==========================================================================
   8. PRINT

   These pages get printed — a broker emails a client "read the Cyber page" and
   the client prints it. Drop the navigation furniture and the photograph, keep
   the argument, and print the URL behind every link so a paper copy is not a
   dead end.
   ========================================================================== */

@media print {
  .br-nav,
  .br-skip-link,
  .br-service__cover,
  .br-service__more,
  .br-service__breadcrumb,
  .br-service__actions { display: none; }

  .br-service__prose,
  .br-service__masthead-inner,
  .br-service__updated { max-width: none; }

  .br-service__speak-slab { border: 1px solid #000; }

  .br-service__prose a::after {
    content: " (" attr(href) ")";
    font-weight: var(--br-weight-regular);
    word-break: break-all;
  }

  .br-service__prose details[open] > summary::after,
  .br-service__prose summary::after { display: none; }

  /* An accordion on paper has nothing to click, so every answer should print.
     `::details-content` is the only selector that actually reaches a CLOSED
     disclosure's content — the older `details:not([open]) > :not(summary)`
     trick stopped working when Chrome moved the content into a slot, and it is
     deliberately not shipped here as a cargo-culted no-op. Chrome 131+ and
     anything on the same behaviour honour this; on older engines a printed page
     shows the questions and not the answers, which is the pre-existing
     behaviour rather than a regression this rule introduces. */
  .br-service__prose details::details-content {
    content-visibility: visible;
    block-size: auto;
  }
}