/* ==========================================================================
   SITE CHROME — utility bar + header / navigation
   --------------------------------------------------------------------------
   Depends on tokens.css + base.css.

   Every number in the HEADER block was measured off the signed-off reference
   at 360 / 390 / 480 / 640 / 768 / 900 / 992 / 1024 / 1200 / 1440 / 1600 /
   1920. Anything the token scale already owns is used as a token; the handful
   of header-only measured constants are declared once, at the top, as scoped
   custom properties — same pattern the hero uses.

   The UTILITY BAR has no reference to measure against: the signed-off page
   has no such strip. Its numbers are ours, derived from the scale — 44px tall
   on a pointer, 40 on a tablet, 14/21.7 type, the 32px disc that tokens.css
   already calls "icon circle on dark".

   Deliberate departures from the reference, all recorded below:
     1. the navigation row carries SEVEN links, not four — Home, Insurance,
        Industries, Locations, About, Blogs, Contact — because that is what
        Warren's site carries and what our four were missing. The row's own
        content requirement went from 353px to 602px, which is what forced
        every band in this file to be re-cut; see DESKTOP ROW below,
     2. the language control moved out of the row and into the utility bar.
        See UTILITY BAR / LANGUAGE,
     3. below the desktop breakpoint there is a real navigation sheet — the
        reference drops all its primary links on small screens, which is not
        shippable,
     4. below 1200 every control carries an invisible hit area that takes it
        to 44px without moving a measured pixel: the quote pill, the language
        control, the wordmark, the links and the popover rows. The reference
        ships 32px tap targets; reproducing that number is fidelity, shipping
        it is not,
     5. the sheet ends in a shelf carrying the language switcher, the phone,
        the email address and the three social accounts — everything the
        utility bar carries, at a size a thumb can hit. The bar itself is not
        rendered below 600px,
     6. from 600px up the sheet stops being full-height and becomes a panel
        that hugs its content, with the page dimmed behind it. Seven links do
        not need 957px of white on a small tablet,
     7. the sheet's rows carry no chevron. `>` is the disclosure convention —
        it promises a child list — and every row that HAS a child list (the
        four cities) shows it inline instead.

   Verified against the reference element by element at 1440, 1024 and 992
   when the row was four links: every box landed within 0.02px in x, y, width
   and height. That comparison no longer applies — the row is a different row
   — but the type, the pill geometry, the hover plate, the timings and the
   wordmark are unchanged and still measure exactly.
   ========================================================================== */

/* base.css parks the skip link at z-index 999. This chrome sits at the
   measured 1050, so without this the link takes focus, animates into view,
   and is painted straight over by the bar — revealed to nobody. */
.br-skip-link { z-index: 1051; }

/* Raising it exposes a second problem: parked off-screen it still casts its
   drop shadow DOWN, which lands as a grey smudge across the logo. The pill
   only needs the shadow once it is on screen. */
.br-skip-link:not(:focus) { box-shadow: none; }

/* base.css's global focus rule lands after .br-skip-link and flattens its
   pill to the 2px default. The skip link is only ever rendered here, so the
   correction belongs here. */
.br-skip-link:focus-visible { border-radius: var(--br-radius-pill); }

/* ==========================================================================
   CHROME WRAPPER

   One element holding the utility bar and the header. It exists for a single
   reason: below the desktop breakpoint the navigation sheet is position:
   fixed and hangs at a known offset from the top of the viewport, so the
   chrome it hangs from has to be pinned there. With a utility bar above the
   header, the thing that must pin is BOTH of them.

   `--_chrome-h` is that offset, and it is the reason the utility bar's height
   is a declared constant rather than whatever its content happens to make it:
   the sheet's top edge and its height are both computed from it, and a sheet
   that starts 6px under the bar reads as a bug on every phone.
   ========================================================================== */

.br-chrome {
  /* Phones: no utility bar (see UTILITY BAR below), so the chrome is the
     header and nothing else. */
  --_chrome-h: var(--br-nav-h);

  /* ------------------------------------------------------------------------
     Constants shared by BOTH bars, declared on the element that contains
     both. They used to live on .br-nav, which was correct while every
     control did; the language control now sits in the utility bar and
     inherited nothing — the globe, "EN" and the chevron rendered with a 0
     gap and no padding, because --_lang-gap and --_lang-pad-y resolved to
     nothing at all. A custom property that two siblings both read belongs on
     their parent.
     ------------------------------------------------------------------------ */

  /* Measured on the language control + its popover. The control is 36px tall
     at every width in the reference. */
  --_lang-pad-y: 10px;
  --_lang-gap: 6px;
  --_lang-btn: 36px;
  --_menu-w: 180px;
  --_menu-radius: 14px;                     /* measured — 2px tighter than
                                               --br-radius-md, and nothing
                                               else in the system wants it */

  /* The AAA minimum target size. Ours, not measured: the reference ships
     32px and 40px controls on touch. */
  --_touch: 44px;
}

/* Only the widths that HAVE a sheet need pinning; from the desktop
   breakpoint up the row is the measured one — in flow, scrolls away with
   the page, exactly as the reference does. */
@media (max-width: 899.98px) {
  .br-chrome {
    position: sticky;
    top: 0;
    z-index: 1050;
  }
}

/* ==========================================================================
   UTILITY BAR

   A thin ink strip above the header carrying the phone, the email address,
   the language control and the three social accounts. Warren's site has this
   on every page; the signed-off reference does not, so nothing here is
   measured off it — the numbers come from the scale.

   .br-surface-dark paints it and .br-on-dark flips the token set, so the
   type, the hairline and the focus ring all invert with no colour declared
   in this file. Both are shared classes.

   HIS, AND WHY OURS IS NOT IT. His strip is 54px of pure black carrying two
   white strings on the left and three FILLED GOLD DISCS on the right, at
   40px each — the loudest objects anywhere above the fold, louder than his
   own wordmark and louder than his own "Start Your Quote". Gold on this site
   is rationed to the one thing we want pressed. Ours are 32px discs on the
   10%-white plate tokens.css already calls "icon circle on dark", and the
   gold is left for the quote pill 44px below them.
   ========================================================================== */

.br-utility {
  /* Ours. 44 is the tap target, so a bar built to it needs no hit-area
     trickery at any width — every control in it is already big enough. */
  --_utility-h: 44px;

  /* Matched to the header's gutter at every band so the phone number and the
     wordmark share a left edge. Any divergence here is instantly visible:
     they are 44px apart vertically and the eye reads them as one column. */
  --_gutter: var(--br-flow-md);

  position: relative;
  z-index: 2;                               /* over the header's own shadowless
                                               white, so the two edges meet */
  font-size: var(--br-small-size);
  line-height: var(--br-small-lh);
  letter-spacing: var(--br-small-ls);
}

.br-utility__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--br-space-4);

  width: 100%;
  max-width: min(var(--br-container-max), 100% - (var(--_gutter) * 2));
  margin-inline: auto;
  min-height: var(--_utility-h);
}

/* -- the two ways to reach the practice ---------------------------------- */

.br-utility__contact {
  display: flex;
  align-items: center;
  /* Wide. These are two independent facts, not a sentence, and at 12px they
     read as one run-on string. */
  gap: var(--br-space-6);
  min-width: 0;
}

.br-utility__link {
  display: inline-flex;
  align-items: center;
  gap: var(--br-space-2);

  /* Fills the bar. On a pointer the bar is 44 and that is the whole target;
     on a tablet the bar steps down to 40 and the 4px is bought back by the
     expander below. */
  position: relative;
  min-height: var(--_utility-h);
  padding-block: 0;

  color: var(--br-text);
  font-weight: var(--br-weight-medium);
  text-decoration: none;
  white-space: nowrap;

  transition: color var(--br-dur) var(--br-ease);
}

/* --br-text-strong inside .br-on-dark is white. A lift to white on hover is
   the whole move: no plate, no underline. This is a 44px strip of chrome and
   anything more assertive competes with the row underneath it, which is
   where we want the eye. */
.br-utility__link:hover { color: var(--br-text-strong); }

.br-utility__icon {
  flex: 0 0 auto;
  /* The strings are the point; the icons say which is which and then get out
     of the way. --br-text-muted inside .br-on-dark is the quiet grey. */
  color: var(--br-text-muted);
  transition: color var(--br-dur) var(--br-ease);
}

.br-utility__link:hover .br-utility__icon { color: var(--br-gold); }

/* The 40px bar is 4px short of the target. Vertically only, like every other
   expander in this file — the two links are 24px apart and growing them
   sideways would have the phone number and the email address claiming each
   other's pixels. The 2px it reaches past the bar lands on the header's own
   top edge, where nothing else is. */
.br-utility__link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: var(--br-tap-min);
  transform: translateY(-50%);
}

.br-utility__label {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* -- the right-hand group ------------------------------------------------- */

.br-utility__end {
  display: flex;
  align-items: center;
  gap: var(--br-space-4);
  flex: 0 0 auto;
}

.br-utility__social {
  display: flex;
  align-items: center;
  gap: var(--br-space-2);
}

.br-utility__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;

  width: 32px;
  height: 32px;
  border-radius: var(--br-radius-pill);

  /* --br-bg-band-alpha inside .br-on-dark resolves to --br-white-a10, which
     tokens.css measured as "icon circle on dark". The same plate the rest of
     the page uses for an icon on ink — not a new value. */
  background: var(--br-bg-band-alpha);
  color: var(--br-text);

  transition:
    background-color var(--br-dur) var(--br-ease),
    color var(--br-dur) var(--br-ease);
}

.br-utility__social-link:hover {
  background: var(--br-gold);
  color: var(--br-ink);
}

/* 32px is under the 44 target, and unlike the two text links these cannot
   simply grow to the bar's height — three round plates stretched into three
   tall pills is a different object. The plate stays 32 and the target grows
   off it, vertically only, so two neighbours can never claim the same pixel. */
.br-utility__social-link {
  position: relative;
}

.br-utility__social-link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: var(--br-tap-min, 44px);
  transform: translateY(-50%);
}

/* -- what the bar drops, and when ---------------------------------------- */

/* Tablet. 40 rather than 44: the bar is chrome above chrome, and on a device
   that is mostly page it should take the smaller of the two heights it can
   honestly take. Every control in it is still 40 tall with a 44px hit box. */
@media (max-width: 1199.98px) {
  .br-utility { --_utility-h: 40px; }
}

/* The email address is the first thing to go. It is 160px of the longest
   string in the bar, it is the lower-intent of the two contacts, and it is
   still one tap away in the sheet — where it is set at 16px with an 18px
   envelope beside it rather than at 14 in a strip.
   Measured on the real strings: phone 148 + email 175 + gap 24 + language 83
   + social 128 + group gap 16 = 574 against the 592 a 640 viewport offers
   inside its gutter. 616 is where it stops being comfortable rather than
   where it stops fitting. */
@media (max-width: 615.98px) {
  .br-utility__email { display: none; }
}

/* Phones. The bar is not rendered at all.

   His IS rendered, and it is the single worst thing about his mobile header:
   the strip does not collapse, it STACKS — phone on one line, email on the
   next, three 40px gold discs under those, centred — and it costs 220px of
   chrome above the wordmark on a 390px screen. A user arriving from a search
   result sees a phone number and a Facebook button before they see whose site
   they are on.

   The alternative to stacking is to keep the strip and drop it to the phone
   number alone, which is 40px of a 844px screen spent on one string that the
   sheet already carries as a full-width button. So it goes, and the sheet
   carries all of it: language chips, "Call 1300 1BROAD", the email address
   and the three accounts. Nothing is lost; it is one tap further away and
   several times bigger when you get there.

   This is also what keeps the sheet's geometry honest — --_chrome-h stays
   --br-nav-h on every phone, so the sheet's top edge is the header's bottom
   edge with no arithmetic. */
@media (max-width: 599.98px) {
  .br-utility { display: none; }
}

@media (min-width: 600px) {
  .br-chrome { --_chrome-h: calc(44px + var(--br-nav-h)); }
}

@media (min-width: 600px) and (max-width: 1199.98px) {
  .br-chrome { --_chrome-h: calc(40px + var(--br-nav-h)); }
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.br-nav {
  /* ----------------------------------------------------------------------
     Header-only measured constants.
     ---------------------------------------------------------------------- */

  /* The header sits in a WIDER container than the page body. Measured side
     margin: 4u/3 on the mobile bar (32.15 @390, 33.44 @640), 2u on the
     desktop row (51.14 @768, 53.11 @1024), 10u/3 from 1200 up (90.77 @1200,
     93.85 @1440, 95.90 @1600). Content still caps at 1440 and centres, so
     at 1920 the margin opens out to 240. Header-only — every section keeps
     using .br-container, which is 100px at 1440. */
  --_gutter: var(--br-flow-md);

  /* Measured: the pale gold plate behind a hovered primary link, #faf0c8.
     It is not reachable as a mix of two existing tokens (gold-on-white
     lands on #fbf0c0 at the same lightness) and nothing outside the header
     uses it, so it stays scoped here rather than widening the palette. */
  --_link-hover-bg: #faf0c8;

  /* ----------------------------------------------------------------------
     THE ROW'S HORIZONTAL RHYTHM.  Two numbers, and they are a pair — see
     the note above .br-nav__list. --_link-pad-x is the air INSIDE a pill,
     --_link-gap is the air BETWEEN two of them. These are the >=1200
     values; the 900-1199 band ramps both and lands exactly here at 1200.

     Measured on the reference the pill carried 12px of side padding and
     the list carried no gap at all, so two adjacent plates shared an edge:
     0.00px between them at every desktop width. One hovered link read as a
     plate; the open Locations trigger sitting against a hovered "About"
     read as one wide block with a seam. Moving 2px out of each pill and
     spending it — plus the 12px the row's two outer edges no longer need —
     between the pills instead buys 16px of clear white for 68px of row.
     ---------------------------------------------------------------------- */
  --_link-pad-x: 10px;
  --_link-gap: var(--br-space-4);           /* 16 */

  /* The language control's constants and --_touch are declared on
     .br-chrome, above — the utility bar reads them too. */

  /* Hamburger. Ours — the reference ships no menu control. The bars sit on
     the same stroke as our icons. */
  --_burger-bar-w: 20px;
  --_burger-box-h: 18px;
  --_drawer-row-h: 56px;

  position: relative;
  z-index: 1;                               /* inside .br-chrome, which owns
                                               the measured 1050 */
  background: var(--br-white);
  color: var(--br-text-strong);

  /* Measured: the compact header carries a hairline, the desktop row does
     not (the hero photo provides its own edge). */
  border-bottom: 1px solid var(--br-border);
}

.br-nav__bar {
  display: flex;
  align-items: center;
  /* The compact bar only needs a floor — .br-nav__end is pushed right by an
     auto margin. 8px is that floor: at 390 the row carries logo + pill +
     hamburger and the slack is large, so the floor never actually bites. The
     row's 1u gap returns at the desktop breakpoint. */
  gap: var(--br-space-2);

  width: 100%;
  /* Reproduces the measured container exactly: a minimum side margin that
     grows with the fluid unit, and a 1440 content cap that centres once the
     viewport is wider than that. */
  max-width: min(var(--br-container-max), 100% - (var(--_gutter) * 2));
  margin-inline: auto;

  /* Measured 67px total on the compact header — 66 of bar plus the 1px
     hairline underneath it. */
  min-height: calc(var(--br-nav-h) - 1px);
}

/* ==========================================================================
   LOGO
   Measured 123 x 33 (the artwork is 164 x 44, so 33px tall lands on 123
   wide). Held at that size from 410 up — which is every width the reference
   holds it at, and 224px more besides: from 900 down the reference starts
   squashing its own mark, to 42.78 wide at 834 and to nothing at 768.
   ========================================================================== */

.br-nav__logo {
  display: block;
  /* Never yields. It used to carry flex: 0 1 auto + min-width: 0 as a
     safety valve, which made the wordmark the FIRST casualty of a long
     nav label rather than the last: flex distributes a shortfall in
     proportion to base size, so at seven CMS-length labels the mark went
     to 0px wide and the row STILL overflowed, clipping the gold pill and
     putting a scrollbar on the document. The identity is the one thing in
     this bar that must never be negotiable; the labels yield instead (see
     .br-nav__link below). */
  flex: 0 0 auto;
  line-height: 0;
  border-radius: var(--br-radius-xs);
}

.br-nav__logo-img {
  width: auto;
  height: 33px;
}

/* Below 410px the bar has to carry logo + quote pill + hamburger in a row
   the reference only ever asks to hold logo + pill + pill — it has no menu
   button, so it is 40px richer than we are before anything is drawn. The
   reference buys ITS room out of the mark — 123 wide at 390, 117.83 at 375,
   102.95 at 360, 70.95 at 320, all at the same 33 tall, so the wordmark
   distorts further the smaller the phone. We scale instead, which keeps the
   letterforms. Side margin goes before any more mark does. */
@media (max-width: 409.98px) {
  .br-nav__logo-img { height: 29px; }       /* 108.09 wide */
}

@media (max-width: 374.98px) {
  .br-nav { --_gutter: var(--br-space-5); }
}

/* 280px — the Galaxy Fold's closed screen, and the narrowest thing that is
   still a phone. The mark no longer has a safety valve (see the flex note
   above), so the widths where it genuinely will not fit have to be answered
   explicitly rather than by letting the wordmark quietly disappear. Side
   margin first, then the pill's padding, then 3px of mark — in that order,
   because the mark is the last thing to give. 280 is the documented floor:
   it is the narrowest viewport any shipping device reports, and 320 — the
   number WCAG 1.4.10 actually asks for, and what 400% zoom on a 1280 screen
   resolves to — clears it with room to spare. */
@media (max-width: 319.98px) {
  .br-nav { --_gutter: var(--br-space-3); }
  .br-nav .br-nav__cta { padding-inline: var(--br-space-2); }
  .br-nav__logo-img { height: 26px; }       /* 96.91 wide */
}

/* ==========================================================================
   PRIMARY LINKS  (desktop row)
   Measured: 16/24 Inter 600 at -0.011em, ink, inside a full pill. Transition
   measured at 350ms on the navigation easing.

   WHAT IS NO LONGER THE MEASURED NUMBER, AND WHY.

   The reference sets 12px of padding inside the pill and NO gap between
   items, so the padding is the only thing holding two labels apart. Copied
   exactly, that is what we shipped, and it has one consequence the
   reference never has to answer for: our pill paints a plate. Measured on
   the built site, the distance between one pill's background and the next
   one's was 0.00px at 1024, 1280, 1440 and 1920 — they do not nearly touch,
   they share an edge. Hover "About" while the Locations menu is open and
   the two plates render as a single block with a seam down it, which is
   what "the main nav is a bit cramped" is describing.

   His own row, measured live at the same widths: 25px of clear space
   between adjacent link boxes from 1280 up, 12px at 1024, with 5px of
   padding inside each. He gives the row far more air than we did — he just
   spends it between the words rather than around them, which he can afford
   to because his links have no plate to keep apart.

   So the padding stops being the spacing and becomes only the plate's own
   margin: 10px inside, 16px between (--_link-pad-x / --_link-gap on
   .br-nav above). Label-to-label that is 36px against his 35 — the same air
   he has — and it costs 68px of row, because 12px of it comes back off the
   row's two outer edges, which never needed padding to hold anything apart.
   ========================================================================== */

/* This is the element that yields. It is the only thing in the row whose
   width is content the client controls, so it is the only thing that should
   move when that content grows. NOT overflow: hidden — an ancestor with
   hidden overflow clips its descendants' focus rings, and the ring on the
   first and last link is the whole point of having one. It would also clip
   the Locations popover, which hangs below the row. The clipping happens one
   level down, on the link itself, where an element's own outline is
   explicitly unaffected. */
.br-nav__primary {
  display: none;
  min-width: 0;
}

/* The gap is what keeps two hover plates apart, so it belongs to the list
   rather than to the link: an item's own padding can only ever push its
   NEIGHBOUR's plate away by growing its own, which is the trade that made
   the row read as a block. As a flex gap it is white the plates cannot
   reach, and it shrinks last — `gap` is not a flex base size, so the
   min-width: 0 escape below still truncates a long label into an ellipsis
   before the row will give up the space between two links. */
.br-nav__list {
  display: flex;
  align-items: center;
  gap: var(--_link-gap);
  min-width: 0;
}

/* Flex items default to min-width: auto, i.e. "never smaller than my
   content". Without this the list cannot give anything back and the
   shortfall lands on whatever else in the row is shrinkable.

   `position: relative` does two jobs. It lets the link's touch expander
   escape the link's own `overflow: hidden` (see the note on .br-nav__link
   below): an absolutely positioned box is only clipped by ancestors in its
   containing-block chain, so anchoring the expander to the LI instead of to
   the A means the ellipsis clipping and the 44px target can coexist. And it
   is what the Locations popover is positioned against — the LI is the same
   box as its trigger, so `left: 0` means "this link's left edge". */
.br-nav__list > li { min-width: 0; position: relative; }

.br-nav__link {
  /* Block, not flex: the label is a bare text node, and in a flex container
     that becomes an anonymous item, which text-overflow cannot reach. As a
     block the ellipsis works and the type lands on exactly the same pixel —
     a 24px line box centred in a 24px content box is the same place a
     centred flex item sits. */
  display: block;
  text-align: center;

  /* The pill is 32px tall around a 24px label — measured, and unchanged.
     (The reference gets there by pinning height:32px and letting the label
     overflow its own padding box; 4px of block padding lands the text on the
     same pixel without a fixed height that could clip.) The side padding is
     ours: see --_link-pad-x on .br-nav. */
  padding: var(--br-space-1) var(--_link-pad-x);
  border-radius: var(--br-radius-pill);

  /* The graceful failure: an over-long label truncates inside its own pill
     instead of pushing the wordmark or the gold pill off the row. */
  overflow: hidden;
  text-overflow: ellipsis;

  font-size: var(--br-ui-size);
  line-height: var(--br-ui-lh);
  font-weight: var(--br-ui-weight);
  letter-spacing: var(--br-ui-ls);
  color: var(--br-text-strong);
  text-decoration: none;
  white-space: nowrap;

  transition:
    color var(--br-dur-slow) var(--br-ease-emphasis),
    background-color var(--br-dur-slow) var(--br-ease-emphasis);
}

.br-nav__link:hover {
  background: var(--_link-hover-bg);
  color: var(--br-ink-hover);
}

/* Set by the script at the foot of nav.html on whichever link matches the
   page being viewed. Inset, so applying it never moves anything: a page that
   fails to run the script loses a cue, not a layout. */
.br-nav__link[aria-current="page"] {
  box-shadow: inset 0 -2px 0 var(--br-gold);
  border-radius: var(--br-radius-xs);
}

/* ==========================================================================
   LOCATIONS MENU  (desktop row)

   Four city pages that existed and that nothing on the site linked to.

   A native <details>, the same component the language control is, and for
   the same three reasons: it opens on a click so it works on a finger, it
   opens on Enter or Space and reports its own expanded state so it works on
   a keyboard and in a screen reader, and it needs no JavaScript to do
   either. Hover is deliberately not a trigger — a hover-only menu has no
   equivalent on a touchscreen, and a menu that opens on BOTH flickers every
   time the pointer crosses it on the way to "About".

   The popover itself is .br-nav__menu, which is the language popover's card,
   unchanged: same 180px floor, same 14px radius, same measured shadow, same
   rows. One card, two menus.
   ========================================================================== */

.br-nav__locations {
  display: flex;
  align-items: center;
  /* See the min-width note on .br-nav__link--menu below — the chain has to
     be unbroken from the LI down to the label or none of it can give. */
  min-width: 0;
}

/* The trigger. Everything about it is .br-nav__link — same type, same pill,
   same plate on hover, same 350ms — plus a chevron, which needs a flex box
   the plain link deliberately does not have (see the note above). The label
   carries the ellipsis instead. */
/* THE ONE PLACE THE ROW'S GRACEFUL FAILURE WAS NOT TRUE, found by measuring
   the spacing change against the file's own stress case.

   Every plain link shrinks with its LI and truncates inside its own pill.
   This one did not: a <summary> is a flex item of the <details> around it,
   flex items default to min-width: auto ("never smaller than my content"),
   and nothing in the chain said otherwise. So when the client lengthens the
   labels either side of it, the LI shrinks and the trigger stays its full
   width and hangs out of it — measured 56.5px past its own box at 1024 with
   the OLD spacing, over the top of the pill next door. Not a new fault and
   not caused by the gap; the gap only made the number bigger (60.0) because
   there is less LI to spill out of.

   min-width: 0 here and on the label span puts it back on the same contract
   as its six neighbours: the word truncates, the pill does not move. Nothing
   changes at the labels we ship — measured identical at every width — this
   only exists for the day someone renames "Locations" to something long. */
.br-nav__link--menu {
  display: flex;
  align-items: center;
  gap: var(--br-space-1);
  min-width: 0;

  cursor: pointer;
  list-style: none;
  overflow: visible;
}

.br-nav__link--menu::-webkit-details-marker { display: none; }

.br-nav__link-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.br-nav__locations[open] > .br-nav__link--menu {
  background: var(--_link-hover-bg);
  color: var(--br-ink-hover);
}

.br-nav__chevron {
  flex: 0 0 auto;
  transition: transform var(--br-dur) var(--br-ease);
}

.br-nav__locations[open] .br-nav__chevron,
.br-nav__lang[open] .br-nav__chevron { transform: rotate(180deg); }

/* ==========================================================================
   THE POPOVER CARD
   Shared by the language control and the Locations menu.
   Measured on the language popover: 6px under its control, 180px floor,
   14px radius, the menu shadow, 9px/12px rows at 14.5/21.7.
   ========================================================================== */

.br-nav__menu {
  position: absolute;
  /* Measured: the popover top sits 6px under the control (56 -> 62 at
     1440), the same 6 the control uses between its own parts. */
  top: calc(100% + var(--_lang-gap));
  z-index: 300;                             /* measured */

  min-width: var(--_menu-w);                /* measured 180px */
  padding: var(--br-space-2);
  background: var(--br-white);
  border: 1px solid var(--br-neutral-200);
  border-radius: var(--_menu-radius);       /* measured 14 */
  box-shadow: var(--br-shadow-menu);
}

/* Two anchors, and which one a menu takes is not a style choice. A popover
   hangs from the edge of its trigger that is nearest the edge of the screen,
   or it opens off the side of the page. The language control is the last
   thing in the utility bar, so its card hangs right; Locations sits in the
   middle of the row, so its card hangs left, under the word. */
.br-nav__menu--end { right: 0; }
.br-nav__menu--locations { left: 0; }

/* The four cities are one word each and the 180px floor is generous, but the
   card should not look like a language menu that lost its labels. 176 is the
   trigger's own width plus enough to sit under it deliberately. */
.br-nav__menu--locations { min-width: 176px; }

.br-nav__menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--br-space-3);

  /* Measured row: 39.7 tall — 21.7 of line inside 9px of padding either
     side. The half-pixel type size is the reference's own, not a rounding of
     ours: --br-small-size is 14px and correct everywhere else, so the
     override stays on the row rather than widening the scale. */
  padding: 9px var(--br-space-3);
  border-radius: var(--br-radius-sm);

  font-size: 14.5px;
  line-height: var(--br-small-lh);          /* measured 21.7 */
  font-weight: var(--br-weight-semibold);
  letter-spacing: var(--br-small-ls);
  color: var(--br-text-strong);
  text-decoration: none;
  white-space: nowrap;

  transition: background-color var(--br-dur) var(--br-ease);
}

/* Measured against the reference's ✓ glyph rather than against its own box.
   Inter's tick advances 11px at 14.5px and its ink ends 1121.6 from the
   viewport left at 1440; drawn to the 24 grid and right-aligned in the row,
   this one ended at 1119.97 with a heavier stem. 2.2 units at 16/24 is a
   1.47px stroke (Inter's is ~1.45), and the 2px shift puts the ink where the
   glyph's is. */
.br-nav__menu-check {
  stroke-width: 2.2;
  transform: translateX(2px);
}

.br-nav__menu-item:hover { background: var(--br-gold-wash-2); }

.br-nav__menu-item[aria-current] {
  color: var(--br-gold-ink);
  font-weight: var(--br-weight-bold);
}

/* ==========================================================================
   RIGHT-HAND GROUP
   Measured: the gold pill carries a u/3 margin of its own. What used to sit
   beside it — the language control and a second "Contact" — has moved: the
   first to the utility bar, the second into the primary list, where Warren's
   own nav has it and where it stops being the only destination on the page
   reachable from two different places in the same bar.
   ========================================================================== */

.br-nav__end {
  display: flex;
  align-items: center;
  margin-left: auto;
  /* Fixed content — a two-word pill and, below the breakpoint, a menu button.
     Nothing in here should ever be squeezed to make room for a nav label. */
  flex: 0 0 auto;
}

/* The shared .br-btn--xs is 40px around a 24px label; the header's pill is
   measured at 32 (3px of block padding either side of the line, plus the
   button's own 1px edge). Scoped so the shared component stays untouched. */
.br-nav .br-nav__cta {
  min-height: var(--br-btn-h-xs);
  padding-block: 3px;
  margin-left: var(--br-flow-3xs);          /* measured 9.38 @1440 */

  /* .br-btn ships the 150ms/ease-in-out every button on the page uses. The
     header is not a button surface: measured on the reference, its gold pill
     runs 350ms on the navigation easing, the same as the links beside it.
     Without this the bar answers a hover on "Insurance" and a hover on "Get
     a quote" at two different speeds, which reads as two components sharing
     a row. */
  transition-duration: var(--br-dur-slow);
  transition-timing-function: var(--br-ease-emphasis);

  position: relative;
}

/* The measured pill is 32px tall. Sub-44px is not a target we ship, so the
   hit area grows off the visible box, vertically only — which keeps the 8px
   of clear air between this and the hamburger real instead of two
   overlapping targets.

   Stated as a height, not as a negative inset off --br-btn-h-xs. That is the
   arithmetic this rule got wrong for a round: an absolutely positioned child
   is laid out against its container's PADDING box, and .br-btn carries a 1px
   border, so the 32px pill offers a 30px padding box and `inset: -6px` — the
   right answer for a 32px box — measured 42. Centring a box of exactly
   --_touch cannot be off by a border, whatever the pill's height becomes. */
.br-nav .br-nav__cta::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: var(--_touch);
  transform: translateY(-50%);
}

/* ==========================================================================
   LANGUAGE CONTROL
   A native <details>, so it needs no JavaScript to open, close or take a
   keyboard. Measured: 14px/1 Inter 700, 10px/12px inside a pill, 6px between
   the globe, the code and the chevron.

   It lives in the utility bar, not in the navigation row. Three reasons, in
   the order they matter:

     1. it is not a destination. It changes how the page reads, which is the
        same class of thing as "ring us" and "write to us", and that class of
        thing is what a utility bar is for,
     2. the row it used to sit in now carries seven links. Measured, the row
        wants 602px of link where it used to want 353, and the control's 91px
        was the difference between the full navigation appearing at 900px and
        appearing at 1010,
     3. it was the only control in a row of English words that was not one,
        and it read as a seventh navigation item that happened to be a globe.

   The one thing this costs: below 600px the utility bar is not rendered, so
   the control is not either. The sheet's chip row carries all five languages
   in their own scripts at 44px — which is the better surface anyway, and it
   is one tap away rather than zero.
   ========================================================================== */

.br-nav__lang {
  display: flex;
  position: relative;
  align-items: center;
}

.br-nav__lang-toggle {
  display: flex;
  align-items: center;
  gap: var(--_lang-gap);

  padding: var(--_lang-pad-y) var(--br-space-3);
  border-radius: var(--br-radius-pill);

  font-size: var(--br-small-size);
  line-height: 1;                           /* measured */
  font-weight: var(--br-weight-bold);
  letter-spacing: var(--br-small-ls);
  color: var(--br-text-strong);

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

.br-nav__lang-toggle::-webkit-details-marker { display: none; }

/* The plate under it was #f5f3ec, measured on white. On ink that is a bright
   white slab. --br-bg-band-alpha inside .br-on-dark is the 10%-white plate
   the whole page uses for exactly this, and it is what the three social
   discs 16px to its right already sit on. */
.br-nav__lang-toggle:hover,
.br-nav__lang[open] .br-nav__lang-toggle {
  background: var(--br-bg-band-alpha);
}

/* The control is 36px tall and the bar is 40 or 44, so the hit box is the
   bar's height rather than the pill's. Width is the pill's own — its
   neighbour is 8px away and two overlapping targets is worse than a 36px
   one. */
.br-nav__lang-toggle {
  position: relative;
  min-height: var(--_lang-btn);
}

.br-nav__lang-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: var(--br-tap-min, 44px);
  transform: translateY(-50%);
}

/* ==========================================================================
   HAMBURGER
   Two bars that fold into a cross. Ours — the reference has no menu control.
   ========================================================================== */

.br-nav__burger {
  display: flex;
  align-items: center;
  justify-content: center;

  width: var(--_touch);
  height: var(--_touch);
  /* Optically aligns the bars with the container edge rather than the
     44px touch target's edge. */
  margin-inline-end: calc(var(--br-space-3) * -1);
  /* 8, not 4: at 4 the quote pill and the hamburger resolve as one smudge
     under a thumb. This is the only gap in the compact row a thumb has to
     tell apart. */
  margin-inline-start: var(--br-space-2);

  border-radius: var(--br-radius-pill);
  color: var(--br-text-strong);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--br-dur) var(--br-ease);
}

.br-nav__burger::-webkit-details-marker { display: none; }

.br-nav__burger:hover { background: var(--br-neutral-50); }

.br-nav__burger-box {
  position: relative;
  display: block;
  width: var(--_burger-bar-w);
  height: var(--_burger-box-h);
}

.br-nav__burger-bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--br-icon-stroke);
  border-radius: var(--br-radius-pill);
  background: currentColor;
  transition:
    top var(--br-dur) var(--br-ease),
    transform var(--br-dur) var(--br-ease);
}

.br-nav__burger-bar:nth-child(1) { top: 4px; }
.br-nav__burger-bar:nth-child(2) { top: 12px; }

.br-nav__disclosure[open] .br-nav__burger-bar {
  top: calc(50% - (var(--br-icon-stroke) / 2));
}
.br-nav__disclosure[open] .br-nav__burger-bar:nth-child(1) { transform: rotate(45deg); }
.br-nav__disclosure[open] .br-nav__burger-bar:nth-child(2) { transform: rotate(-45deg); }

/* ==========================================================================
   NAVIGATION SHEET  (below the desktop breakpoint)
   Full height under the chrome. Ours — the reference ships no small-screen
   navigation at all, and Warren's hides his four cities behind a second
   chevron inside it.
   ========================================================================== */

/* Nothing behind the sheet should scroll while it is open. Scoped to the
   widths that HAVE a sheet: [open] is an attribute, so it survives a resize
   past the breakpoint even though the disclosure is display:none up there.
   Unscoped, opening the menu on a phone and rotating to landscape left the
   page unscrollable with nothing on screen to explain why.

   THE LOCK GOES ON body, NOT ON :root, and the reason is worth the paragraph
   because the wrong one looks identical until you scroll first.

   base.css sets `overflow-x: hidden` on body, which computes to
   `hidden auto`. While html's own overflow is `visible` the viewport takes
   ITS scrolling behaviour from body — so the viewport is the scroll
   container and body is not. Put `overflow: hidden` on :root and html stops
   being `visible`, the viewport takes html's value instead, and body becomes
   a scroll container in its own right. That flip happens the instant the
   sheet opens, and `position: sticky` resolves against the NEAREST scroll
   container: the pinned chrome silently re-anchored to a box 770px up the
   page. Measured on a phone scrolled 770px down — the header vanished off
   the top of the screen and the sheet appeared with no bar and no way to
   close it.

   Locking body instead keeps the viewport as the scroll container throughout
   — html is still `visible`, so the viewport still takes body's value, which
   is now `hidden`. Same lock, no flip. Verified in
   scripts/_nav4-behaviour.mjs, which opens the sheet 1200px down the page
   and asserts the sheet's top edge is still the chrome's bottom edge. */
@media (max-width: 899.98px) {
  :root:has(.br-nav__disclosure[open]) body { overflow: hidden; }
}

/* A closed <details> still gives its contents a box in Chromium, and a fixed
   panel inside one measures wide enough to push the document's scroll width
   past the viewport. Taking it out of layout entirely is the fix. */
.br-nav__disclosure:not([open]) .br-nav__drawer { display: none; }

.br-nav__drawer {
  position: fixed;
  /* --_chrome-h is the utility bar plus the header, or just the header on a
     phone where the bar is not rendered. Declared on .br-chrome, which is
     also the element pinned to the top of the viewport at these widths — so
     the sheet's top edge is the chrome's bottom edge at any scroll position. */
  top: var(--_chrome-h);
  right: 0;
  left: 0;
  height: calc(100dvh - var(--_chrome-h));
  z-index: 2;                               /* over the scrim below */

  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--br-white);

  /* No bottom padding: the shelf below owns it, so the shelf can reach the
     bottom edge of the sheet and the home-indicator area under it. */
  padding-block: var(--br-flow-sm) 0;
  padding-inline: var(--_gutter);

  animation: br-nav-drawer-in var(--br-dur-slow) var(--br-ease-emphasis) both;
}

@keyframes br-nav-drawer-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* -- tablet: a panel that hugs its content, not a full-height sheet ------- */

/* Seven links and a phone number do not need 957px of white on a big phone
   or a small tablet. Below 600 a full-height sheet is right — the menu IS
   the screen at that size — but wider it left a void between Contact and the
   shelf, which is the same "unfinished" read the shelf was built to remove.
   Above 600 the panel is exactly as tall as it needs to be and the page dims
   behind it. Capped at the desktop breakpoint, where the sheet stops
   existing at all. */
@media (min-width: 600px) and (max-width: 899.98px) {
  .br-nav__drawer {
    height: auto;
    max-height: calc(100dvh - var(--_chrome-h));
    box-shadow: var(--br-shadow-menu);
  }

  /* The scrim. Fixed, so it covers the page rather than the panel, and under
     the panel in the chrome's own stacking context. Purely decorative — the
     press-outside-to-close behaviour is on the document, not on this, so it
     works identically with JavaScript off (the panel just stays open until
     the burger is pressed again). */
  .br-nav__disclosure[open]::after {
    content: "";
    position: fixed;
    inset: var(--_chrome-h) 0 0;
    z-index: 1;
    background: var(--br-ink-a12);
    animation: br-nav-drawer-in var(--br-dur-slow) var(--br-ease-emphasis) both;
  }
}

/* No chevron. Every one of these rows navigates straight to a page, and `>`
   is the disclosure convention — it promises a child list to drill into. The
   one row that HAS a child list, Locations, shows it inline instead of
   promising it. The north-east arrow is not the substitute either: on the
   web that glyph means "opens outside this site", which is equally untrue.
   A row that is 56px tall, set in heading type, separated by a hairline and
   lit on press is already unambiguously a link. */
.br-nav__drawer-link {
  display: flex;
  align-items: center;

  min-height: var(--_drawer-row-h);
  padding-block: var(--br-space-3);

  /* Bleeds to both edges of the sheet so the pressed state below covers the
     whole row rather than a strip inside it, then puts the gutter back as
     padding so the type stays on the sheet's own left margin. */
  margin-inline: calc(var(--_gutter) * -1);
  padding-inline: var(--_gutter);

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

  border-bottom: 1px solid var(--br-border);
  transition:
    color var(--br-dur) var(--br-ease),
    background-color var(--br-dur) var(--br-ease);

  animation: br-nav-row-in 260ms var(--br-ease-emphasis) both;
}

/* The rule between rows is a separator, not a frame — the list should not
   close itself off with a line at the bottom. */
.br-nav__drawer-list > li:last-child .br-nav__drawer-link { border-bottom: 0; }

.br-nav__drawer-list > li:nth-child(1) .br-nav__drawer-link { animation-delay: 30ms; }
.br-nav__drawer-list > li:nth-child(2) .br-nav__drawer-link { animation-delay: 55ms; }
.br-nav__drawer-list > li:nth-child(3) .br-nav__drawer-link { animation-delay: 80ms; }
.br-nav__drawer-list > li:nth-child(4) { animation: br-nav-row-in 260ms var(--br-ease-emphasis) 105ms both; }
.br-nav__drawer-list > li:nth-child(5) .br-nav__drawer-link { animation-delay: 130ms; }
.br-nav__drawer-list > li:nth-child(6) .br-nav__drawer-link { animation-delay: 155ms; }
.br-nav__drawer-list > li:nth-child(7) .br-nav__drawer-link { animation-delay: 180ms; }

@keyframes br-nav-row-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.br-nav__drawer-link:hover { color: var(--br-gold-ink); }

/* Press feedback. This sheet only exists on the surface where hover does not,
   so the pressed state is the only one a thumb will ever see — it lights the
   full width of the row, which is also the full width of the target. */
.br-nav__drawer-link:active {
  color: var(--br-gold-ink);
  background: var(--br-gold-wash-2);
}

.br-nav__drawer-link[aria-current="page"] {
  color: var(--br-gold-ink);
  box-shadow: inset 3px 0 0 var(--br-gold);
}

/* -- the Locations group -------------------------------------------------- */

/* Four cities, shown rather than hidden behind a second disclosure. Two rows
   of two, so the group costs the height of two links instead of four, and
   the eye reads it as one object rather than as four more entries in a list
   of seven.

   Warren's mobile menu puts these behind a chevron. A nested accordion
   inside a sheet costs a tap to find out whether the thing you want is even
   in there, and "which cities does this broker cover" is exactly the
   question a visitor from Melbourne is asking. */
/* Bleeds to both edges of the sheet exactly as the rows above and below it
   do, then puts the gutter back as padding. Without the bleed the group's
   rule stopped 32px short of the rules either side of it, which reads as a
   mistake rather than as a grouping. */
.br-nav__drawer-group {
  margin-inline: calc(var(--_gutter) * -1);
  padding: var(--br-space-4) var(--_gutter);
  border-bottom: 1px solid var(--br-border);
}

.br-nav__drawer-group-title {
  margin-bottom: var(--br-space-3);
}

.br-nav__drawer-places {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--br-space-2);
}

.br-nav__place {
  display: flex;
  align-items: center;

  /* 48, not the 56 of a primary row: these are one level down and should
     read that way, and 48 still clears the target with 4px to spare. */
  min-height: 48px;
  padding-inline: var(--br-space-4);
  border-radius: var(--br-radius-md);

  /* NOT --br-ring-hairline. That token is a 12%-black divider line, ~1.35:1
     on white — fine for a rule between two blocks, not fine here, where the
     ring is the only thing saying "this word is a control". WCAG 1.4.11
     wants 3:1; --br-neutral-500 measures 3.64 on white. Same call, and the
     same token, as the language chips in the shelf below. */
  box-shadow: inset 0 0 0 1px var(--br-neutral-500);

  font-size: var(--br-ui-size);
  line-height: var(--br-ui-lh);
  font-weight: var(--br-ui-weight);
  letter-spacing: var(--br-ui-ls);
  color: var(--br-text-strong);
  text-decoration: none;

  transition:
    background-color var(--br-dur) var(--br-ease),
    color var(--br-dur) var(--br-ease);
}

.br-nav__place:hover,
.br-nav__place:active {
  background: var(--br-gold-wash-2);
  color: var(--br-gold-ink);
}

.br-nav__place[aria-current="page"] {
  background: var(--br-ink);
  color: var(--br-white);
  box-shadow: none;
}

/* -- the utility shelf at the foot of the sheet --------------------------- */

/* One band holding the language switcher and every way to reach the
   practice. `margin-top: auto` inside the column pins it to the bottom
   without touching the top-aligned rhythm above it.

   Two earlier shapes were wrong and are recorded so they are not retried:
   language sitting directly under the links left the sheet ending in ~300px
   of white at 390x844; pinning ONLY the phone number moved that hole to the
   middle, between the chips and the button. Grouping everything into one
   shelf leaves exactly one band of air, between "go somewhere" and
   "everything else", and the shelf is substantial enough to terminate it.

   Below 600px this shelf IS the utility bar — the strip is not rendered at
   those widths, so if a string is not here it has been dropped. */
.br-nav__drawer-shelf {
  margin-top: auto;

  margin-inline: calc(var(--_gutter) * -1);
  padding: var(--br-flow-sm) var(--_gutter);
  padding-bottom: calc(var(--br-flow-sm) + env(safe-area-inset-bottom, 0px));

  background: var(--br-bg-wash);
  border-top: 1px solid var(--br-border);
}

.br-nav__chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--br-space-2);
  margin-top: var(--br-space-3);
}

.br-nav__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--br-space-2);

  /* Not --br-btn-h-sm (40px). These are the controls most likely to be
     tapped by someone who cannot read the English above them, so they take
     the full target; the shared small-button token stays 40 for the
     pointer-driven surfaces that use it. */
  min-height: var(--_touch);
  padding: var(--br-space-2) var(--br-space-4);
  border-radius: var(--br-radius-pill);

  box-shadow: inset 0 0 0 1px var(--br-neutral-500);

  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-strong);
  text-decoration: none;
  white-space: nowrap;

  transition: background-color var(--br-dur) var(--br-ease), box-shadow var(--br-dur) var(--br-ease);
}

/* White, not the usual warm wash — the chips sit ON the warm wash now, and
   --br-gold-wash-2 against --br-gold-wash is a 1-point difference nobody can
   see. A lift to white reads instantly on the band. */
.br-nav__chip:hover { background: var(--br-white); }

.br-nav__chip[aria-current] {
  background: var(--br-ink);
  color: var(--br-white);
  box-shadow: none;
}

.br-nav__chip[aria-current]:hover { background: var(--br-ink-hover); }

/* -- the foot of the sheet ------------------------------------------------ */

/* The highest-intent thing an insurance customer can do on a phone is ring
   the broker, so that is the full-width button. The email address is the
   quieter second row and the three accounts close the shelf — all three are
   what the utility bar carries at every other width. */
.br-nav__drawer-foot { margin-top: var(--br-flow-sm); }

.br-nav__drawer-mail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--br-space-2);

  min-height: var(--_touch);
  margin-top: var(--br-space-2);

  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: none;

  transition: color var(--br-dur) var(--br-ease);
}

.br-nav__drawer-mail:hover,
.br-nav__drawer-mail:active { color: var(--br-gold-ink); }
.br-nav__drawer-mail > svg { flex: 0 0 auto; color: var(--br-text-muted); }

/* The same three discs the utility bar carries, on a light surface. The
   plate flips with the token — --br-bg-band-alpha outside .br-on-dark is the
   8% ink wash — so this is a position change, not a second component. */
.br-nav__drawer-social {
  justify-content: center;
  margin-top: var(--br-space-3);
}

.br-nav__drawer-social .br-utility__social-link {
  width: var(--_touch);
  height: var(--_touch);
  color: var(--br-text-strong);
}

/* Short viewports — a phone in landscape, and the 568px-tall SE. The sheet
   is allowed to scroll (it is a menu, not a page) but every row that starts
   above the fold is one the user does not have to go looking for, so the
   rhythm compresses rather than the sheet spilling. 48px still clears the
   44px target. */
@media (max-height: 700px) {
  .br-nav { --_drawer-row-h: 48px; }

  .br-nav__drawer { padding-top: var(--br-flow-xs); }
  .br-nav__drawer-foot { margin-top: var(--br-flow-xs); }
  .br-nav__drawer-group { padding-block: var(--br-space-3); }

  .br-nav__drawer-shelf {
    padding-top: var(--br-flow-xs);
    padding-bottom: calc(var(--br-flow-xs) + env(safe-area-inset-bottom, 0px));
  }
}

/* .br-btn is already 48px, comfortably over the 44 target. Only the icon
   needs saying: 20px on the 24 grid, same optical weight as the rest. */
.br-nav__drawer-call-icon {
  flex: 0 0 auto;
  width: var(--br-space-5);
  height: var(--br-space-5);
}

.br-nav__drawer-where {
  margin-top: var(--br-space-4);
  text-align: center;

  font-size: var(--br-small-size);
  line-height: var(--br-small-lh);
  letter-spacing: var(--br-small-ls);
  /* --br-neutral-500 is the quieter grey and would suit the weight of this
     line better, but it is 3.6:1 on white. This is body text, so it takes
     the 4.5:1 step instead. */
  color: var(--br-text-muted);
}

/* Tablet. Declared last in the shelf so it lands after the declarations it
   overrides. A pill stretched to 1400px reads as a bug, so it caps — and it
   caps to the LEFT, where the eyebrow and the chips already are. Centred, it
   was the one thing in the shelf not sharing an edge with anything else. */
@media (min-width: 600px) and (max-width: 899.98px) {
  .br-nav__drawer-call { max-width: 24rem; }
  .br-nav__drawer-mail { justify-content: flex-start; }
  .br-nav__drawer-social { justify-content: flex-start; }
  .br-nav__drawer-where { text-align: start; }

  /* Four cities across on a tablet — the row is 700px wide there and a
     2-column grid leaves half of it empty. */
  .br-nav__drawer-places { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   TOUCH AFFORDANCES  (below 1200px)

   Everything from a small phone to an iPad in landscape is a finger, so
   every control whose visible box is under 44px gets an invisible one that
   is not — the wordmark, the seven links and the popover's rows. (The quote
   pill's and the language control's live with those components, above.)
   Nothing here moves a measured pixel.

   The band used to end at 992. It ends at 1200 now because the desktop row
   itself moved: the seven-link row does not appear until 900, and 992-1199
   is where an iPad Pro in landscape and a Surface report — both fingers.
   ========================================================================== */

@media (max-width: 1199.98px) {
  /* The mark is 33px tall (29 below 410), which is a fine click target and a
     thin tap target. Same trick as the pill: the hit area grows 8px above
     and below, nothing horizontally, so whatever sits beside it is
     untouched. */
  .br-nav__logo { position: relative; }
  .br-nav__logo::after {
    content: "";
    position: absolute;
    inset: -8px 0;
  }

  /* The popover is a touch surface here, so the measured 39.7 row grows to
     the target. Desktop keeps the reference's rhythm exactly. */
  .br-nav__menu-item { min-height: var(--_touch); }

  /* The seven links are 32px pills — the measured height, and the one thing
     on this row that is judged. A finger still wants 44, so they get the
     same treatment as the CTA: the target grows vertically off the visible
     box, and horizontally not at all, so two neighbouring links can never
     claim the same pixel. The 22px of clear bar above and below the pill is
     where the extra 12 comes from. */
  .br-nav__link::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    height: var(--_touch);
    transform: translateY(-50%);
  }

  /* The Locations trigger is a <summary>, which is its own box rather than a
     child of the LI, so it carries its own. */
  .br-nav__link--menu { position: relative; }
}

/* ==========================================================================
   DESKTOP ROW  (900px and up)

   WHY 900, WHEN THE FOUR-LINK ROW MANAGED 768.

   The row's content requirement is arithmetic, not taste. Measured at the
   reference's own type (16/24 Inter 600 at -0.011em) with 12px of pill
   padding each side:

       Home 68.8 · Insurance 99.2 · Industries 99.6 · Locations 114.0
       (label + 12px chevron + 4px gap) · About 70.0 · Blogs 66.4 ·
       Contact 84.0                                     = 602.0

   Against the four-link row's 352.6. Add the wordmark's 123, the quote
   pill's 112.9, its 9.4 margin and two 1u gaps and the row wants 903.6 at
   its measured spacing — where the old row wanted 810 WITH a language
   control in it. 768 offers 720 inside its measured gutter. It does not fit,
   and there is no honest way to make it: the reference's own answer at these
   widths is to crush its wordmark to 29px wide and still overflow, which is
   not a fit either.

   So the numbers pick the breakpoint. Measured, with the compressed band's
   gutter, group gap and 8px pill padding forced on below 900
   (scripts/_nav4-floor.mjs), the row survives down to 865 and at 860
   "Industries" truncates — the list is min-width: 0, so the failure mode is
   an ellipsis long before it is a collision, which is why "is there still
   slack?" is the wrong question to ask this row. 900 is that floor plus 35px:
   enough that a font arriving a fraction wide, or a label the client
   lengthens by a word, degrades into air rather than into an ellipsis.

   Splitting the spacing into pill padding + row gap did not move any of
   this. The band spends the same 112px on spacing at 900 that the 8px pill
   was spending, so the slack at 900 is still 35.85px and the floor is still
   865. Above 1200 the row is 670 rather than 602 and the tightest point in
   that range — 1200 itself, where the gutter has just finished opening out
   — leaves 49.0px. Both measured on the built site, not derived.

   What this costs: an iPad in PORTRAIT (768, 810, 834) now gets the sheet
   where it used to get the row. That is the trade — seven destinations
   reachable on every device against a link row on a 768px tablet — and it is
   the trade every site with a seven-item nav makes. The sheet it gets is a
   good sheet: seven rows, the four cities shown rather than hidden, and
   every contact detail from the strip above.
   ========================================================================== */

@media (min-width: 900px) {
  .br-nav {
    --_gutter: calc(var(--br-u) * 2);       /* measured 51.14 @768, 53.11 @1024 */
    border-bottom: 0;                       /* measured: desktop carries no hairline */
  }

  .br-utility { --_gutter: calc(var(--br-u) * 2); }

  .br-nav__bar {
    min-height: var(--br-nav-h-desktop);    /* measured 76px */
    gap: var(--br-flow-sm);                 /* measured 28.15 @1440 = 1u */
  }

  .br-nav__primary { display: block; }

  .br-nav__disclosure { display: none; }
}

/* ==========================================================================
   COMPRESSED ROW  (900–1199.98)  — the desktop row, compressed honestly

   Same technique the four-link row used between 768 and 992, re-cut for the
   width the seven-link row actually needs. The room comes out of spacing,
   never out of the wordmark:

     · the gutter ramps      24    -> 2u
     · the group gap ramps   u/2   -> 1u
     · the link pill ramps    5px  -> 10px     (the air inside a pill)
     · the row gap ramps      7px  -> 16px     (the air between two of them)

   All four ramps land exactly on the >=1200 value at 1200, so nothing jumps
   when the window crosses the breakpoint — the row simply relaxes. Nothing is
   crushed, clipped or overlapping at any width in the band, and a long CMS
   label truncates inside its own pill exactly as it does on the wide row.

   The last two used to be one step, not two ramps: the pill dropped 12 -> 8
   at 1199.98 and the list had no gap at any width, so the row got 56px
   narrower in a single pixel of resize AND two plates shared an edge all the
   way up. Splitting the spacing into "inside the pill" and "between pills"
   is what lets both be honest here — at 900 the row has 434px of label to
   place in 581px of bar and cannot afford 10px pills, but it can afford 5px
   pills with 7px between them, which is the same 112px of spacing the 8px
   pill was already spending and 7px more of visible white than it bought.
   Measured: the slack left at 900 is 35.85px, exactly what it was before.
   ========================================================================== */

@media (min-width: 900px) and (max-width: 1199.98px) {
  .br-nav,
  .br-utility {
    /* 24 at 900, 90.77 at 1200 — which is 10u/3 at 1200, so it meets the
       rule below with no step. (66.77 / 300 = 0.222567 per px of viewport.) */
    --_gutter: calc(1.5rem + (100vw - 56.25rem) * 0.222567);
  }

  .br-nav__bar {
    /* 12.78 (u/2) at 900, 28.15 (1u) at 1200, same trick.
       (15.37 / 300 = 0.051233 per px of viewport.) */
    gap: calc(0.799rem + (100vw - 56.25rem) * 0.051233);
  }

  /* The pill keeps its measured 32px height and its full label; only the air
     around the word gives, and it gives to the gap rather than into thin
     air. 5px at the bottom of the band is a tight pill — but the plate is
     only ever painted under one link at a time and the thing being judged
     is whether the ROW reads as seven links, which 7px of white between
     them answers and 8px of padding did not.
     (5 -> 10 across the band: 5 / 300 = 0.016667 per px of viewport.) */
  .br-nav {
    --_link-pad-x: calc(5px + (100vw - 56.25rem) * 0.016667);
    /* 7 at 900, 16 at 1200. (9 / 300 = 0.03 per px of viewport.) */
    --_link-gap: calc(7px + (100vw - 56.25rem) * 0.03);
  }
}

@media (min-width: 1200px) {
  .br-nav,
  .br-utility { --_gutter: calc(var(--br-u) * 10 / 3); }   /* measured 93.85 @1440 */
}

/* ==========================================================================
   COMPACT HEADER  (below 900px)
   ========================================================================== */

@media (max-width: 899.98px) {
  /* Measured on the reference's own small-screen pill: 14/24 inside 3px/16px,
     110.03 x 32. Slightly narrower than the desktop pill, which is what buys
     the hamburger its room at 360px. */
  .br-nav .br-nav__cta {
    padding-inline: var(--br-space-4);
    font-size: var(--br-small-size);
  }
}

/* The gold pill is the loudest object in this bar, so it is the last thing
   to give and it keeps its measured 110.03 through 390 — the width the
   reference is judged at. Below that the row is logo + pill + hamburger
   inside 280-390px and the padding is what gives. */
@media (max-width: 389.98px) {
  .br-nav .br-nav__cta { padding-inline: var(--br-space-2); }   /*  94.03 */
}

/* ==========================================================================
   PRINT
   article.css and service.css each drop `.br-nav` on paper. Neither knew
   about a utility bar, so a printed page carried a strip of phone number,
   email address and three social icons at the top and nothing else from the
   header. The chrome is one element now and this file owns it, so the rule
   belongs here and covers all 107 pages rather than the two templates that
   remembered to write it.
   ========================================================================== */

@media print {
  .br-chrome { display: none; }
}

/* ==========================================================================
   REDUCED MOTION
   base.css already collapses durations; the delays have to go too, or the
   sheet's rows sit invisible for their stagger before appearing.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .br-nav__drawer,
  .br-nav__drawer-link,
  .br-nav__drawer-list > li,
  .br-nav__disclosure[open]::after { animation: none; }
}