/* Binary Bliss homepage UX remediation — staging only, 2026-09-23.
   Scope: a light, production-ready homepage hero plus existing service-card hierarchy.
   Does not modify copy, tracking, forms, routing, analytics, or service-page behaviour. */

/* Homepage hero: light analytical surface, dark editorial copy, one contained Signal visual. */
body.bb-v22-home .bb-hero--integrated {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 0;
  padding: clamp(4rem, 7vw, 7.25rem) 0 clamp(4.5rem, 7vw, 7rem);
  background: #ffffff !important;
  border-bottom: 1px solid rgba(15, 82, 186, .10);
}

/* The hero surface stays plain white: the approved artwork carries the faint grid,
   so an opaque white artwork merges with no visible canvas rectangle and no second
   grid pitch. The previous tint field and outline ring are retired. */
body.bb-v22-home .bb-hero--integrated::before {
  display: none !important;
}

body.bb-v22-home .bb-hero--integrated::after {
  display: none !important;
}

body.bb-v22-home .bb-hero--integrated .bb-hero__grid {
  position: relative;
  z-index: 1;
  display: grid !important;
  grid-template-columns: minmax(0, .92fr) minmax(340px, .88fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6.5rem);
}

body.bb-v22-home .bb-hero--integrated .bb-hero__copy {
  width: auto;
  max-width: 620px;
  margin: 0;
  padding: 0;
}

body.bb-v22-home .bb-hero--integrated .bb-label {
  color: #0f52ba;
  font-weight: 700;
}

body.bb-v22-home .bb-hero--integrated .bb-display {
  max-width: 10.5ch;
  margin: 0;
  color: #111318;
  font-size: clamp(3.2rem, 4.5vw, 5.35rem);
  line-height: .96;
  letter-spacing: -.045em;
  text-wrap: balance;
}

body.bb-v22-home .bb-hero--integrated .bb-hero__lead {
  max-width: 47ch;
  color: #46505e;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  font-weight: 400;
  line-height: 1.65;
}

body.bb-v22-home .bb-hero--integrated .bb-hero__actions {
  gap: .85rem;
  margin-top: 1.85rem;
}

body.bb-v22-home .bb-hero--integrated .bb-btn--primary {
  background: #0f52ba;
  border-color: #0f52ba;
  color: #fff;
  box-shadow: 0 10px 22px rgba(15, 82, 186, .18);
}

body.bb-v22-home .bb-hero--integrated .bb-btn--secondary {
  color: #0f52ba;
  border-color: #9ebbe9;
  background: rgba(255, 255, 255, .72);
}

body.bb-v22-home .bb-hero--integrated .bb-notice {
  max-width: 49ch;
  margin-top: 1.65rem;
  color: #536070;
  background: rgba(255, 255, 255, .74);
  border-left-color: #0f52ba;
  box-shadow: none;
}

/* Retire the hero selector treatment; the capability states are now real tabs that
   swap the approved Signal artwork (see the V2.2 integration block at the end). */
body.bb-v22-home .bb-hero--integrated .bb-hero__capabilities {
  display: block !important;
  margin-top: 1.9rem;
}

body.bb-v22-home .bb-hero--integrated .bb-hero__visual,
body.bb-v22-home .bb-hero--integrated .bb-signal-states {
  display: block !important;
  position: relative;
  min-width: 0;
}

body.bb-v22-home .bb-hero--integrated .bb-signal-states__panels {
  display: grid;
  /* The stack is pinned to the tallest state (Technology, 949/892) so the cell height
     is identical for every state and during a crossfade: no page-height jitter. */
  aspect-ratio: 949 / 892;
}

/* Approved hero composition, kept: the panel sits in flow at the full width of the
   visual column, flush to the container's inner right edge. All four states stack in
   one grid cell so the cell height never changes between states (no layout shift).
   The old card treatment (border, radius, tint, shadow, overflow clipping) is removed
   so the artwork merges with the white hero surface. */
body.bb-v22-home .bb-hero--integrated .bb-signal-states__panel {
  grid-area: 1 / 1;
  align-self: center;
  position: relative !important;
  inset: auto !important;
  /* bb-composition.css keeps top:50% + translateY(-50%) for its absolute placement;
     in flow that residual transform drags the artwork half its height above the
     column, so it is cleared here. */
  transform: none !important;
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  box-shadow: none;
  overflow: visible;
  filter: none;
  mix-blend-mode: normal;
  -webkit-mask-image: none;
  mask-image: none;
}

body.bb-v22-home .bb-hero--integrated .bb-signal-states__panel::before {
  display: none;
}

body.bb-v22-home .bb-hero--integrated .bb-signal-states__panel figcaption {
  display: none;
}

/* Existing original service Signal visuals: clear, consistent, and sized for the card hierarchy. */
body.bb-v22-home .bb-card__visual--illustration {
  min-height: 208px;
  background-size: 92% auto !important;
  background-position: center !important;
}

body.bb-v22-home .bb-card {
  gap: var(--bb-space-5);
}

body.bb-v22-home .bb-card__action {
  margin-top: auto;
}

@media (max-width: 991px) {
  body.bb-v22-home .bb-hero--integrated {
    padding: 3.5rem 0 4rem;
    background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%) !important;
  }

  body.bb-v22-home .bb-hero--integrated::before {
    inset: auto -22% 0 34%;
    height: 46%;
    background:
      radial-gradient(circle at 58% 42%, rgba(15,82,186,.10), transparent 33%),
      linear-gradient(rgba(15,82,186,.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(15,82,186,.045) 1px, transparent 1px);
    background-size: auto, 42px 42px, 42px 42px;
  }

  body.bb-v22-home .bb-hero--integrated::after {
    right: -3rem;
    top: auto;
    bottom: -5.5rem;
    width: 17rem;
  }

  body.bb-v22-home .bb-hero--integrated .bb-hero__grid {
    display: block !important;
  }

  body.bb-v22-home .bb-hero--integrated .bb-hero__copy {
    max-width: none;
  }

  body.bb-v22-home .bb-hero--integrated .bb-display {
    max-width: 11ch;
    font-size: clamp(3rem, 14vw, 4.35rem);
    line-height: .98;
  }

  body.bb-v22-home .bb-hero--integrated .bb-hero__lead {
    font-size: 1rem;
  }

  body.bb-v22-home .bb-hero--integrated .bb-hero__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
    margin-top: 1.5rem;
  }

  body.bb-v22-home .bb-hero--integrated .bb-btn {
    width: 100%;
    justify-content: center;
  }

  /* Recomposed for mobile: the Signal artwork sits below the copy in full, uncropped. */
  body.bb-v22-home .bb-hero--integrated .bb-hero__visual {
    display: block !important;
    margin: 2.25rem auto 0;
    max-width: 30rem;
  }

  body.bb-v22-home .bb-card__visual--illustration {
    min-height: 190px;
    background-size: 94% auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.bb-v22-home .bb-hero--integrated .bb-signal-states__panel {
    transition: none !important;
  }
}

/* ==========================================================================
   BBS dark design system pass — 2026-09-23 (staging).
   Reference style: approved homepage bb-cta-band (near-black navy, subtle grid,
   blue radial glow, white heading, muted copy, blue primary + outlined secondary).
   Palette is taken from bb-tokens.css / bb-v22.css only.
   ========================================================================== */

/* Accent words in headings — one restrained accent per heading. */
.bb-accent-word {
  color: var(--bb-blue-400, #4A82E3);
}
body.bb-v22-home .bb-hero--integrated .bb-display .bb-accent-word {
  color: var(--bb-blue-600, #0F52BA);
}

/* --- Shared dark band treatment (Services intro, Portfolio CTA, footer) --- */
body.bb-bbs-dark-system .breadcrumb-area,
body.bb-bbs-dark-system .bb-cta-band {
  position: relative;
  isolation: isolate;
  background-color: var(--bb-ink-950, #090B0F);
  color: var(--bb-text-primary-dark, #F7F8FA);
  overflow: hidden;
}
body.bb-bbs-dark-system .breadcrumb-area::before,
body.bb-bbs-dark-system .bb-cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(circle at 76% 38%, rgba(15, 82, 186, 0.16) 0 40%, transparent 41%),
    radial-gradient(circle at 12% 88%, rgba(36, 103, 209, 0.10) 0 30%, transparent 31%),
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: auto, auto, 64px 64px, 64px 64px;
  background-position: center;
}

/* Services intro: white headline, muted supporting copy, breadcrumb aligned
   to the same container edge as the heading. */
body.bb-bbs-dark-system .breadcrumb-area .breadcumb--con {
  max-width: var(--bb-container, 1240px);
  margin-inline: auto;
  padding-inline: var(--bb-space-5, 24px);
}
body.bb-bbs-dark-system .breadcrumb-area .breadcumb--con .title {
  color: var(--bb-text-primary-dark, #F7F8FA);
  font-family: var(--bb-font-display, Aileron, sans-serif);
  letter-spacing: -0.03em;
}
body.bb-bbs-dark-system .breadcrumb-area .bb-page-intro {
  color: var(--bb-text-secondary-dark, #A8AEB8);
  max-width: 62ch;
}
body.bb-bbs-dark-system .breadcrumb-area .breadcrumb .breadcrumb-item,
body.bb-bbs-dark-system .breadcrumb-area .breadcrumb .breadcrumb-item > a {
  color: var(--bb-text-secondary-dark, #A8AEB8);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body.bb-bbs-dark-system .breadcrumb-area .breadcrumb .breadcrumb-item > a:hover,
body.bb-bbs-dark-system .breadcrumb-area .breadcrumb .breadcrumb-item > a:focus {
  color: var(--bb-accent-on-dark, #82A9ED);
}
body.bb-bbs-dark-system .breadcrumb-area .breadcrumb .breadcrumb-item.active {
  color: var(--bb-text-primary-dark, #F7F8FA);
}
body.bb-bbs-dark-system .breadcrumb-area .breadcrumb-item + .breadcrumb-item::before {
  color: #7F8792;
}
body.bb-bbs-dark-system .breadcrumb-area .breadcrumb {
  flex-wrap: wrap;
  row-gap: 0.25rem;
}
body.bb-bbs-dark-system .breadcrumb-area .breadcrumb-bg-curve {
  opacity: 0.12;
  filter: grayscale(1) brightness(2);
}
/* Inner container of breadcrumb-area uses legacy .container; align to bb container. */
body.bb-bbs-dark-system .breadcrumb-area > .container {
  max-width: calc(var(--bb-container, 1240px) + 48px);
}
/* Services grid stays light for contrast; keep the section white on this page. */
body.bb-bbs-dark-system .uza-services-area {
  background: #fff;
}

/* Portfolio CTA band copy (same family as homepage CTA). */
body.bb-bbs-dark-system .bb-cta-band .bb-h2 {
  color: var(--bb-text-primary-dark, #F7F8FA);
}
body.bb-bbs-dark-system .bb-cta-band p {
  color: var(--bb-text-secondary-dark, #A8AEB8);
  max-width: 56ch;
}
body.bb-bbs-dark-system .bb-cta-band .bb-accent-word {
  color: var(--bb-accent-on-dark, #82A9ED);
}

/* --- Footer: same dark family, connected to the CTA band above it --- */
body.bb-bbs-dark-system .footer-area {
  background:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    var(--bb-ink-900, #111318);
  background-size: 64px 64px, 64px 64px, auto;
  color: var(--bb-text-secondary-dark, #A8AEB8);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
body.bb-bbs-dark-system .footer-area .widget-title {
  color: var(--bb-text-primary-dark, #F7F8FA);
}
body.bb-bbs-dark-system .footer-area p,
body.bb-bbs-dark-system .footer-area .footer-content,
body.bb-bbs-dark-system .footer-area .copywrite-text p,
body.bb-bbs-dark-system .footer-area .container > .row:last-child {
  color: var(--bb-text-secondary-dark, #A8AEB8);
}
body.bb-bbs-dark-system .footer-area .footer-content h3 {
  color: var(--bb-text-primary-dark, #F7F8FA);
}
body.bb-bbs-dark-system .footer-area a {
  color: var(--bb-accent-on-dark, #82A9ED);
}
body.bb-bbs-dark-system .footer-area .our-link li a {
  color: var(--bb-text-secondary-dark, #A8AEB8);
}
body.bb-bbs-dark-system .footer-area .our-link li a:hover,
body.bb-bbs-dark-system .footer-area .our-link li a:focus {
  color: var(--bb-accent-on-dark, #82A9ED);
}
body.bb-bbs-dark-system .footer-area .our-link li a::after {
  background-color: var(--bb-blue-600, #0F52BA);
}
body.bb-bbs-dark-system .footer-area .copywrite-text p a,
body.bb-bbs-dark-system .footer-area .container > .row:last-child a {
  color: var(--bb-accent-on-dark, #82A9ED);
}
/* Social chips: unified to the palette instead of five platform colours. */
body.bb-bbs-dark-system .footer-area .footer-social-info a {
  background-color: rgba(15, 82, 186, 0.22);
  border: 1px solid rgba(130, 169, 237, 0.35);
  color: var(--bb-accent-on-dark, #82A9ED);
  border-radius: 999px;
  transition: background-color 180ms ease, color 180ms ease;
}
body.bb-bbs-dark-system .footer-area .footer-social-info a:hover,
body.bb-bbs-dark-system .footer-area .footer-social-info a:focus {
  background-color: var(--bb-blue-600, #0F52BA);
  color: #fff;
}

/* ==========================================================================
   Fullscreen mobile menu — dark navy, large items, one close control.
   Applies at <=991px where the legacy breakpoint menu is active.
   ========================================================================== */
@media (max-width: 991px) {
  body .classy-menu.menu-on {
    position: fixed !important;
    inset: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 2147483000 !important;
    background-color: var(--bb-ink-950, #090B0F) !important;
    background-image:
      radial-gradient(circle at 82% 14%, rgba(15, 82, 186, 0.20) 0 42%, transparent 43%),
      linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) !important;
    background-size: auto, 56px 56px, 56px 56px !important;
    color: #F7F8FA !important;
    padding: 84px 28px 40px !important;
    overflow-y: auto !important;
    box-shadow: none !important;
  }

  /* One close control only: the legacy decorative X next to the header is hidden;
     the in-menu close button becomes a fixed, labelled control. */
  body .classy-menu.menu-on .classycloseIcon {
    position: fixed !important;
    top: 14px !important;
    right: 16px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px;
    border: 1px solid rgba(130, 169, 237, 0.4);
    background: rgba(15, 82, 186, 0.18);
    z-index: 2147483001;
  }
  body .classy-menu.menu-on .classycloseIcon .cross-wrap span {
    background: #F7F8FA;
    width: 20px;
    height: 2px;
  }
  body .classy-menu.menu-on .classycloseIcon .cross-wrap span.top { transform: rotate(45deg) translate(1px, -1px); }
  body .classy-menu.menu-on .classycloseIcon .cross-wrap span.bottom { transform: rotate(-45deg) translate(1px, 1px); }
  /* Hide the header-row duplicate close icon while the menu is open. */
  body .navbarToggler.active { opacity: 0; pointer-events: none; }

  body .classy-menu.menu-on .classynav ul li a,
  body .breakpoint-on .classynav > ul > li > a,
  body .classy-menu.menu-on .classynav > ul > li > .nav-services-row > a {
    display: flex;
    align-items: center;
    color: #F7F8FA !important;
    background: transparent !important;
    border-bottom: none !important;
    font-family: var(--bb-font-display, Aileron, sans-serif);
    font-size: 1.7rem;
    letter-spacing: -0.02em;
    line-height: 1.15;
    min-height: 64px;
    padding: 10px 0 10px 18px;
    border-left: 3px solid transparent;
  }
  body .classy-menu.menu-on .classynav ul li a:hover,
  body .classy-menu.menu-on .classynav ul li a:focus,
  body .classy-menu.menu-on .classynav ul li.current-item > a {
    border-left-color: var(--bb-blue-400, #4A82E3);
    color: #fff;
  }
  body .classy-menu.menu-on .classynav ul li.current-item > a {
    border-left-color: var(--bb-blue-600, #0F52BA);
  }
  /* Submenu items: smaller, muted, clearly secondary. */
  body .classy-menu.menu-on .services-subnav a {
    color: var(--bb-text-secondary-dark, #A8AEB8);
    font-family: var(--bb-font-body, sans-serif);
    font-size: 1.02rem;
    min-height: 52px;
    border-left: 2px solid rgba(130, 169, 237, 0.25);
  }
  body .classy-menu.menu-on .services-subnav a:hover,
  body .classy-menu.menu-on .services-subnav a:focus {
    color: #fff;
    border-left-color: var(--bb-blue-400, #4A82E3);
  }
  /* Quote CTA: strong blue block, full-width, clearly separated. */
  body .classy-menu.menu-on .get-a-quote {
    margin: 28px 0 0;
  }
  body .classy-menu.menu-on .get-a-quote a {
    justify-content: center;
    width: 100%;
    min-height: 56px;
    border-radius: 12px;
    background: var(--bb-blue-600, #0F52BA) !important;
    color: #fff !important;
    font-size: 1.15rem;
    font-weight: 600;
  }
  body .classy-menu.menu-on .get-a-quote a:hover,
  body .classy-menu.menu-on .get-a-quote a:focus {
    background: var(--bb-accent-hover, #0B3F91);
  }
  /* Services row toggle visible against dark. */
  body .classy-menu.menu-on .nav-services-toggle {
    color: var(--bb-accent-on-dark, #82A9ED);
    min-height: 64px;
  }
}

@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
  body .classy-menu.menu-on { transition: none; }
}

/* ==========================================================================
   V2.2 HERO SIGNAL INTEGRATION — 2026-09-23 (staging only)
   Assets: /assets/signal/approved/v22/BB-Signal-*-V22.webp — the approved recoloured set.
   Geometry, nodes, paths, arcs, grid and negative space are the artwork's own: this block
   only re-points each state at the approved asset, matches the panel box to that asset's
   exact ratio (so `contain` fills the box, nothing crops and the motion overlay anchors to
   artwork coordinates), and adds the state transition plus the semantic motion layer.
   ========================================================================== */

/* 1. Four capability states are real, keyboard-operable tabs again. */
body.bb-v22-home .bb-hero--integrated .bb-signal-states__tabs {
  display: flex !important;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

body.bb-v22-home .bb-hero--integrated .bb-signal-states__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .85rem .5rem .7rem;
  border: 1px solid rgba(15, 82, 186, .16);
  border-radius: 999px;
  background: #fff;
  color: #46505e;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.15;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}

/* One restrained cap per state, from the approved V2.2 accents. */
body.bb-v22-home .bb-hero--integrated .bb-signal-states__tab::before {
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
  flex: 0 0 auto;
}
body.bb-v22-home .bb-hero--integrated .bb-signal-states__tab:nth-child(1) { color: #2f7d47; }
body.bb-v22-home .bb-hero--integrated .bb-signal-states__tab:nth-child(2) { color: #1f7d8c; }
body.bb-v22-home .bb-hero--integrated .bb-signal-states__tab:nth-child(3) { color: #8a6216; }
body.bb-v22-home .bb-hero--integrated .bb-signal-states__tab:nth-child(4) { color: #2f7a6c; }

body.bb-v22-home .bb-hero--integrated .bb-signal-states__tab:hover {
  border-color: rgba(15, 82, 186, .38);
  background: #f4f7fe;
}

body.bb-v22-home .bb-hero--integrated .bb-signal-states__tab[aria-selected="true"] {
  border-color: #0f52ba;
  background: #f4f7fe;
  box-shadow: inset 0 0 0 1px rgba(15, 82, 186, .28);
}

body.bb-v22-home .bb-hero--integrated .bb-signal-states__tab:focus-visible {
  outline: 2px solid #0f52ba;
  outline-offset: 2px;
}

/* 2. Each state carries its approved V2.2 asset and the panel box takes that asset's
      exact ratio, so `contain` fills the box: full node visibility, never cropped, and
      the motion overlay can be anchored to artwork coordinates. These ID rules outrank
      the superseded asset URLs in bb-composition.css (same specificity, later in the
      cascade; body.bb-v22-home adds one more class and wins outright). */
body.bb-v22-home .bb-hero--integrated #bb-state-panel-growth {
  background-image: url('/assets/signal/approved/v22/BB-Signal-02-Convergence-V22.webp');
  aspect-ratio: 918 / 785;
}
body.bb-v22-home .bb-hero--integrated #bb-state-panel-technology {
  background-image: url('/assets/signal/approved/v22/BB-Signal-06-Modular-Architecture-V22.webp');
  aspect-ratio: 949 / 892;
}
body.bb-v22-home .bb-hero--integrated #bb-state-panel-automation {
  background-image: url('/assets/signal/approved/v22/BB-Signal-05-Orchestration-V22.webp');
  aspect-ratio: 953 / 875;
}
body.bb-v22-home .bb-hero--integrated #bb-state-panel-intelligence {
  background-image: url('/assets/signal/approved/v22/BB-Signal-03-Feedback-Loop-V22.webp');
  aspect-ratio: 1025 / 935;
}

/* The in-markup artwork stays the no-CSS fallback for the same asset, exactly as before,
   and never receives a filter or blend. */
body.bb-v22-home .bb-hero--integrated .bb-signal-states__panel img {
  filter: none;
  mix-blend-mode: normal;
}

/* 3. State change: the grid and the panel box never move; the artwork crossfades over
      480ms. Opacity only, so no transform conflict and no layout shift.
      Scoped to .bb-hero-states-js so the hero still renders without JavaScript. */
body.bb-v22-home.bb-hero-states-js .bb-hero--integrated .bb-signal-states__panel {
  opacity: 0;
  transition: opacity 480ms cubic-bezier(.22, .61, .36, 1);
}

body.bb-v22-home.bb-hero-states-js .bb-hero--integrated .bb-signal-states__panel.is-active {
  opacity: 1;
}

body.bb-v22-home .bb-hero--integrated .bb-signal-states__panel.is-leaving {
  pointer-events: none;
}

/* 4. Semantic motion layer: one pass of the approved sequence
      amber activation -> cyan movement -> teal processing -> green outcome.
      It travels along the artwork's own straight trunk nodes and dissolves, so the
      resting state is always the approved static composition (no doubled lines). */
body.bb-v22-home .bb-hero--integrated .bb-v22-signal-motion {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}

.bb-v22-signal-motion .bb-sm-sweep {
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 24 100;
  stroke-dashoffset: 124;
  opacity: 0;
}
.bb-v22-signal-motion .bb-sm-sweep--cyan { stroke: #56C7D9; }
.bb-v22-signal-motion .bb-sm-sweep--teal { stroke: #62C7B2; }
.bb-v22-signal-motion .bb-sm-sweep--green { stroke: #78C98D; }

.bb-v22-signal-motion .bb-sm-node {
  fill: none;
  stroke-width: 2.4;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.bb-v22-signal-motion .bb-sm-node--amber { stroke: #F2B85B; }
.bb-v22-signal-motion .bb-sm-node--green { stroke: #78C98D; }

/* Movement, then processing, then activation, then outcome. One pass only. */
.bb-v22-signal-motion.is-running .bb-sm-sweep {
  animation: bb-sm-travel 1.5s cubic-bezier(.22, .61, .36, 1) forwards;
}
.bb-v22-signal-motion.is-running .bb-sm-sweep--teal { animation-delay: .22s; }
.bb-v22-signal-motion.is-running .bb-sm-sweep--green { animation-delay: .46s; }
.bb-v22-signal-motion.is-running .bb-sm-node--amber {
  animation: bb-sm-activate 1.1s ease-out forwards;
  animation-delay: .3s;
}
.bb-v22-signal-motion.is-running .bb-sm-node--green {
  animation: bb-sm-activate 1.1s ease-out forwards;
  animation-delay: .82s;
}

@keyframes bb-sm-travel {
  0%   { opacity: 0; stroke-dashoffset: 124; }
  14%  { opacity: .92; }
  82%  { opacity: .92; }
  100% { opacity: 0; stroke-dashoffset: 0; }
}

@keyframes bb-sm-activate {
  0%   { opacity: 0; transform: scale(.55); }
  22%  { opacity: .95; transform: scale(1); }
  70%  { opacity: .95; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.06); }
}

/* 5. Reduced motion: no travel, no pulses — the approved static coloured artwork is the
      immediate final state. */
@media (prefers-reduced-motion: reduce) {
  body.bb-v22-home.bb-hero-states-js .bb-hero--integrated .bb-signal-states__panel {
    transition: none !important;
    transform: none !important;
  }
  body.bb-v22-home .bb-hero--integrated .bb-v22-signal-motion,
  body.bb-v22-home .bb-hero--integrated .bb-v22-signal-motion .bb-sm-sweep,
  body.bb-v22-home .bb-hero--integrated .bb-v22-signal-motion .bb-sm-node {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* 6. Tablet/mobile recomposition: copy first, then the artwork in flow, full and
      uncropped, with the tabs above it. */
@media (max-width: 991px) {
  body.bb-v22-home .bb-hero--integrated .bb-signal-states__panels {
    display: grid;
  }
  body.bb-v22-home .bb-hero--integrated .bb-signal-states__tabs {
    gap: .4rem;
    margin-top: 0;
    border-top: 0;
    padding-top: 0;
  }
  body.bb-v22-home .bb-hero--integrated .bb-signal-states__tab {
    padding: .44rem .72rem .44rem .6rem;
    font-size: .78rem;
  }
}