/* HBA of Dothan — authored lane, structural styling.
 *
 * Every value here is measured. Provenance: docs/design/tokens.json, which the
 * Stage C adversary re-derives from docs/design/measurements/ on every CI run.
 * If a number here disagrees with the token file, the token file wins and this
 * file is wrong.
 *
 * Specificity note (SEAS battery sweep S-2): Bricks emits compiled class rules at
 * (0,2,0) and element-id rules at (1,0,0). Rules below that must beat a
 * tree-set property are written to win deliberately, never by accident.
 */

/* ------------------------------------------------------------ root scale ---
 * ⛔ RULED SIBLING FIX (McCardle battery row 2 / ledger M1, re-confirmed on
 * Nexus): NORMALIZE THE ROOT, DO NOT RESCALE VALUES.
 *
 * Bricks' frontend-layer.min.css ships `html{font-size:62.5%}` — a 10px root —
 * while every value transcribed from the live site's Tailwind assumes a 16px
 * root, so a transcribed rem renders at 0.625x (22px where 35.2px was measured).
 * The ruling makes the poison inert at the source instead of chasing it through
 * every stylesheet: reset the root here, in the first-loaded authored file, and
 * every rem on the page means what its author thought it meant.
 *
 * I learned this the expensive way BEFORE finding the ruling: all three authored
 * CSS files were swept to px-only. That work stands and is unaffected (px is
 * absolute) — this reset exists so the NEXT transcribed rem renders at face
 * value instead of silently shrinking. Measured risk: Bricks' own frontend CSS
 * carries just 6 rem literals, and both sibling live sites run this exact reset
 * on this exact theme.
 *
 * Same (0,0,1) specificity as Bricks' rule; this file loads later, so source
 * order wins. Verify after any theme update: computed html font-size must be
 * 16px (battery P-6).
 */
html { font-size: 100%; }

/* ---------------------------------------------------------------- fonts ---
 * THE FACES LIVE HERE, NOT IN THEME STYLES. See hba-site.php's header for why.
 */
:root {
  --hba-font-display: "Oswald", "Arial Narrow", sans-serif;
  --hba-font-text: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body,
.brxe-text-basic,
.brxe-text-link,
.brxe-text,
input,
select,
textarea,
button {
  font-family: var(--hba-font-text);
}

h1, h2, h3, h4, h5, h6,
.brxe-heading {
  font-family: var(--hba-font-display);
}

/* NOTE on custom-property NAMES (2026-08-20, battery row P-5).
 * These are `--hba-amberfill` / `--hba-amberink`, NOT `--hba-amber-fill` /
 * `--hba-amber-ink`. This file read the hyphenated spellings for weeks; the
 * seeder emits the unhyphenated ones, so BOTH variables were UNDEFINED and every
 * amber painted purely from its literal fallback. Nothing looked wrong, and the
 * token pipeline was disconnected the whole time — a routine "remove the
 * duplicated literal" edit would have deleted the CTA's background.
 * A FALLBACK IS A SAFETY NET, NOT A WIRE. Row P-5 now proves the wire: every
 * var(--hba-*) the authored lane reads must resolve at runtime.
 */

/* --------------------------------------------------------- shared bits --- */
.hba-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Measured: CTA letter-spacing is 0.7px — DOUBLE the nav's 0.35px. Deliberate,
 * and the easiest thing to normalise away by accident. */
.hba-cta {
  /* 2026-08-21 owner review: `--link` CTAs were rendering as 1216px-wide blocks
   * (Bricks blockifies flex items and the section column stretched them), so
   * "ALL NEWS" read as stray text and one --primary painted a full-width amber
   * bar. Every live CTA is a content-width inline-flex control (H: `flex
   * items-center gap-2` on buttons, `inline-flex items-center gap-1` on links).
   * `width: fit-content` is the half that survives flex-item blockification —
   * `display: inline-flex` alone does NOT stop a stretched flex child.
   * Base gap is 4px (H gap-1, the link register); the button variants in
   * hero.css set their measured 8px (gap-2) on top. Gap transitions for the
   * live grow-on-hover arrow gesture (H `transition-all`, 200ms). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: fit-content;
  font-family: var(--hba-font-display);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.7px;
  color: #fff;
  background: var(--hba-amberfill, #fe9a00);
  padding: 8px 18px;
  border-radius: 4px;   /* live is Tailwind `rounded` = 4px, tallied 49x. This
                         * carried 6px until 2026-08-20 — reported independently by
                         * two agents; neither would change it for one button since
                         * header/footer CTAs share the base. Corrected once, here. */
  text-decoration: none;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              gap 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hba-cta:hover { background: var(--hba-amberink, #ffb900); }

/* ⛔ `flex-direction: row` IS LOAD-BEARING ON EVERY .brxe-container.
 *
 * Bricks ships `.brxe-container { display:flex; flex-direction:column;
 * align-items:flex-start; width:1100px }`. The rules below set `display:flex`
 * and `align-items:center` and — until 2026-08-20 — never restated the
 * DIRECTION. So Bricks' `column` stood, the lockup/nav/CTA STACKED, and the
 * header measured 234px at 1440 and 241px at 390 against the live site's 101px.
 * Every page hero's first heading then sat ~110px under the fixed header while
 * the hero's own 128px clearance was perfectly correct.
 *
 * THIS IS THE THIRD INSTANCE OF ONE PATTERN on this build:
 *   - B-4: Bricks sets `width:1100px`, so overriding `max-width` alone did nothing.
 *   - body.css: Bricks sets `align-items:flex-start`, so every grid, split and
 *     centred header shrink-wrapped (and `text-align:center` became a no-op).
 *   - here: Bricks sets `flex-direction:column`, so the chrome stacked.
 * RULE: authoring layout onto a .brxe-container means restating direction,
 * alignment AND width explicitly. Setting some of them leaves Bricks owning the
 * rest, and the property you did not think to set is the one that breaks it.
 *
 * Specificity: a plain (0,1,0) class rule is enough — site.css is enqueued after
 * frontend-layer.min.css, so equal specificity wins on source order. Measured.
 */

/* ---------------------------------------------------------- utility bar --- */
.hba-utilitybar {
  background: #0d1b2a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.102);
  padding: 6px 0;
}
.hba-utilitybar__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.hba-utilitybar__partners { display: flex; align-items: center; gap: 20px; }
.hba-utilitybar__phone,
.hba-utilitybar__partner {
  font-size: 12px;
  line-height: 16px;   /* live `text-xs` — without this the row runs ~20px and the
                        * header lands 8px short of 101 */
  color: rgba(255, 255, 255, 0.698); /* white/70 — the 3rd most-painted value on the site */
  text-decoration: none;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hba-utilitybar__phone:hover,
.hba-utilitybar__partner:hover { color: #ffb900; }
/* The utility bar's external-link glyph is 10px on live and its row gap is 4 —
 * measured in the rendered DOM 2026-08-21 (live anchor 42px wide, ours 49 at a
 * 16px glyph and a 5px gap). The 16 is the site-wide .hba-icon default; this bar
 * is the one place live runs it smaller. Landed with the composition change that
 * moved the glyph BEFORE the label, where live has always had it. */
.hba-utilitybar__partner {
  gap: 4px; /* H gap-1 */
}
.hba-utilitybar__partner .hba-icon--external {
  width: 10px;
  height: 10px;
}

/* --------------------------------------------------------------- header ---
 * Fixed, z-50, 101px total including the utility bar. Measured: it does NOT
 * shrink on scroll — only the field, blur and shadow change, and only on home.
 */
#brx-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
              backdrop-filter 300ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Interior routes: the scrolled state, always. This is the DEFAULT because it
 * is correct on 10 of the 11 routes. */
body.hba-chrome-solid #brx-header,
body.hba-chrome-reactive.hba-scrolled #brx-header {
  background: rgba(13, 27, 42, 0.969);
  backdrop-filter: blur(12px);
  box-shadow: rgba(0, 0, 0, 0.25) 0 25px 50px -12px;
}

/* Home at rest only. */
body.hba-chrome-reactive #brx-header {
  background: rgba(13, 27, 42, 0.8);
  backdrop-filter: blur(4px);
  box-shadow: none;
}

/* The fixed header overlays content; page heroes carry the 128/64 register that
 * clears it. Anchor targets need the same clearance or they land underneath —
 * /become-a-member#application is linked from every footer. */
:target { scroll-margin-top: 110px; }

.hba-header__main { background: transparent; }
.hba-header__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
  padding-top: 12px;    /* live is `py-3` = 12px, not 10 */
  padding-bottom: 12px;
}

.hba-lockup { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.hba-lockup__wordmark { display: flex; flex-direction: column; line-height: 1.05; }
/* H (Header.tsx:103/106): line1 `text-sm leading-tight tracking-wide` white;
 * line2 `text-amber-400 text-xs tracking-widest uppercase` — amber, not white/70. */
.hba-lockup__line1,
.hba-lockup__line2 {
  font-family: var(--hba-font-display);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.35px;
}
.hba-lockup__line2 {
  color: #ffb900;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1.2px;       /* tracking-widest = 0.1em at 12px */
  text-transform: uppercase;
}

.hba-nav { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.hba-navlink {
  position: relative;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.35px;
  /* ⛔ WHITE, NOT AMBER — the ink and the logo were INVERTED against live and the
   * owner caught it. H (Header.tsx:126 via navLinkClass): an inactive link is
   * `text-white/90 hover:text-white`; amber is reserved for the CURRENT page
   * (`text-amber-400`). Shipping amber on every link spent the site's one
   * emphasis colour on all seven at once, so nothing read as current. */
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Measured: hover grows an ::after underline AND shifts the ink. Both halves are
 * load-bearing — reproducing only the colour loses the gesture. */
.hba-navlink::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 2px;
  background: currentColor;
  transition: width 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hba-navlink:hover { color: #fff; }
.hba-navlink:hover::after { width: 100%; }
/* The current page, and ONLY the current page. `aria-current="page"` is set by
 * site.js against the real pathname: the header is one shared Bricks template, so
 * it cannot know statically which route it is rendering on. Using aria-current
 * rather than a private class means the state is announced to assistive tech as
 * well as painted — live paints it and announces nothing. */
.hba-navlink[aria-current="page"] { color: #ffb900; }

/* The brand mark is an AMBER TILE with the glyph inside it, not a bare glyph.
 * H (Header.tsx:95): `w-12 h-12 bg-amber-500 rounded-lg ... overflow-hidden p-1`
 * wrapping a `w-full h-full object-contain` image — 48x48 tile, 4px inset.
 * bg-amber-500 = #fe9a00 (amberFill), NOT #ffb900 (amberInk) — the two ambers
 * are distinct roles in tokens.json and the tile takes the fill. Done on the
 * <img> itself rather than by adding a wrapper element, because Bricks emits the
 * image as a bare <img> child of the lockup anchor and a wrapper would mean a
 * composition change for a purely visual container. */
.hba-lockup__icon {
  width: 48px;
  height: 48px;
  box-sizing: border-box;
  padding: 4px;                /* H p-1 */
  background: #fe9a00;         /* H bg-amber-500 = amberFill */
  border-radius: 8px;          /* H rounded-lg → 0.5rem */
  object-fit: contain;
}

/* Not a link: no href, no destination. A disclosure/group label. */
.hba-nav-disclosure { cursor: default; }

/* ------------------------------------------------- nav dropdown (HBA Community) ---
 * 2026-08-21 fix round. The composition agent emits a trigger button + a menu
 * list (`hba-nav__menu`), trigger state via [aria-expanded].
 *
 * ⚠ THE OPEN PANEL IS UNSOURCED BY DESIGN OF THE CAPTURE: home.html was captured
 * with the menu CLOSED, so no live open-panel DOM exists. The trigger row IS
 * sourced (H Header.tsx:134): `flex items-center gap-1`, 14px chevron-down,
 * `transition-transform duration-200`. The panel itself is authored to the
 * header's own solid field (rgba(13,27,42,0.969) + blur(12px), the measured
 * scrolled-header register above) with the site's white/10 hairline — the
 * conventions of the field it hangs from, not invented colours. Flagged, not
 * guessed silently.
 *
 * The positioning parent: whatever wraps trigger+menu (live: a `relative` div).
 * :has() reaches it without knowing its class. */
/* Explicit rule for the wrapper the composition emits. The :has() form below
 * also matches it, but a load-bearing position anchor should not depend solely
 * on a relational selector — and paint row P-1 verifies coverage by class NAME,
 * which a :has() match is invisible to. */
.hba-nav__dropdown { position: relative; }

.hba-nav :has(> .hba-nav__menu) { position: relative; }
.hba-nav__menu {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  z-index: 60; /* above the header's own stacking */
  min-width: 220px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: rgba(13, 27, 42, 0.969);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.102);
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.25) 0 25px 50px -12px;
}
.hba-nav [aria-expanded="true"] + .hba-nav__menu,
.hba-nav__menu[data-open="true"] { display: block; }
.hba-nav__menu a,
.hba-nav__menu .hba-nav__menuitem,
.hba-nav__menu .hba-navlink {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 14px;
  font-family: var(--hba-font-text);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: 0.35px;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  border-radius: 4px;
  white-space: nowrap;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hba-nav__menu a:hover,
.hba-nav__menu .hba-nav__menuitem:hover,
.hba-nav__menu .hba-navlink:hover {
  background: rgba(255, 255, 255, 0.102);
  color: #fff;
}
/* Menu items must not inherit the navlink underline gesture. */
.hba-nav__menu .hba-navlink::after { content: none; }

/* Trigger chevron — H: 14px lucide chevron-down, currentColor stroke,
 * `transition-transform duration-200`; rotates when open. */
.hba-nav__chevron {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex: none;
  margin-left: 4px; /* H gap-1 on the trigger row */
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
[aria-expanded="true"] > .hba-nav__chevron { transform: rotate(180deg); }

.hba-menu-toggle {
  display: none;
  width: 40px; height: 40px;
  background: none; border: 0; padding: 8px;
  color: #fff; cursor: pointer;
}
.hba-menu-toggle::before {
  content: "";
  display: block;
  width: 22px; height: 2px;
  background: currentColor;
  box-shadow: 0 7px 0 currentColor, 0 -7px 0 currentColor;
  margin: 0 auto;
}

/* --------------------------------------------------------------- footer --- */
.hba-footer__top { background: #0d1b2a; padding: 56px 0 32px; }
/* FOUR EQUAL COLUMNS. Live is `grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4
 * gap-10` — read off the captured live DOM. This carried an invented
 * `1.4fr 1fr 1fr 1.2fr` ratio until 2026-08-20: plausible-looking, never
 * measured, and wrong in every column. gap-10 = 40px was right. */
.hba-footer__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  /* ⛔ THE FOOTER WAS THE ONE CONTAINER ON THE SITE WITH NO SIDE PADDING, so its
   * columns did not line up with any section above them. Measured 2026-08-21:
   * live's footer grid box is 1472 (1536 container minus `container`'s 32/32);
   * ours measured 1536 with the same four 338px tracks and the same 40px gap, so
   * 64px of slack sat at the end and every column was off live's x by 32.
   * `.hba-section__inner` has carried 0 32 0 32 all along — this is the same
   * container class of element and simply never got it. */
  padding-left: 32px;
  padding-right: 32px;
}
@media (min-width: 768px) {
  .hba-footer__cols { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .hba-footer__cols { grid-template-columns: repeat(4, 1fr); }
}
.hba-footer__logo { width: 167px; height: auto; object-fit: contain; }
.hba-footer__tagline,
.hba-footer__address,
.hba-footer__hours {
  color: rgba(255, 255, 255, 0.698);
  font-size: 14px;
  line-height: 1.6;
}
.hba-footer__heading {
  font-family: var(--hba-font-display);
  color: #ffb900;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.35px;
  margin-bottom: 12px;
}
.hba-footer__col { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.hba-footer__link,
.hba-footer__social {
  color: rgba(255, 255, 255, 0.698);
  font-size: 14px;
  text-decoration: none;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Measured: the live footer link hover changes colour AND the element's rect —
 * it reflows. DEFECT-FIX (INTERACTIONS I-04): keep the colour, drop the reflow. */
.hba-footer__link:hover,
.hba-footer__social:hover { color: #ffb900; }

/* Contact-column rows. Live (Footer.tsx:103-127): `flex items-start gap-2.5`
 * with a 14px amber icon in its own column, so a wrapped line stays in the text
 * column instead of sliding under the icon. The composition wraps the text half
 * in `.hba-footer__rowtext` to give flex its second item. */
.hba-footer__row { display: flex; align-items: flex-start; gap: 10px; }
/* Icon margin/ink/size live with the footer-icons rule in components.css (it
 * loads after this file); the flex-context margin zeroing sits there too. */
.hba-footer__row > .hba-icon { flex: none; }
.hba-footer__rowtext { display: block; min-width: 0; }
/* H (Footer.tsx:127): weekend/holiday note is its own line at white/40, 12px. */
.hba-footer__hours-sub {
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
}

.hba-footer__bar { background: #0d1b2a; padding: 16px 0 24px; }
.hba-footer__barinner {
  display: flex;
  flex-direction: row;
  align-items: center;
  /* H: copyright LEFT, the link cluster RIGHT — `justify-between` with exactly two
   * children. Ours centred four flat children instead, which reads as a different
   * component. Measured on live: `display=flex justify=space-between kids=2`, a
   * <p> and a <div>; ours was `justify=center kids=4`. The wrapper the composition
   * now emits is what makes space-between mean anything — with four flat children
   * it would spread all four across the width. */
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-left: 32px;
  padding-right: 32px;
}
/* The right-hand cluster: social icon, then the partner links. */
.hba-footer__barlinks {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.hba-footer__copyright {
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  margin: 0;
}
/* "Made by Entech" (owner request 2026-09-15) — an inline anchor INSIDE the
 * copyright <p> (the bar must stay two children; see compose-chrome.php).
 * Wears the barlink treatment: same muted white, brighter on hover; underlined
 * because unlike the barlinks it sits inside running text, where only the
 * underline says "this part is a link". Separated by the same white/20 pipe the
 * barlinks use, drawn as a border so the markup carries no meaningless glyphs. */
.hba-footer__credit {
  color: rgba(255, 255, 255, 0.4);
  text-decoration: underline;
  text-underline-offset: 2px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  padding-left: 12px;
  margin-left: 8px;
}
.hba-footer__credit:hover { color: rgba(255, 255, 255, 0.698); }
.hba-footer__barlink {
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  text-decoration: none;
}
.hba-footer__barlink:hover { color: rgba(255, 255, 255, 0.698); }
/* The live separator pipes are white/20 spans. Reproduced as a border so the
 * markup carries no meaningless text nodes. */
.hba-footer__barlink + .hba-footer__barlink,
.hba-footer__copyright + .hba-footer__barlink {
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  padding-left: 12px;
}


/* -------------------------------------------------------- container ladder ---
 * ⛔ THE LADDER LIVES HERE, AND BOTH HALVES ARE LOAD-BEARING.
 *
 * FOUND BY THE BROWSER-TIER BATTERY (row B-4), 2026-08-20, on a site that had
 * already passed 14/14 at the curl tier — because curl cannot measure a box.
 *
 * Two separate defects, one symptom:
 *
 *   1. SIDE PADDING WAS NEVER AUTHORED AT ALL. Measured 0px at every width, so
 *      at 390 and 768 the text began at x=0 and touched BOTH screen edges.
 *      Nothing was competing for it — any rule at any specificity sets it.
 *
 *   2. BRICKS SETS A FIXED `width: 1100px` ON EVERY CONTAINER, not a max-width.
 *      That is its default content width, and it caps the site 180px narrower
 *      than parity from 1280 up. Overriding `max-width` ALONE DOES NOTHING while
 *      a fixed `width` stands — which is exactly why this looks unfixable until
 *      you notice which property is actually set. `width: 100%` is the half that
 *      makes the max-width mean anything.
 *
 * Specificity, measured rather than assumed (see the file header): (0,1,0) loses,
 * (0,2,0) with `width` included WINS. No `!important` is needed and none is used
 * — the doubled class is the minimum that beats what Bricks emits.
 *
 * Values are tokens.json.layout.containerLadder, which the Stage C adversary
 * re-derives from the measurements on every CI run.
 */
.brxe-container.brxe-container {
  width: 100%;
  margin-inline: auto;
  max-width: none;
  padding-inline: 16px;
}
@media (min-width: 640px) {
  .brxe-container.brxe-container { max-width: 640px; padding-inline: 24px; }
}
@media (min-width: 768px) {
  .brxe-container.brxe-container { max-width: 768px; padding-inline: 24px; }
}
@media (min-width: 1024px) {
  .brxe-container.brxe-container { max-width: 1024px; padding-inline: 32px; }
}
@media (min-width: 1280px) {
  .brxe-container.brxe-container { max-width: 1280px; padding-inline: 32px; }
}
@media (min-width: 1536px) {
  .brxe-container.brxe-container { max-width: 1536px; padding-inline: 32px; }
}

/* ------------------------------------------------------------- responsive ---
 * Section vertical rhythm is WIDTH-INVARIANT on this site — the eight registers
 * are byte-identical at 390, 768 and 1440 across all 39 sections. Nothing here
 * may introduce responsive vertical padding (battery row B-5).
 */
@media (max-width: 1023px) {
  .hba-nav { display: none; }
  .hba-menu-toggle { display: block; margin-left: auto; }
  .hba-header__cta { display: none; }

  body.hba-menu-open .hba-nav {
    display: flex;
    position: absolute;
    top: 101px; left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 24px;
    background: rgba(13, 27, 42, 0.969);
    backdrop-filter: blur(12px);
  }
  /* Measured: the live menu does NOT lock body scroll. Carried deliberately
   * (INTERACTIONS I-19) so the rebuild does not silently change the feel. */

  /* The dropdown must not float inside the stacked mobile menu — an absolute
   * panel over a column menu covers the links below it. It becomes an inline
   * indented group; the [aria-expanded] toggle still works unchanged.
   * Items get 44px targets directly (HBA-D-12) — the panel has no geometry
   * that a taller item could break, unlike the utility bar below. */
  .hba-nav__menu {
    position: static;
    min-width: 0;
    width: 100%;
    padding: 0 0 0 16px;
    background: transparent;
    backdrop-filter: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .hba-nav__menu a,
  .hba-nav__menu .hba-nav__menuitem,
  .hba-nav__menu .hba-navlink {
    min-height: 44px;
    padding: 10px 0;
  }
}

/* Tap targets: 24 controls measure under 44px at 375 on the live site. That is a
 * defect in the source and it is fixed here, not reproduced (HBA-D-12). */
@media (max-width: 1023px) {
  .hba-navlink,
  .hba-footer__link,
  .hba-footer__social {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* ⛔ THE UTILITY BAR GETS A 44px HIT AREA WITHOUT A 44px BOX.
   *
   * These two started as `min-height: 44px` like the rest. That is the correct
   * FIX for HBA-D-12 (24 controls measure under 44px on the live site, a source
   * defect we repair rather than reproduce) — but on these two elements it also
   * inflated the utility bar from 29px to 57px, taking the whole header from
   * 101px to 117px at mobile. Page heroes clear the header with a 128px top
   * register, so a 117px header leaves 11px of breathing room where the design
   * has 27px.
   *
   * An accessibility fix should not cost layout geometry. The touch target is
   * expanded with an overlay instead, so the hit area is 44px tall and the box
   * stays 16px. Both facts remain true at once. */
  .hba-utilitybar__phone,
  .hba-utilitybar__partner {
    position: relative;
    display: inline-flex;
    align-items: center;
  }
  .hba-utilitybar__phone::after,
  .hba-utilitybar__partner::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }
}