/* ========================================================================== Section: Built for operational industries (#industries) -------------------------------------------------------------------------- Depends on tokens.css + base.css. Everything below was measured off the signed-off reference at 320/360/390/430/480/576/768/992/1024/1200/1440/1600/1920. The block turned out to be built on ONE number — the fluid unit --br-u (28.1539px @1440) — so almost every value here is a --br-flow-* step rather than a literal: block radius 4u/3 = 37.5385 @1440 block padding-block 8u/3 = 75.0769 @1440 block padding-inline u/2 -> u -> 4u/3 -> 2u (steps at 480 / 768 / 1440) section edge -> block 4u/3 = 37.5385 @1440 gap between the two content groups 2u/3 = 18.7693 @1440 emblem -> heading 4u/3 = 37.5385 @1440 copy -> CTAs 4u/3 = 37.5385 @1440 gap between CTAs u/2 = 14.0769 @1440 section rhythm 2u = 56.3076 @1440 Type and controls come straight from the shared scale — .br-display-md, .br-lead and .br-btn already land on the reference numbers exactly, so this file adds only what they don't carry: the lead's 600 weight, the heading's declared 900, and the heading's long-token guard. VERIFIED — every viewport width from 320 to 1920 inclusive, 1601 of them, each compared against the reference on a freshly settled layout: heading x offset mean 0.0000px, p95 0.0000px, worst 0.0160px (1/64, the smallest distance the engine can express) heading line breaks 1601/1601 identical, on the same words lead line breaks 1601/1601 identical, on the same words CTA row-vs-stack 1601/1601 identical, including the reference's non-monotonic flip (side-by-side, stacked, then side-by-side again as the viewport grows) section height 1601/1601 within 0.05px, except 320 — see below horizontal overflow never, at any width, at any root font size And on rasterised pixels, comparing the dark card device-pixel by device- pixel with the two renders phase-aligned to the same fractional page y: 360 / 390 / 430 / 1024 / 1440 0.000% — pixel-identical 768 0.008% 1920 0.080% 320 entirely the deliberate button deviation below; emblem, heading and copy are pixel-identical there too The 768 and 1920 residues are 18 widths in 1601 where the reference's own spacing arithmetic lands on the far side of a 1/64px layout tick from ours (its card padding reads 59.9999 where ours reads 60.0000). It is not reproducible: every algebraically identical way of writing 2u gives the same float, and a hand-tuned epsilon merely moves which widths are affected — it fixed 7 and broke none, but left 12, and would silently become wrong if --br-u is ever retuned. Documented rather than papered over. Below 768 there is no residue at all: every width is ink-identical. DELIBERATE DEVIATION, one only, at <=320px: the reference drops both CTAs to a 34px-tall compact size there. That is under the 44px minimum touch target, so ours stay 48px. It costs 28px of section height at 320 and nothing at any other width. Everything above the buttons is pixel-identical at 320. ========================================================================== */ /* -------------------------------------------------------------------------- 1. SECTION RHYTHM Two separate gaps, and they behave differently — worth spelling out, because getting it wrong costs 37.5px of air on assembly and is invisible in a section preview: · 56.3076 @1440 between this section and its neighbours. Measured as 56.3 total, NOT 112.6, so the two sections' gaps collapse into one — that is margin behaviour, so it is margin. · 37.5385 @1440 between the section edge and the dark block. This one must NOT collapse away, so it is padding on the section rather than margin on the block. As margin it would collapse straight out through .br-container (which has no padding or border of its own) and swallow itself into the 56.3 above, leaving the block sitting 37.5px too high. -------------------------------------------------------------------------- */ .br-industries { margin-block: var(--br-section-y); padding-block: var(--br-flow-md); } /* -------------------------------------------------------------------------- 2. THE DARK BLOCK Measured @1440: background #1f1902, radius 37.5385, padding 75.0769 / 56.3076, body colour #e8ebe6. The colour flip is handled by .br-on-dark in the markup, which also swaps the focus ring to gold — an ink ring on an ink surface is an invisible focus ring. -------------------------------------------------------------------------- */ .br-industries__surface { background: var(--br-bg-dark); border-radius: var(--br-radius-xl); padding-block: calc(var(--br-flow-md) * 2); padding-inline: var(--br-flow-2xs); } /* Measured padding-inline steps. The reference changes this four times and nothing else about the block, so these are the section's only breakpoints that exist purely for the frame. */ @media (min-width: 480px) { .br-industries__surface { padding-inline: var(--br-flow-sm); } } @media (min-width: 768px) { .br-industries__surface { padding-inline: var(--br-flow-md); } } @media (min-width: 1440px) { .br-industries__surface { padding-inline: var(--br-flow-lg); } } /* -------------------------------------------------------------------------- 3. THE CONTENT STACK Emblem + heading form one group, copy + CTAs another. Measured gap between the two blocks: 2u/3 at every width. The reference sets these two blocks on a 12-column track — heading block spans 10 columns at an offset of 1, copy block 8 at an offset of 2. Nothing else in this section needs a grid, so the track is not rebuilt; its arithmetic is reproduced directly on the two blocks (see below). --_grid-gap is that track's column gap. It is the only reason the widths aren't flat percentages, and it steps twice, at 768 and at 992 — both measured off the reference, and 992 is a real reference breakpoint that the primary button's width floor keys off too. -------------------------------------------------------------------------- */ .br-industries__content { --_grid-gap: var(--br-flow-2xs); display: flex; flex-direction: column; align-items: center; gap: var(--br-flow-xs); text-align: center; } /* Full width below 768 (from 768 the rule below takes over). The -1px is measured, not a fudge: the reference's track loses exactly 1px to its own column rounding at every width, and without it words tip across the wrap boundary at a handful of widths (353, 444, 564, 595 …) and the block comes out a line short. WHICH EDGE the pixel comes off matters as much as the pixel itself. The reference takes it off the RIGHT, so the text still starts exactly where the padding ends. Centring a box that is 1px narrow splits the shortfall 0.5/0.5, which put the whole stack half a pixel right of the reference at every width and re-rasterised every glyph in the section — 2.28% of the card's pixels differed by >8, and shifting the render one device pixel left dropped that to 0.63%, which is the signature of a pure phase error. margin-right gives the pixel back to the right edge: flex centring works on the margin box, so the content box lands where the reference's does, and the free space either side is zero rather than half a pixel. Heading x is then exact at 320 and 390 (28.00 and 28.11, matching), and the dark card is pixel-identical to the reference at 360 / 390 / 430. */ .br-industries__head, .br-industries__body { width: calc(100% - 1px); margin-right: 1px; } /* The copy column is the query container for the CTA row. See section 6 for why the CTAs key off this width and not the viewport. */ .br-industries__body { container-type: inline-size; container-name: br-industries-copy; } /* From 768 the two blocks are inset rather than full width, and the inset is SET, not centred. Centring is the obvious way to write this and it is 0.01px wrong: the shortfall gets divided by two, which lands the box between two of the 1/64px ticks the engine actually lays out on, and a box that lands on the wrong tick re-rasterises every glyph inside it. So both blocks reproduce the reference's own column arithmetic instead. A 12-column track of width R with gap G has a column of (R - 11G)/12, so: block of n columns width = n(R - 11G)/12 + (n-1)G offset of k columns inset = k(R - 11G)/12 + kG = kR/12 + kG/12 which reduces, for the 10-column head at offset 1 and the 8-column body at offset 2, to the four values below. Checked against the reference at 768 / 900 / 1024 / 1200 / 1440 / 1600 / 1920: every one agrees to within 0.0154px, i.e. under one 1/64px layout unit, and both engines then floor to the SAME tick — head inset 53.0625 / 68.3125 / 96.2813 / 112.5 at 768 / 1024 / 1440 / 1920, matched exactly. margin-inline-end: auto is what holds the block at that inset: an auto margin on the cross axis eats the leftover space and switches off the parent's centring, which is precisely the reference's margin-left-and-let- the-rest-fall-right behaviour. The -1px stays in the width, so the pixel is still shaved off the right edge. */ @media (min-width: 768px) { .br-industries__content { --_grid-gap: var(--br-flow-xs); } /* 10 of 12 columns at an offset of 1. */ .br-industries__head { width: calc(83.3333333% - (var(--_grid-gap) / 6) - 1px); margin-inline: calc(8.3333333% + (var(--_grid-gap) / 12)) auto; } /* 8 of 12 columns at an offset of 2. */ .br-industries__body { width: calc(66.6666667% - (var(--_grid-gap) / 3) - 1px); margin-inline: calc(16.6666667% + (var(--_grid-gap) / 6)) auto; } } /* The gap step is at 992, NOT 1024 — measured off the reference row, which goes 17.618px at 991 to 26.4308px at 992 (2u/3 to u, continuous in u). It was set at 1024 here for two rounds, which left the 992-1023 band with a head 1.47px too wide and a copy column 2.93px too wide, i.e. the heading starting 0.73px left of the reference. It is the same 992 the primary button's 200px floor keys off, in section 6 — one reference breakpoint, two effects. */ @media (min-width: 992px) { .br-industries__content { --_grid-gap: var(--br-flow-sm); } } /* -------------------------------------------------------------------------- 4. EMBLEM Measured: 72px circle, rgba(255,255,255,.1) fill, no ring, holding a 32px gold icon, with 4u/3 clear beneath it. .br-icon-circle--filled already carries the circle; it defaults to inline-flex, which would drop half a line of leading under it, so it is centred as a block here instead. The briefcase is redrawn on the shared 24x24 grid. Stroke is 2 rather than the set's usual 1.75 because that is the weight measured off the reference glyph, and at 32px the difference is visible side by side. -------------------------------------------------------------------------- */ .br-industries__emblem { display: flex; margin: 0 auto var(--br-flow-md); } .br-industries__emblem > svg { width: var(--br-icon-lg); height: var(--br-icon-lg); } /* -------------------------------------------------------------------------- 5. HEADING + COPY .br-display-md is already 58.5143 / 0.85 / gold @1440, and .br-lead is already 20 / 28 / +0.005em / #e8ebe6. The reference sets the paragraph at 600 rather than the body default, which is the one value the shared scale doesn't carry. -------------------------------------------------------------------------- */ .br-industries__lead { font-weight: var(--br-weight-semibold); } /* NO local weight rule here any more. This section used to restate the reference's declared 900 on its own h2, plus font-synthesis-weight: none as the belt to that brace, because the shared --br-display-weight said 800. In round 5 the shared token was corrected to 900 and the synthesis guard moved onto the display utility in base.css, so every display heading on the page gets both — not just the two sections that happened to notice. The reasoning that used to live here is on --br-display-weight and --br-weight-black in tokens.css; nothing about this heading has changed. */ /* Long-token guard, the same one the CTAs get in section 6 and for the same reason. .br-display-md deliberately opts OUT of the base heading's break-word — display type is meant to bleed past its measure when a single word is wider than the line, and the testimonials heading depends on that. Inside a dark card on a white page it is not a bleed, it is an escape: at a 32px root font size this heading renders at 64px and its ink ran 66px past the card's right edge, giving the whole document a horizontal scrollbar (docW 424 against a 390 viewport, and the same at 320). One long compound in the copy did it at every width. The reference fails identically, so this is an unclaimed win rather than a fidelity risk. `break-word` rather than the CTAs' `anywhere`: `anywhere` also lets the heading set a 1-character min-content width, which would change how the flex parent sizes it. `break-word` only breaks a word that has nowhere else to go, so ordinary text still breaks on exactly the reference's words — verified identical line counts at every width from 320 to 1920. The lead is a

and already carries this from base.css; it is named here so the pair cannot drift apart in a later edit. */ .br-industries__content h2, .br-industries__lead { overflow-wrap: break-word; } /* -------------------------------------------------------------------------- 6. CTAS Measured @1440: 4u/3 above, u/2 between, centred, primary pinned to its 200px minimum, ghost sized to its label. STACK RULE — this one is worth reading before "simplifying" it. The reference does NOT switch on the viewport. It switches on how wide the copy column happens to be, and that width is not monotonic: it is the full panel below 768, then drops hard to 8 of 12 columns at 768, then climbs again. So the same page stacks at 480, goes side-by-side at 540–767, stacks again at 768–826, and goes side-by-side from 827 up. Walked the flip on two separate bands: it lands between a 444.87px column (stacked) and a 445.41px column (side by side) both times, i.e. 445px. Twelve sampled widths from 320 to 1440 all agree with that one number. A viewport media query cannot express that without three hand-tuned ranges that break the moment the gutters move, so this is a container query on the copy column — which is what the shape of the rule actually is. Where container queries are unsupported the CTAs simply stay stacked and full width: taller, still correct, still tappable. The 200px floor on the primary is measured to start at 992, not to apply always, so it is set here rather than inherited from .br-btn--primary. DELIBERATE DEVIATION at <=320px: the reference drops both buttons to a 34px-tall compact size there. 34px is under the 44px minimum touch target, so ours stay 48px. It costs 28px of height at 320px and nothing above it. -------------------------------------------------------------------------- */ .br-industries__actions { display: flex; flex-direction: column; gap: var(--br-flow-2xs); margin-top: var(--br-flow-md); } /* .br-btn is white-space:nowrap, which is right for a pill sitting in open space but wrong for one constrained to the width of this card. With the shipped labels nothing wraps at any width, so this changes nothing you can see today — card height is identical at 320/360/390/480/540/768/827/992/ 1440/1920 before and after (_r5-wrap.mjs). It is a resilience fix: with a longer label the nowrap version painted the text outside its own padding box, and by 360px outside the dark card entirely, onto the white page — at 320px it started at a negative x and gave the document a horizontal scrollbar. The reference has the same flaw; this is one of the few places we can be straightforwardly better than it for one line of CSS. `anywhere` rather than `break-word` so a single unbreakable token (a long URL, a hyphen-free compound) also stays inside the box instead of setting the flex item's min-content width and blowing out the card. */ .br-industries__actions > .br-btn { width: 100%; min-width: 0; white-space: normal; overflow-wrap: anywhere; } @container br-industries-copy (min-width: 445px) { .br-industries__actions { flex-direction: row; flex-wrap: wrap; justify-content: center; } .br-industries__actions > .br-btn { width: auto; } } @media (min-width: 992px) { .br-industries__actions > .br-btn--primary { min-width: var(--br-btn-min-w); } }