.br-sec { padding-block: var(--s4) var(--s3); row-gap: var(--s1); align-items: end; border-top: 1px solid var(--bone); }
.br-sec .br-h { --d: 1 / span 8; }
.br-sec .br-intro { --d: 9 / span 4; padding-bottom: 0.6em; font-size: 20px; }
.br-root { --d: 1 / -1; margin-top: var(--s2); min-width: 0; }
.br-root fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.br-root input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; scroll-margin-top: -400px; scroll-margin-bottom: -400px; }   
.br-root label { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }


@keyframes br-in { from { opacity: 0; transform: translateY(8px); } }
.br-pn { display: none; }
.br-pn, .br-eg, .br-feed li { animation: br-in 240ms var(--ease) both; }


.br-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.br-pills label { padding: 13px 26px; min-height: 48px; border: 1px solid var(--bone); border-radius: 999px; font: 700 22px/1.3 var(--f-head); color: var(--ash); transition: background-color 160ms ease-out, color 160ms ease-out, transform 160ms ease-out; }
.br-pills label:has(input:checked) { background: var(--red); border-color: var(--red); color: var(--bone); }

.br-pills label:has(input:checked) span::before { content: ""; display: inline-block; width: 0.28em; height: 0.52em; margin-right: 0.55em; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-0.12em) rotate(45deg); }
.br-pills label:has(input:focus-visible), .br-track label:has(input:focus-visible) { outline: 2px solid var(--bone); outline-offset: 3px; }
.br-pills label:active, .br-track label:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .br-pills label:hover, .br-track label:hover { color: var(--bone); } }


.br-track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 var(--gut); }
.br-track label { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 18px 0 18px; border-top: 2px solid var(--hair); font: 700 21px/1.25 var(--f-head); color: var(--ash); transition: color 160ms ease-out, border-color 160ms ease-out, transform 160ms ease-out; }
.br-track label:has(input:checked) { border-top-color: var(--bone); color: var(--bone); }
.br-num { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--edge); border-radius: 50%; font: 500 13px/1 var(--f-mono); color: var(--bone); transition: background-color 160ms ease-out; }
.br-track label:has(input:checked) .br-num { background: var(--red); border-color: var(--red); }
.br-stage { margin-top: var(--s2); }
.br-step-root:has(input[value="1"]:checked) .br-p1, .br-step-root:has(input[value="2"]:checked) .br-p2, .br-step-root:has(input[value="3"]:checked) .br-p3,
.br-step-root:has(input[value="4"]:checked) .br-p4, .br-step-root:has(input[value="5"]:checked) .br-p5 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gut); align-items: start; }
.br-tx .h3 { margin-bottom: 12px; font-size: 24px; }
.br-tx p { max-width: 30em; font-size: 20px; }
.br-scene { padding: var(--s1); background: var(--panel); border: 1px solid var(--hair); border-radius: 10px; min-height: 280px; }
.br-scene .lb { margin-bottom: 12px; }
.br-bub { display: inline-block; max-width: 24em; margin: 0; padding: 14px 18px; border: 1px solid var(--edge); border-radius: 18px 18px 18px 4px; background: var(--ink); font-size: 24px; line-height: 1.35; }
.br-prof { margin: 0; display: grid; gap: 0; }
.br-prof div { display: grid; grid-template-columns: 8em minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--hair); }
.br-prof dt { font: 500 var(--xs)/1.6 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash); }
.br-prof dd { margin: 0; font-size: 20px; }
.br-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.br-chip { display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; border: 1px solid var(--edge); border-radius: 8px; background: var(--ink); font-size: 19px; line-height: 1.2; }
.br-chip b { font: 500 12px/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone); }
.br-chip.br-x { border-color: var(--hair); color: var(--ash); }
.br-chip.br-x b { color: var(--ash); }
.br-ans { margin: 0 0 14px; font: 700 30px/1.2 var(--f-head); text-wrap: balance; }
.br-ans-p { margin-bottom: 0; padding-left: 14px; border-left: 3px solid var(--red); font-size: 24px; }
.br-gap-t { margin-top: 22px; }
.br-gaps { list-style: none; margin: 0; padding: 0; }
.br-gaps li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--hair); font-size: 20px; }
.br-tg { display: inline-block; padding: 7px 14px; border: 1px solid var(--edge); border-radius: 999px; font: 500 12px/1.3 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.br-tg-p { background: var(--red); border-color: var(--red); }


.br-root .br-roles { margin-bottom: var(--s2); }
.br-map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); align-items: stretch; }
.br-src { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--hair); }
.br-s { display: grid; grid-template-columns: minmax(0, 16em) 6em minmax(0, 1fr); column-gap: var(--s1); align-items: center; padding: 22px 0; border-top: 1px solid var(--hair); color: var(--bone); transition: color 200ms ease-out; }
.br-n { font: 700 clamp(24px, 2.4cqw, 34px)/1.1 var(--f-head); }
.br-st { font: 500 var(--xs)/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.br-xs { display: none; }
.br-w { position: relative; height: 0; border-top: 2px solid var(--bone); transition: border-color 200ms ease-out; }
.br-w::after { content: ""; position: absolute; right: -5px; top: -6px; width: 10px; height: 10px; border: 2px solid var(--bone); border-radius: 50%; background: var(--ink); box-sizing: border-box; transition: border-color 200ms ease-out; }
.br-hub { display: grid; align-content: center; justify-items: center; gap: 10px; padding: var(--s1); text-align: center; background: var(--panel); border: 1px solid var(--bone); border-radius: 10px; }
.br-hub .wk-rune { width: 128px; height: 128px; }
.br-hn { margin: 0; font: 700 60px/1.05 var(--f-head); }
.br-hp { margin: 0; font: 500 17px/1.5 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash); }
.br-hp span { display: none; }
.br-egs { margin-top: var(--s2); max-width: 36em; }
.br-eg { display: none; margin: 0; padding-top: var(--s1); border-top: 1px solid var(--hair); font-size: 23px; }
.br-eg .lb { display: block; margin-bottom: 8px; }
.br-pick:has(input[value="owner"]:checked) .br-eg-owner, .br-pick:has(input[value="manager"]:checked) .br-eg-manager,
.br-pick:has(input[value="sales"]:checked) .br-eg-sales, .br-pick:has(input[value="new"]:checked) .br-eg-new { display: block; }
.br-pick:has(input[value="owner"]:checked) .br-hp-owner, .br-pick:has(input[value="manager"]:checked) .br-hp-manager,
.br-pick:has(input[value="sales"]:checked) .br-hp-sales, .br-pick:has(input[value="new"]:checked) .br-hp-new { display: inline; }


.br-lead { max-width: 38em; margin: 0 0 var(--s2); font-size: 24px; }
.br-tabs:has(input[value="read"]:checked) .br-pread, .br-tabs:has(input[value="do"]:checked) .br-pdo, .br-tabs:has(input[value="change"]:checked) .br-pchange { display: block; }
.br-tabs:has(input[value="calls"]:checked) .br-pjcalls, .br-tabs:has(input[value="asks"]:checked) .br-pjasks { display: block; }
.br-tabs .br-stage { margin-top: var(--s2); }
.br-flow { --gap: 36px; list-style: none; margin: 0; padding: 0; display: flex; gap: var(--gap); align-items: stretch; }
.br-ch { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 20px 20px; background: var(--panel); border: 1px solid var(--edge); border-radius: 10px; font-size: 20px; line-height: 1.35; }
.br-ch em { font: 500 12px/1 var(--f-mono); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone); }
.br-pe { border-color: var(--red); background: color-mix(in srgb, var(--red) 28%, var(--panel)); }
.br-ch + .br-ch::before { content: ""; position: absolute; right: 100%; top: 50%; width: calc(var(--gap) - 8px); border-top: 2px solid var(--edge); }
.br-ch + .br-ch::after { content: ""; position: absolute; right: calc(100% + 0px); top: calc(50% - 6px); width: 8px; height: 12px; margin-right: 0; background: var(--edge); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.br-ring { margin-top: var(--s2); grid-column: 1 / -1; }
.br-rail { grid-column: 1 / -1; position: relative; margin: 14px 12.5% 0; height: 46px; border: 2px solid var(--edge); border-top: 0; border-radius: 0 0 12px 12px; }
.br-rail::before { content: ""; position: absolute; left: -9px; top: -10px; width: 12px; height: 10px; background: var(--edge); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.br-rail span { position: absolute; left: 50%; bottom: -0.85em; transform: translateX(-50%); padding: 0 14px; background: var(--ink); font: 500 var(--xs)/1.4 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash); white-space: nowrap; }


.br-board { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s1) var(--gut); align-items: start; }
.br-ex { grid-column: 1 / -1; margin: 0; }
.br-root .br-filter { margin-bottom: var(--s1); }
.br-filter label { padding: 10px 22px; font-size: 20px; }
.br-feed { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--hair); }
.br-feed li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 0; border-top: 1px solid var(--hair); font-size: 21px; }
.br-board:has(input[value="w"]:checked) .br-feed li:not([data-k="w"]), .br-board:has(input[value="r"]:checked) .br-feed li:not([data-k="r"]),
.br-board:has(input[value="g"]:checked) .br-feed li:not([data-k="g"]) { display: none; }
.br-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gut); }
.br-tiles li { padding: var(--s1) 0; border-top: 1px solid var(--hair); }
.br-tiles li:nth-child(-n+2) { border-top-color: var(--bone); }
.br-tiles p { margin-top: 8px; font-size: 19px; }

@media (max-width: 1100px) {
  .br-track { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .br-track label { padding: 12px 0; }
}
@media (max-width: 900px) {
  .br-sec .br-h, .br-sec .br-intro { --d: 1 / -1; }
  .br-step-root:has(input:checked) .br-pn { grid-template-columns: minmax(0, 1fr); }
  .br-map { grid-template-columns: minmax(0, 1fr); }
  .br-s { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; }
  .br-w { display: none; }
  .br-hub { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; align-items: center; column-gap: 14px; margin-top: var(--s1); }
  .br-hub .wk-rune { width: 80px; height: 80px; grid-row: 1 / span 2; }
  .br-hn { font-size: 40px; }
  .br-hp { font-size: 15px; }
  .br-flow { flex-direction: column; --gap: 30px; }
  .br-ch + .br-ch::before { right: auto; left: 50%; top: auto; bottom: 100%; width: 0; height: calc(var(--gap) - 8px); border-top: 0; border-left: 2px solid var(--edge); }
  .br-ch + .br-ch::after { right: auto; left: calc(50% - 6px); top: auto; bottom: calc(100% - 0px); width: 12px; height: 8px; clip-path: polygon(0 0, 100% 0, 50% 100%); transform: translateY(0); }
  .br-rail { display: none; }
  .br-board { grid-template-columns: minmax(0, 1fr); }
  .br-tiles { grid-template-columns: minmax(0, 1fr); }
  .br-tiles li:nth-child(2) { border-top-color: var(--hair); }
  .br-prof div { grid-template-columns: 6.5em minmax(0, 1fr); }
}


.br-jobs:has(input[value="monday"]:checked) .br-jmonday,
.br-jobs:has(input[value="onboard"]:checked) .br-jonboard,
.br-jobs:has(input[value="renew"]:checked) .br-jrenew,
.br-jobs:has(input[value="close"]:checked) .br-jclose,
.br-jobs:has(input[value="tender"]:checked) .br-jtender,
.br-jobs:has(input[value="win"]:checked) .br-jwin { display: block; }
.br-jobs:has(input[value="monday"]:checked) .br-hj-monday,
.br-jobs:has(input[value="onboard"]:checked) .br-hj-onboard,
.br-jobs:has(input[value="renew"]:checked) .br-hj-renew,
.br-jobs:has(input[value="close"]:checked) .br-hj-close,
.br-jobs:has(input[value="tender"]:checked) .br-hj-tender,
.br-jobs:has(input[value="win"]:checked) .br-hj-win { display: inline; }
.br-jstage { grid-column: 1 / -1; margin-top: var(--s2); }

.br-ch.br-pt { border-left: 3px solid var(--bone); }


@media (forced-colors: active) {
  .br-pills label:has(input:checked), .br-track label:has(input:checked) { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .br-track label:has(input:checked) .br-num { background: HighlightText; color: Highlight; border-color: HighlightText; }
}
@media (prefers-reduced-motion: reduce) {
  .br *, .br *::before, .br *::after { animation: none !important; transition: none !important; }
}
html.no-motion .br *, html.no-motion .br *::before, html.no-motion .br *::after { animation: none !important; transition: none !important; }

.br-join .br-gap-t { margin-top: var(--s2); margin-bottom: 10px; }

.br-jobs .br-jstage { margin-top: var(--s2); margin-bottom: 0; }
.br-reach { margin: var(--s2) 0 var(--s1); }


.br-hero .a4-w .a4-rune { width: 0.95em; height: 0.95em; margin-right: 0.12em; vertical-align: -0.06em; }

.br-hero .a4-lede p { font-size: 19px; }
.br-close .a4-cl > p.ash { font-size: 20px; }


@media (prefers-reduced-motion: no-preference) {
  html:not(.no-motion) .br-pick .br-o, html:not(.no-motion) .br-pick .br-hp span { animation: br-in 300ms var(--ease) both; }
}


.br-bigsec .br-h { --d: 1 / -1; }
.br-big { --d: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.br-big li:nth-child(-n+3) { border-top-color: var(--bone); }
.br-big li:nth-child(3) { border-top-color: var(--bone); }
.br-big .h3 { font-size: clamp(24px, 2.2cqw, 32px); }
.br-big p { font-size: 20px; }
@media (max-width: 900px) {
  .br-big { grid-template-columns: minmax(0, 1fr); }
  .br-big li:nth-child(2), .br-big li:nth-child(3) { border-top-color: var(--hair); }
}


@keyframes br-up { from { opacity: 0; transform: translateY(16px); } }
@keyframes br-line { from { transform: scaleX(0); } }
@keyframes br-line-v { from { transform: scaleY(0); } }
@keyframes br-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .br-pn .br-ch:nth-child(2) { --i: 1; } .br-pn .br-ch:nth-child(3) { --i: 2; } .br-pn .br-ch:nth-child(4) { --i: 3; } .br-pn .br-ch:nth-child(5) { --i: 4; }
  .br-ring .br-ch:nth-child(2) { --i: 1; } .br-ring .br-ch:nth-child(3) { --i: 2; } .br-ring .br-ch:nth-child(4) { --i: 3; }
  html:not(.no-motion) .br-pn .br-ch { animation: br-up 460ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 110ms + 60ms); }
  html:not(.no-motion) .br-pn .br-ch + .br-ch::before { transform-origin: 0 50%; animation: br-line 300ms ease-out backwards; animation-delay: calc(var(--i, 0) * 110ms + 200ms); }
  html:not(.no-motion) .br-pn .br-ch + .br-ch::after { animation: br-fade 200ms ease-out backwards; animation-delay: calc(var(--i, 0) * 110ms + 440ms); }
  @media (max-width: 900px) { html:not(.no-motion) .br-pn .br-ch + .br-ch::before { transform-origin: 50% 0; animation-name: br-line-v; } }
  @supports (animation-timeline: view()) {
    html:not(.no-motion) .br-sec .br-h { animation: br-up var(--ease) both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
    html:not(.no-motion) .br-sec .br-intro { animation: br-up var(--ease) both; animation-timeline: view(); animation-range: entry 8% entry 55%; }
    html:not(.no-motion) .br-root > .br-pills { animation: br-up var(--ease) both; animation-timeline: view(); animation-range: entry 5% entry 50%; }
    html:not(.no-motion) .br-scene { animation: br-up var(--ease) both; animation-timeline: view(); animation-range: entry 5% entry 55%; }
    
    html:not(.no-motion) .br-pn .br-ch { animation: br-up var(--ease) both, br-up 460ms var(--ease) backwards; animation-timeline: view(), auto; animation-range: entry calc(var(--i, 0) * 6%) entry calc(40% + var(--i, 0) * 6%), normal; animation-delay: 0s, calc(var(--i, 0) * 110ms + 60ms); }
    html:not(.no-motion) .br-ring .br-ch { animation: br-up var(--ease) both; animation-timeline: view(); animation-range: entry calc(var(--i, 0) * 6%) entry calc(45% + var(--i, 0) * 6%); }
    html:not(.no-motion) .br-rail { transform-origin: 0 50%; animation: br-line var(--ease) both; animation-timeline: view(); animation-range: entry 15% entry 85%; }
    html:not(.no-motion) .br-tiles li { animation: br-up var(--ease) both; animation-timeline: view(); animation-range: entry 0% entry 50%; }
    html:not(.no-motion) .br-tiles li:nth-child(2) { animation-range: entry 6% entry 56%; } html:not(.no-motion) .br-tiles li:nth-child(3) { animation-range: entry 12% entry 62%; }
    html:not(.no-motion) .br-tiles li:nth-child(4) { animation-range: entry 18% entry 68%; } html:not(.no-motion) .br-tiles li:nth-child(5) { animation-range: entry 24% entry 74%; }
    html:not(.no-motion) .br-tiles li:nth-child(6) { animation-range: entry 30% entry 80%; }
    html:not(.no-motion) .br-close > * { animation: br-up var(--ease) both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    html:not(.no-motion) .br-close > *:nth-child(2) { animation-range: entry 10% entry 65%; }
  }
}


.br-jstage .wk { margin-top: var(--s1); }
.br-jstage .wk .wk-rune { width: 30px; height: 30px; }
.br-jstage .wk-name { font-size: 24px; }
.br-jstage .wk-tag { font-size: 16px; }
.br-jstage .wk-t { font-size: 17px; }
.br-jstage .wk-l { font-size: 16px; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-motion) .br-jstage .wk-n { animation: br-up 460ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 200ms + var(--k, 0) * 70ms); }
  html:not(.no-motion) .br-jstage .wk-wr { animation: wk-draw 340ms ease-in-out backwards; animation-delay: calc(var(--i, 0) * 200ms - 150ms + var(--k, 0) * 70ms); }
  html:not(.no-motion) .br-jstage .wk-ws { animation: wk-down 340ms ease-in-out backwards; animation-delay: calc(var(--i, 0) * 200ms - 150ms + var(--k, 0) * 70ms); }
  html:not(.no-motion) .br-jstage :is(.wk-pi, .wk-po) { animation: br-fade 300ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 200ms + var(--k, 0) * 70ms + 100ms); }
  @supports (animation-timeline: view()) {
    html:not(.no-motion) .br-jstage .wk-path { view-timeline: --brwk block; }
    html:not(.no-motion) .br-jstage .wk-n { animation: br-up var(--ease) both, br-up 460ms var(--ease) backwards; animation-timeline: --brwk, auto;
      animation-range: entry calc(var(--i, 0) * 11% + var(--k, 0) * 3%) entry calc(40% + var(--i, 0) * 11% + var(--k, 0) * 3%), normal;
      animation-delay: 0s, calc(var(--i, 0) * 200ms + var(--k, 0) * 70ms); }
    html:not(.no-motion) .br-jstage .wk-wr { animation: wk-draw var(--ease) both, wk-draw 340ms ease-in-out backwards; animation-timeline: --brwk, auto;
      animation-range: entry calc(var(--i, 0) * 11% + var(--k, 0) * 3% - 6%) entry calc(30% + var(--i, 0) * 11% + var(--k, 0) * 3%), normal;
      animation-delay: 0s, calc(var(--i, 0) * 200ms - 150ms + var(--k, 0) * 70ms); }
    html:not(.no-motion) .br-jstage .wk-ws { animation: wk-down var(--ease) both, wk-down 340ms ease-in-out backwards; animation-timeline: --brwk, auto;
      animation-range: entry calc(var(--i, 0) * 11% + var(--k, 0) * 3% - 6%) entry calc(30% + var(--i, 0) * 11% + var(--k, 0) * 3%), normal;
      animation-delay: 0s, calc(var(--i, 0) * 200ms - 150ms + var(--k, 0) * 70ms); }
    html:not(.no-motion) .br-jstage :is(.wk-pi, .wk-po) { animation: br-fade var(--ease) both, br-fade 300ms var(--ease) backwards; animation-timeline: --brwk, auto;
      animation-range: entry calc(var(--i, 0) * 11% + var(--k, 0) * 3%) entry calc(25% + var(--i, 0) * 11% + var(--k, 0) * 3%), normal;
      animation-delay: 0s, calc(var(--i, 0) * 200ms + var(--k, 0) * 70ms + 100ms); }
  }
}


@keyframes br-r1 { from { opacity: 0; transform: translateY(12px); } }
@keyframes br-r2 { from { opacity: 0; transform: translateY(12px); } }
@keyframes br-r3 { from { opacity: 0; transform: translateY(12px); } }
@keyframes br-r4 { from { opacity: 0; transform: translateY(12px); } }
@keyframes br-r5 { from { opacity: 0; transform: translateY(12px); } }
@keyframes br-r6 { from { opacity: 0; transform: translateY(12px); } }
@keyframes br-s1 { from { transform: scaleX(0); } }
@keyframes br-s2 { from { transform: scaleX(0); } }
@keyframes br-s3 { from { transform: scaleX(0); } }
@keyframes br-s4 { from { transform: scaleX(0); } }
@keyframes br-s5 { from { transform: scaleX(0); } }
@keyframes br-s6 { from { transform: scaleX(0); } }
@keyframes br-p1 { from { opacity: 0; transform: scale(0.94); } }
@keyframes br-p2 { from { opacity: 0; transform: scale(0.94); } }
@keyframes br-p3 { from { opacity: 0; transform: scale(0.94); } }
@keyframes br-p4 { from { opacity: 0; transform: scale(0.94); } }
@keyframes br-p5 { from { opacity: 0; transform: scale(0.94); } }
@keyframes br-p6 { from { opacity: 0; transform: scale(0.94); } }

.br-jobs .br-pick:has(input[value="win"]:checked) { --kr: br-r1; --ks: br-s1; --kp: br-p1; }
.br-jobs .br-pick:has(input[value="close"]:checked) { --kr: br-r2; --ks: br-s2; --kp: br-p2; }
.br-jobs .br-pick:has(input[value="onboard"]:checked) { --kr: br-r3; --ks: br-s3; --kp: br-p3; }
.br-jobs .br-pick:has(input[value="renew"]:checked) { --kr: br-r4; --ks: br-s4; --kp: br-p4; }
.br-jobs .br-pick:has(input[value="monday"]:checked) { --kr: br-r5; --ks: br-s5; --kp: br-p5; }
.br-jobs .br-pick:has(input[value="tender"]:checked) { --kr: br-r6; --ks: br-s6; --kp: br-p6; }
.br-who .br-pick:has(input[value="owner"]:checked) { --kr: br-r1; --ks: br-s1; --kp: br-p1; }
.br-who .br-pick:has(input[value="manager"]:checked) { --kr: br-r2; --ks: br-s2; --kp: br-p2; }
.br-who .br-pick:has(input[value="sales"]:checked) { --kr: br-r3; --ks: br-s3; --kp: br-p3; }
.br-who .br-pick:has(input[value="new"]:checked) { --kr: br-r4; --ks: br-s4; --kp: br-p4; }
.br-dash .br-board:has(input[value="all"]:checked) { --kr: br-r1; --ks: br-s1; --kp: br-p1; }
.br-dash .br-board:has(input[value="w"]:checked) { --kr: br-r2; --ks: br-s2; --kp: br-p2; }
.br-dash .br-board:has(input[value="r"]:checked) { --kr: br-r3; --ks: br-s3; --kp: br-p3; }
.br-dash .br-board:has(input[value="g"]:checked) { --kr: br-r4; --ks: br-s4; --kp: br-p4; }


.br-jobs .br-rmap { --wire: 52px; display: grid; grid-template-columns: minmax(0, 1fr) var(--wire) minmax(210px, 270px) var(--wire) minmax(0, 1fr); grid-template-rows: repeat(5, auto); gap: 10px 0; align-items: center; }
.br-rmap .br-src { display: contents; }
.br-rmap .br-hub { grid-column: 3; grid-row: 1 / span 5; align-self: stretch; gap: 6px; padding: 18px; }
.br-rmap .br-hub .wk-rune { width: 64px; height: 64px; }
.br-rmap .br-hn { font-size: 38px; }
.br-rmap .br-hp { font-size: 14px; }
.br-rmap .br-s:nth-child(-n+5) { grid-column: 1; }
.br-rmap .br-s:nth-child(n+6) { grid-column: 5; }
.br-rmap .br-s:nth-child(5n+1) { grid-row: 1; } .br-rmap .br-s:nth-child(5n+2) { grid-row: 2; } .br-rmap .br-s:nth-child(5n+3) { grid-row: 3; } .br-rmap .br-s:nth-child(5n+4) { grid-row: 4; } .br-rmap .br-s:nth-child(5n) { grid-row: 5; }
.br-jobs .br-rmap .br-s { --q: 1; position: relative; isolation: isolate; display: flex; align-items: center; min-height: 52px; padding: 8px 16px; border: 1px solid var(--hair); border-radius: 8px; background: var(--panel); color: color-mix(in srgb, var(--bone) calc(var(--q) * 100%), var(--ash)); }
.br-rmap .br-s::before { content: ""; position: absolute; inset: -1px; z-index: -1; border: 1px solid color-mix(in srgb, var(--red) 65%, var(--bone)); border-radius: 8px; background: color-mix(in srgb, var(--red) 20%, var(--panel)); opacity: var(--q); transition: opacity 320ms var(--ease); }
.br-rmap .br-n { display: flex; align-items: center; gap: 12px; font: 700 20px/1.2 var(--f-head); }
.br-rmap .br-n::before { content: ""; flex: none; width: 10px; height: 10px; box-sizing: border-box; border: 2px solid color-mix(in srgb, var(--red) calc(var(--q) * 100%), var(--edge)); border-radius: 50%; background: color-mix(in srgb, var(--red) calc(var(--q) * 100%), transparent); }
.br-rmap .br-w { position: absolute; top: 50%; left: 100%; width: var(--wire); height: 2px; margin: -1px 0 0; border: 0; }
.br-rmap .br-w::before { content: ""; position: absolute; inset: 0; background: var(--bone); transform-origin: 0 50%; transform: scaleX(var(--q)); transition: transform 380ms var(--ease) calc(var(--i, 0) * 40ms); }
.br-rmap .br-w::after { right: -5px; top: -4px; border-color: var(--bone); opacity: var(--q); transition: opacity 240ms var(--ease) calc(var(--i, 0) * 40ms + 200ms); }
.br-rmap .br-s:nth-child(n+6) .br-w { left: auto; right: 100%; }
.br-rmap .br-s:nth-child(n+6) .br-w::before { transform-origin: 100% 50%; }
.br-rmap .br-s:nth-child(n+6) .br-w::after { right: auto; left: -5px; }

:is(.br-jobs:has(input[value="win"]:checked) .br-s:not([data-r~="win"]), .br-jobs:has(input[value="close"]:checked) .br-s:not([data-r~="close"]), .br-jobs:has(input[value="onboard"]:checked) .br-s:not([data-r~="onboard"]), .br-jobs:has(input[value="renew"]:checked) .br-s:not([data-r~="renew"]), .br-jobs:has(input[value="monday"]:checked) .br-s:not([data-r~="monday"]), .br-jobs:has(input[value="tender"]:checked) .br-s:not([data-r~="tender"])) { --q: 0; }
:is(.br-jobs:has(input[value="win"]:checked) .br-s:not([data-r~="win"]), .br-jobs:has(input[value="close"]:checked) .br-s:not([data-r~="close"]), .br-jobs:has(input[value="onboard"]:checked) .br-s:not([data-r~="onboard"]), .br-jobs:has(input[value="renew"]:checked) .br-s:not([data-r~="renew"]), .br-jobs:has(input[value="monday"]:checked) .br-s:not([data-r~="monday"]), .br-jobs:has(input[value="tender"]:checked) .br-s:not([data-r~="tender"])) .br-o { display: none; }
:is(.br-jobs:has(input[value="win"]:checked) .br-s:not([data-r~="win"]), .br-jobs:has(input[value="close"]:checked) .br-s:not([data-r~="close"]), .br-jobs:has(input[value="onboard"]:checked) .br-s:not([data-r~="onboard"]), .br-jobs:has(input[value="renew"]:checked) .br-s:not([data-r~="renew"]), .br-jobs:has(input[value="monday"]:checked) .br-s:not([data-r~="monday"]), .br-jobs:has(input[value="tender"]:checked) .br-s:not([data-r~="tender"])) .br-xs { display: inline; }
@media (max-width: 900px) {
  .br-jobs .br-rmap { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: 8px; }
  .br-rmap .br-hub { grid-column: 1 / -1; grid-row: 1; margin: 0 0 4px; padding: 14px; }
  .br-rmap .br-hub .wk-rune { width: 56px; height: 56px; }
  .br-rmap .br-hn { font-size: 32px; }
  .br-jobs .br-rmap .br-s:nth-child(n) { grid-column: auto; grid-row: auto; min-height: 48px; padding: 8px 12px; }
  .br-rmap .br-n { gap: 10px; font-size: 17px; }
  .br-rmap .br-w { display: none; }
}


.br-who .br-s { --q: 1; position: relative; isolation: isolate; padding-inline: 16px; color: color-mix(in srgb, var(--bone) calc(var(--q) * 100%), var(--ash)); }
.br-who .br-s::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--bone) 8%, transparent); transform-origin: 0 50%; transform: scaleX(var(--q)); transition: transform 560ms var(--ease) calc(var(--i, 0) * 70ms); }
.br-who .br-w { margin-right: -16px; border-top-color: color-mix(in srgb, var(--bone) calc(var(--q) * 100%), var(--hair)); transform-origin: 0 50%; transform: scaleX(calc(0.8 + 0.2 * var(--q))); transition: transform 560ms var(--ease) calc(var(--i, 0) * 70ms + 120ms); }
.br-who .br-w::after { border-color: color-mix(in srgb, var(--bone) calc(var(--q) * 100%), var(--hair)); }
:is(.br-who:has(input[value="owner"]:checked) .br-s:not([data-r~="owner"]), .br-who:has(input[value="manager"]:checked) .br-s:not([data-r~="manager"]), .br-who:has(input[value="sales"]:checked) .br-s:not([data-r~="sales"]), .br-who:has(input[value="new"]:checked) .br-s:not([data-r~="new"])) { --q: 0; }
:is(.br-who:has(input[value="owner"]:checked) .br-s:not([data-r~="owner"]), .br-who:has(input[value="manager"]:checked) .br-s:not([data-r~="manager"]), .br-who:has(input[value="sales"]:checked) .br-s:not([data-r~="sales"]), .br-who:has(input[value="new"]:checked) .br-s:not([data-r~="new"])) .br-o { display: none; }
:is(.br-who:has(input[value="owner"]:checked) .br-s:not([data-r~="owner"]), .br-who:has(input[value="manager"]:checked) .br-s:not([data-r~="manager"]), .br-who:has(input[value="sales"]:checked) .br-s:not([data-r~="sales"]), .br-who:has(input[value="new"]:checked) .br-s:not([data-r~="new"])) .br-xs { display: inline; }


.br-dash .br-feed li, .br-dash .br-tiles li { position: relative; border-top: 0; }
.br-dash .br-feed li::before, .br-dash .br-tiles li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; border-top: 1px solid var(--hair); transform-origin: 0 50%; }
.br-dash .br-tiles li:nth-child(-n+2)::before { border-top-color: var(--bone); }
.br-dash .br-tiles li:nth-child(2) { --t: 1; } .br-dash .br-tiles li:nth-child(3) { --t: 2; } .br-dash .br-tiles li:nth-child(4) { --t: 3; } .br-dash .br-tiles li:nth-child(5) { --t: 4; } .br-dash .br-tiles li:nth-child(6) { --t: 5; }
@media (max-width: 900px) { .br-dash .br-tiles li:nth-child(2)::before { border-top-color: var(--hair); } }


@media (prefers-reduced-motion: no-preference) {
  
  html:not(.no-motion) .br-jobs .br-pick .br-rmap .br-s { animation: var(--kr, br-r1) 420ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 50ms); }
  html:not(.no-motion) .br-jobs .br-pick .br-rmap .br-s::before { animation: var(--kp, br-p1) 420ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 50ms + 120ms); }
  html:not(.no-motion) .br-jobs .br-pick .br-rmap .br-s .br-w { animation: none; }
  html:not(.no-motion) .br-jobs .br-pick .br-rmap .br-w::before { animation: var(--ks, br-s1) 480ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 50ms + 220ms); }
  html:not(.no-motion) .br-jobs .br-pick .br-rmap .br-w::after { animation: var(--kp, br-p1) 320ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 50ms + 560ms); }
  html:not(.no-motion) .br-jobs .br-pick .br-rmap .br-hub { animation: var(--kp, br-p1) 480ms var(--ease) backwards; }
  
  html:not(.no-motion) .br-who .br-pick .br-s { animation: var(--kr, br-r1) 460ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
  html:not(.no-motion) .br-who .br-pick .br-s::before { animation: var(--ks, br-s1) 640ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 70ms + 140ms); }
  html:not(.no-motion) .br-who .br-pick .br-s .br-w { animation: var(--ks, br-s1) 560ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 70ms + 280ms); }
  html:not(.no-motion) .br-who .br-pick .br-hub { animation: var(--kp, br-p1) 520ms var(--ease) backwards; }
  html:not(.no-motion) .br-who .br-pick .br-hub .wk-rune { animation: var(--kp, br-p1) 620ms var(--ease) backwards; animation-delay: 160ms; }
  html:not(.no-motion) .br-who .br-pick .br-egs .br-eg { animation: var(--kr, br-r1) 560ms var(--ease) backwards; animation-delay: 560ms; }
  html:not(.no-motion) .br-who .br-pick .br-egs .br-eg .lb { animation: var(--kr, br-r1) 480ms var(--ease) backwards; animation-delay: 700ms; }
  
  html:not(.no-motion) .br-dash .br-feed li { animation: var(--kr, br-r1) 460ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
  html:not(.no-motion) .br-dash .br-feed li::before { animation: var(--ks, br-s1) 600ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 60ms + 80ms); }
  html:not(.no-motion) .br-dash .br-feed .br-tg { animation: var(--kp, br-p1) 420ms var(--ease) backwards; animation-delay: calc(var(--i, 0) * 60ms + 240ms); }
  @supports (animation-timeline: view()) {
    html:not(.no-motion) .br-jobs .br-pick .br-rmap .br-s { animation: br-up var(--ease) both, var(--kr, br-r1) 420ms var(--ease) backwards; animation-timeline: view(), auto;
      animation-range: entry calc(var(--i, 0) * 5%) entry calc(40% + var(--i, 0) * 5%), normal; animation-delay: 0s, calc(var(--i, 0) * 50ms); }
    html:not(.no-motion) .br-jobs .br-pick .br-rmap .br-hub { animation: br-up var(--ease) both, var(--kp, br-p1) 480ms var(--ease) backwards; animation-timeline: view(), auto; animation-range: entry 0% entry 50%, normal; }
    html:not(.no-motion) .br-who .br-pick .br-s { animation: br-up var(--ease) both, var(--kr, br-r1) 460ms var(--ease) backwards; animation-timeline: view(), auto;
      animation-range: entry calc(var(--i, 0) * 5%) entry calc(40% + var(--i, 0) * 5%), normal; animation-delay: 0s, calc(var(--i, 0) * 70ms); }
    html:not(.no-motion) .br-who .br-pick .br-hub { animation: br-up var(--ease) both, var(--kp, br-p1) 520ms var(--ease) backwards; animation-timeline: view(), auto; animation-range: entry 0% entry 50%, normal; }
    html:not(.no-motion) .br-who .br-pick .br-egs .br-eg { animation: br-up var(--ease) both, var(--kr, br-r1) 560ms var(--ease) backwards; animation-timeline: view(), auto; animation-range: entry 10% entry 60%, normal; animation-delay: 0s, 560ms; }
    
    html:not(.no-motion) .br-dash .br-feed li { view-timeline: --brf block; animation: br-up var(--ease) both, var(--kr, br-r1) 460ms var(--ease) backwards; animation-timeline: view(), auto;
      animation-range: entry calc(var(--i, 0) * 3%) entry calc(45% + var(--i, 0) * 3%), normal; animation-delay: 0s, calc(var(--i, 0) * 60ms); }
    html:not(.no-motion) .br-dash .br-feed li::before { animation: br-line var(--ease) both, var(--ks, br-s1) 600ms var(--ease) backwards; animation-timeline: --brf, auto;
      animation-range: entry calc(var(--i, 0) * 3%) entry calc(45% + var(--i, 0) * 3%), normal; animation-delay: 0s, calc(var(--i, 0) * 60ms + 80ms); }
    html:not(.no-motion) .br-dash .br-filter { animation: br-up var(--ease) both; animation-timeline: view(); animation-range: entry 5% entry 50%; }
    
    html:not(.no-motion) .br-dash .br-tiles li:nth-child(n) { view-timeline: --brt block; animation: none; }
    html:not(.no-motion) .br-dash .br-tiles li::before { animation: br-line var(--ease) both; animation-timeline: --brt; animation-range: entry calc(var(--t, 0) * 5%) entry calc(35% + var(--t, 0) * 5%); }
    html:not(.no-motion) .br-dash .br-tiles .h3 { animation: br-up var(--ease) both; animation-timeline: --brt; animation-range: entry calc(var(--t, 0) * 5% + 6%) entry calc(var(--t, 0) * 5% + 46%); }
    html:not(.no-motion) .br-dash .br-tiles p { animation: br-up var(--ease) both; animation-timeline: --brt; animation-range: entry calc(var(--t, 0) * 5% + 12%) entry calc(var(--t, 0) * 5% + 52%); }
  }
}