/* Berger BI — redesign layer on top of site-v3: logo intro, process diagram island, expertise pillars,
   numbered eyebrows and press feedback. Everything is scoped (.bbi-story, .bbi-intro-veil, [data-*]) so
   nothing leaks into the rest of the site. Palette = the live site's. */

:root {
  --bbi-navy: #1F4570;
  --bbi-ink: #0B1626;
  --bbi-muted: #4A5A70;
  --bbi-soft: #8493A8;
  --bbi-line: rgba(31, 69, 112, .14);
  --bbi-ghost: rgba(31, 69, 112, .24);
  --bbi-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --bbi-ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --bbi-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}

/* ---------------- logo: the sharp vector replaces the padded PNG, same box height ---------------- */
img[data-main-logo][src$="/logo-bbi.svg"] { height: 30px !important; width: auto; margin-top: 15px !important; margin-bottom: 15px !important; }
img[data-foot-logo][src$="/logo-bbi.svg"] { height: 26px !important; width: auto; margin: 13px 0 !important; }
@media (max-width: 639px) {
  img[data-main-logo][src$="/logo-bbi.svg"] { height: 25px !important; margin-top: 10px !important; margin-bottom: 10px !important; }
}

/* ---------------- numbered eyebrows: the one "engineering" voice across the page ---------------- */
[data-eyebrow="1"] { font-family: var(--bbi-mono) !important; font-size: 12px !important; letter-spacing: .14em !important; font-weight: 500 !important; }
[data-eyebrow="1"] b { font-weight: 500; color: var(--bbi-navy); }
[data-eyebrow="1"] i { font-style: normal; opacity: .6; padding: 0 .35em; }

/* ---------------- intro veil (outside the runtime root) ---------------- */
.bbi-intro-veil { display: none; }
html.bbi-intro .bbi-intro-veil { display: grid; position: fixed; inset: 0; z-index: 2000; place-items: center; background: #F2F4F8; }
html.bbi-intro img[data-main-logo] { opacity: 0; }
html.bbi-intro.bbi-intro-done .bbi-intro-veil { display: none; }
html.bbi-intro.bbi-intro-done img[data-main-logo] { opacity: 1; }
.bbi-intro-logo { position: relative; width: min(460px, 76vw); }
.bbi-intro-logo svg { display: block; width: 100%; height: auto; overflow: visible; }
/* 1. a baseline draws  2. the bars rise like a live chart  3. "BI" is sketched, then inked
   4. BERGER arrives letter by letter, Consulting follows  (then JS glides it into the header)
   The whole drawing ends by ~0.8 s; with the 0.28 s glide the intro stays within ~1.2 s. */
.bbi-intro-logo .lg-base { fill: none; stroke: #B0BCC7; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: bbiLgDraw 240ms var(--bbi-ease-out) 0ms forwards, bbiLgFade 180ms ease 600ms forwards; }
.bbi-intro-logo .lg-bar { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0);
  animation: bbiLgRise 380ms cubic-bezier(.34, 1.4, .5, 1) forwards; }
.bbi-intro-logo .lg-bar.b1 { animation-delay: 90ms; }
.bbi-intro-logo .lg-bar.b2 { animation-delay: 150ms; }
.bbi-intro-logo .lg-bi path { fill-opacity: 0; stroke: #063156; stroke-width: 7; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: bbiLgDraw 360ms var(--bbi-ease-io) forwards, bbiLgInk 200ms ease forwards; }
.bbi-intro-logo .lg-b { animation-delay: 170ms, 460ms !important; }
.bbi-intro-logo .lg-i { animation-delay: 230ms, 520ms !important; }
.bbi-intro-logo .lg-ch  { opacity: 0; transform: translateY(70px); animation: bbiLgUp 280ms var(--bbi-ease-out) forwards; animation-delay: calc(340ms + var(--i) * 28ms); }
.bbi-intro-logo .lg-ch2 { opacity: 0; transform: translateY(40px); animation: bbiLgUp 240ms var(--bbi-ease-out) forwards; animation-delay: calc(450ms + var(--i) * 10ms); }
@keyframes bbiLgDraw { to { stroke-dashoffset: 0; } }
@keyframes bbiLgFade { to { opacity: 0; } }
@keyframes bbiLgRise { to { transform: scaleY(1); } }
@keyframes bbiLgInk  { to { fill-opacity: 1; stroke-opacity: 0; } }
@keyframes bbiLgUp   { to { opacity: 1; transform: none; } }

/* ================= process diagram island (diagram v2) =================
   One drawing voice: 1px hairlines, 1.5px built wires, 7px ports, mono metadata. The model is the only hero.
   Dashes mean monitoring and nothing else. Motion is transform/opacity only and always ends in a state change. */
.bbi-story { --stick: 112px; --ink: #0B1626; --muted: #4A5A70; --plan: #D3DBE4; --l12: rgba(31, 69, 112, .12); --l14: rgba(31, 69, 112, .14);
  --l22: rgba(31, 69, 112, .22); --eio: cubic-bezier(.65, 0, .35, 1); position: relative; color: var(--bbi-navy); }
.bbi-story * { box-sizing: border-box; }
.bbi-story button { font: inherit; color: inherit; }
/* visually hidden, full width so its lines wrap instead of overflowing */
.bbi-story .sr-only { position: absolute; left: 0; top: 0; width: 100%; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); pointer-events: none; }
/* the stage is as tall as its content; JS pins it (--top) under the navbar and sizes the track so the six steps always
   get the same scroll distance (--sh = stage height): about a third of a screen per step */
.bbi-story .track { height: calc(var(--sh, 100vh) + 6 * clamp(260px, 35vh, 340px)); }
.bbi-story .stage { position: sticky; top: var(--top, var(--stick));
  display: grid; grid-template-columns: clamp(220px, 22%, 256px) minmax(0, 1fr); gap: 32px; align-items: center; }
/* the diagram keeps to the page grid: system.css lets #process bleed into the end gutter at >= 1224px, the mount does not */
@media (min-width: 1224px) {
  #process .bbi-story { max-width: calc(var(--v2-wrap, 1140px) - 2 * var(--v2-gutter, 32px)); }
}
/* the section header rides along with the pinned stage at its true size: a copy (JS sets its type from the real h2) sits
   exactly where the real header is, and replaces it whenever the window has room for both (.hpin) */
.bbi-story .shead { position: absolute; bottom: calc(100% + var(--hg, 48px)); inset-inline-start: 0; max-width: 100%; pointer-events: none; opacity: 0; }
.bbi-story.hpin .shead { opacity: 1; }
#dc-root #process:has(.bbi-story.hpin) [data-v2-head] { opacity: 0 !important; }
.bbi-story .shead .se { margin: 0; text-align: start; }
.bbi-story .shead .se > span { unicode-bidi: isolate; }
.bbi-story .shead .se b { font-weight: 500; color: var(--bbi-navy); }
.bbi-story .shead .se i { font-style: normal; color: var(--bbi-soft); padding: 0 .5em; }
.bbi-story .shead .st { text-wrap: balance; text-align: start; }

/* ---------- the step list carries the step copy (one text channel) ---------- */
.bbi-story .sl { position: relative; padding-inline-start: 22px; }
.bbi-story .sl::before, .bbi-story .rail { content: ""; position: absolute; top: 10px; bottom: 10px; inset-inline-start: 0; width: 2px; border-radius: 2px; }
.bbi-story .sl::before { background: var(--l14); }
.bbi-story .rail i { position: absolute; inset: 0; border-radius: 2px; background: var(--bbi-navy); transform-origin: top; transform: scaleY(0); }
.bbi-story .steps { list-style: none; margin: 0; padding: 0; }
.bbi-story .step button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: baseline; gap: 12px; width: 100%; padding: 7px 0; }
.bbi-story .step button:focus-visible { outline: 2px solid var(--bbi-navy); outline-offset: 3px; border-radius: 6px; }
.bbi-story .step .n { flex: none; font: 500 12px/1 var(--bbi-mono); color: var(--muted); }
.bbi-story .step .t { font-size: 17px; font-weight: 500; line-height: 1.35; color: var(--muted); }
.bbi-story .step.done .n, .bbi-story .step.cur .n { color: var(--bbi-navy); }
.bbi-story .step.cur .t { color: var(--ink); font-weight: 700; }
@media (hover: hover) and (pointer: fine) { .bbi-story .step button:hover .t { color: var(--ink); } }
.bbi-story .sdesc { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--l14); min-height: var(--dh, 0px); transition: opacity 160ms ease, transform 160ms ease; }
.bbi-story .sdesc.swap { opacity: 0; transform: translateY(4px); }
.bbi-story .sdn { margin: 0 0 6px; font: 500 12px/1.4 var(--bbi-mono); letter-spacing: .12em; color: var(--bbi-navy); }
.bbi-story .sdt { margin: 0; font-size: 17px; line-height: 1.6; color: #34445A; text-wrap: pretty; }
.bbi-story[dir="rtl"] .sdn, .bbi-story[dir="rtl"] .pnum, .bbi-story[dir="rtl"] .crk { text-align: right; }

/* ---------- the board: a drawing sheet, 1200×720 units on a 24-unit grid ---------- */
.bbi-story .bwrap { min-width: 0; display: flex; align-items: center; justify-content: center; }
/* the dotted 24-unit grid is the paper: it stays put when the camera moves */
.bbi-story .board { position: relative; flex: none; width: var(--cw, 100%); max-width: 100%; border: 1px solid var(--l12); border-radius: var(--v2-r-card, 24px); overflow: hidden;
  background: #fff radial-gradient(circle, rgba(31, 69, 112, .22) 0 .6px, transparent 1px) calc(var(--g, 18px) / -2) calc(var(--g, 18px) / -2) / var(--g, 18px) var(--g, 18px); }
.bbi-story .cv { position: relative; width: 100%; aspect-ratio: 1200 / 720; transform-origin: 0 0; transition: transform 520ms var(--eio); }
.bbi-story svg.wires, .bbi-story svg.over, .bbi-story svg.pw { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; transition: opacity 300ms ease; }
.bbi-story .fig { position: absolute; top: calc(22 / 720 * 100%); inset-inline-start: calc(24 / 1200 * 100%); margin: 0; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--muted); white-space: nowrap; transition: opacity 300ms ease; }
.bbi-story .fig span { font: 500 12px/1 var(--bbi-mono); letter-spacing: .12em; color: var(--bbi-navy); }
/* the key sits on the title's line, at the far end (the bottom of the sheet belongs to "what we build") */
.bbi-story .key { position: absolute; top: calc(22 / 720 * 100%); inset-inline-end: calc(24 / 1200 * 100%); display: flex; gap: 16px; font-size: 13px; line-height: 1.4; color: var(--muted); transition: opacity 300ms ease; }
.bbi-story .key span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.bbi-story .key i { width: 18px; border-top: 1.5px solid var(--bbi-navy); }
.bbi-story .key i.kp { border-top: 1px solid #C3CDD9; }
.bbi-story .key i.kc { border-top: 1px dashed var(--bbi-soft); }
.bbi-story .frame { position: absolute; inset-inline-start: calc(var(--x) / 1200 * 100%); top: calc(var(--y) / 720 * 100%); width: calc(var(--w) / 1200 * 100%); height: calc(var(--h) / 720 * 100%);
  border: 1px solid var(--l14); border-radius: var(--v2-r-inner, 16px); pointer-events: none; }
/* "what we build": its frame firms up once the group is built, so it never reads as "planned" */
.bbi-story .frame.bld, .bbi-story .pframe.bld { transition: border-color var(--du, 300ms) ease var(--dle, 0ms); }
.bbi-story .frame.bld.on, .bbi-story .pframe.bld.on { border-color: rgba(31, 69, 112, .32); }

/* wires: planned hairline underneath, the built wire inks on top in pieces (each piece scales from its origin) */
.bbi-story .wp { fill: none; stroke: var(--plan); stroke-width: 1; }
.bbi-story .wp.ctl { stroke-dasharray: 3 3; }
.bbi-story .reg { fill: none; stroke: #B7C3D1; stroke-width: 1; }
.bbi-story .end { fill: none; stroke: var(--plan); stroke-width: 1; }
.bbi-story .ik, .bbi-story .ia { fill: none; stroke: var(--bbi-navy); stroke-width: 1.5; }
.bbi-story .ik { transition: transform var(--du, 300ms) linear var(--dle, 0ms); }
.bbi-story .ik.h { transform: scaleX(0); }
.bbi-story .ik.v { transform: scaleY(0); }
.bbi-story .ik.on, .bbi-story .stub.hot .ik { transform: none; }
.bbi-story .ia { opacity: 0; transition: opacity var(--du, 60ms) linear var(--dle, 0ms); }
.bbi-story .ia.on, .bbi-story .stub.hot .ia { opacity: 1; }
.bbi-story .wc { fill: none; stroke: var(--bbi-soft); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; transition: opacity var(--du, 300ms) ease var(--dle, 0ms); }
.bbi-story .wc.on { opacity: 1; }
/* ports: 7px, white with a navy ring once the part exists, filled once a wire has arrived */
.bbi-story .p0 { fill: #fff; stroke: var(--plan); stroke-width: 1; }
.bbi-story .p1 { fill: #fff; stroke: var(--bbi-navy); stroke-width: 1.25; opacity: 0; transition: opacity 200ms ease var(--dle, 0ms); }
.bbi-story .p1.on { opacity: 1; }
.bbi-story .p2 { fill: var(--bbi-navy); transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 140ms var(--bbi-ease-out) var(--dle, 0ms); }
.bbi-story .p2.on, .bbi-story .p2.hot { transform: none; }
.bbi-story .hotp { transition-duration: 220ms; }
.bbi-story .rg { fill: none; stroke: var(--bbi-navy); stroke-width: 1; transform-box: fill-box; transform-origin: center; }
.bbi-story .jd { fill: var(--bbi-navy); transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 160ms var(--bbi-ease-out) var(--dle, 0ms); }
.bbi-story .jd.on { transform: none; }
.bbi-story .sn { fill: #fff; stroke: var(--bbi-navy); stroke-width: 1.25; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 200ms var(--bbi-ease-out) var(--dle, 0ms); }
.bbi-story .sn.on { transform: none; }
/* direction marks on the two-way pairs (reads down, writes back up) */
.bbi-story .chv { fill: none; stroke: var(--bbi-navy); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity 200ms ease var(--dle, 0ms); }
.bbi-story .chv.on { opacity: 1; }

/* ---------- nodes: five anatomies (connector tile, core, view, people pill, module) ---------- */
.bbi-story .cv .nd { position: absolute; inset-inline-start: calc(var(--x) / 1200 * 100%); top: calc(var(--y) / 720 * 100%); width: calc(var(--w) / 1200 * 100%); height: calc(var(--h) / 720 * 100%); }
.bbi-story .nd { margin: 0; padding: 0 10px; display: flex; align-items: center; gap: 8px; min-width: 0; background: #fff; border: 1px solid var(--l14); border-radius: var(--v2-r-inner, 16px);
  color: var(--ink); text-align: start; cursor: pointer; transition: opacity 300ms ease, border-color 0s linear var(--dle, 0ms); -webkit-tap-highlight-color: transparent; }
.bbi-story .nd.tile.on, .bbi-story .nd.pill.on, .bbi-story .nd.mod.on { border-color: rgba(31, 69, 112, .3); }
.bbi-story .nd[aria-disabled] { cursor: default; }
.bbi-story .nd:focus-visible, .bbi-story .lbl:focus-visible { outline: 2px solid var(--bbi-navy); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .bbi-story .nd.on:hover { border-color: rgba(31, 69, 112, .45); } .bbi-story .lbl.on:hover { color: var(--ink); } }
/* not built yet: the part is drawn and readable (ink at 60% is 4.8:1), it just has no connection; never a greyed-out ghost */
.bbi-story .nd.tile > *, .bbi-story .nd.pill > *, .bbi-story .nd.mod > *, .bbi-story .nd.ctl > :not(.ctlk) { opacity: .6; transition: opacity var(--du, 240ms) ease var(--dle, 0ms); }
.bbi-story .nd.on > * { opacity: 1; }
/* the open slots' "+" socket (the only glyph left on the board besides the real brand marks) */
.bbi-story .gl, .bbi-story .av { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; padding: 0;
  background: #fff; border: 1px solid var(--l22); color: var(--bbi-navy); font: 400 13px/1 var(--bbi-mono); }
/* brand marks: the system's own logo in its own colour, ~18px */
.bbi-story .mk { flex: none; display: block; width: 18px; height: 18px; }
.bbi-story .mk-sap { width: 26px; height: 26px; margin: -4px -2px; }   /* a wide wordmark in a square file */
.bbi-story .tx { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding-block: 6px; }
.bbi-story .nd .nt { font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--ink); white-space: nowrap; }
.bbi-story .nm { font: 400 12px/1.2 var(--bbi-mono); letter-spacing: .02em; color: var(--muted); white-space: nowrap; }
.bbi-story .nd.tile .nt { font-size: 14px; }
.bbi-story .sd { position: relative; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #C9D2DD; }
.bbi-story .sd::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--bbi-navy); opacity: 0; transition: opacity 240ms ease var(--dle, 0ms); }
.bbi-story .sd.on::after { opacity: 1; }
.bbi-story .nd.slot { border-color: var(--l22); }
.bbi-story .cyc > span { display: inline-block; white-space: nowrap; }
.bbi-story .cyc .lat { font-family: 'DM Sans', 'Heebo', sans-serif; }

/* the core (data model): the single hero, navy header, 1.5px border, the only shadow */
.bbi-story .nd.core, .bbi-story .nd.view { flex-direction: column; align-items: stretch; gap: 0; padding: 0; border-radius: var(--v2-r-inner, 16px); }
.bbi-story .nd.core::after, .bbi-story .nd.view::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--bbi-navy); border-radius: var(--v2-r-inner, 16px); opacity: 0; pointer-events: none;
  transition: opacity var(--du, 300ms) ease var(--dle, 0ms); }
.bbi-story .nd.core::after { border-width: 1.5px; box-shadow: 0 12px 28px -14px rgba(11, 22, 38, .22); }
.bbi-story .nd.core.on::after, .bbi-story .nd.view.on::after { opacity: 1; }
.bbi-story .hd { position: relative; flex: none; height: 28px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px;
  background: #EEF1F5; border-radius: calc(var(--v2-r-inner, 16px) - 1px) calc(var(--v2-r-inner, 16px) - 1px) 0 0; font: 500 12px/1 var(--bbi-mono); letter-spacing: .1em; color: var(--muted); white-space: nowrap; }
.bbi-story .hd .hl.he { font: 600 13px/20px 'Heebo', sans-serif; letter-spacing: 0; }
.bbi-story .hd .ht { display: inline-flex; align-items: center; gap: 6px; }
.bbi-story .hd .ht .mk { width: 15px; height: 15px; }
.bbi-story .hn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; background: var(--bbi-navy); color: #fff;
  border-radius: calc(var(--v2-r-inner, 16px) - 1px) calc(var(--v2-r-inner, 16px) - 1px) 0 0; opacity: 0; transition: opacity var(--du, 300ms) ease var(--dle, 0ms); }
.bbi-story .hn.on { opacity: 1; }
.bbi-story .hs { width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.bbi-story .bd { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 8px 12px; }
/* a small board (under ~820px, i.e. 1024-1223px windows that are short): the model shows two schema rows, the chart is lower */
.bbi-story .board.sm .row:nth-child(3) { display: none; }
.bbi-story .board.sm .chart { height: 24px; }
.bbi-story .board.sm .kv b { font-size: 18px; }
.bbi-story .board.sm .bd { gap: 5px; }
.bbi-story .core .nt { font-size: 16px; font-weight: 700; line-height: 1.3; }
.bbi-story .rows { display: flex; flex-direction: column; }
/* real table names, kept quiet: the model's name and its chips lead, the schema is texture */
.bbi-story .row { display: flex; justify-content: space-between; gap: 8px; font: 400 12px/17px var(--bbi-mono); color: rgba(74, 90, 112, .86); border-top: 1px solid #EEF1F5; white-space: nowrap; }
.bbi-story .row:last-child { border-bottom: 1px solid #EEF1F5; }
.bbi-story .row span:first-child { color: var(--muted); }
.bbi-story .chips { display: flex; gap: 6px; }
.bbi-story .chip { font-size: 13px; font-weight: 600; line-height: 20px; padding: 0 8px; border: 1px solid var(--l22); border-radius: 999px; color: var(--bbi-navy); white-space: nowrap; }
.bbi-story .core .nt, .bbi-story .row, .bbi-story .chips, .bbi-story .kl, .bbi-story .kr, .bbi-story .ts {
  opacity: .6; transform: translateY(3px); transition: opacity var(--du, 320ms) ease var(--dle, 0ms), transform var(--du, 320ms) var(--bbi-ease-out) var(--dle, 0ms); }
.bbi-story .core .nt.on, .bbi-story .row.on, .bbi-story .chips.on, .bbi-story .kl.on, .bbi-story .kr.on, .bbi-story .ts.on { opacity: 1; transform: none; }
/* schema rows fill their box exactly: fade only, so the unbuilt state never pokes out of the model node */
.bbi-story .row { transform: none; }

/* the view (dashboard): one KPI with a delta, a sparkline, seven thin bars, a timestamp */
.bbi-story .view .bd { gap: 6px; }
.bbi-story .kl { font-size: 13px; line-height: 1.3; color: var(--muted); white-space: nowrap; }
.bbi-story .kr { display: flex; align-items: center; gap: 6px; }
.bbi-story .kv b { display: inline-block; font: 700 20px/1.2 'DM Sans', sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--ink); }
.bbi-story .kd { font: 500 12px/1 var(--bbi-mono); color: var(--bbi-navy); white-space: nowrap; }
.bbi-story .hh { font: 600 13px/1.5 'Heebo', sans-serif; letter-spacing: 0; }
.bbi-story .chart { position: relative; height: 30px; }
.bbi-story .spark { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; transition: opacity var(--du, 360ms) ease var(--dle, 0ms); }
.bbi-story .spark.on { opacity: 1; }
.bbi-story .spark polyline { fill: none; stroke: var(--bbi-navy); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.bbi-story .bars { display: flex; align-items: flex-end; gap: 5px; height: 100%; }
.bbi-story .bars i { flex: 1; height: var(--v); border-radius: 1px; background: rgba(31, 69, 112, .3); transform-origin: bottom; transform: scaleY(.08);
  transition: transform var(--du, 360ms) var(--bbi-ease-out) var(--dle, 0ms); }
.bbi-story .bars i.hi { background: var(--bbi-navy); }
.bbi-story .bars i.on { transform: none; }
.bbi-story .ts { font: 400 13px/1.25 'Heebo', sans-serif; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }

/* people pills, and the tiles of what we build (built: solid white tiles with ink names, like the source tiles) */
.bbi-story .nd.pill { border-radius: 999px; padding-inline: 14px 12px; }
.bbi-story .nd.pill.slot { padding-inline-start: 5px; }
.bbi-story .pill .nt, .bbi-story .mod .nt { flex: 1; min-width: 0; }
.bbi-story .nd.mod { padding-inline: 14px 12px; gap: 8px; }
.bbi-story .nd.mod.slot { padding-inline-start: 8px; }
.bbi-story .mod .nt { font-size: 14px; font-weight: 600; }

/* labels sit on the line they name */
/* a frame's name is always legible (its white ground breaks the line it sits on, so it is never faded) */
.bbi-story .lbl { margin: 0; padding: 0 6px; height: 20px; border: 0; border-radius: 3px; background: #fff; font: 500 12px/20px var(--bbi-mono); letter-spacing: .08em; color: var(--muted);
  white-space: nowrap; cursor: pointer; transition: opacity 300ms ease; }
.bbi-story .lbl[aria-disabled] { cursor: default; }
/* Hebrew frame names: Heebo at the page's label size (13px), no tracking */
.bbi-story .lbl.he { font: 600 13px/20px 'Heebo', sans-serif; letter-spacing: 0; color: var(--bbi-navy); }
.bbi-story .cv .lbl { position: absolute; inset-inline-start: calc(var(--x) / 1200 * 100%); top: calc(var(--y) / 720 * 100%); transform: translateY(-50%); }

/* viewfinder brackets mark "current"; the pulse is one navy dot */
.bbi-story .fx { position: absolute; inset: 0; pointer-events: none; }
.bbi-story .bk { position: absolute; left: 0; top: 0; width: 10px; height: 10px; border: 0 solid var(--bbi-navy); opacity: 0; transition: transform 480ms var(--eio), opacity 240ms ease; }
.bbi-story .bk.on { opacity: 1; }
.bbi-story .bk.tl { border-top-width: 1.5px; border-left-width: 1.5px; }
.bbi-story .bk.tr { border-top-width: 1.5px; border-right-width: 1.5px; }
.bbi-story .bk.bl { border-bottom-width: 1.5px; border-left-width: 1.5px; }
.bbi-story .bk.br { border-bottom-width: 1.5px; border-right-width: 1.5px; }
.bbi-story .pl { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--bbi-navy); }

/* step choreography: only the step being entered uses its delays; going back is quick and silent */
.bbi-story.fwd[data-s="0"] [data-at="0"], .bbi-story.fwd[data-s="1"] [data-at="1"], .bbi-story.fwd[data-s="2"] [data-at="2"],
.bbi-story.fwd[data-s="3"] [data-at="3"], .bbi-story.fwd[data-s="4"] [data-at="4"], .bbi-story.fwd[data-s="5"] [data-at="5"] { --dle: var(--dl, 0ms); }
.bbi-story.rev [data-at] { --du: 200ms !important; }

/* ---------- inspect: neighbours step back, a card explains and reveals ---------- */
.bbi-story .board.insp .cv .nd:not(.focus), .bbi-story .board.insp .cv .lbl:not(.focus), .bbi-story .board.insp svg.wires, .bbi-story .board.insp svg.over,
.bbi-story .board.insp .fig, .bbi-story .board.insp .key { opacity: .22; }
.bbi-story .card { position: absolute; z-index: 3; top: 16px; width: min(300px, 40%); padding: 10px 10px 16px 16px; padding-inline: 16px 8px; background: #fff; border: 1px solid var(--l22); border-radius: var(--v2-r-inner, 16px);
  visibility: hidden; opacity: 0; transform: translateY(6px); transition: opacity 220ms ease, transform 220ms var(--bbi-ease-out), visibility 0s linear 220ms; }
.bbi-story .card.open { visibility: visible; opacity: 1; transform: none; transition-delay: 300ms, 300ms, 0s; }
.bbi-story .chd { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bbi-story .ctag { min-width: 0; font: 500 12px/1.4 var(--bbi-mono); letter-spacing: .1em; color: var(--muted); }
.bbi-story .crk.he { font: 600 13px/1.4 'Heebo', sans-serif; letter-spacing: 0; }
.bbi-story .cx { flex: none; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent;
  font-size: 20px; line-height: 1.5; color: var(--muted); cursor: pointer; }
.bbi-story .cx:focus-visible { outline: 2px solid var(--bbi-navy); outline-offset: 0; }
@media (hover: hover) and (pointer: fine) { .bbi-story .cx:hover { color: var(--ink); background: #F2F4F8; } }
.bbi-story .card .ctt { margin: 2px 0 4px; font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.bbi-story .card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.bbi-story .crv { margin-top: 12px; padding-top: 10px; border-top: 1px solid #EEF1F5; }
.bbi-story .crv[hidden] { display: none; }
.bbi-story .crk { display: block; margin-bottom: 6px; font: 500 12px/1.4 var(--bbi-mono); letter-spacing: .12em; color: var(--muted); }
.bbi-story .crl { display: flex; flex-wrap: wrap; gap: 4px; }
.bbi-story .crl i.he { font: 500 13px/22px 'Heebo', sans-serif; }
.bbi-story .crl i { font: 400 12px/22px var(--bbi-mono); font-style: normal; padding: 0 7px; border: 1px solid var(--l14); border-radius: 999px; color: var(--bbi-navy); white-space: nowrap; }

/* ---------- phones: the chapters flow with their own text; a slim sticky caption keeps the place ---------- */
.bbi-story .ph { display: none; }

/* small laptops and landscape tablets: the steps become a tab strip so the board keeps its size */
@media (min-width: 961px) and (max-width: 1223px) {
  .bbi-story .stage { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 16px; }
  .bbi-story .sl { padding: 0; }
  .bbi-story .sl::before, .bbi-story .rail { display: none; }
  .bbi-story .steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
  .bbi-story .step button { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 0 0; border-top: 2px solid var(--l14); }
  .bbi-story .step.done button, .bbi-story .step.cur button { border-top-color: var(--bbi-navy); }
  .bbi-story .step .t { font-size: 15px; line-height: 1.3; }
  .bbi-story .sdesc { margin-top: 12px; padding-top: 0; border-top: 0; }
  .bbi-story .sdn { display: none; }
  .bbi-story .sdt { font-size: 17px; max-width: 80ch; }
  .bbi-story .bwrap { width: 100%; height: auto; }
}

/* the chapter flow (.pm): set by story.js on phone and tablet widths (<= 960px) and on desktop windows too short to show
   the whole pinned stage */
.bbi-story.pm .track { height: auto; }
.bbi-story.pm .stage { display: none; }
/* no sticky caption: the navbar is the only sticky thing on a phone, and each chapter carries its own number */
.bbi-story.pm .ph { display: block; }
.bbi-story.pm .pflow { position: relative; padding-block: 2px 14px; padding-inline: 26px 20px; background: #fff; border: 1px solid var(--l12); border-radius: var(--v2-r-card, 24px); }
/* compact chapters: the number sits on the title's line, the drawings are chip rows instead of stacked tiles */
.bbi-story.pm .pch { position: relative; padding-top: 14px; }
.bbi-story.pm .ptt { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.bbi-story.pm .pnum { flex: none; font: 500 12px/1 var(--bbi-mono); letter-spacing: .06em; color: var(--bbi-navy); }
.bbi-story.pm .pds { margin: 0 0 8px; font-size: 15px; line-height: 1.5; color: #34445A; text-wrap: pretty; }
.bbi-story.pm .pfig { position: relative; }
.bbi-story.pm .pfig .nd { position: relative; width: 100%; }
.bbi-story.pm .pframe { position: relative; padding: 16px 8px 8px; border: 1px solid var(--l14); border-radius: var(--v2-r-inner, 16px); }
/* 44px tall tap target; only the text carries the white background that breaks the border line */
.bbi-story.pm .ph .lbl { position: absolute; top: 0; inset-inline-start: 4px; height: 44px; padding: 0; background: transparent; transform: translateY(-50%); }
.bbi-story.pm .ph .lbl > span { display: inline-block; padding: 0 6px; background: #fff; line-height: 20px; }
.bbi-story.pm .pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
/* chip rows: every chip is a 44px tap target sized to its name; the open slot takes what is left of its row */
.bbi-story.pm .pchips { display: flex; flex-wrap: wrap; gap: 6px; }
.bbi-story.pm .pchips .nd { width: auto; flex: 0 1 auto; }
.bbi-story.pm .pchips .nd.slot { flex: 1 0 128px; min-width: 0; }
.bbi-story.pm .pchips .nd.mod.slot { flex-basis: 88px; }   /* its resting name has a short form (JS picks what fits) */
.bbi-story.pm .pfig .nd.tile, .bbi-story.pm .pfig .nd.pill, .bbi-story.pm .pfig .nd.mod { height: 44px; border-radius: var(--v2-r-inner, 16px); gap: 7px; }
.bbi-story.pm .pfig .nd.tile, .bbi-story.pm .pfig .nd.mod { padding-inline: 10px; }
.bbi-story.pm .pfig .nd.slot { padding-inline: 8px 10px; }
.bbi-story.pm .pfig .sd { display: none; }
.bbi-story.pm .pfig .nd.pill { padding-inline: 12px; }
.bbi-story.pm .pfig .nd.pill.slot { padding-inline: 8px 10px; }
.bbi-story.pm .pfig .nd.core, .bbi-story.pm .pfig .nd.view { min-height: 0; }
.bbi-story.pm .pfig .nd.core .bd, .bbi-story.pm .pfig .nd.view .bd { padding: 10px 14px 12px; }
/* the model on a phone: its name and its chips (the schema rows are in the card) */
.bbi-story.pm .pfig .nd.core .rows { display: none; }
.bbi-story.pm .pfig .nd.core .bd { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
/* the dashboard on a phone: KPI at the start, the chart beside it, the timestamp under both */
.bbi-story.pm .pfig .nd.view .bd { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; row-gap: 2px; align-items: end; }
.bbi-story.pm .pfig .nd.view .kl { grid-column: 1; grid-row: 1; }
.bbi-story.pm .pfig .nd.view .kr { grid-column: 1; grid-row: 2; }
.bbi-story.pm .pfig .nd.view .chart { grid-column: 2; grid-row: 1 / 3; height: 40px; align-self: center; }
.bbi-story.pm .pfig .nd.view .ts { display: none; }
/* monitoring: the one dashed frame; its name sits on the line on an opaque ground, so the dash never runs through it */
.bbi-story.pm .nd.ctl { flex-direction: column; align-items: flex-start; gap: 2px; padding: 16px 12px 10px; padding-inline-end: 64px; border: 1px dashed var(--bbi-soft); border-radius: var(--v2-r-inner, 16px); }
.bbi-story.pm .ctlk { position: absolute; top: 0; inset-inline-start: 10px; transform: translateY(-50%); padding: 0 6px; background: #fff; font: 500 12px/20px var(--bbi-mono); letter-spacing: .1em; color: var(--muted); }
.bbi-story.pm .ctlk.he { font: 600 13px/20px 'Heebo', sans-serif; letter-spacing: 0; color: var(--bbi-navy); }
.bbi-story.pm .nd.ctl .nt { font-size: 14px; font-weight: 500; white-space: normal; }
.bbi-story.pm .sens { position: absolute; inset-inline-end: 14px; top: 50%; display: flex; gap: 8px; margin-top: -3px; }
.bbi-story.pm .sens i { width: 7px; height: 7px; border: 1.25px solid var(--bbi-navy); background: #fff; transform: scale(0); transition: transform 200ms var(--bbi-ease-out) var(--dle, 0ms); }
.bbi-story.pm .sens i.on { transform: none; }
/* the inspect sheet opens at once (no delay under the finger) and clears the home indicator */
.bbi-story.pm .pcard { position: fixed; z-index: 30; top: auto; bottom: calc(12px + env(safe-area-inset-bottom)); inset-inline: 12px; width: auto; max-width: 520px; margin: 0 auto; padding: 8px 16px 18px;
  box-shadow: 0 -6px 24px -8px rgba(11, 22, 38, .16); }
.bbi-story.pm .pcard.open { transition-delay: 0s; }
.bbi-story.pm .pcard { padding-inline: 16px 4px; }
.bbi-story.pm .pcard .cx { width: 44px; height: 44px; }
.bbi-story.pm .pcard p, .bbi-story.pm .pcard .crv { margin-inline-end: 12px; }

@media (max-width: 699px) {
  .bbi-story .ph { max-width: 560px; margin: 0 auto; }
}
/* portrait tablets: each chapter is a row, its text at the start and its drawing at the end; the data spine runs in the
   gutter between them, the automation bus down the far edge */
@media (min-width: 700px) {
  .bbi-story.pm .pflow { padding-block: 8px 36px; padding-inline: 28px 22px; }
  .bbi-story.pm .pch { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 48px; align-items: start; padding-top: 40px; }
  .bbi-story.pm .pch:first-of-type { padding-top: 28px; }
  .bbi-story.pm .ptt { font-size: 20px; }
  .bbi-story.pm .pds { margin: 4px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bbi-story *, .bbi-story *::before, .bbi-story *::after { transition-duration: 0ms !important; transition-delay: 0ms !important; }
}
html.a11y-no-motion .bbi-story *, html.a11y-no-motion .bbi-story *::before, html.a11y-no-motion .bbi-story *::after { transition-duration: 0ms !important; transition-delay: 0ms !important; }
html.a11y-no-motion .bbi-story .pl { display: none; }
.bbi-story.nt *, .bbi-story.nt *::before, .bbi-story.nt *::after { transition: none !important; }

/* ================= expertise: two pillars ================= */
[data-pillar-head] { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px; align-items: baseline; margin: 48px 0 22px; padding-top: 22px; border-top: 1px solid var(--bbi-line); }
[data-pillar-head] [data-pk] { grid-row: span 2; font-family: var(--bbi-mono); font-size: 12px; letter-spacing: .12em; color: var(--bbi-soft); direction: ltr; unicode-bidi: isolate; padding-top: 6px; }
[data-pillar-head] h3 { margin: 0; font-size: clamp(21px, 2vw, 26px); font-weight: 800; letter-spacing: -.012em; line-height: 1.4; color: var(--bbi-ink); }
[data-pillar-head] p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--bbi-muted); max-width: 70ch; }
[data-pillar-head] p b { font-weight: 600; color: var(--bbi-navy); }
[data-spec-grid] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 18px; }
/* a lone last card spans the row instead of leaving two empty cells */
[data-spec-grid] > :last-child:nth-child(3n+1) { grid-column: 1 / -1; }
@media (max-width: 1023px) {
  [data-spec-grid] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-spec-grid] > :last-child:nth-child(3n+1) { grid-column: auto; }
  [data-spec-grid] > :last-child:nth-child(2n+1) { grid-column: 1 / -1; }
}
@media (max-width: 679px) {
  [data-spec-grid] { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  [data-spec-grid] > :last-child:nth-child(2n+1) { grid-column: auto; }
  [data-pillar-head] { grid-template-columns: minmax(0, 1fr); }
  [data-pillar-head] [data-pk] { grid-row: auto; padding-top: 0; }
}

/* eyebrow with translated (Hebrew) text: only the number switches to mono; light variant on dark cards */
[data-eyebrow="text"] b, [data-eyebrow="text"] i { font-family: var(--bbi-mono); }
[data-eyebrow="text"] b { font-weight: 500; }
[data-eyebrow="text"] i { font-style: normal; opacity: .6; padding: 0 .35em; }
[data-eyebrow-dark] b { color: #fff; }

/* ---------------- tech stack: one quiet monochrome row, no brand colours competing with the page ---------------- */
[data-tech-logo] { filter: grayscale(1); opacity: .82; }

/* ---------------- about: the team photo in the site's own navy, so it reads as ours rather than stock ---------------- */
[data-about-photo] { filter: grayscale(1) contrast(1.05) brightness(1.04); }
[data-about-tint] { background: linear-gradient(160deg, rgba(31,69,112,.62), rgba(31,69,112,.34)) !important; mix-blend-mode: multiply; }

/* narrow phones (iPhone SE / mini, <= 400px): a little less frame padding so the three source chips share one row */
@media (max-width: 400px) {
  .bbi-story.pm .pflow { padding-inline: 24px 18px; }
  .bbi-story.pm .pfig .nd.tile, .bbi-story.pm .pfig .nd.mod { padding-inline: 9px; gap: 6px; }
  .bbi-story.pm .pfig .nd.pill { padding-inline: 9px; }
  .bbi-story.pm .pfig .nd.pill.slot { padding-inline: 6px 8px; gap: 6px; }
}

/* short windows: the step column sets its text a size smaller so the whole pinned stage fits under the navbar more often
   (when it still cannot, story.js switches to the chapters rather than cutting the drawing off) */
@media (min-width: 1224px) and (max-height: 700px) {
  .bbi-story .step button { padding: 5px 0; }
  .bbi-story .step .t { font-size: 16px; }
  .bbi-story .sdesc { margin-top: 12px; padding-top: 12px; }
  .bbi-story .sdt { font-size: 15px; line-height: 1.55; }
}
@media (min-width: 961px) and (max-width: 1223px) and (max-height: 760px) {
  .bbi-story .stage { gap: 12px; }
  .bbi-story .sdesc { margin-top: 8px; }
  .bbi-story .sdt { font-size: 15px; line-height: 1.5; }
}

/* sub-pixel rounding in the English steps list (1px) — give the column a hair of breathing room */
.bbi-story .steps-wrap { padding-bottom: 2px; }
.bbi-story .stage { padding-bottom: 1px; }