starts. MEASURED, at 1440x900 on this build: utility bar 44.4px + header 76px = 120.4px, rounded UP to 121 so the promise ("both panes, no scroll") is kept by a fraction rather than missed by one. Below 992 the split stacks and this is never read. Not derivable from a token: --br-nav-h-desktop covers the header only and the utility bar has no token — its height is the sum of its own padding and line-height in css/sections/nav.css. A wrong guess here is visible (a scrollbar on the first screen), which is why it is measured. */ --brv-chrome: 121px; /* The trough between the two panes. Half of it is paid by each pane, so the two content columns land exactly where .br-container's columns land on every section below — the split reads as full-bleed while its type still sits on the page grid. --br-flow-lg is the system's section interval. */ --brv-gap: var(--br-flow-lg); } /* ========================================================================== 1. THE SPLIT ========================================================================== */ /* Below 992 the two panes stack, ink first. That order is the DOM order — no grid `order` anywhere in this file — so the visual, the keyboard and the screen-reader sequences are the same sequence, and a reader who would rather ring than type meets the number before the six fields. */ .brv-split { display: grid; grid-template-columns: minmax(0, 1fr); } .brv-split__pane { display: flex; flex-direction: column; justify-content: center; padding-block: var(--br-flow-lg); padding-inline: var(--br-gutter); min-inline-size: 0; } .brv-split__inner { inline-size: 100%; max-inline-size: var(--br-container-max); margin-inline: auto; } @media (min-width: 992px) { .brv-split { grid-template-columns: repeat(2, minmax(0, 1fr)); /* The promise of this direction, stated in CSS: at the judged width both panes are whole without scrolling. svh, not vh, because on a phone-sized window vh is the URL-bar-expanded height and the pane would be taller than the screen it is meant to fit. */ min-block-size: calc(100svh - var(--brv-chrome)); } .brv-split__pane { padding-block: var(--br-flow-md); } /* Each inner column hugs the trough and is capped at half the container, less its half of the trough; the pane's own gutter padding is the floor on the outside. The result lines up with .br-container at every width from 992 to 1920 — verified by measuring the left edge of the h1 against the left edge of the "Find Us" heading below it. */ /* THE RIGHT INSET IS NOT OPTIONAL, and the reason is that this pane's right edge is a colour boundary rather than empty page. The intent above was a trough held by the inner column's right margin. It never applied: --br-container-max is 1440, so at a 1440 window the cap (720 - gap/2) is wider than the space the pane actually has after its 100px left gutter, the inner settles at 620, and `margin-inline: auto X` has nothing left to distribute. MEASURED: inner ran 100 -> 720, and 720 is exactly where dark becomes white. Every element in the pane therefore ended flush against that seam. The h1 wraps early enough to hide it; the pane foot, whose jump link is pushed right, put "Offices and maps" hard against the colour change and it read as clipped text. So the pane holds the inset itself, where it cannot be competed away by a cap that is too generous. Left gutter untouched, so the h1 still lines up with "Find Us" below it — the alignment the note above was verified on. */ .brv-split__pane--reach { padding-inline: var(--br-gutter) var(--brv-gap); } .brv-split__pane--reach > .brv-split__inner { max-inline-size: calc(var(--br-container-max) / 2 - var(--brv-gap) / 2); margin-inline-start: auto; } .brv-split__pane--form { padding-inline: 0 var(--br-gutter); } .brv-split__pane--form > .brv-split__inner { max-inline-size: calc(var(--br-container-max) / 2 - var(--brv-gap) / 2); margin-inline: calc(var(--brv-gap) / 2) auto; } } /* SHORT DESKTOP WINDOWS. A page whose whole argument is "both panes, no scroll" has to know how tall the window is, not just how wide. MEASURED at 1280x800 — an ordinary laptop — before this rule: the pane content ran to y=832 against a 800px fold, so the last line of fine print under the submit was cut. Three small reclaims, none of which touch a control's target size or a word of copy: the section interval drops one step (37.5 -> 28.2), the message box goes from four rows to three (it is still resizable and still scrolls), and the lede's bottom margin takes the same step down. Together they are worth ~40px, which is the difference. Gated on height, so nothing changes at 900 and above — where the pane already fits with room — and nothing changes below 992, where the panes are stacked and there is no fold to fit inside. */ @media (min-width: 992px) and (max-height: 850px) { .brv-split__pane { padding-block: var(--br-flow-sm); } .brv-split__pane--form .br-textarea { min-block-size: 96px; } .brv-form__lead { margin-block-end: var(--br-space-3); } } /* ========================================================================== 2. THE INK PANE — the man ========================================================================== */ /* .br-on-dark points --br-text-heading at gold. Correct for a 20px section heading on an ink slab; wrong for a 46px display h1, which would put more gold on this page than every other page has in total. Gold appears exactly twice on the first screen — the eyebrow and the call button — and both are things you can act on. --br-text-strong is white inside .br-on-dark. */ .brv-reach__title { margin: 0; color: var(--br-text-strong); text-wrap: balance; } .brv-reach__lead { margin: var(--br-flow-2xs) 0 0; max-inline-size: 34ch; color: var(--br-text); text-wrap: pretty; } /* -- the call block ------------------------------------------------------ */ .brv-call { margin-block-start: var(--br-flow-md); } .brv-call__who { margin: 0 0 var(--br-space-3); font-size: var(--br-small-size); line-height: var(--br-small-lh); font-weight: var(--br-weight-semibold); letter-spacing: var(--br-small-ls); color: var(--br-text-muted); } /* THE ONE BIG CONTROL. --br-btn-h-lg is the system's tallest measured button (56px) and this is the page's primary action, so it takes it. It is a block-level pill up to 480 so a thumb cannot miss it, and shrinks to its natural width above that rather than stretching a 300px label across a 592px column. */ .brv-call__cta { display: flex; inline-size: 100%; min-block-size: var(--br-btn-h-lg); font-size: var(--br-h4-size); letter-spacing: var(--br-ui-ls); } @media (min-width: 480px) { .brv-call__cta { display: inline-flex; inline-size: auto; } } .brv-glyph { flex: none; } /* -- the rest of the ways to reach him ----------------------------------- */ .brv-reach__list { margin: var(--br-flow-sm) 0 0; padding: 0; list-style: none; display: grid; gap: var(--br-space-1); } .brv-reach__item { display: flex; align-items: center; gap: var(--br-space-3); min-block-size: var(--br-tap-min); font-size: var(--br-body-size); line-height: var(--br-body-lh); letter-spacing: var(--br-body-ls); color: var(--br-text); } .brv-reach__glyph { flex: none; display: inline-flex; color: var(--br-text-accent); } /* The whole row is the target, not the glyph run of the phone number: --br-tap-min tall, and the flex parent stretches the anchor to it. */ .brv-reach__link { display: inline-flex; align-items: center; min-block-size: var(--br-tap-min); color: var(--br-text-strong); font-weight: var(--br-weight-medium); 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); } .brv-reach__link:hover { color: var(--br-gold-tint); text-decoration-thickness: 2px; } .brv-reach__text { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--br-space-2); } /* "Open Hours" is a label, not a heading — the shipped page sets the same words as an

, which is why its outline reads as eleven siblings. / .brv-reachlabel { font-size: var(--br-small-size); font-weight: var(--br-weight-semibold); letter-spacing: var(--br-small-ls); color: var(--br-text-muted); } / -- pane foot ------------------------------------------------------------ / .brv-reachfoot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--br-space-2) var(--br-flow-sm); margin-block-start: var(--br-flow-md); padding-block-start: var(--br-flow-xs); border-block-start: 1px solid var(--br-border); } .brv-marks { display: flex; flex-wrap: wrap; align-items: center; gap: var(--br-space-2) var(--br-flow-sm); margin: 0; padding: 0; list-style: none; } .brv-mark { display: inline-flex; align-items: center; gap: var(--br-space-2); min-block-size: var(--br-tap-min); 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); 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); } .brv-mark:hover { color: var(--br-gold-tint); } .brv-mark > svg { flex: none; color: var(--br-text-accent); } .brv-mark--jump { margin-inline-start: auto; } / ========================================================================== 3. THE WHITE PANE — the form The enquiry component ships inside .br-card.br-card--form: 32px of padding, a 24px radius, a 64px shadow and a hairline ring. All four exist to lift a white card off a white page. Here the pane edge does that — the ink slab is the card's other side — so the chrome is stood down and the form sits directly on the paper. It buys 58px of vertical space, which is most of what keeps the submit button above the fold at 1440x900. The COMPONENT is untouched: same function, same controls, same labels, same focus ring, same 16px-on-mobile sizing. This turns off decoration that has nothing left to do. ========================================================================== / .brv-splitpane--form .br-enquiry { inline-size: 100%; } .brv-splitpane--form .br-enquiryform { max-inline-size: none; margin-inline: 0; padding: 0; background: transparent; border-radius: 0; box-shadow: none; } .brv-formtitle { margin: 0; font-size: var(--br-h3-size); line-height: var(--br-h3-lh); letter-spacing: var(--br-h3-ls); font-weight: var(--br-heading-weight); color: var(--br-text-heading); } .brv-formlead { margin: var(--br-space-2) 0 var(--br-flow-xs); font-size: var(--br-body-size); line-height: var(--br-body-lh); letter-spacing: var(--br-body-ls); color: var(--br-text); text-wrap: pretty; } / AAA, and it costs nothing. --br-neutral-600 is 5.30:1 on white — AA, not AAA — and it is used here for two lines of real instruction: the asterisk legend and the privacy note under the button. --br-neutral-700 is the body-copy token at 9.37:1 and the type stays 12.5px, so the register is unchanged and the fine print is simply readable. Scoped to this page. / .brv-split-page .br-enquirylegend, .brv-split-page .br-enquirynote { color: var(--br-text); } / The submit is the pane's own primary, so it takes the canonical 48px button at full width rather than the compact one. (.br-btn--block already does this; restated here only to hold the top margin, which the component does not set because in a card the field gap did the job.) / .brv-splitpane--form .br-enquiryform button[type="submit"] { margin-block-start: var(--br-space-2); } / -- validation errors, under their own field ----------------------------- / / base.css §9 already draws .br-field-error and the aria-invalid border. This adds the top gap only, because the message is inserted directly after the control rather than at the end of the field wrapper. / .brv-error { margin-block-start: var(--br-space-2); } / The one state the script can reach that has no design elsewhere: a POST to a configured endpoint that failed. Same size and place as the note it replaces; ink rather than grey, because it is now an instruction. / .brv-send-failed { color: var(--br-text-strong); font-weight: var(--br-weight-semibold); } / ========================================================================== 4. THE SENT STATE ========================================================================== / .brv-sent { max-inline-size: 100%; } .brv-sent:focus-visible { outline: 2px solid var(--br-focus); outline-offset: var(--br-space-3); } .brv-senttitle { margin: 0; font-size: var(--br-h3-size); line-height: var(--br-h3-lh); letter-spacing: var(--br-h3-ls); font-weight: var(--br-heading-weight); color: var(--br-text-heading); text-wrap: pretty; } .brv-sentnote { margin: var(--br-space-3) 0 0; font-size: var(--br-body-size); line-height: var(--br-body-lh); letter-spacing: var(--br-body-ls); color: var(--br-text); } .brv-sentecho { margin-block-start: var(--br-flow-sm); padding: var(--br-flow-xs) var(--br-flow-sm); border-radius: var(--br-radius-md); background: var(--br-gold-wash); } .brv-sentecho-label { margin: 0 0 var(--br-space-3); 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); } / A description list, because that is what "field: what you typed" is. Two columns above 480 so a six-row echo does not become twelve lines. / .brv-sentlist { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--br-space-1) var(--br-space-4); font-size: var(--br-body-sm-size); line-height: var(--br-body-sm-lh); letter-spacing: var(--br-body-sm-ls); } .brv-sentlist > dt { color: var(--br-text); font-weight: var(--br-weight-semibold); } .brv-sentlist > dd { margin: 0 0 var(--br-space-2); color: var(--br-text-strong); overflow-wrap: anywhere; } @media (min-width: 480px) { .brv-sentlist { grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); } .brv-sentlist > dt { grid-column: 1; } .brv-sentlist > dd { grid-column: 2; margin-block-end: var(--br-space-1); } } .brv-sentactions { display: flex; flex-wrap: wrap; gap: var(--br-space-3); margin-block-start: var(--br-flow-sm); } .brv-sentalt { margin: var(--br-flow-xs) 0 0; font-size: 12.5px; line-height: 1.5; color: var(--br-text); } .brv-sentalt-link { color: inherit; } / ========================================================================== 5. THE BANDS BELOW THE SPLIT ========================================================================== / / A hairline between bands, not a tinted fill. MEASURED, and this is why: the first draft put the FAQ on --br-bg-band (#ededeb). The gold eyebrow that heads it, --br-gold-ink #8a6d00, is 4.92:1 on white and drops to 4.20:1 on that grey — an outright AA failure at 11.5px, introduced by the surface rather than by the colour. The band could keep its fill and darken that one eyebrow, but then the page would run two eyebrow colours, and the eyebrow is a signed-off component on 107 pages. A hairline separates the sections for free and every eyebrow on the page stays the colour the design language measured. / .brv-band { padding-block: var(--br-section-y); } .brv-band + .brv-band { border-block-start: 1px solid var(--br-border); } .brv-bandhead { max-inline-size: var(--br-measure-wide); } .brv-bandtitle { margin: 0; font-size: var(--br-h2-size); line-height: var(--br-h2-lh); letter-spacing: var(--br-h2-ls); font-weight: var(--br-heading-weight); color: var(--br-text-heading); text-wrap: balance; } .brv-bandlead { margin: var(--br-flow-2xs) 0 0; max-inline-size: var(--br-measure-prose); font-size: var(--br-body-size); line-height: var(--br-body-lh); letter-spacing: var(--br-body-ls); color: var(--br-text); text-wrap: pretty; } / The lifted blocks arrive with the block rhythm they had in a prose column. Here the section owns the rhythm, so their own outer margins come off and one interval is set from the head. / .brv-band > .br-container > .br-prosefaq, .brv-band > .br-container > .br-proseplaces, .brv-band > .br-container > .br-prosecta-band { margin-block: var(--br-flow-md) 0; } .brv-prefer { margin: 0 0 var(--br-flow-sm); max-inline-size: var(--br-measure-prose); font-size: var(--br-body-size); line-height: var(--br-body-lh); letter-spacing: var(--br-body-ls); color: var(--br-text); } / -- the offices ---------------------------------------------------------- / .brv-officeslabel { margin: var(--br-flow-md) 0 var(--br-flow-2xs); 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); } / minmax(min(20rem, 100%), 1fr), not minmax(20rem, 1fr). The second form is what overflows the shipped page by 16px at 320: a 320px track inside a 288px column cannot shrink, so the grid is wider than the screen and the whole document scrolls sideways. min() lets the track collapse to the column when the column is the smaller of the two. / .brv-offices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: var(--br-flow-md); } .brv-office { display: flex; flex-direction: column; align-items: start; gap: var(--br-space-2); min-inline-size: 0; padding: var(--br-flow-xs) var(--br-flow-sm); border-radius: var(--br-radius-lg); background: var(--br-bg-surface); box-shadow: var(--br-ring-hairline); } .brv-officecity { margin: 0; font-size: var(--br-h3-size); line-height: var(--br-h3-lh); letter-spacing: var(--br-h3-ls); font-weight: var(--br-heading-weight); color: var(--br-text-heading); } / THE STREET ADDRESS.
because it is one, tappable through to his own Google Maps short link because that is what a visitor wants from it, and marked up as a PostalAddress in the JSON-LD build-site.mjs attaches to this page. Not italic — the UA default for
is, and an italic street address in this type would read as a quotation. / .brv-officeaddress { margin: 0; font-style: normal; font-size: var(--br-body-size); line-height: var(--br-body-lh); letter-spacing: var(--br-body-ls); } .brv-officeaddress-link { display: inline-flex; align-items: center; min-block-size: var(--br-tap-min); 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); } .brv-officeaddress-link:hover { color: var(--br-ink-hover); text-decoration-thickness: 2px; } .brv-officehours { 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); } .brv-officelink { display: inline-flex; align-items: center; min-block-size: var(--br-tap-min); 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); text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; border-radius: var(--br-radius-xs); } .brv-officelink:hover { color: var(--br-ink-hover); text-decoration-thickness: 2px; } / -- the maps, subordinate ------------------------------------------------ / / Closed by default, and that is the point: a lazy iframe inside a display:none subtree is never fetched, so this page loads no Google frames at all until a visitor asks for one. Most people want the address; the minority who are driving there get the map in one press. / / THE DISCLOSURE IS GONE. Both maps show. The
was defensible on its own terms — a map is a big rectangle and most people came for the address, not the aerial view — and it was wrong on the page. Two small maps sitting open read as "here are our two offices" in one glance; two "Show map" controls read as a page hiding something that costs nothing. The frame's rules below are all that survive, and the toggle, its chevron and its focus ring are deleted rather than left unused. / .brv-mapframe { overflow: hidden; border-radius: var(--br-radius-md); box-shadow: var(--br-ring-hairline); / FULL CARD WIDTH, FIXED SHORT HEIGHT — not an aspect ratio. aspect-ratio with a max-block-size does not do what it looks like it does: the height cap wins and the WIDTH shrinks to keep the ratio, so the map came out 300px wide inside a 577px card and read as a thumbnail somebody had forgotten to size. Stating the height directly and letting the width fill the card is what makes it a band across the card instead. Open by default it is on screen for everyone, so it stays the smaller of the two things in the card: the address is what people came for and the map confirms it. Short suits a street map anyway — a road and a corner, not a region. No token for the height: it is a measurement of a third-party rectangle, not a design measure. prose-sections.css caps the shipped map the same way. / inline-size: 100%; block-size: 200px; margin-block-start: var(--br-space-3); } .brv-mapframe > iframe { inline-size: 100%; block-size: 100%; display: block; border: 0; margin: 0; } / -- the area served ------------------------------------------------------ / .brv-served { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--br-space-2); margin: var(--br-flow-md) 0 0; font-size: var(--br-body-size); line-height: var(--br-body-lh); letter-spacing: var(--br-body-ls); color: var(--br-text); } / --br-text, not --br-text-muted. The muted token is 5.30:1 on white — AA, not AAA — and this label is the only thing that says what the list of states IS. Same 14px, same weight, 9.37:1. / .brv-servedlabel { font-size: var(--br-small-size); font-weight: var(--br-weight-semibold); letter-spacing: var(--br-small-ls); color: var(--br-text); } / ========================================================================== 6. THE FAQ AND THE PLACES, ONCE LIFTED OUT OF THE PROSE COLUMN ========================================================================== / / FOUR PHOTOGRAPHS IN ONE COLUMN IS 1,200px OF PHONE. The component stacks one-up below 560, which is right for a card you are meant to read and wrong for a four-item navigation strip at the very bottom of a contact page: measured at 390 it cost 1,187px, more than the offices and the FAQ put together. Two-up from 360, and the component's own 3-up and 4-up rules take over at 560 and 992 exactly as before. Nothing else changes — same cards, same images, same srcsets, same hairline. / @media (min-width: 360px) and (max-width: 559px) { .brv-band--places .br-proseplaces { grid-template-columns: repeat(2, minmax(0, 1fr)); } } / ========================================================================== 7. CHROME CORRECTIONS — page-scoped, deliberately not site-wide Every one of these is a 44px touch target the shipped chrome misses, and every one of them is shared with 107 other pages. They are corrected HERE, under .brv-split-page, because this is a variant being judged on a stated gate — not a licence to change the site's navigation on the way past. If the founder picks this direction, these move into nav.css and footer.css as one deliberate change with its own commit. Measured before: nav CTA 110x32, language toggle 36 tall, nav links 32, utility links 40, utility social 32x32, footer links 40, wordmark 123x33, and every item inside the Locations and Language menus 40 tall. ========================================================================== / .brv-split-page .br-navcta { min-height: var(--br-tap-min); } .brv-split-page .br-navlink, .brv-split-page .br-navlang-toggle, .brv-split-page .br-navmenu-item, .brv-split-page .br-utilitylink, .brv-split-page .br-footerlink { min-block-size: var(--br-tap-min); display: inline-flex; align-items: center; } / The wordmark is a link like any other and it is 33px tall, because that is the SVG's height. The anchor gets the floor; the image is untouched. / .brv-split-page .br-navlogo { min-block-size: var(--br-tap-min); display: inline-flex; align-items: center; } / The three social discs are icon-only, so they need width as well. / .brv-split-page .br-utilitysocial-link { min-inline-size: var(--br-tap-min); min-block-size: var(--br-tap-min); display: inline-flex; align-items: center; justify-content: center; } / ========================================================================== 8. PRINT — a contact page is a thing people print ========================================================================== / @media print { .brv-split { display: block; } .brv-splitpane--reach { background: none !important; color: #000 !important; } .brv-splitpane--reach { color: #000 !important; } .brv-map, .brv-sent { display: none; } }