/* ========================================================================== CLAIMS — "Claims advocacy when it matters most" + the three-point strip -------------------------------------------------------------------------- Depends on tokens.css + base.css. Every number below was read off the signed-off reference with a headless browser at 390 / 576 / 768 / 836 / 992 / 1024 / 1160 / 1200 / 1440 / 1600 / 1920. Where a value is a token it is written as a token; where the reference has a step the shared scale does not carry, it is a section-scoped custom property with the reason stated. Layout, measured at 1440: section margin-top 56.31, margin-bottom 225.24 (NOT padding — below) top row text 952.73 | photo 287.27, centred, 48px below it heading 60.857/66.943, 32px below lead 20/28, capped at 545.75, 40px above the CTA CTA 48 tall, gold pill strip 3 x 370.66 columns, 64px gutters each point 72px circle, 16px gap, 18/26 semibold in 2 lines ========================================================================== */ .br-claims { /* Section rhythm is a MARGIN in the reference, not padding: adjacent sections collapse into ONE 56.31px gap instead of stacking two. Using .br-section (padding) here would double every seam on assembly. Measured: 48.23 @390, 51.14 @768, 53.11 @1024, 56.31 @1440, 57.54 @1600 — exactly the fluid --br-flow-lg ramp. */ margin-block-start: var(--br-section-y); /* Below the strip the reference has an empty presentational block that renders nothing at all: it contributes a section margin, a section of padding top and bottom, and another section margin, and that is the whole of it. Four times the rhythm unit, no content, no meaning. It is reproduced as margin rather than as a node, because an empty
would make this fragment a two-root document — a second top-level element every assembly step has to know to carry. Measured against a following section at 1440: 225.19px with the empty div, 225.22px with this margin. Identical within rounding, one fewer node, one root. It is a MARGIN and not padding for the same reason the top is: the next section's own top margin collapses INTO this one rather than stacking on it, so the seam is 2x the unit however the neighbour is built. Was * 4 (225px), matching the reference. Dropped to * 2 (112.6px) because on assembly the page settles on 113 between sections — 56, 56, 93, 94, [225], 112, 113, 112, 136, 112 — so this was double its neighbours and the one join that lurches walking down the page. It also sat immediately above the Warren portrait, the only photograph of a person on the site, so the void read as something failing to load. This is a deliberate departure from the reference, on the same reasoning that normalised the 57px broker->renewal join with the sign flipped. */ margin-block-end: calc(var(--br-section-y) * 2); /* The reference leaves a 16px tail of empty space below the strip, INSIDE the section, at every width from 321 to 1159 — it goes to 0 at 1160 and to 8 at 320. On its own it is invisible; on assembly it is 16px of the gap to whatever follows, so without it the rhythm below this block is short at every phone and tablet width. It is padding on the section rather than a margin on the strip on purpose: a bottom margin on the last child collapses straight out through the container and the section (neither has bottom padding or a border), so it would contribute nothing. */ padding-bottom: var(--br-space-4); /* measured 16px */ /* The point icons sit on a 64px circle below 992px and a 72px circle above it. The shared icon-circle scale carries 40 / 48 / 72, so the 64px step lives here rather than in the global scale — it is measured on this strip alone. Promote it if a second section ever needs it. */ --br-claims-circle: 64px; --br-claims-glyph: var(--br-icon); /* The reference's glyphs are filled outlines whose visible edge measures 2 units on the 24 grid — a touch heavier than the 1.75px the shared icon set uses, because these render at 32px rather than 24px and would look thin at the shared weight. Section-scoped so the global set is untouched. */ --br-claims-stroke: 2px; } /* ========================================================================== 1. TOP ROW — copy beside the photo Below 768 the photo sits ABOVE the copy (the reference wraps this row in reverse), so column-reverse gives the same order from the same markup and keeps the reading order sensible for screen readers and keyboard users. ========================================================================== */ .br-claims__row { display: flex; flex-direction: column-reverse; margin-bottom: var(--br-space-9); /* measured 48px at every width */ } .br-claims__body { /* A flex column rather than a block: it keeps the CTA's box exactly 48px tall with no stray line-box descender under it, which is what the reference measures. */ display: flex; flex-direction: column; align-items: stretch; } .br-claims__heading { margin: 0 0 var(--br-space-7); /* measured 32px */ /* Balancing stays ON (base.css already does it, and the reference measures text-wrap: balance here) — it is what produces the "Claims advocacy" / "when it matters most" break rather than a full first line. DELIBERATE, AND RE-TESTED. At 360-430 this balances to three lines with a seven-character middle line: "Claims advocacy" / "when it" / "matters most". It was put to us that a floating "when it" is a craft failure and should be fixed with text-wrap: pretty and a 20ch cap under 600px. Every alternative was measured before accepting that. Rendered lines: width balance (shipped) pretty greedy 360 advocacy / when it / same as balance when it matters / matters most most 390 same same as balance when it matters / most 412 same when it matters / most 430 same when it matters / most 540 advocacy / when it Claims advocacy when it / matters most matters most The proposed fix is a NO-OP at 360 and 390 — the two commonest phone widths, and the ones the complaint was actually about. Where it does bite (412 and up) it trades a seven-character middle line for a FOUR-character last line, "most", alone. A short middle line is a rag; a short last line is a widow, and a widow is the worse of the two. At 540 it also splits "Claims advocacy when it" across the clause boundary and breaks a width where balance currently matches the reference exactly. So balance is not merely the faithful option here, it is the best one: it keeps the subject ("Claims advocacy") and the predicate ("matters most") each intact, and puts the seam between them. Kept. */ } .br-claims__lead { /* Measured gap from the paragraph to the CTA: 56 below 600, 40 from 600 up. The step is at 600, NOT at the 768 row breakpoint — walked either side (592/596/599 = 56, 600/601/604 = 40), so it gets its own query below. */ margin: 0 0 var(--br-space-10); } /* base.css sets text-wrap: pretty on every paragraph, which pulls words down to avoid short last lines. The reference leaves both paragraphs on plain greedy wrapping, and the difference is visible — the lead loses "corner" off line two and the strip loses "on" off line one. Restored to greedy. DELIBERATE FIDELITY CALL ON THE CAPTIONS, re-tested rather than assumed. It was put to us that the three captions end on single words ("insurer", "settlement", "runs") at most widths, that all three do so at 1440, and that restoring pretty on .br-claims__copy alone would clear them. Measured last lines, greedy (shipped) vs pretty: width cap1 cap2 cap3 768 identical identical identical 992 identical identical identical 1160 identical identical identical 1440 "the insurer" "settlement" -> "claim runs" (both) "on settlement" (both) 1920 "insurer" -> "settlement" -> "runs" -> "the insurer" "on settlement" "claim runs" Two corrections to the premise. First, pretty is a NO-OP from 768 to 1160 — the whole tablet-and-laptop band. Second, at 1440 only ONE caption has a single-word last line, not three; the other two already end on two words. The three-orphan case is 1920 only. So the real trade is: diverge from the signed-off reference on one caption at 1440 and three at 1920, to remove one orphan at 1440 and three at 1920. Declined. 1440 is the width this rebuild is judged at side by side, body copy breaking differently is exactly the kind of difference that reads as "not the same page", and the reference's wrapping is part of what the client approved. The orphans are inherited from the reference, they are on the substantive word of each caption rather than a preposition, and the strip's three columns stay the same height either way (52px at every width above — pretty changes no geometry, only where the words sit). If fidelity is ever downgraded below craft on this section, the one-line change is text-wrap: pretty on .br-claims__copy — NOT on .br-claims__lead, which is measured against the reference at a fixed 545.75px cap. */ .br-claims__lead, .br-claims__copy { text-wrap: wrap; text-wrap-style: auto; /* Long unbroken tokens (a pasted URL, a policy reference) break inside the column instead of running past it. The real copy has no token long enough to trigger this at any width, so it changes nothing on the signed-off content — it stops a future content edit silently overflowing. */ overflow-wrap: anywhere; } .br-claims__cta { align-self: flex-start; /* The shared button is `white-space: nowrap`, which is right for a label that fits. The shipped label is 226.45px and fits in the narrowest column this section ever has (288px at 320), so nowrap never fires on the real copy — but a longer one would push the button straight through the right edge. Walked with a 68-character label: it overflowed at 412, 414, 430 and 532px, which is three of the four commonest phone widths. Allowed to wrap at EVERY width rather than only on the narrowest phones. Verified below: the button's box is still 226.45 x 48 with the real copy at every width from 320 to 2560, so this costs the reference match nothing and removes the whole class of failure. */ white-space: normal; max-width: 100%; } /* DELIBERATE DEVIATION FROM THE REFERENCE — do not "correct" it back. The reference collapses this button to 34px tall (4px/12px padding) and tightens the paragraph gap to 28px below 321px. We keep the 48px button and the 56px gap: 34px fails the 44px minimum touch target (WCAG 2.5.5/2.5.8), and 320px is the one width where the reference is wrong rather than different. Every width from 321 up is reference-exact. (Label wrapping used to be relaxed here for narrow phones only; it is now unconditional — see .br-claims__cta above.) */ /* -- the photo ------------------------------------------------------------ Measured: 16:9 crop, 24px radius, cover. Below 768 it runs to 500px (or the container, whichever is smaller); above 768 it is 23.1676% of the container with a 275px floor — 275 @768–1187, 287.27 @1440, 333.61 @1920. -------------------------------------------------------------------------- */ .br-claims__figure { width: 500px; max-width: 100%; margin-bottom: var(--br-space-7); /* measured 32px above the copy */ } .br-claims__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--br-radius-card); /* measured 24px */ } /* Measured: the paragraph-to-CTA gap drops 56 -> 40 at exactly 600px, well below the 768px point where the row goes two-column. Two separate steps in the reference, so two separate queries here. */ @media (min-width: 600px) { .br-claims__lead { margin-bottom: var(--br-space-8); } /* measured 40px */ } @media (min-width: 768px) { .br-claims__row { flex-direction: row; align-items: center; justify-content: space-between; } .br-claims__body { flex: 1 1 auto; min-width: 0; } .br-claims__figure { flex: none; /* 23.1676, not 23.1667. Chromium lays out on a 1/64px grid and FLOORS a resolved percentage onto it, so a fraction can be right at one container width and a 64th short at another. 23.1667% matches the reference exactly up to a 1240px container (287.27 at 1440) and then runs 0.02px light at every width from 1500 up — 333.59 against the reference's 333.61. Solved as an interval rather than guessed. To floor to 287.265625 at 1240 the fraction must lie in [0.23166583, 0.23167843]; to floor to 333.609375 at 1440 it must lie in [0.23167318, 0.23168403]. The intersection is [0.23167318, 0.23167843] and 0.231667 sits below it. 23.1676% is inside, and is exact against the reference at 1388, 1400, 1440, 1500, 1550, 1599, 1600, 1640, 1700, 1800, 1920, 2200 and 2560. */ width: 23.1676%; min-width: 275px; margin-bottom: 0; } } /* -- the paragraph measure ------------------------------------------------ The reference narrows the lead in two steps as the column grows, so the line length stays readable while the headline keeps the full width. Measured: full width below 840; 486.83 of 589 @1024; 545.75 of 952.73 @1440. Both expressed against the text column they sit in. -------------------------------------------------------------------------- */ /* Walked either side: 836/838/839 keep the full column (481px at 836), 840 narrows to 400.16. The step is at 840. */ @media (min-width: 840px) { .br-claims__lead { max-width: calc(83.3333% - 4px); } } @media (min-width: 1160px) { .br-claims__lead { max-width: calc(58.3333% - 10px); } /* The heading shares its paragraph's column — same declaration, deliberately. Harmonising the heading SIZE down to the section scale made it the seventh identical peer, which was right, but it left the MEASURE uncapped: it set as a single ~798px line across the 953px grid and ran over the photograph, while broker, renewal, cover and switching all wrap their headings two-up inside ~546px. Claims was the only two-column section whose heading did not sit on its own column, and that is what made the block read loose against the three sections directly beneath it. */ .br-claims__heading { max-width: calc(58.3333% - 10px); } /* Measured: the 16px tail below the strip goes to 0 at exactly 1160 — the same width the paragraph measure steps at. */ .br-claims { padding-bottom: 0; } } /* ========================================================================== 2. THE THREE-POINT STRIP Measured: stacked with 48px between items below 768; three equal columns from 768 up, 48px gutters until 992 and 64px above it. ========================================================================== */ .br-claims__list { display: flex; flex-direction: column; gap: var(--br-space-9); /* 48 */ } .br-claims__item { flex: 1 1 0; min-width: 0; } @media (min-width: 768px) { .br-claims__list { flex-direction: row; } } @media (min-width: 992px) { .br-claims__list { gap: var(--br-space-11); } /* 64 */ } /* -- icon in its wash circle --------------------------------------------- Measured: 64px circle / 24px glyph below 992, 72px / 32px above. Fill is the 8% ink wash; the glyph is body ink (#454745), NOT heading ink — the shared icon-circle defaults to heading ink, so it is re-pointed here. -------------------------------------------------------------------------- */ /* Two class names deep on purpose. .br-icon-circle--filled in base.css also sets width/height (to 72px) and lands on the same (0,1,0) specificity, so a single-class selector here only wins because this file is linked after base.css. Any change to load order — an inline critical-CSS extraction, a future @layer wrapper, a different concatenation order — would silently make every circle 72px at phone widths and break the 430/768 match. Specificity is the thing that should decide this, not link order. */ .br-claims .br-claims__icon { width: var(--br-claims-circle); height: var(--br-claims-circle); margin-bottom: var(--br-space-4); /* measured 16px */ color: var(--br-text); } .br-claims__icon > svg { width: var(--br-claims-glyph); height: var(--br-claims-glyph); fill: none; stroke: currentColor; stroke-width: var(--br-claims-stroke); /* ROUND, and this was measured rather than reasoned. The obvious argument says square: the reference's glyphs are filled paths, so in principle every terminal is a hard 90-degree corner. Held against the render, that argument is wrong here. Scoring each glyph against the reference at 1440 @2x, differing sub-pixels inside the glyph box: terminal padlock document bank round 11 19 6 square 11 19 14 butt 11 21 53 The bank's lintel and plinth ends are visibly ROUNDED in the reference — square makes that glyph more than twice as wrong — and the padlock and document do not care either way, because their stroke ends all terminate underneath another stroke. The terminals were never the cause of those 11 and 19. Both were their BODIES: the reference draws each lock body square across the top and rounded along the bottom, which a uniform rx cannot do. Redrawing them as paths (see the fragment) takes the padlock to 0 and the document to 8, and leaves 14 differing sub-pixels in the whole section — down from 36 on round terminals and 44 on square. linejoin stays round: the bank apex matches with zero diff either way. */ stroke-linecap: round; stroke-linejoin: round; } /* Keyholes and the tab on the policy document are solid, not drawn. */ .br-claims__icon > svg [data-fill] { fill: currentColor; stroke: none; } @media (min-width: 992px) { .br-claims { --br-claims-circle: var(--br-icon-circle-lg); /* 72 */ --br-claims-glyph: 32px; /* measured glyph box */ } } .br-claims__copy { margin: 0; font-weight: var(--br-weight-semibold); /* measured 600 */ color: var(--br-text); } /* ========================================================================== 2b. THE REFERENCE'S COMPRESSED MODE AT 320px AND BELOW Walked either side: 320 is compressed, 321 is not. The reference tightens every vertical gap in the section — photo-to-copy 32 -> 16, copy-to-strip 48 -> 24, heading 32 -> 16, paragraph-to-button 56 -> 28, icon-to-caption 16 -> 8, item-to-item 48 -> 24, and the tail below the strip 16 -> 8. All of that is reproduced. The ONE thing not reproduced is the button: the reference also drops it to 34px tall (4px/12px padding), and 34px fails the 44px minimum touch target (WCAG 2.5.5 / 2.5.8) on the one class of device this width describes. We hold 48px, so the section runs 14px taller than the reference at 320 and is otherwise identical. Every width from 321 up is reference-exact. EVERY SELECTOR IN THIS BLOCK IS DOUBLED ON PURPOSE — do not "simplify" it. Each rule here overrides a base rule for the same element earlier in this same file, and each of those base rules is one class long. Written singly these overrides tie on specificity and win only because they appear later. That was not a theoretical risk: `.br-claims__icon` here tied against `.br-claims .br-claims__icon` above (which is doubled for its own reason — see the note there) and LOST, silently. The 320px icon gap stayed at 16px instead of 8, drifting 8px per item, and the section rendered 38px taller than the reference: 24px of accumulated icon gap plus the 14px of deliberate button height. Measured captions were 629.39/781.39/933.39 against the reference's 607.39/751.39/895.39. Doubling every selector here takes them all to (0,2,0) so specificity — not source order — decides the cascade. This survives an @layer wrapper, a critical-CSS extraction that inlines base.css after this file, or any concatenation order. `.br-claims` doubles onto itself (`.br-claims.br-claims`) since it is the section element, not a descendant. Verified after the fix: captions at 621.39/765.39/909.39 — the reference plus the 14px intentional button delta, and nothing else. ========================================================================== */ @media (max-width: 320px) { .br-claims .br-claims__row { margin-bottom: var(--br-space-6); } /* 48 -> 24 */ .br-claims .br-claims__figure { margin-bottom: var(--br-space-4); } /* 32 -> 16 */ .br-claims .br-claims__heading { margin-bottom: var(--br-space-4); } /* 32 -> 16 */ .br-claims .br-claims__lead { margin-bottom: 28px; } /* 56 -> 28, no token at 28 */ .br-claims .br-claims__icon { margin-bottom: var(--br-space-2); } /* 16 -> 8 */ .br-claims .br-claims__list { gap: var(--br-space-6); } /* 48 -> 24 */ .br-claims.br-claims { padding-bottom: var(--br-space-2); } /* tail 16 -> 8 */ }