/* HBA of Dothan — home hero, page heroes, and the CTA variants.
 *
 * Loads after site.css / body.css / components.css (order fixed in hba-site.php).
 * Every value here is read off the CAPTURED LIVE SOURCE, in this order of authority:
 *
 *   1. hba-capture/content/html/*.html        the live DOM as served (Tailwind classes,
 *                                             inline styles, the real @keyframes)
 *   2. hba-capture/screenshots/capture-manifest.jsonl
 *                                             renderedFonts per route at 17 widths
 *   3. docs/design/measurements/observed-tokens.json
 *                                             the mechanical sweep (computed values)
 *   4. docs/design/tokens.json / STYLE_GUIDE.md
 *
 * Where 1–3 disagree with 4 it is called out inline. Nothing here is invented.
 *
 * Specificity, measured not assumed (site.css header, SEAS row S-2): Bricks emits
 * compiled class rules at (0,2,0) and per-element ID rules at (1,0,0). Rules that must
 * beat body.css are written (0,2,0) so they do not depend on file order alone; rules
 * that would have to beat a Bricks ID rule are NOT attempted — where the tree already
 * owns a property this file says so instead of fighting it. No !important is used.
 */

/* ═══════════════════════════════════════════════════════════ HOME HERO ═══
 *
 * Live: <section class="relative min-h-screen flex items-center overflow-hidden">
 *
 * Section vertical padding is 0/0 and the Bricks tree already emits that at (1,0,0)
 * (#brxe-78461b). The 128/80 register lives on the INNER container, exactly as live
 * does it — `relative z-10 container pt-32 pb-20`. Note 128/80, NOT the 128/64 of the
 * page heroes; the two registers are different and both are measured.
 *
 * min-height is 100vh (`min-h-screen`). Corroborated: the capture pinned the viewport
 * at 900px and the hero measures exactly 900px at 1440, growing to 1053px at 390 where
 * the copy outgrows the viewport.
 *
 * ⚠ THE 128px IS WHAT KEEPS THE COPY OUT FROM UNDER THE FIXED HEADER, and it is the
 * only header clearance the home route has. The section register stays 0/0 — the
 * clearance is INTERNAL, exactly as live does it, so the width-invariant rhythm sweep
 * (battery B-5) is untouched. Do not move it onto the section and do not add a global
 * offset; the interior routes carry their own 128/64 register for the same job.
 *
 * Both registers assume a 101px header, which is what live has and what tokens.json
 * records. At the time of writing the rebuilt header measures 234px at 1440 / 241px at
 * 390 — see the note on .hba-pagehero — so the page heroes do NOT clear it. That is a
 * header defect, not a register defect, and it must not be "fixed" by inflating these
 * numbers: the home hero already clears it only because min-height:100vh + centring
 * happens to push the copy down, which is luck, not clearance.
 *
 * ⚠ flex-direction is set EXPLICITLY. Bricks' frontend-layer.min.css ships
 *   .brxe-section { display:flex; flex-direction:column; align-items:center }
 * so on a Bricks section `align-items: center` means HORIZONTAL centring and the copy
 * packs to the top. Live's hero is `flex items-center` in the default ROW direction,
 * where the same declaration centres vertically. Writing align-items alone here would
 * have looked right and done nothing.
 */
.hba-section.hba-hero {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  min-height: 100vh;
  /* Required by the zoom: hba-hero__bg animates to scale(1.08) and would otherwise
   * bleed over the navy band below. Live carries `overflow-hidden` for this reason. */
  overflow: hidden;
}

/* The background layer must anchor to the SECTION so it is full-bleed. In this build
 * it sits inside .hba-section__inner (a .brxe-container, max-width 1280 + side padding),
 * so if that container is ever a containing block the photo gets inset by 80px a side
 * and clipped to the text column. Forcing it static here keeps `inset: 0` resolving to
 * .hba-hero. Scoped to the hero only — it does not touch any other section.
 *
 * (.brxe-container also ships `align-items: flex-start`, which would shrink-wrap the copy
 * block to its longest word. body.css line 176 resets that globally for every
 * .hba-section__inner, so it is deliberately NOT repeated here.) */
.hba-hero > .hba-section__inner {
  position: static;
  padding-top: 128px;
  padding-bottom: 80px;
}

/* ── the photograph ──────────────────────────────────────────────────────────
 * ⛔ THE IMAGE URL IS NOT AND MUST NOT BE IN THIS FILE.
 *
 * The attachment survived the import remap intact: the Bricks tree carries the
 * element background and Bricks emits it as
 *   #brxe-0ba6c9 { background-image: url(<uploads>/hba-hero-bg_9f30a5a2.webp);
 *                  background-size: cover; background-position: center center }
 * at (1,0,0). That rule wins over anything a class can say, so background-image,
 * -size and -position are deliberately absent below — restating them would be dead
 * declarations, and hardcoding the upload URL would break on the next provision.
 *
 * The reason nothing painted was purely geometric: this div had no position, no
 * inset and no height, so it was a 0×0 box. A background image on a zero-height box
 * paints nothing. Fixed here, in CSS, where it belongs.
 *
 * The 20s zoom is NOT here — motion.css already owns .hba-hero__bg's animation and
 * will-change. Authoring it in both files is the failure mode trap 6 warns about.
 */
.hba-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-repeat: no-repeat;
  /* Live's rest state is `scale-105`. It only shows if the animation does not run. */
  transform: scale(1.05);
}

/* ── the darkening overlay ───────────────────────────────────────────────────
 * Live paints this as its own sibling layer:
 *   <div class="absolute inset-0 bg-gradient-to-r
 *               from-[#0d1b2a]/95 via-[#0d1b2a]/75 to-[#0d1b2a]/40">
 * The composition emitted no element for it, so it is reproduced as .hba-hero::before.
 * ::before is used rather than ::after so it paints under the copy; z-index puts it
 * between the photo (0) and the copy (2). It must NOT be a child of .hba-hero__bg or
 * the zoom would scale the gradient with the photo.
 *
 * Left-to-right, not top-to-bottom: the copy sits in the 95% end and the sunset stays
 * legible at the 40% end. That asymmetry is the whole composition of the shot. */
.hba-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to right,
    rgba(13, 27, 42, 0.95) 0%,
    rgba(13, 27, 42, 0.75) 50%,
    rgba(13, 27, 42, 0.4) 100%
  );
}

.hba-hero__copy {
  position: relative; /* lifts the copy above the photo and the overlay */
  z-index: 2;
  color: #fff;
}

/* ── hero eyebrow ────────────────────────────────────────────────────────────
 * The hero's eyebrow is a PILL and is unlike every other eyebrow on the site. Live:
 *   inline-block bg-amber-500/20 border border-amber-500/40 text-amber-400
 *   text-xs font-['Oswald'] tracking-[0.2em] uppercase px-4 py-1.5 rounded mb-6
 * Measured (observed-tokens componentInk `div.inline-block.bg-amber-500/20.border`):
 *   #ffb900 on rgba(254,154,0,.2), border rgba(254,154,0,.4), Oswald 12/16/400,
 *   letter-spacing 2.4px, uppercase, radius 4px — routes: ["/"] only.
 * The composition reused the shared .hba-eyebrow class here, so this is a hero-scoped
 * override at (0,2,0). The base .hba-eyebrow belongs to body.css and is not touched. */
.hba-hero .hba-eyebrow {
  display: inline-block;
  margin-bottom: 24px;
  padding: 6px 16px;
  border: 1px solid rgba(254, 154, 0, 0.4);
  border-radius: 4px;
  background: rgba(254, 154, 0, 0.2);
  color: #ffb900;
  font-family: var(--hba-font-display);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

/* ── the two-line lockup ─────────────────────────────────────────────────────
 * ⚠ READ THIS BEFORE "FIXING" THE SIZES.
 *
 * HBA-D-12 swapped the TAGS but not the LOOK: on live, "WELCOME TO THE" is the <h1>
 * and the association name is the <h2>; in this build the association name is the <h1>
 * and "WELCOME TO THE" is display text above it. The visual treatment did not move.
 *
 * So the famous h1 ladder — 64 / 51.2 / 38.4 / 35.2 — belongs to .hba-hero__kicker
 * here, NOT to the element that is now the <h1>. Anyone who "restores" the ladder onto
 * .hba-hero__h1 will make the amber line 64px and break the lockup.
 *
 * And the ladder is not a ladder: it is a clamp. capture-manifest renderedFonts.h1 for
 * the home route at 17 widths reads
 *   360–640 35.2 · 767 38.35 · 768 38.4 · 899 44.95 · 960 48 · 1023 51.15 · 1024 51.2 ·
 *   1279 63.95 · 1280/1440/2560 64
 * which is clamp(2.2rem, 5vw, 4rem) evaluated continuously. tokens.json's four rungs are
 * that clamp sampled at four widths, not four media-query steps. Authoring it as steps
 * would be wrong at 899 and 960, where the capture actually measured it.
 *
 * ⛔ THE CLAMP IS IN px, NOT rem, AND THAT IS DELIBERATE.
 * Bricks' frontend-layer.min.css ships `html { font-size: 62.5% }`, so 1rem is 10px on
 * this build, not the 16px the live Tailwind source assumed. Transcribing live's
 * `clamp(2.2rem, 5vw, 4rem)` literally renders 22 → 40px instead of 35.2 → 64px: a 0.625×
 * miss that still looks like a plausible heading and still passes a "clamp is present"
 * check. Measured here at 22 / 38.4 / 40 before the fix. px reproduces the rendered
 * ladder and is immune to whatever the root ends up being. Do not "tidy" these to rem.
 *
 * line-height equals size (`leading-none`) — no leading, per STYLE_GUIDE §2. */
.hba-hero .hba-hero__kicker {
  margin: 0 0 16px;
  font-family: var(--hba-font-display);
  font-size: clamp(35.2px, 5vw, 64px);
  line-height: 1;
  font-weight: 700;
  color: #fff;
}

/* The association name. Live's <h2>: clamp(1.6rem, 4vw, 3rem), leading-tight, amberInk.
 * renderedFonts.h2, home route: 25.6/32 to 640 · 30.72/38.4 at 768 · 40.96/51.2 at 1024 ·
 * 48/60 from 1279 up. 4vw between the stops, 1.25 line-height throughout.
 * px for the same 62.5%-root reason as the kicker above — live's `clamp(1.6rem, 4vw, 3rem)`
 * rendered 16 → 30px here before the fix, against a measured 25.6 → 48px. */
.hba-hero .hba-hero__h1 {
  margin: 0 0 24px;
  font-family: var(--hba-font-display);
  font-size: clamp(25.6px, 4vw, 48px);
  line-height: 1.25;
  font-weight: 700;
  color: #ffb900;
}

/* white/80 — three occurrences on the whole site, all of them this paragraph
 * (STYLE_GUIDE §1 alpha ladder). The page-hero intro is white/70; they are not the
 * same value and must not be collapsed. max-width 576px = `max-w-xl`, and the capture
 * measured that box at 576px at 1440 and 343px at 375. */
.hba-hero .hba-hero__intro {
  margin: 0 0 32px;
  max-width: 576px;
  font-family: var(--hba-font-text);
  font-size: 18px;
  line-height: 29.25px;
  color: rgba(255, 255, 255, 0.8);
}

/* ══════════════════════════════════════════════════════════ PAGE HEROES ═══
 *
 * Nine routes — about, become-a-member, benefits, board-of-directors, calendar,
 * contact, events, find-a-member, news — and the live markup is byte-identical on all
 * nine: <section class="bg-[#0d1b2a] pt-32 pb-16"><div class="container">…
 *
 * ⚠ 128 TOP / 64 BOTTOM. The extra 64px of top padding is HEADER CLEARANCE — the
 * header is 101px and fixed. Lose it and the first heading on every interior route
 * sits underneath the header.
 *
 * ⚠ MEASURED, AND CURRENTLY NOT ENOUGH — BECAUSE THE HEADER IS WRONG, NOT THIS.
 * Interior content starts at exactly 128px as intended, but the rebuilt header measures
 * 234px at 1440 and 241px at 390 against live's 101px, so every page hero's eyebrow and
 * h1 sit 106–113px underneath it. Cause: .hba-header__inner and .hba-utilitybar__inner
 * are .brxe-container elements, and Bricks ships .brxe-container{flex-direction:column}.
 * site.css gives them `display:flex; align-items:center` but never `flex-direction:row`,
 * so the lockup, nav and header CTA stack vertically. Fixing that in site.css restores
 * the 101px header and this register then clears it by 27px, exactly as live does.
 * Do NOT compensate by raising 128 here — that would break parity on nine routes.
 *
 * The Bricks tree already emits `padding-top:128px; padding-bottom:64px` per section at
 * (1,0,0) (verified on all nine ids), so the rule below is currently INERT — an ID rule
 * beats a class rule and this can never override it. It is kept as a same-value floor so
 * that a tree that silently loses the setting still clears the header, because that
 * failure is invisible in CI and catastrophic on screen. It cannot conflict with the
 * tree: at (0,1,0) it can only ever apply when the tree rule is absent. */
.hba-pagehero {
  padding-top: 128px;
  padding-bottom: 64px;
}

/* Live: `font-['Oswald'] font-bold text-white text-4xl lg:text-5xl mb-4`.
 * This is a REAL two-step, not the home hero's clamp — capture-manifest renderedFonts.h1
 * on /about and /benefits is 36/40 at every width from 360 to 1023 and 48/48 from 1024
 * to 2560. Do not give it the 64px clamp; page-hero h1s never reach 64px anywhere. */
.hba-pagehero h1 {
  margin: 0 0 16px;
  font-family: var(--hba-font-display);
  font-size: 36px;
  line-height: 40px;
  font-weight: 700;
  color: #fff;
}
@media (min-width: 1024px) {
  .hba-pagehero h1 {
    font-size: 48px;
    line-height: 1;
  }
}

/* Live: `text-white/70 font-['Source_Sans_3'] text-lg max-w-2xl`. white/70, not the home
 * hero's white/80. max-w-2xl = 672px, not the hero's 576px. Both differences are real. */
.hba-pagehero .hba-body {
  max-width: 672px;
  color: rgba(255, 255, 255, 0.698);
}

/* ════════════════════════════════════════════════════════ CTA VARIANTS ═══
 *
 * .hba-cta already exists in site.css and carries the shared label: Oswald 600, 14/20,
 * letter-spacing 0.7px — DOUBLE the nav's 0.35px, and it comes from Tailwind
 * `tracking-wider` (0.05em) on a 14px label, which is where the 0.7 actually comes from.
 * Nothing below restates the label.
 *
 * What the variants do add is the BOX. The base sets padding but no `display`, and an
 * inline <a> with vertical padding does not grow its line box — the padding overflows
 * and the row's height comes out wrong. Every live CTA is inline-flex/flex, so the
 * button-shaped variants take it here.
 *
 * Transition: the base transitions `background-color` only, at 150ms. Live's buttons are
 * `transition-all duration-200`, and the outline variants change BORDER colour on hover,
 * which the base's transition does not cover at all — so the button-shaped variants
 * override it. This is a functional need, not a preference. (site.css's 150ms is also a
 * parity miss for the header CTA — reported, not patched here.)
 *
 * Radius: every live CTA measures 4px (`rounded`), and observed-tokens' radius tally is
 * 4px×49 with no 4px owner other than this family and the hero pill. The base sets 6px.
 * That is a site.css value and is NOT overridden here, because the header and footer CTAs
 * share the base and a half-fixed radius is worse than a uniform one. Reported.
 */
.hba-cta.hba-cta--primary,
.hba-cta.hba-cta--outline,
.hba-cta.hba-cta--outline-dark,
.hba-cta.hba-cta--onamber,
.hba-cta.hba-cta--onamber-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background-color 200ms var(--hba-ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
              border-color 200ms var(--hba-ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
              color 200ms var(--hba-ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
              transform 200ms var(--hba-ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
}

/* `active:scale-95` is on every live CTA except the on-amber outline (see below).
 * It is not in INTERACTIONS.md's 25 rows — that is a gap in the doc, not in the site. */
.hba-cta.hba-cta--primary:active,
.hba-cta.hba-cta--outline:active,
.hba-cta.hba-cta--outline-dark:active,
.hba-cta.hba-cta--onamber:active {
  transform: scale(0.95);
}

/* The hero register: px-7 py-3. Shared by the three 14px button variants. */
.hba-cta.hba-cta--primary,
.hba-cta.hba-cta--outline,
.hba-cta.hba-cta--outline-dark {
  padding: 12px 28px;
}

/* The LARGE label register (owner round 2, 2026-08-22: "fonts too small in
 * places"). Live's band/stub CTAs carry `text-base` — no `text-sm` — so the
 * label is 16/24 with `tracking-wider` on 16px = 0.8px: About.tsx:308,
 * Benefits.tsx:186 (`text-base` explicit), BoardOfDirectors.tsx:45. The header
 * and hero CTAs stay at the shared 14/20/0.7. Composed as an extra class next
 * to the variant (hba-cta--lg); only the label steps up — padding stays at the
 * shared register. */
.hba-cta.hba-cta--lg {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.8px;
}

/* ── primary ────────────────────────────────────────────────────────────────
 * Live: `bg-amber-500 hover:bg-amber-400 text-white … px-7 py-3 rounded`.
 * The fill and the hover are ALREADY the base's (#fe9a00 at rest → #ffb900 on hover —
 * amber-500 to amber-400, the direction people get backwards), so this variant adds
 * only the box. That is deliberate, not an omission: the measured difference between
 * .hba-cta and a live primary CTA is the padding and the display mode, nothing else. */

/* ── outline (dark grounds) ─────────────────────────────────────────────────
 * All three uses sit on hba-field-charcoal (home hero, /events, /news — verified in the
 * emitted markup). Live: `border border-white/40 hover:border-white/80 text-white`,
 * transparent at rest AND on hover, so the base's amber fill has to be cleared in both
 * states or the hover paints solid amber.
 *
 * Corroborated twice over: observed-tokens' `a.border.border-white/40.hover:border-white/80`
 * signature, and the alpha ladder's white/40 row — 132 occurrences, "Outline-button
 * borders at rest (hover -> /80)".
 *
 * The one hover register in observed-tokens that actually resolved this element is
 * labelled "home card" (`section [class*="rounded"]` nth 2). Its rect is 134×46 at
 * y=665 — that is this button, not a card: 46px = 20 line + 12+12 padding + 2 border,
 * and 134px is "CONTACT US" at 56px of padding. Its delta is border white/40 → white/80,
 * which is exactly this rule. See the report. */
.hba-cta.hba-cta--outline {
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: #fff;
}
.hba-cta.hba-cta--outline:hover {
  border-color: rgba(255, 255, 255, 0.8);
  background: transparent;
}

/* ── outline-dark (dark ink, light grounds) ─────────────────────────────────
 * Named for its INK, not its ground: all five uses sit on white/offWhite fields.
 * Live: `border border-[#1e3a5f] text-[#1e3a5f] hover:bg-[#1e3a5f] hover:text-white`.
 * The hover fills in — it is not a border-only shift like --outline. */
.hba-cta.hba-cta--outline-dark {
  border: 1px solid #1e3a5f;
  background: transparent;
  color: #1e3a5f;
}
.hba-cta.hba-cta--outline-dark:hover {
  background: #1e3a5f;
  color: #fff;
}

/* ── the on-amber pair ──────────────────────────────────────────────────────
 * The site's single amberFill section (/about §7) — "the deliberate punctuation", per
 * the page spec. Both buttons are a size up from the hero register: no text-size class
 * at all, so they inherit 16px, and `tracking-wider` on 16px is 0.8px rather than 0.7px.
 * Padding is px-8 py-3.5 = 14px 32px. Both differences are authored, not incidental.
 *
 * observed-tokens cannot confirm these two: its component signature is tag + first three
 * classes, so `a.inline-flex.items-center.gap-2` collapses this button together with the
 * navy text links, and the aggregate kept the text link's values (16/24, 0.4px, navy, no
 * fill). The captured live HTML is the authority here. */
.hba-cta.hba-cta--onamber,
.hba-cta.hba-cta--onamber-outline {
  padding: 14px 32px;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.8px;
}

/* Charcoal on amber, hover to navy. */
.hba-cta.hba-cta--onamber {
  background: #0d1b2a;
  color: #fff;
}
.hba-cta.hba-cta--onamber:hover {
  background: #1e3a5f;
}

/* Despite the name this carries NO border on live — it is a translucent white fill,
 * `bg-white/20 hover:bg-white/30`. Reproduced as measured; the class name is a hook,
 * not a spec. It is also the one CTA on the site with no `active:scale-95`, which is a
 * live inconsistency inside a single two-button row — carried, and reported. */
.hba-cta.hba-cta--onamber-outline {
  border: 0;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.hba-cta.hba-cta--onamber-outline:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ── link ───────────────────────────────────────────────────────────────────
 * 30 uses, and they are a genuine collapse: live paints this role in three inks and two
 * sizes depending on where it sits (navy→amber-500 for standalone "view all" links at
 * 16px; amber-500 at 14px inside light cards; amber-400 at 14px inside dark cards). One
 * class cannot carry all of that. What IS common to every one of them is the shape —
 * Oswald semibold, no fill, no border, no padding, an inline icon gap, and a
 * `transition-colors` — so the shape is authored here and the ink follows the field.
 *
 * letter-spacing is reset to normal: the base's 0.7px (`tracking-wider`) is not used by
 * a single live text-link CTA. Three of the four sampled carry no tracking utility at
 * all; one ("VIEW ALL MEMBER BENEFITS") carries `tracking-wide`. `normal` is the
 * majority, and it is measured — not a compromise value.
 *
 * 2026-08-21 fix round: the composition now emits classed glyph spans in CTAs
 * (hba-cta__arrow / hba-cta__icon, components.css), so the live icon+gap gesture
 * (`gap-1` growing to `gap-2` on hover — H `group-hover:gap-2 transition-all`)
 * is authored below. The base gap 4px (gap-1) and its 200ms transition live on
 * .hba-cta in site.css. */
.hba-cta.hba-cta--link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #1e3a5f;
  letter-spacing: normal;
  transition: color 150ms var(--hba-ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
}
.hba-cta.hba-cta--link:hover {
  background: transparent;
  color: #fe9a00;
}

/* The gap-grow gesture: H `gap-1 group-hover:gap-2 transition-all`. Live's
 * trigger is the CARD hover (group), not the link itself — both are authored so
 * the standalone links ("VIEW ALL MEMBER BENEFITS") still get the gesture. */
.hba-cta.hba-cta--link:hover,
.hba-card:hover .hba-cta--link,
.hba-card--dark:hover .hba-cta--link,
.hba-card--icon:hover .hba-cta--link {
  gap: 8px; /* H gap-2 */
}

/* On the dark fields the navy ink would be all but invisible. Live switches to amberInk
 * there — measured on home's charcoal news band and on /benefits' dark cards — and does
 * NOT change colour on hover; the live gesture on those is the icon gap, which this
 * build has no icon for. So the hover holds the ink rather than inventing one. */
.hba-field-charcoal .hba-cta.hba-cta--link,
.hba-field-navy .hba-cta.hba-cta--link {
  color: #ffb900;
}
.hba-field-charcoal .hba-cta.hba-cta--link:hover,
.hba-field-navy .hba-cta.hba-cta--link:hover {
  color: #ffb900;
}

/* ── textlink (delta round, 2026-08-21) ─────────────────────────────────────
 * The centered standalone "VIEW ALL MEMBER BENEFITS" register. H (Home.tsx:409),
 * verbatim: `inline-flex items-center gap-2 text-[#1e3a5f] hover:text-amber-500
 * font-['Oswald'] font-semibold tracking-wide transition-colors` + 16px arrow.
 * No text-size class ⇒ inherits 16/24; tracking-wide at 16px = 0.4px. The hover
 * is INK ONLY (`transition-colors`, gap stays gap-2) — no gap grow here, unlike
 * the in-card links. Inline/fit-content comes from the .hba-cta base. */
.hba-cta.hba-cta--textlink {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  gap: 8px; /* H gap-2, static */
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.4px; /* H tracking-wide */
  color: #1e3a5f;
  transition: color 200ms var(--hba-ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
}
.hba-cta.hba-cta--textlink:hover {
  background: transparent;
  color: #fe9a00; /* H hover:text-amber-500 */
}

/* ── lg (delta round, 2026-08-21) ───────────────────────────────────────────
 * The FIND A MEMBER size hook. H (Home.tsx:557): `px-8 py-3.5` = 14px 32px;
 * everything else rides the base + --primary. (Same box as the on-amber pair,
 * but this one keeps the 14px label — live has no text-size change here.) */
.hba-cta.hba-cta--lg { padding: 14px 32px; }

/* ── tap targets ────────────────────────────────────────────────────────────
 * HBA-D-12 / I-21: 24 controls measure under 44px at 375 on live. That is a defect in
 * the source and site.css already fixes it for the chrome. The button-shaped variants
 * are 44–46px tall from their own padding and need nothing; --link is a bare text link
 * and does not, so it gets the same treatment site.css gives the nav and footer links. */
@media (max-width: 1023px) {
  .hba-cta.hba-cta--link,
  .hba-cta.hba-cta--textlink {
    min-height: 44px;
  }
}


/* ------------------------------------------------------------- CTA: navy ---
 * The FORM SUBMIT register, measured — not inferred from the CTA family.
 * observed-tokens hoverRegisters[6] ("submit button", /contact): backgroundColor
 * #1e3a5f at rest -> #162d4a on hover. Live's submit is NAVY; the obvious guess
 * (amber `--primary`, the "main button") is wrong, and I made it before reading
 * the measurement. Added 2026-08-20 after browser row B-11 / I-08 found the CF7
 * submit rendering with raw UA styling (rgb(240,240,240), no hover at all).
 */
.hba-cta--navy { background: #1e3a5f; }
.hba-cta--navy:hover { background: #162d4a; }

/* 2026-08-21 fix round: --navy is now ALSO the section-header action button
 * ("VIEW CALENDAR", H Home.tsx:431: `bg-[#1e3a5f] hover:bg-[#162d4a] … px-6
 * py-2.5 … active:scale-95 flex items-center gap-2`) — the same fill pair the
 * submit register measured. Icon spacing and the button behaviours are added
 * here; the sectionhead-scoped rules in components.css carry the px-6 py-2.5
 * box so the CF7 submit's padding is not disturbed. */
.hba-cta.hba-cta--navy {
  gap: 8px; /* H gap-2 */
  transition: background-color 200ms var(--hba-ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
              gap 200ms var(--hba-ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
              transform 200ms var(--hba-ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
}
.hba-cta.hba-cta--navy:active { transform: scale(0.95); }

/* ════════════════════════════════════════════════ HERO LAYOUT HALVES ═══
 * 2026-08-21 fix round. Live (H Home.tsx:191–199): the hero inner is
 *   `flex flex-col lg:flex-row items-center justify-between gap-8`   ← copy row
 * with the copy block flex-1 and the tile rail `w-full lg:w-[420px] flex-shrink-0`
 * holding `grid grid-cols-2 gap-4`.
 * (The `gap-12 lg:gap-20` list is the ABOUT split, not the hero — read twice.)
 *
 * ⚠ CLASS NAMES PARTLY ASSUMED: the composition agent's wrapper name is not yet
 * reconciled. `.hba-hero__grid` is authored at :where() zero-added specificity
 * per the TL brief; `.hba-hero__copy` and `.hba-tiles` are the agreed halves.
 * If his wrapper differs, only the :where() selector needs renaming. */
.hba-hero :where(.hba-hero__grid) {
  display: flex;
  flex-direction: column; /* restated against .brxe-container column/flex-start (3 priors) */
  align-items: center;
  justify-content: space-between;
  gap: 32px; /* H gap-8 */
  width: 100%;
}
.hba-hero .hba-hero__copy { flex: 1 1 auto; width: 100%; }
.hba-hero .hba-tiles {
  width: 100%;
  flex: none;
  /* Live is 2×2 at EVERY width (`grid-cols-2`, no responsive variant) — this
   * (0,2,0) rule also beats components.css's generic max-767 single-column
   * fallback, which serves the non-hero 3-up rail only. */
  grid-template-columns: repeat(2, 1fr);
  gap: 16px; /* H gap-4 */
  position: relative;
  z-index: 2; /* above the photo (0) and the overlay (1), like the copy */
}
@media (min-width: 1024px) {
  .hba-hero :where(.hba-hero__grid) { flex-direction: row; }
  .hba-hero .hba-tiles { width: 420px; } /* H lg:w-[420px] */
}