/* bb-careers.css — /careers/ page-specific rules. TRUST-PAGES-SPEC.md section 8.
   Archetypes come from bb-arch.css; bb-final from bb-pillar.css.
   Role cards deliberately carry NO salary slot and NO location slot: spec section 8
   locks compensation and location off this page, in copy and in schema. */

.bb-careers-roles { background: #FFFFFF; padding: 96px 0; }
.bb-careers-roles h2 { color: var(--bb-tx, #111827) !important; margin: 0 0 40px; }
.bb-careers-roles h2 em { font-style: normal; color: var(--bb-or-text, #C24A00); }
.bb-careers-roles .bb-eyebrow {
  display: inline-block; font-size: var(--bb-t-eyebrow, 0.70rem); font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--bb-or-text, #C24A00); margin: 0 0 12px;
}

.bb-careers-grid {
  /* DEFECT 2: a 3-column grid left an empty slot on row two for five cards.
     Six tracks: the first two roles span 3 (two across), the remaining three
     span 2 (three across). Five cards, no hole, and the two highest-priority
     roles get the wider row. */
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--bb-s5, 24px);
  align-items: start;
}
.bb-careers-grid > .bb-careers-card:nth-child(-n+2) { grid-column: span 3; }
.bb-careers-grid > .bb-careers-card:nth-child(n+3)  { grid-column: span 2; }
.bb-careers-card {
  display: flex; flex-direction: column; align-items: flex-start;
  background: var(--bb-l1, #FAFAFA);
  border: 1px solid var(--bb-l4, #E2E5EC);
  border-radius: 10px;
  padding: 24px;
  text-decoration: none !important;
  transition: transform 0.18s cubic-bezier(0.2,0,0.2,1), border-color 0.18s, box-shadow 0.18s;
}
.bb-careers-card:hover {
  transform: translateY(-3px);
  border-color: var(--bb-l5, #CBD2DC);
  box-shadow: var(--bb-sh-2, 0 4px 12px rgba(17,24,39,0.07));
}
.bb-careers-tag {
  font-family: var(--bb-font-mono, ui-monospace, monospace);
  font-size: 0.7rem; font-weight: 600;
  color: var(--bb-tx2, #2B3542);
  background: var(--bb-l2, #F4F5F7);
  border: 1px solid var(--bb-l4, #E2E5EC);
  border-radius: 100px;
  padding: 3px 10px;
  margin-bottom: 14px;
}
.bb-careers-card h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  line-height: 1.35;
  /* open roles carry the accent. #C24A00 on the light card, per the AA rule. */
  color: var(--bb-or-text, #C24A00);
  text-transform: none !important;
}
.bb-careers-card p {
  margin: 0 0 16px;
  font-size: var(--bb-t-body-s, 0.86rem);
  line-height: 1.65;
  color: var(--bb-tx3, #4F5B68);
  flex-grow: 1;
}
.bb-careers-link { font-size: var(--bb-t-body-s, 0.86rem); font-weight: 600; color: var(--bb-or-text, #C24A00); }

/* full-detail panels below the grid */
.bb-careers-details { display: grid; gap: 24px; max-width: 880px; }
.bb-careers-detail {
  background: #FFFFFF;
  border: 1px solid var(--bb-l4, #E2E5EC);
  border-left: 3px solid var(--bb-or, #FF6A00);
  border-radius: 0 10px 10px 0;
  padding: 28px 32px;
  scroll-margin-top: 110px;   /* anchor lands clear of the fixed header */
}
.bb-careers-detail h3 {
  margin: 0 0 14px;
  font-size: var(--bb-t-h3, clamp(1.1rem, 1.6vw, 1.35rem));
  color: var(--bb-tx, #111827);
  text-transform: none !important;
}
.bb-careers-detail p {
  margin: 0 0 14px;
  font-size: var(--bb-t-body, 0.95rem);
  line-height: 1.75;
  color: var(--bb-tx2, #2B3542);
  max-width: 72ch;
}
.bb-careers-apply {
  display: inline-block;
  font-size: var(--bb-t-body-s, 0.86rem);
  font-weight: 700;
  color: var(--bb-or-text, #C24A00);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* test-task note under the steps */
.bb-careers-tasknote {
  margin: 36px 0 0;
  font-size: var(--bb-t-body, 0.95rem);
  color: var(--bb-tx2, #2B3542);
}

@media (max-width: 1023px) { .bb-careers-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) {
  .bb-careers-roles { padding: 60px 0; }
  .bb-careers-grid { grid-template-columns: 1fr; margin-bottom: 48px; }
  .bb-careers-detail { padding: 22px 20px; }
}

/* ============================================================
   HERO ROLE INDEX (.bb-roleidx)
   Replaces the mono "open_roles.live" status list, which imitated a terminal
   without being one. This is an editorial index: large tabular numerals, real
   anchors into the detail panels, so the hero visual is also a navigation aid.
   ============================================================ */
.bb-stage-visual.bb-roleidx { padding: var(--bb-s6, 32px) !important; }
.bb-roleidx-head {
  margin: 0 0 var(--bb-s4, 16px);
  font-size: var(--bb-t-eyebrow, 0.70rem);
  font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--bb-or, #FF6A00);
}
.bb-roleidx-list { list-style: none !important; margin: 0; padding: 0 !important; }
.bb-roleidx-list li {
  display: flex; align-items: baseline; gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--bb-d7, #232E3B);
}
.bb-roleidx-list li:first-child { border-top: 0; padding-top: 0; }
.bb-roleidx-list li::before { content: none !important; }   /* kill the global tick */
.bb-roleidx-n {
  font-family: var(--bb-font-mono, ui-monospace, monospace);
  font-size: 0.8rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--bb-txw4, rgba(255,255,255,0.55));
  flex-shrink: 0;
}
.bb-roleidx-list a {
  font-size: 0.95rem; font-weight: 600; line-height: 1.4;
  color: var(--bb-txw, #FFFFFF);
  text-decoration: none;
  transition: color 0.18s;
}
.bb-roleidx-list a:hover { color: var(--bb-or, #FF6A00); }

/* ============================================================
   THE STACK, AS A SPEC SHEET (.bb-kit)
   Replaces .bb-stack. This was a list of tool names inside a box, so it is now
   a list. DESIGN-SYSTEM 4 allows one signature per page and /careers/ claimed
   two: this block is deliberately demoted OUT of the diagram system and back
   into prose, which leaves the diagnose/fix/verify progression as the page's
   only Tier 1 diagram. 7.3 rule 6, one focal element, governs diagrams and no
   longer binds this block. Hierarchy is still real: tool names carry the weight,
   group labels are small structural markers, the closing line recedes.

   Every tool name here is a product or platform name, never a code literal, so
   7.3 rule 3 puts all of it in the brand sans. Mono count in this block is 0.
   ============================================================ */

/* Page-scoped panel removal, second of two. bb-arch's .bb-stage-visual wraps the
   hero slot in a --bb-d5 panel with a --bb-d7 border, 32px padding and an orange
   ring: a navy card on a black section, which 7.3 rule 2 forbids. /team/ carries
   its own copy of this in bb-team.css. Two page-scoped overrides is the intended
   outcome; do NOT factor them into a shared class and do NOT touch bb-arch.css,
   which is shared with /design-lab/. */
.bb-stage-visual.bb-kit {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  max-width: 100%;
  box-sizing: border-box;
}

/* Not a panel header: an eyebrow naming the list. Muted, so it does not compete
   with the three orange group labels beneath it. */
.bb-kit-head {
  margin: 0 0 var(--bb-s5, 24px);
  font-family: var(--bb-font-sans);
  font-size: 0.70rem !important; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--bb-txw4, rgba(255,255,255,0.55));
}


/* Elementor's global kit ships `.elementor p { font-size: clamp(15px,3.9vw,17px)
   !important }` at specificity (0,1,1). A single class is (0,1,0) and LOSES even
   with !important, so every <p> in these graphics silently inflated to 15.21px at
   390 where 0.70rem is 12.6px, collapsing the label-to-content hierarchy. It does
   not appear in the page source and curl cannot see it. Restated at (0,2,0),
   which outranks (0,1,1) on class count. Same class of trap as the kit's bare
   `button` rule documented in CLAUDE.md 11. */

/* Groups: label ABOVE its items, items as a wrapped run.

   The first build made this a two-column table with a fixed 128px label column
   and one tool per line. In a 543px crop that looked like a spec sheet. At the
   real column width it is mostly empty: "Meta" and "GA4" sit alone on lines
   360px wide, the hairlines rule across nothing, and the label sits 148px away
   from the item it labels. Eleven one-word lines also made the block very tall
   and very thin, which is the opposite of dense.

   Label above, run beneath, is also what the brief asked for and what the
   original markup already supports. The separator is a pseudo-element on
   subsequent items, so the markup does not carry punctuation. */
.bb-kit-group { padding: 16px 0; }
.bb-kit-group + .bb-kit-group { border-top: 1px solid var(--bb-d7, #232E3B); }
.bb-kit-group:first-of-type { padding-top: 0; }

.bb-kit-k {
  display: block;
  margin-bottom: 8px;
  font-family: var(--bb-font-sans);
  font-size: 0.70rem !important; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--bb-or, #FF6A00);
}
/* Flex, not an inline run. Two white-space approaches failed here. A
   non-breaking separator left the ONLY break opportunities inside the names,
   because the markup has no whitespace between the spans, so "Server-Side /
   Tagging" split across lines. And a trailing space in generated content
   collapses against the next inline box under both `normal` and `pre-wrap`,
   gluing the middot to the following name. Flex items never split internally
   and column-gap is exact, so neither problem can occur. */
.bb-kit-v {
  display: flex; flex-wrap: wrap;
  column-gap: 14px; row-gap: 0;
}
/* the weight of the block sits here: readable size, generous leading */
.bb-kit-v span {
  font-family: var(--bb-font-sans);
  font-size: 0.95rem; font-weight: 500; line-height: 1.7;
  color: var(--bb-txw2, rgba(255,255,255,0.86));
}
.bb-kit-v span:not(:last-child)::after {
  content: "\00b7";
  margin-left: 14px;
  color: rgba(255,255,255,0.30);
}

.bb-kit .bb-kit-head  { font-size: 0.70rem !important; }
.bb-kit .bb-kit-close { font-size: 0.86rem !important; }

/* Body copy, not a caption inside a container. */
.bb-kit-close {
  margin: var(--bb-s5, 24px) 0 0;
  padding-top: var(--bb-s4, 16px);
  border-top: 1px solid var(--bb-d7, #232E3B);
  font-family: var(--bb-font-sans);
  font-size: 0.86rem !important; line-height: 1.65;
  color: var(--bb-txw3, rgba(255,255,255,0.70));
}



/* ============================================================
   TIER 1 OWNED DIAGRAM: diagnose, fix, verify (.bb-job)
   The page's ONLY signature, now that the stack block is prose (DESIGN-SYSTEM 4).
   Replaces .bb-loop. 7.3 as amended: form follows the argument.

   FIRST TWO ATTEMPTS ARE RECORDED HERE SO THEY ARE NOT REBUILT.
   1. Three bordered boxes on a rail with a dashed red arrow pointing at the gap
      and two lines of text attached. The strongest generated-aesthetic tell on
      the site, and the arrow was doing the work the geometry should have done.
   2. Three stages stacked vertically, 03 set large and orange. Removing the
      boxes removed ALL the geometry, so at real width it read as ragged
      left-aligned text with a long hairline floating across an empty column.
      Type size alone is not structure.

   The argument is that 01 and 02 are where most roles stop and 03 is where this
   one goes. So the layout says exactly that:

     01 and 02 sit SIDE BY SIDE, small, equal, sharing the top half
     a hard 1.5px rule closes them across the full width
     03 sits BELOW it at full width, roughly 3.4x the type size, in brand orange

   Two small things, a line across, then one big thing. The pairing also fills
   the column, which is what the stacked version could not do.

   One focal element, 7.3 rule 6: "verify". Nothing else is orange and nothing
   else is anywhere near that size. Its sub-line sits on the same baseline to
   its right so the largest row also uses the full width.

   HTML, not SVG: <text> cannot wrap or respond to viewport, and real text is
   natively accessible, so the old <title>/<desc> pair is not carrying that job.
   ============================================================ */
.bb-job {
  /* 7.3 rule 2: ground is inherited. .bb-arch-split is --bb-d3 and this figure
     used to repaint the same --bb-d3 inside a --bb-d7 border with 24px of
     padding and a 14px radius, which is a card drawn around nothing. */
  margin: 0;
  background: transparent; border: 0; border-radius: 0; padding: 0;
}
.bb-job-head {
  display: block;
  margin: 0 0 var(--bb-s5, 24px);
  font-family: var(--bb-font-sans);
  font-size: 0.70rem; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--bb-txw4, rgba(255,255,255,0.55));
}
.bb-job .bb-job-head { font-size: 0.70rem !important; }

/* 01 and 02: side by side, small, equal */
.bb-job-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--bb-s5, 24px);
}
.bb-job-n {
  display: block;
  font-family: var(--bb-font-sans);
  font-size: 0.70rem; font-weight: 700; letter-spacing: 0.11em;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.40);
}
.bb-job-name {
  display: block;
  margin-top: 2px;
  font-family: var(--bb-font-sans);
  font-size: 0.95rem; font-weight: 600; line-height: 1.3;
  text-transform: none;
  color: var(--bb-txw3, rgba(255,255,255,0.70));
}
.bb-job-sub {
  display: block;
  margin-top: 2px;
  font-family: var(--bb-font-sans);
  font-size: 0.78rem; font-weight: 500; line-height: 1.5;
  color: var(--bb-txw4, rgba(255,255,255,0.55));
}

/* the hard terminal marker. A solid rule, not a dashed callout, and no arrow.
   The label sits ABOVE the rule so it reads as closing 01 and 02 rather than
   introducing 03. 1.5px is the single stroke weight the 7.3 token table locks. */
.bb-job-stop { margin: 26px 0 26px; }
.bb-job-stop-l {
  display: block;
  margin-bottom: 8px;
  font-family: var(--bb-font-sans);
  font-size: 0.70rem; font-weight: 700; letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.40);
}
.bb-job-stop::after {
  content: "";
  display: block;
  height: 1.5px;
  background: rgba(255,255,255,0.30);
}

/* THE focal element */
.bb-job-stage--focus .bb-job-n { font-size: 0.86rem; color: var(--bb-or, #FF6A00); }
.bb-job-focus-row {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 4px var(--bb-s5, 24px);
  margin-top: 4px;
}
.bb-job-stage--focus .bb-job-name {
  margin-top: 0;
  font-size: clamp(2.4rem, 5vw, 3.2rem);
  font-weight: 700; line-height: 1.05; letter-spacing: -0.02em;
  color: var(--bb-or, #FF6A00);
}
.bb-job-stage--focus .bb-job-sub {
  margin-top: 0;
  font-size: 0.95rem;
  color: var(--bb-txw3, rgba(255,255,255,0.70));
}

.bb-job-cap {
  margin: var(--bb-s5, 24px) 0 0;
  font-family: var(--bb-font-sans);
  font-size: 0.82rem; line-height: 1.6;
  color: var(--bb-txw4, rgba(255,255,255,0.55));
}
/* Elementor kit `.elementor p` is (0,1,1) and beats a single class even with
   !important. See CLAUDE.md 11. */
.bb-job .bb-job-cap { font-size: 0.82rem !important; }

@media (max-width: 700px) {
  /* 01 and 02 stack; the rule still closes them and 03 still follows it */
  .bb-job-pair { grid-template-columns: 1fr; row-gap: 18px; }
}

/* ============================================================
   ROLE DETAIL PANELS inside archetype F
   DEFECT 4: body copy was --bb-t-body-s on --bb-tx3 (#4F5B68 on #FFFFFF,
   7.4:1 but visually light at 0.86rem). Raised to --bb-t-body on --bb-tx2
   (#2B3542 on #FFFFFF = 12.6:1), which clears AA with room.
   ============================================================ */
.bb-careers-panel h3 {
  margin: 0 0 var(--bb-s4, 16px);
  font-size: var(--bb-t-h3, clamp(1.1rem, 1.6vw, 1.35rem)) !important;
  font-weight: 700; line-height: 1.3;
  color: var(--bb-tx, #111827) !important;
  text-transform: none !important;
}
.bb-careers-panel p {
  margin: 0 0 var(--bb-s4, 16px);
  font-size: 1rem !important;
  line-height: 1.75;
  color: var(--bb-tx2, #2B3542) !important;
  max-width: 72ch;
}
.bb-careers-panel strong { color: var(--bb-tx, #111827); font-weight: 700; }
.bb-careers-panel .bb-careers-apply { font-size: 0.95rem; }
.bb-arch-tabs .bb-tablist label { min-height: 44px; display: flex; align-items: center; }

@media (max-width: 900px) {
  .bb-careers-grid { grid-template-columns: repeat(2, 1fr); }
  .bb-careers-grid > .bb-careers-card:nth-child(-n+2),
  .bb-careers-grid > .bb-careers-card:nth-child(n+3) { grid-column: span 1; }
}
@media (max-width: 620px) {
  .bb-careers-grid { grid-template-columns: 1fr; }
  .bb-careers-grid > .bb-careers-card { grid-column: span 1 !important; }
}

/* ══ MOBILE PASS 2026-08-31 ═══════════════════════════════════════════════════
   The 03 focal stage is clamp(2.4rem, 5vw, 3.2rem), and the root font-size here
   is 18px, so the floor is 43.2px, not the 38.4px a 16px mental model predicts.
   At 425 that put a 43px word on a baseline row beside its own caption.
   .bb-job-n and .bb-job-stop-l measured 3.82:1 at 12.6px, below the 4.5 an
   element that small needs.
   ═══════════════════════════════════════════════════════════════════════════ */
.bb-job-n, .bb-job-stop-l { color: rgba(255,255,255,0.66); }

@media (max-width: 700px) {
  /* 01 and 02 stay SIDE BY SIDE. Stacking them read as four orphaned lines and
     lost the whole point of the pair, which is that these two stages are equal
     and minor next to 03. They are short enough to sit in two columns at 425. */
  .bb-job-pair { grid-template-columns: 1fr 1fr !important; column-gap: 16px !important; }
  .bb-job-name { font-size: 0.9rem !important; }
  .bb-job-sub { font-size: 0.74rem !important; line-height: 1.45 !important; }
  .bb-job-stage--focus .bb-job-name { font-size: 2rem !important; }
  .bb-job-focus-row { flex-direction: column !important; align-items: flex-start !important; gap: 2px !important; }
  .bb-job-stage--focus .bb-job-sub { font-size: 0.88rem !important; }
  .bb-job-stop { margin: 20px 0 !important; }
}

/* The email address is 30 characters inside a button that is 228px wide at 320.
   At the shared 0.95rem it wrapped mid-address ("...solutio / ns.com"), which is
   the one string on the page that must never break. Stepped down by width. */
@media (max-width: 700px) {
  .bb-stage-ctas a[href^="mailto:"] {
    font-size: 0.82rem !important; letter-spacing: 0 !important;
    padding-left: 14px !important; padding-right: 14px !important;
    white-space: nowrap !important; }
}
@media (max-width: 400px) {
  .bb-stage-ctas a[href^="mailto:"] { font-size: 0.72rem !important; }
}

/* ============================================================
   APPLICATION FORM PASS, 2026-09-23
   Adds: roles intro, per-card status pills, the internships cream band,
   and the white application-form band that hosts [wpforms id="13631"].

   Colour note, CLAUDE.md section 2: #FF6A00 on white measures 2.9:1 and
   fails AA. Every orange that carries TEXT on these light grounds is
   #C24A00 (4.91:1 on white). #FF6A00 is used only as a solid background
   behind white text, where it passes.
   ============================================================ */

.bb-careers-intro {
  max-width: 68ch;
  margin: 0 0 var(--bb-s6, 32px);
  font-size: var(--bb-t-body, 0.95rem);
  line-height: 1.7;
  color: var(--bb-tx2, #2B3542);
}

/* ---- per-card hiring status ---- */
.bb-careers-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 12px;
}
.bb-careers-status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap;
}
/* White fill, not a tint. The card is --bb-l1 #FAFAFA, and an orange tint over
   it drags #C24A00 down to a MEASURED 4.24:1, which fails AA. Even at zero
   alpha the #FAFAFA base only reaches 4.71. A white chip puts #C24A00 back on
   pure white, which is the 4.91:1 this project already standardised on, with no
   new colour token. Both pills are white-filled so they stay a matched pair. */
.bb-careers-status--active {
  background: #FFFFFF;
  color: #C24A00;
  border: 1px solid rgba(255, 106, 0, 0.45);
}
.bb-careers-status--pipeline {
  background: #FFFFFF;
  color: #4F5B68;
  border: 1px solid #D8DDE5;
}

/* ---- internships, cream band ---- */
.bb-careers-intern { background: #FFF8F2; padding: 96px 0; }
.bb-careers-intern h2 {
  margin: 0 0 var(--bb-s4, 16px);
  color: var(--bb-tx, #111827) !important;
}
.bb-careers-intern h2 em { color: #C24A00; font-style: normal; }
.bb-careers-intern-lead {
  max-width: 68ch;
  margin: 0 0 var(--bb-s4, 16px);
  font-size: var(--bb-t-body, 0.95rem);
  line-height: 1.7;
  color: var(--bb-tx2, #2B3542);
}
.bb-careers-intern .bb-btn-primary { margin-top: var(--bb-s4, 16px); }

/* ---- application form, white band ---- */
.bb-careers-apply-section { background: #FFFFFF; padding: 96px 0; }
.bb-careers-apply-section h2 {
  margin: 0 0 var(--bb-s4, 16px);
  color: var(--bb-tx, #111827) !important;
}
.bb-careers-apply-section h2 em { color: #C24A00; font-style: normal; }
.bb-careers-apply-lead {
  max-width: 68ch;
  margin: 0 0 var(--bb-s6, 32px);
  font-size: var(--bb-t-body, 0.95rem);
  line-height: 1.7;
  color: var(--bb-tx2, #2B3542);
}
.bb-careers-form-wrap { max-width: 760px; }

/* WPForms multi-page connector indicator, brand colours.
   Scoped to this section so no other form on the site is touched. */
.bb-careers-form-wrap .wpforms-page-indicator.connector .wpforms-page-indicator-page-number {
  background-color: #E2E5EC; color: #4F5B68;
}
.bb-careers-form-wrap .wpforms-page-indicator.connector .active .wpforms-page-indicator-page-number,
.bb-careers-form-wrap .wpforms-page-indicator.connector .wpforms-page-indicator-page.active .wpforms-page-indicator-page-number {
  background-color: #FF6A00 !important; color: #FFFFFF !important;
}
.bb-careers-form-wrap .wpforms-page-indicator .wpforms-page-indicator-page-title { color: #4F5B68; }

/* 44px minimum tap targets on the multi-selects, spec 4.6 */
.bb-careers-form-wrap .wpforms-field-checkbox li,
.bb-careers-form-wrap .wpforms-field-radio li { min-height: 44px; display: flex; align-items: center; }
.bb-careers-form-wrap .wpforms-field-checkbox li label,
.bb-careers-form-wrap .wpforms-field-radio li label { line-height: 1.45; }

.bb-careers-form-wrap .wpforms-submit,
.bb-careers-form-wrap .wpforms-page-button {
  background-color: #FF6A00 !important;
  border-color: #FF6A00 !important;
  color: #FFFFFF !important;
  min-height: 48px;
}
.bb-careers-form-wrap .wpforms-page-button[value="Back"],
.bb-careers-form-wrap .wpforms-page-prev {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E5EC !important;
  color: #2B3542 !important;
}

@media (max-width: 700px) {
  .bb-careers-intern, .bb-careers-apply-section { padding: 60px 0; }
  .bb-careers-form-wrap { max-width: 100%; }
}

/* WPForms ships `.wpforms-container .wpforms-required-label { color: #ff0000 }`
   at specificity (0,2,0). Read via CSS.getMatchedStylesForNode, NOT from the
   stylesheet: the classic sheet declares this at `div.wpforms-container-full ...`
   and that class is never emitted here, so a selector written from the classic
   file matches nothing. Pure red measures 4.0:1 on white,
   which fails AA. It passes everywhere else on the site only because every other
   form sits on a DARK band, where it reads 4.82:1; this is the first form on a
   light ground, so this page is the first to expose it.

   Scoped here rather than fixed globally: a rule in a shared stylesheet has a
   site-wide blast radius (CLAUDE.md section 3 rule 12), and restyling all 20
   forms is not a side effect the careers page should cause.

   (0,4,2) beats the plugin's (0,3,1) on class count, so no !important needed.
   #C62B2D measures 5.55:1 on white. */
.bb-careers-form-wrap .wpforms-container .wpforms-form .wpforms-required-label {
  color: #C62B2D;
}

/* Additional.css:1316 sets `div.wpforms-container .wpforms-submit-container
   { display: flex !important }` to centre submit buttons site-wide. An
   !important declaration beats a non-important INLINE style, and WPForms hides
   the submit on a multi-page form with exactly that: style="display:none;".
   So the Submit button rendered on page 1 of this form, under the Continue
   button, on every step.

   The site already solves this for its hero multi-step forms at globals.css:470
   by re-asserting none via an attribute selector. Same pattern, scoped here.
   Specificity (0,3,2) beats Additional.css's (0,2,1) outright rather than
   relying on stylesheet order, which is what bit the homepage .bb-final rule. */
.bb-careers-form-wrap div.wpforms-container .wpforms-submit-container[style*="display:none"],
.bb-careers-form-wrap div.wpforms-container .wpforms-submit-container[style*="display: none"] {
  display: none !important;
}

/* ---- alignment, settled by measuring the existing inline forms ----
   /free-audit/ and /contact/ are not "centre aligned" in the way it looks:
   their FIELD text is text-align:start exactly like this one. What is centred
   is the form BLOCK inside its column (632px and 672px, both centred) and the
   submit button. This form had the block flush left at the page gutter, which
   is the only real inconsistency, so the block is centred here and the fields
   stay left.

   Left fields are also the right call independently: this is 58 fields over 4
   pages with 12-option checklists, so the eye needs one return edge per row.
   Centring field text would cost scannability on every list. */
.bb-careers-form-wrap { margin-inline: auto; }

/* Back and Continue rendered edge to edge: the page-nav container is
   display:block with zero margins on both buttons, so they abutted at exactly
   0px. Flex gives a real gap and lets them wrap cleanly at 360. Centred so the
   step buttons agree with the submit button, which Additional.css centres for
   every form on the site. */
.bb-careers-form-wrap .wpforms-pagebreak-center,
.bb-careers-form-wrap .wpforms-pagebreak-left,
.bb-careers-form-wrap .wpforms-pagebreak-right {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

/* live character counter for the 120-character minimum on field 48 */
.bb-char-counter {
  margin-top: 6px;
  font-family: var(--bb-font-sans);
  font-size: 0.78rem;
  font-weight: 600;
}

/* Final step: WPForms puts Back in .wpforms-pagebreak-* and Submit in a
   separate .wpforms-submit-container, so they render as two stacked rows with
   different alignment. Pull the last step's Back button onto the submit row by
   removing the gap it leaves, and centre both, so the final screen presents one
   centred action pair like every other step. */
.bb-careers-form-wrap .wpforms-page-4 ~ .wpforms-submit-container,
.bb-careers-form-wrap .wpforms-submit-container {
  margin-top: 0 !important;
}
.bb-careers-form-wrap .wpforms-pagebreak-center:last-of-type { margin-bottom: 0 !important; }
.bb-careers-form-wrap .wpforms-submit-container { padding-top: 12px !important; }

/* hide the consent field's own label; the checkbox text is the visible label */
.bb-careers-form-wrap #wpforms-13631-field_59-container > .wpforms-field-label { display: none; }
.bb-careers-form-wrap #wpforms-13631-field_59-container { margin-top: 18px; }
.bb-careers-form-wrap #wpforms-13631-field_59-container a { color: #C24A00; font-weight: 700; }

/* Once bb-careers-form.js moves the submit container into the last step's nav
   row, it is a flex child of that row, so it must not also try to be a
   full-width centring container of its own. */
.bb-careers-form-wrap .bb-careers-unified-nav .wpforms-submit-container {
  width: auto !important;
  padding-top: 0 !important;
  margin: 0 !important;
}

/* ============================================================
   APPLY SECTION, UI PASS 2026-09-24
   Four corrections, each matching a pattern already in the repo rather than
   inventing one.
   ============================================================ */

/* 1. CENTRED HEADER. The site's own inline form section centres its header:
      bb-pillar.css:1507 `.bb-audit-copy { text-align: center }`. This section
      was the outlier. Field text inside the form stays left, which is correct
      for 58 fields and is also what /free-audit/ and /contact/ do. */
.bb-careers-apply-section .bb-eyebrow,
.bb-careers-apply-section h2,
.bb-careers-apply-lead { text-align: center; }
.bb-careers-apply-lead { margin-left: auto; margin-right: auto; }

/* 2. THE EYEBROW HAD NO LIGHT-SECTION RULE, so it inherited body copy and
      rendered as 18px near-black with no tracking: measured rgb(31,33,37),
      text-transform none. It was never a pill. This is the same treatment
      `.bb-careers-roles .bb-eyebrow` already uses, and #C24A00 is the
      AA-passing orange for light grounds (CLAUDE.md section 2). */
.bb-careers-apply-section .bb-eyebrow {
  display: block;
  font-size: var(--bb-t-eyebrow, 0.70rem) !important;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--bb-or-text, #C24A00);
  margin: 0 0 12px;
}

/* 3. BREATHING ROOM. The lead sat 17px above the step indicator, which read as
      the paragraph and the form colliding. 48px separates the section header
      from the form as two distinct blocks. */
.bb-careers-form-wrap { margin: 48px auto 0; }

/* 4. CONSENT. It was a bare checkbox with a red error underneath, which is the
      least premium moment on the page and sits immediately above the primary
      action. Now a contained panel: tinted ground, hairline border, a real
      18px control, and comfortable measure. */
.bb-careers-form-wrap #wpforms-13631-field_59-container {
  margin-top: 28px;
  padding: 18px 20px;
  background: #FAFAFA;
  border: 1px solid var(--bb-border, #E2E5EC);
  border-radius: 10px;
}
.bb-careers-form-wrap #wpforms-13631-field_59-container ul { margin: 0; padding: 0; list-style: none; }
.bb-careers-form-wrap #wpforms-13631-field_59-container li {
  display: flex; align-items: flex-start; gap: 12px; margin: 0; min-height: 0;
}
.bb-careers-form-wrap #wpforms-13631-field_59-container input[type="checkbox"] {
  width: 18px; height: 18px; margin: 2px 0 0; flex: 0 0 18px;
  accent-color: #FF6A00; cursor: pointer;
}
.bb-careers-form-wrap #wpforms-13631-field_59-container label {
  font-size: 0.86rem; line-height: 1.6; color: var(--bb-tx2, #2B3542);
  cursor: pointer; margin: 0;
}
.bb-careers-form-wrap #wpforms-13631-field_59-container a { color: #C24A00; font-weight: 700; }
.bb-careers-form-wrap #wpforms-13631-field_59-container .wpforms-error {
  margin: 10px 0 0 30px; font-size: 0.78rem; font-weight: 600;
}
/* the required asterisk belongs on the sentence, not floating above a hidden label */
.bb-careers-form-wrap #wpforms-13631-field_59-container .wpforms-required-label { display: none; }

@media (max-width: 700px) {
  .bb-careers-form-wrap { margin-top: 32px; }
  .bb-careers-form-wrap #wpforms-13631-field_59-container { padding: 16px; }
}

/* ---- label to control spacing, matched to the site standard ----
   Measured: /free-audit/ and /contact/ both set the field label
   margin-bottom to 8px, giving 13px from the label's text to the control.
   This form had 0px, giving 5px, so every label sat almost on top of its
   input. 8px here is matching an existing value, not choosing a new one.
   Applies to every field type so the whole form is uniform. */
.bb-careers-form-wrap .wpforms-field > .wpforms-field-label {
  display: block;
  margin-bottom: 8px;
}
/* descriptions sit under the control, not crowding it */
.bb-careers-form-wrap .wpforms-field > .wpforms-field-description { margin-top: 8px; }
/* consistent separation between fields; 16px is the WPForms default and is
   tight for a 4-step form with long checklists */
.bb-careers-form-wrap .wpforms-field { margin-bottom: 26px; }
.bb-careers-form-wrap .wpforms-field-checkbox,
.bb-careers-form-wrap .wpforms-field-radio { margin-bottom: 30px; }