/* =============================================================================
   SERVICEBIRD — LIVE SECTIONS (2027)
   -----------------------------------------------------------------------------
   Additive stylesheet for the four live/animated modules. Loaded LAST so it can
   refine the base theme without editing style.css:

     1. .sb-journey — the platform journey (brief §2 visual concept), with the
                      Service Bird carrying the assignment along the route.
     2. .sb-cta2    — upgraded dual call-to-action cards (brief §2, §8, §9).
     3. .sb-match   — Instant Match & Compliance Verification (brief §3, §5).
     5. .sb-flow    — refinements to the How Servicebird Works map (brief §5).

   Every animation is gated by prefers-reduced-motion at the end of the file.
============================================================================= */

/* ============================================================ 1. THE JOURNEY
   Public Sector Organisation -> Servicebird Platform -> Compliant Professional
   -> Service Delivered. One clock writes data-journey-stage="0..3" onto the
   wrapper; everything below reacts to that single attribute.
============================================================================= */
.sb-journey {
  position: relative;
  margin: 30px auto 8px;
  max-width: 1040px;
  width: 100%;
  padding: 22px 26px 26px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFF 100%);
  border: 1px solid var(--border-main);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  isolation: isolate;
}
.sb-journey::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(520px 160px at 12% 0%, rgba(37, 99, 235, .07), transparent 70%),
    radial-gradient(520px 160px at 88% 100%, rgba(0, 195, 137, .07), transparent 70%);
}
.sb-journey__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.sb-journey__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-blue-vibrant);
  background: var(--brand-blue-subtle);
  border: 1px solid rgba(37, 99, 235, .18);
  border-radius: var(--radius-full);
  padding: 7px 14px;
}
.sb-journey__eyebrow i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sb-green);
  box-shadow: 0 0 0 0 rgba(0, 195, 137, .55);
  animation: sbPulseDot 1.9s ease-out infinite;
}
@keyframes sbPulseDot {
  0%   { box-shadow: 0 0 0 0 rgba(0, 195, 137, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(0, 195, 137, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 195, 137, 0); }
}
.sb-journey__stagelabel {
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--text-subtle);
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.sb-journey__stagelabel em {
  font-style: normal;
  color: var(--text-subtle);
}
.sb-journey__stagelabel b {
  color: var(--brand-blue-vibrant);
}

/* ---------------------------------------------------------------- the track */
.sb-journey__track {
  position: relative;
  padding-top: 58px;          /* room for the travelling bird */
}
.sb-journey__rail {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 58px;
  height: 4px;
  border-radius: 4px;
  background: var(--bg-elevated);
  overflow: hidden;
}
.sb-journey__rail i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--sb-blue) 0%, var(--sb-sky) 55%, var(--sb-green) 100%);
  transition: width 900ms var(--ease-spring);
}
/* The fill reaches each node in turn: 4 nodes => 0 / 33 / 66 / 100 %. */
.sb-journey[data-journey-stage="0"] .sb-journey__rail i { width: 2%; }
.sb-journey[data-journey-stage="1"] .sb-journey__rail i { width: 34.5%; }
.sb-journey[data-journey-stage="2"] .sb-journey__rail i { width: 67%; }
.sb-journey[data-journey-stage="3"] .sb-journey__rail i { width: 100%; }

/* ------------------------------------------------- the bird courier in flight */
.sb-journey__courier {
  position: absolute;
  top: 0;
  left: 6%;
  width: 68px;
  height: 56px;
  margin-left: -34px;
  transform: translateX(0);
  transition: left 900ms var(--ease-spring);
  pointer-events: none;
  z-index: 3;
}
.sb-journey[data-journey-stage="0"] .sb-journey__courier { left: 6%; }
.sb-journey[data-journey-stage="1"] .sb-journey__courier { left: calc(6% + 29.33%); }
.sb-journey[data-journey-stage="2"] .sb-journey__courier { left: calc(6% + 58.66%); }
.sb-journey[data-journey-stage="3"] .sb-journey__courier { left: 94%; }
.sb-journey__courier svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: sbCourierBob 2.4s ease-in-out infinite;
  filter: drop-shadow(0 8px 14px rgba(15, 23, 42, .18));
}
@keyframes sbCourierBob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-7px) rotate(2deg); }
}
.sb-journey__courier .sb-cw {           /* wings */
  transform-box: fill-box;
  transform-origin: 88% 62%;
  animation: sbCourierFlap .52s ease-in-out infinite alternate;
}
.sb-journey__courier .sb-cw--back {
  transform-origin: 12% 62%;
  animation-delay: .06s;
}
@keyframes sbCourierFlap {
  from { transform: rotate(-16deg) scaleY(.94); }
  to   { transform: rotate(20deg)  scaleY(1.06); }
}
/* The parcel the bird is carrying — the assignment itself. */
.sb-journey__courier .sb-cparcel {
  transform-box: fill-box;
  transform-origin: 50% 0%;
  animation: sbParcelSway 2.4s ease-in-out infinite;
}
@keyframes sbParcelSway {
  0%, 100% { transform: rotate(-7deg); }
  50%      { transform: rotate(7deg); }
}

/* ------------------------------------------------------------------- nodes */
.sb-journey__nodes {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sb-journey__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.sb-journey__dot {
  position: relative;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid var(--border-main);
  color: var(--text-light);
  box-shadow: var(--shadow-subtle);
  transition: transform 420ms var(--ease-spring), border-color 420ms ease,
              color 420ms ease, background 420ms ease, box-shadow 420ms ease;
}
.sb-journey__dot svg { width: 21px; height: 21px; }
.sb-journey__node.is-done .sb-journey__dot {
  border-color: var(--sb-green);
  color: var(--sb-green);
  background: var(--sb-green-050);
}
.sb-journey__node.is-live .sb-journey__dot {
  border-color: var(--sb-blue);
  color: var(--sb-blue);
  background: var(--sb-blue-050);
  transform: scale(1.12);
  box-shadow: 0 0 0 6px rgba(22, 87, 240, .12), var(--shadow-card);
}
.sb-journey__node.is-live .sb-journey__dot::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--sb-blue);
  animation: sbNodePing 1.8s ease-out infinite;
}
@keyframes sbNodePing {
  0%   { opacity: .6; transform: scale(1); }
  100% { opacity: 0;  transform: scale(1.55); }
}
.sb-journey__label {
  font-family: var(--font-heading);
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-muted);
  transition: color 320ms ease;
  max-width: 15ch;
}
.sb-journey__node.is-live .sb-journey__label { color: var(--text-heading); }
.sb-journey__step {
  font-family: var(--font-mono);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--text-light);
  transition: color 320ms ease;
}
.sb-journey__node.is-live .sb-journey__step { color: var(--sb-blue); }
.sb-journey__node.is-done .sb-journey__step { color: var(--sb-green); }
/* ==================================================== 2. DUAL CALL-TO-ACTION
   Two decisive routes into the platform: an organisation booking a service, or
   a professional joining the network. Labels are taken from the brief (§2, §8,
   §9). The cursor drives a light source across each card.
============================================================================= */
.sb-cta2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  width: 100%;
  max-width: 1040px;
  margin: 34px auto 0;
}
.sb-cta2__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    'kicker arrow'
    'title  arrow'
    'meta   arrow';
  align-items: center;
  gap: 4px 18px;
  padding: 24px 26px;
  border-radius: var(--radius-lg);
  text-decoration: none;
  border: 1px solid var(--border-main);
  background: #FFFFFF;
  box-shadow: var(--shadow-card);
  transition: transform 420ms var(--ease-spring), box-shadow 420ms var(--ease-spring),
              border-color 320ms ease;
}
.sb-cta2__card:hover,
.sb-cta2__card:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--shadow-float);
  border-color: var(--border-glow);
}
/* Cursor-following light. --mx/--my are written by servicebird-live.js. */
.sb-cta2__card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  transition: opacity 320ms ease;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
              rgba(255, 255, 255, .16), transparent 68%);
}
.sb-cta2__card:hover::before { opacity: 1; }
/* The dark card — for public-sector organisations (the primary route). */
.sb-cta2__card--org {
  background: var(--brand-navy-card);
  border-color: rgba(255, 255, 255, .12);
  color: #FFFFFF;
}
.sb-cta2__card--org::after {                 /* moving sheen */
  content: '';
  position: absolute;
  z-index: -1;
  top: -60%;
  bottom: -60%;
  width: 42%;
  left: -60%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .13), transparent);
  transform: skewX(-16deg);
  animation: sbSheen 5.2s ease-in-out infinite;
}
@keyframes sbSheen {
  0%, 62%  { left: -60%; }
  92%,100% { left: 140%; }
}
.sb-cta2__kicker {
  grid-area: kicker;
  font-family: var(--font-mono);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-light);
}
.sb-cta2__card--org .sb-cta2__kicker { color: rgba(255, 255, 255, .62); }
.sb-cta2__title {
  grid-area: title;
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 2px 0 0;
  color: var(--text-heading);
}
.sb-cta2__card--org .sb-cta2__title { color: #FFFFFF; }
.sb-cta2__sub {
  grid-area: meta;
  margin: 6px 0 0;
  font-size: .875rem;
  font-weight: 600;
  color: var(--text-muted);
}
.sb-cta2__card--org .sb-cta2__sub { color: rgba(255, 255, 255, .74); }
.sb-cta2__arrow {
  grid-area: arrow;
  position: relative;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-blue-subtle);
  color: var(--brand-blue-vibrant);
  transition: transform 420ms var(--ease-spring), background 320ms ease, color 320ms ease;
}
.sb-cta2__card--org .sb-cta2__arrow {
  background: rgba(255, 255, 255, .14);
  color: #FFFFFF;
}
.sb-cta2__card:hover .sb-cta2__arrow {
  transform: translateX(6px) rotate(-45deg) scale(1.06);
  background: var(--brand-blue-vibrant);
  color: #FFFFFF;
}
.sb-cta2__arrow svg { width: 20px; height: 20px; }
/* The compliance strip along the foot of each card — verbatim brief §5 / §8. */
.sb-cta2__strip {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
}
.sb-cta2__card--org .sb-cta2__strip { border-top-color: rgba(255, 255, 255, .12); }
.sb-cta2__strip span {
  font-family: var(--font-mono);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 4px 9px;
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  color: var(--text-subtle);
}
.sb-cta2__card--org .sb-cta2__strip span {
  background: rgba(255, 255, 255, .09);
  color: rgba(255, 255, 255, .78);
}
/* ============================== 3. INSTANT MATCH & COMPLIANCE VERIFICATION
   An interactive demonstration of the matching chain. Every option, criterion
   and signal is taken verbatim from the brief (§3 matching criteria, §3 sector
   list, §3 delivery modes, §5 compliance messaging). No professional, price,
   rating or response time is invented.
============================================================================= */
.sb-match {
  position: relative;
  width: 100%;
  max-width: 1120px;
  margin: 40px auto 0;
  padding: 26px 28px 28px;
  border-radius: var(--radius-xl);
  background: #FFFFFF;
  border: 1px solid var(--border-main);
  box-shadow: var(--shadow-float);
  text-align: left;
  isolation: isolate;
  overflow: hidden;
}
.sb-match::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--sb-blue), var(--sb-sky) 45%, var(--sb-green));
  transform-origin: 0 50%;
  animation: sbMatchTop 4.6s ease-in-out infinite;
}
@keyframes sbMatchTop {
  0%, 100% { transform: scaleX(.25); opacity: .55; }
  50%      { transform: scaleX(1);   opacity: 1; }
}
.sb-match__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.sb-match__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-blue-vibrant);
  background: var(--brand-blue-subtle);
  border: 1px solid rgba(37, 99, 235, .18);
  border-radius: var(--radius-full);
  padding: 6px 13px;
}
.sb-match__title {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--text-heading);
  margin: 12px 0 0;
}
.sb-match__note {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-subtle);
  margin: 6px 0 0;
}
.sb-match__engine {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 700;
  color: var(--sb-green);
  background: var(--sb-green-050);
  border: 1px solid rgba(0, 195, 137, .22);
  border-radius: var(--radius-full);
  padding: 7px 14px;
  white-space: nowrap;
}
.sb-match__engine i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--sb-green);
  animation: sbPulseDot 1.9s ease-out infinite;
}

/* ---------------------------------------------------------------- controls */
.sb-match__controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 14px;
  align-items: end;
  padding: 20px;
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
}
.sb-match__field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.sb-match__field > span {
  font-family: var(--font-mono);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-blue-vibrant);
}
.sb-match__field select,
.sb-match__field input {
  width: 100%;
  font-family: var(--font-sans);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--text-main);
  background: #FFFFFF;
  border: 1.5px solid var(--border-main);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  transition: border-color 200ms ease, box-shadow 200ms ease;
  appearance: none;
}
.sb-match__field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='3'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 36px;
  cursor: pointer;
}
.sb-match__field select:focus,
.sb-match__field input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}
.sb-match__run {
  font-family: var(--font-heading);
  font-size: .9375rem;
  font-weight: 700;
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--sb-blue) 0%, var(--brand-blue-vibrant) 100%);
  border: none;
  border-radius: var(--radius-sm);
  padding: 14px 22px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 10px 24px -8px rgba(22, 87, 240, .55);
  transition: transform 260ms var(--ease-spring), box-shadow 260ms ease, filter 200ms ease;
}
.sb-match__run:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -10px rgba(22, 87, 240, .6);
}
/* While a run is in flight the button must read as WORKING, not as broken.
   The old grayscale made it look dead, which is precisely when a visitor
   concludes their click did nothing and stops clicking. */
.sb-match__run:disabled { cursor: progress; opacity: .92; }
.sb-match__run:disabled::after {
  content: "";
  width: 14px;
  height: 14px;
  margin-left: 2px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: #FFFFFF;
  animation: sbRunSpin .7s linear infinite;
}
@keyframes sbRunSpin { to { transform: rotate(360deg); } }
/* The arrow steps aside for the spinner so the button width does not jump. */
.sb-match__run:disabled svg { display: none; }

@media (prefers-reduced-motion: reduce) {
  .sb-match__run:disabled::after { animation: none; border-top-color: rgba(255,255,255,.4); }
}
/* ------------------------------------------- the seven-criteria matching chain */
.sb-match__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 18px;
  margin-top: 18px;
}
.sb-match__chain {
  list-style: none;
  margin: 0;
  padding: 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: #FFFFFF;
}
.sb-match__chain-h {
  font-family: var(--font-mono);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 12px;
}
.sb-match__crit {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--border-subtle);
  font-size: .875rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: color 260ms ease;
}
.sb-match__crit:last-child { border-bottom: none; }
.sb-match__crit b {                       /* the state lamp */
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border-main);
  background: var(--bg-elevated);
  display: grid;
  place-items: center;
  transition: border-color 260ms ease, background 260ms ease;
}
.sb-match__crit b svg {
  width: 11px;
  height: 11px;
  opacity: 0;
  transform: scale(.4);
  transition: opacity 220ms ease, transform 320ms var(--ease-spring);
}
.sb-match__crit[data-state="checking"] {
  color: var(--brand-blue-vibrant);
}
.sb-match__crit[data-state="checking"] b {
  border-color: var(--sb-blue);
  background: var(--sb-blue-050);
  animation: sbCritSpin 1s linear infinite;
}
@keyframes sbCritSpin {
  0%   { box-shadow: 0 0 0 0 rgba(22, 87, 240, .30); }
  70%  { box-shadow: 0 0 0 7px rgba(22, 87, 240, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 87, 240, 0); }
}
.sb-match__crit[data-state="verified"] {
  color: var(--text-heading);
}
.sb-match__crit[data-state="verified"] b {
  border-color: var(--sb-green);
  background: var(--sb-green);
  color: #FFFFFF;
}
.sb-match__crit[data-state="verified"] b svg { opacity: 1; transform: scale(1); }
.sb-match__crit-val {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 700;
  color: var(--text-light);
  text-align: right;
  max-width: 52%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sb-match__crit[data-state="verified"] .sb-match__crit-val { color: var(--sb-green); }
/* ------------------------------------------------------------ result panel */
.sb-match__out {
  position: relative;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, .10);
  background: var(--brand-navy-card);
  color: #FFFFFF;
  padding: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.sb-match__idle {
  margin: auto;
  text-align: center;
  max-width: 34ch;
}
.sb-match__idle svg {
  width: 34px; height: 34px;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 12px;
}
.sb-match__idle p {
  font-size: .875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .68);
  margin: 0;
}
.sb-match__card {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 460ms ease, transform 560ms var(--ease-spring);
}
.sb-match__card.is-in { opacity: 1; transform: none; }
.sb-match__card-h {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.sb-match__seal {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(0, 195, 137, .18);
  border: 1.5px solid var(--sb-green);
  color: var(--sb-green);
}
.sb-match__seal svg { width: 19px; height: 19px; }
.sb-match__card-h strong {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -.01em;
}
.sb-match__card-h span {
  display: block;
  font-family: var(--font-mono);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sb-green);
  margin-top: 3px;
}
.sb-match__rows {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.sb-match__rows li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: .8125rem;
}
.sb-match__rows dt,
.sb-match__rows .k {
  flex: 0 0 34%;
  font-family: var(--font-mono);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .52);
}
.sb-match__rows .v {
  font-weight: 700;
  color: #FFFFFF;
}
.sb-match__signals {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.sb-match__signals span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: .625rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: var(--radius-full);
  background: rgba(0, 195, 137, .13);
  border: 1px solid rgba(0, 195, 137, .30);
  color: #7BF0C8;
  opacity: 0;
  transform: translateY(6px);
  animation: sbSigIn 420ms var(--ease-spring) forwards;
}
.sb-match__card.is-in .sb-match__signals span:nth-child(1) { animation-delay: 120ms; }
.sb-match__card.is-in .sb-match__signals span:nth-child(2) { animation-delay: 190ms; }
.sb-match__card.is-in .sb-match__signals span:nth-child(3) { animation-delay: 260ms; }
.sb-match__card.is-in .sb-match__signals span:nth-child(4) { animation-delay: 330ms; }
.sb-match__card.is-in .sb-match__signals span:nth-child(5) { animation-delay: 400ms; }
.sb-match__card.is-in .sb-match__signals span:nth-child(6) { animation-delay: 470ms; }
.sb-match__card.is-in .sb-match__signals span:nth-child(7) { animation-delay: 540ms; }
@keyframes sbSigIn {
  to { opacity: 1; transform: none; }
}
.sb-match__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  margin-top: 18px;
  font-family: var(--font-heading);
  font-size: .875rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--sb-ink);
  background: #FFFFFF;
  border-radius: var(--radius-full);
  padding: 11px 19px;
  transition: transform 260ms var(--ease-spring), box-shadow 260ms ease;
}
.sb-match__cta:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .5); }
/* ============================================================ REDUCED MOTION
   Everything above is decorative. With prefers-reduced-motion the site must
   still communicate, so each module resolves to its finished, readable state
   instead of simply losing its animation.
============================================================================= */
@media (prefers-reduced-motion: reduce) {
  .sb-journey__courier .sb-cw,
  .sb-journey__courier,
  .sb-journey__rail i,
  .sb-match__crit b {
    animation: none !important;
    transition: none !important;
  }
  .sb-journey__rail i { width: 100% !important; }
  .sb-journey__courier { animation: none !important; }
  .sb-match__signals span { opacity: 1 !important; transform: none !important; }
}
/* ================================================================ RESPONSIVE
   Mobile-first in behaviour: every module here collapses to a single readable
   column, and the motion that depends on horizontal room (the courier flight,
   the sector marquee) is either scaled down or dropped rather than clipped.
============================================================================= */

/* ------------------------------------------------------------ ≤ 1024px */
@media (max-width: 1024px) {
  .sb-match__body { grid-template-columns: 1fr; }
  .sb-match__controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sb-match__run { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------- ≤ 860px */
@media (max-width: 860px) {
  .sb-journey { padding: 22px 18px 26px; }
  .sb-journey__head { flex-wrap: wrap; gap: 12px; }
  .sb-cta2 { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- ≤ 680px */
@media (max-width: 680px) {
  /* Four nodes across is unreadable on a phone; two rows of two keeps the
     labels legible and the rail still reads as one continuous journey. */
  .sb-journey__nodes { grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
  .sb-journey__track { margin-bottom: 22px; }
  .sb-journey__courier svg { width: 34px; height: 34px; }
  .sb-journey__label { font-size: 12px; }

  .sb-match { padding: 20px 16px 22px; }
  .sb-match__controls { grid-template-columns: 1fr; }
  .sb-match__run { grid-column: auto; }
  .sb-match__title { font-size: 19px; }

}

/* ------------------------------------------------------------- ≤ 480px */
@media (max-width: 480px) {
  .sb-journey__nodes { grid-template-columns: 1fr; row-gap: 14px; }
  .sb-journey__node { flex-direction: row; align-items: center; gap: 12px; text-align: left; }
  /* With the nodes stacked vertically the rail no longer maps to them, so the
     flying courier is retired and the stage readout carries the progress. */
  .sb-journey__track { display: none; }

  .sb-cta2__card { grid-template-columns: 1fr; }
  .sb-cta2__arrow { justify-self: start; }
  .sb-cta2__strip { flex-wrap: wrap; row-gap: 6px; }

  .sb-match__crit-val { display: none; }
}

/* =============================================================================
   MATCHING ENGINE — BAND + SCALE-UP
   -----------------------------------------------------------------------------
   The panel used to live inside .hero-inner-wrapper (max-width 860px), so its
   own max-width of 1120px never applied and it rendered a quarter narrower than
   designed. It now sits in its own band. Everything below is about giving it
   the presence that width implies: larger controls, a real two-column body, a
   result card that holds its own weight, and a phone layout that stacks in a
   deliberate order instead of squeezing.
============================================================================= */
.sb-engine {
  position: relative;
  isolation: isolate;
  padding: clamp(64px, 8vw, 108px) 0;
  background: var(--sb-paper-2, #F6F8FC);
  overflow: hidden;
}
.sb-engine__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(58% 46% at 12% 8%,  rgba(37, 99, 235, .10), transparent 62%),
    radial-gradient(52% 44% at 88% 92%, rgba(0, 195, 137, .10), transparent 64%);
}
.sb-engine .section-header { margin-bottom: clamp(30px, 4vw, 48px); }

/* The panel itself, now at full designed width. */
.sb-engine .sb-match {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(24px, 3vw, 40px) clamp(20px, 3vw, 40px) clamp(26px, 3.2vw, 42px);
  border-radius: clamp(20px, 2.4vw, 30px);
  box-shadow: 0 2px 6px rgba(11, 18, 45, .05), 0 26px 60px -22px rgba(11, 18, 45, .22);
}

/* Head: badge, one line of guidance, live state. No title — the band owns it. */
.sb-engine .sb-match__head {
  align-items: center;
  margin-bottom: clamp(18px, 2.4vw, 26px);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-subtle);
}
.sb-engine .sb-match__note {
  flex: 1 1 260px;
  margin: 0;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--text-muted);
}

/* Controls: bigger hit areas, clearer field labels. */
.sb-engine .sb-match__controls {
  gap: 18px;
  padding: clamp(18px, 2.2vw, 26px);
  border-radius: 18px;
}
.sb-engine .sb-match__field > span { font-size: .6875rem; letter-spacing: .13em; }
.sb-engine .sb-match__field select,
.sb-engine .sb-match__field input {
  font-size: 1rem;
  padding: 15px 16px;
  border-radius: 13px;
  min-height: 52px;
}
.sb-engine .sb-match__field select { padding-right: 40px; background-position: right 15px center; }
.sb-engine .sb-match__run {
  font-size: 1rem;
  padding: 16px 30px;
  border-radius: 13px;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
/* The arrow carries no intrinsic size. Without this it becomes a flex item
   with nothing to size against and stretches to fill the button. */
.sb-engine .sb-match__run svg { flex: 0 0 auto; width: 18px; height: 18px; }

/* Body: give the chain and the result card room to breathe. */
.sb-engine .sb-match__body { gap: clamp(20px, 2.6vw, 34px); margin-top: clamp(20px, 2.6vw, 30px); }
.sb-engine .sb-match__chain { padding: clamp(18px, 2.2vw, 26px); border-radius: 18px; }
.sb-engine .sb-match__chain-h { font-size: .6875rem; letter-spacing: .13em; margin-bottom: 6px; }
.sb-engine .sb-match__crit { font-size: .9375rem; padding: 12px 0; gap: 13px; }
.sb-engine .sb-match__crit b { width: 23px; height: 23px; }
.sb-engine .sb-match__crit b svg { width: 13px; height: 13px; }
.sb-engine .sb-match__crit-val { font-size: .75rem; }
.sb-engine .sb-match__out { border-radius: 18px; }
.sb-engine .sb-match__card { padding: clamp(18px, 2.2vw, 26px); }
.sb-engine .sb-match__rows li { font-size: .9375rem; padding: 12px 0; }
.sb-engine .sb-match__signals span { font-size: .75rem; padding: 7px 12px; }

/* ---------------------------------------------------------------- ≤ 900px */
@media (max-width: 900px) {
  .sb-engine .sb-match__head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .sb-engine .sb-match__note { flex: 1 1 auto; }
  .sb-engine .sb-match__controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sb-engine .sb-match__run { grid-column: 1 / -1; justify-content: center; width: 100%; }
}

/* ---------------------------------------------------------------- ≤ 640px */
@media (max-width: 640px) {
  .sb-engine { padding: 52px 0; }
  .sb-engine .sb-match { border-radius: 20px; padding: 20px 16px 24px; }
  .sb-engine .sb-match__controls { grid-template-columns: 1fr; gap: 14px; padding: 16px; }
  /* Full-width taps on a phone. 52px clears the 44px guidance comfortably. */
  .sb-engine .sb-match__field select,
  .sb-engine .sb-match__field input,
  .sb-engine .sb-match__run { min-height: 54px; font-size: 1rem; }
  .sb-engine .sb-match__crit { font-size: .875rem; padding: 11px 0; }
  /* The value chip stays — it is the whole point of the row. It moves under
     the label rather than being hidden, which is what the old rule did. */
  .sb-engine .sb-match__crit { flex-wrap: wrap; }
  .sb-engine .sb-match__crit-val { display: inline-flex; margin-left: 36px; }
  .sb-engine .sb-match__signals span { font-size: .7rem; padding: 6px 10px; }
}

/* =============================================================================
   ACTIVE SERVICE — DEEP DIVE PANEL  (.sb-dive)
   -----------------------------------------------------------------------------
   Replaces the old three-box "language bridge". One container: the offer and
   its four delivery methods on the left, one dark scene on the right. The
   scene is driven entirely by data-dive-mode on the root, so the buttons and
   the artwork are structurally incapable of disagreeing.

   Every grid and flex child that holds wide content carries min-width:0. The
   previous module omitted this, and its sector marquee dragged the whole
   column out to 3,637px on any screen under 1024px.
============================================================================= */
.sb-dive {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: 0;
  background: var(--sb-white);
  border: 1px solid var(--sb-line);
  border-radius: var(--sb-r-xl);
  box-shadow: var(--sb-shadow-2);
  overflow: hidden;
  isolation: isolate;
}
.sb-dive > * { min-width: 0; }

/* ------------------------------------------------------------------- copy */
.sb-dive__copy {
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3.4vw, 46px);
}
.sb-dive__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--sb-muted);
  margin-bottom: 16px;
}
.sb-dive__brand .bar {
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--sb-blue), var(--sb-green));
}
.sb-dive__h {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.15;
  color: var(--sb-ink);
  margin: 0 0 14px;
}
.sb-dive__lede {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--sb-muted);
  margin: 0 0 clamp(20px, 2.6vw, 30px);
  max-width: 52ch;
}

/* --------------------------------------------------- four delivery methods */
.sb-dive__modes {
  list-style: none;
  margin: 0 0 clamp(22px, 2.8vw, 30px);
  padding: 0;
  display: grid;
  gap: 10px;
}
.sb-dive__modes button {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  text-align: left;
  background: var(--sb-white);
  border: 1.5px solid var(--sb-line);
  border-radius: var(--sb-r);
  cursor: pointer;
  transition: border-color var(--sb-fast) var(--sb-ease),
              background var(--sb-fast) var(--sb-ease),
              box-shadow var(--sb-fast) var(--sb-ease),
              transform var(--sb-fast) var(--sb-ease-out);
}
/* The accent rail. It grows from the top edge rather than fading, so the
   selected row reads as switched on, not merely tinted. */
.sb-dive__modes button::before {
  content: "";
  position: absolute;
  left: -1.5px;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--sb-blue), var(--sb-sky));
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform var(--sb-med) var(--sb-ease-out);
}
.sb-dive__modes button:hover {
  border-color: var(--sb-line-2);
  transform: translateX(3px);
  box-shadow: var(--sb-shadow-1);
}
.sb-dive__modes button[aria-selected="true"] {
  background: var(--sb-blue-050);
  border-color: rgba(22, 87, 240, .34);
  box-shadow: var(--sb-shadow-1);
}
.sb-dive__modes button[aria-selected="true"]::before { transform: scaleY(1); }
.sb-dive__modes button:focus-visible {
  outline: 3px solid var(--sb-blue);
  outline-offset: 2px;
}

.sb-dive__ic {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--sb-paper);
  color: var(--sb-muted);
  transition: background var(--sb-fast) var(--sb-ease),
              color var(--sb-fast) var(--sb-ease),
              transform var(--sb-med) var(--sb-ease-out);
}
.sb-dive__ic svg { width: 20px; height: 20px; }
.sb-dive__modes button[aria-selected="true"] .sb-dive__ic {
  background: var(--sb-blue);
  color: #FFFFFF;
  transform: rotate(-6deg) scale(1.06);
}

.sb-dive__mt { min-width: 0; display: block; }
.sb-dive__mt b {
  display: block;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--sb-ink);
  letter-spacing: -.01em;
}
.sb-dive__mt small {
  display: block;
  margin-top: 2px;
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--sb-muted);
}

.sb-dive__go {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--sb-faint);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--sb-fast) var(--sb-ease),
              transform var(--sb-fast) var(--sb-ease-out),
              color var(--sb-fast) var(--sb-ease);
}
.sb-dive__go svg { width: 16px; height: 16px; }
.sb-dive__modes button:hover .sb-dive__go,
.sb-dive__modes button[aria-selected="true"] .sb-dive__go {
  opacity: 1;
  transform: translateX(0);
  color: var(--sb-blue);
}

.sb-dive__cta {
  align-self: flex-start;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: var(--sb-r-pill);
  font-family: var(--font-heading);
  font-size: .9375rem;
  font-weight: 700;
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--sb-blue) 0%, var(--sb-blue-600) 100%);
  box-shadow: var(--sb-shadow-blue);
  transition: transform var(--sb-fast) var(--sb-ease-out),
              box-shadow var(--sb-fast) var(--sb-ease);
}
.sb-dive__cta svg { width: 18px; height: 18px; transition: transform var(--sb-fast) var(--sb-ease-out); }
.sb-dive__cta:hover { transform: translateY(-3px); box-shadow: 0 20px 42px rgba(22, 87, 240, .38); }
.sb-dive__cta:hover svg { transform: translateX(4px); }

/* -------------------------------------------------------------- the scene */
.sb-dive__art {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: clamp(26px, 3vw, 38px) clamp(22px, 2.6vw, 34px) clamp(58px, 5vw, 66px);
  background: linear-gradient(158deg, var(--sb-ink) 0%, var(--sb-navy) 52%, #061029 100%);
  overflow: hidden;
}
.sb-dive__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(86% 62% at 50% 4%,  rgba(22, 87, 240, .40), transparent 62%),
    radial-gradient(70% 56% at 12% 100%, rgba(0, 195, 137, .26), transparent 66%);
}
.sb-dive__scene { width: 100%; height: auto; display: block; }

.sb-dive__rings circle {
  fill: none;
  stroke: rgba(255, 255, 255, .09);
  stroke-width: 1;
}
.sb-dive__rings circle:nth-child(2) { stroke: rgba(255, 255, 255, .07); }
.sb-dive__rings circle:nth-child(3) { stroke: rgba(255, 255, 255, .12); }

.sb-dive__link {
  fill: none;
  stroke: rgba(255, 255, 255, .16);
  stroke-width: 2;
}
.sb-dive__link--flow {
  stroke: url(#sbSegLive);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: .16 .84;
  animation: sbDiveFlow 2.6s linear infinite;
}
@keyframes sbDiveFlow { to { stroke-dashoffset: -1; } }

.sb-dive__orb {
  fill: rgba(255, 255, 255, .10);
  stroke: rgba(255, 255, 255, .34);
  stroke-width: 1.5;
}
.sb-dive__orb--pro { stroke: rgba(0, 195, 137, .62); }
.sb-dive__glyph { color: #FFFFFF; }
.sb-dive__ptxt {
  fill: rgba(255, 255, 255, .70);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
}

/* The payload runs the link, then rests at the professional. */
.sb-dive__packet { animation: sbDivePacket 3.4s var(--sb-ease) infinite; }
@keyframes sbDivePacket {
  0%        { transform: translate(118px, 150px); opacity: 0; }
  12%       { opacity: 1; }
  72%, 100% { transform: translate(402px, 150px); opacity: 1; }
}

/* The delivery-method plate sitting on the link. */
.sb-dive__mode rect {
  fill: rgba(255, 255, 255, .12);
  stroke: rgba(255, 255, 255, .22);
  stroke-width: 1;
}
.sb-dive__mode text {
  fill: #FFFFFF;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 700;
}

/* The waveform. Three spoken modes make it speak; document translation
   flattens it to a baseline, which is the whole visual difference. */
.sb-dive__wave rect {
  fill: rgba(255, 255, 255, .42);
  y: 172px;
  height: 6px;
  transition: height var(--sb-med) var(--sb-ease-out), y var(--sb-med) var(--sb-ease-out);
}
[data-dive-mode="1"] .sb-dive__wave rect,
[data-dive-mode="2"] .sb-dive__wave rect,
[data-dive-mode="3"] .sb-dive__wave rect {
  animation: sbDiveWave 1.05s var(--sb-ease) infinite alternate;
}
.sb-dive__wave rect:nth-child(1)  { animation-delay: -.05s }
.sb-dive__wave rect:nth-child(2)  { animation-delay: -.55s }
.sb-dive__wave rect:nth-child(3)  { animation-delay: -.20s }
.sb-dive__wave rect:nth-child(4)  { animation-delay: -.70s }
.sb-dive__wave rect:nth-child(5)  { animation-delay: -.35s }
.sb-dive__wave rect:nth-child(6)  { animation-delay: -.85s }
.sb-dive__wave rect:nth-child(7)  { animation-delay: -.15s }
.sb-dive__wave rect:nth-child(8)  { animation-delay: -.65s }
.sb-dive__wave rect:nth-child(9)  { animation-delay: -.30s }
.sb-dive__wave rect:nth-child(10) { animation-delay: -.80s }
.sb-dive__wave rect:nth-child(11) { animation-delay: -.45s }
.sb-dive__wave rect:nth-child(12) { animation-delay: -.95s }
@keyframes sbDiveWave {
  from { height: 5px;  y: 172px; }
  to   { height: 30px; y: 160px; }
}

/* ------------------------------------------------- the seven checks */
.sb-dive__checks {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.sb-dive__chk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: var(--sb-r-pill);
  font-size: .6875rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
  transition: color var(--sb-fast) var(--sb-ease),
              background var(--sb-fast) var(--sb-ease),
              border-color var(--sb-fast) var(--sb-ease);
}
.sb-dive__chk::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .28);
  transition: background var(--sb-fast) var(--sb-ease),
              box-shadow var(--sb-fast) var(--sb-ease);
}
.sb-dive__chk.is-ok {
  color: #FFFFFF;
  background: rgba(0, 195, 137, .16);
  border-color: rgba(0, 195, 137, .42);
}
.sb-dive__chk.is-ok::before {
  background: var(--sb-green);
  box-shadow: 0 0 0 3px rgba(0, 195, 137, .20);
}

.sb-dive__tag {
  position: absolute;
  left: clamp(22px, 2.6vw, 34px);
  bottom: 20px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  border-radius: var(--sb-r-pill);
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  color: #FFFFFF;
  font-size: .75rem;
  font-weight: 700;
}
.sb-dive__tag i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sb-green);
  box-shadow: 0 0 0 0 rgba(0, 195, 137, .6);
  animation: sbDiveLive 2s ease-out infinite;
}
@keyframes sbDiveLive {
  0%   { box-shadow: 0 0 0 0 rgba(0, 195, 137, .6); }
  70%  { box-shadow: 0 0 0 8px rgba(0, 195, 137, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 195, 137, 0); }
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 980px) {
  /* Copy first, scene second — the offer has to arrive before the diagram. */
  .sb-dive { grid-template-columns: 1fr; }
  .sb-dive__art { padding-bottom: clamp(60px, 9vw, 70px); }
}

@media (max-width: 560px) {
  .sb-dive { border-radius: var(--sb-r-lg); }
  .sb-dive__copy { padding: 24px 18px; }
  .sb-dive__modes button { grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 13px 14px; }
  /* The chevron is decorative; on a phone the whole row is the tap target. */
  .sb-dive__go { display: none; }
  .sb-dive__ic { width: 38px; height: 38px; border-radius: 11px; }
  .sb-dive__cta { width: 100%; justify-content: center; }
  .sb-dive__art { padding: 22px 16px 62px; }
  .sb-dive__chk { font-size: .6875rem; padding: 6px 10px; }
  .sb-dive__tag { left: 16px; right: 16px; bottom: 16px; justify-content: center; font-size: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sb-dive__link--flow,
  .sb-dive__packet,
  .sb-dive__wave rect,
  .sb-dive__tag i { animation: none !important; }
  .sb-dive__packet { transform: translate(402px, 150px); opacity: 1; }
}

/* =============================================================================
   HOW SERVICEBIRD WORKS — THE PIPELINE  (.sb-pipe)
   -----------------------------------------------------------------------------
   Four stages, left to right. The connector between each pair fills as that
   stage completes, so the diagram builds itself rather than looping a packet
   around a map. One source of truth: data-flow-stage on .sb-flow, written by
   the clock in main.js. Nothing here needs the script to change.

   Replaces the radar map, which kept a curved offset-path in sync with three
   drawn segments by hand and read as a sci-fi console rather than a process.
============================================================================= */
.sb-flow__body { display: block; }

.sb-pipe {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 26px);
}

.sb-pipe__stage {
  position: relative;
  min-width: 0;
  text-align: center;
  padding-top: 8px;
  cursor: pointer;
  outline: none;
}
.sb-pipe__stage:focus-visible .sb-pipe__tile {
  outline: 3px solid var(--sb-sky);
  outline-offset: 4px;
}

/* ------------------------------------------------------------- connectors
   Drawn in the gap between this tile and the next, not as one rail behind
   the row — the tiles are frosted, so a continuous line reads as broken
   where it passes under them. Geometry: the tile is 84px wide, so its edge
   sits 42px from centre; start 6px clear of that and stop 6px short of the
   next tile's edge. */
.sb-pipe__link {
  position: absolute;
  top: 50px;
  left: calc(50% + 48px);
  width: calc(100% - 96px + clamp(14px, 2vw, 26px));
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .14);
  overflow: hidden;
}
.sb-pipe__link i {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--sb-sky), var(--sb-green));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .85s var(--sb-ease-out);
}
/* A stage that is done has filled its own outgoing connector. */
.sb-pipe__stage.is-done .sb-pipe__link i { transform: scaleX(1); }
/* The live stage draws its connector as it runs, so the fill leads the eye
   to the stage that is about to light. */
.sb-pipe__stage.is-live .sb-pipe__link i {
  transform: scaleX(1);
  transition-duration: 2.6s;
  transition-timing-function: linear;
}

/* ------------------------------------------------------------------ tiles */
.sb-pipe__tile {
  position: relative;
  width: 84px;
  height: 84px;
  margin: 0 auto 20px;
  border-radius: 26px;
  display: grid;
  place-items: center;
  color: #FFFFFF;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  transition: transform .5s var(--ease-spring), background .5s var(--sb-ease),
              border-color .5s var(--sb-ease), box-shadow .5s var(--sb-ease);
}
.sb-pipe__tile svg { width: 30px; height: 30px; }

.sb-pipe__stage:hover .sb-pipe__tile { transform: translateY(-4px); background: rgba(255, 255, 255, .09); }

.sb-pipe__stage.is-done .sb-pipe__tile {
  background: rgba(0, 195, 137, .16);
  border-color: rgba(0, 195, 137, .45);
}
.sb-pipe__stage.is-live .sb-pipe__tile {
  transform: translateY(-8px) scale(1.07);
  background: linear-gradient(135deg, var(--sb-blue) 0%, var(--sb-sky) 100%);
  border-color: transparent;
  box-shadow: 0 18px 44px rgba(22, 87, 240, .45);
}

/* The halo only exists on the live stage. As a pseudo-element on .is-live it
   would restart on every repaint; as its own node it can simply fade. */
.sb-pipe__halo {
  position: absolute;
  inset: -6px;
  border-radius: 32px;
  border: 1.5px solid rgba(76, 134, 255, .55);
  opacity: 0;
  pointer-events: none;
}
.sb-pipe__stage.is-live .sb-pipe__halo { animation: sbPipeHalo 1.8s var(--sb-ease-out) infinite; }
@keyframes sbPipeHalo {
  0%   { transform: scale(.92); opacity: .9; }
  100% { transform: scale(1.24); opacity: 0; }
}

/* Stage number badge. Flips to ink on the live tile so it reads against the
   blue rather than disappearing into it. */
.sb-pipe__no {
  position: absolute;
  top: -8px;
  left: -8px;
  z-index: 2;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 800;
  line-height: 1;
  background: #FFFFFF;
  color: var(--sb-ink);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
  transition: background .45s var(--sb-ease), color .45s var(--sb-ease);
}
.sb-pipe__stage.is-live .sb-pipe__no { background: var(--sb-ink); color: #FFFFFF; }
.sb-pipe__stage.is-done .sb-pipe__no { background: var(--sb-green); color: #04351F; }

/* ------------------------------------------------------------------- copy */
.sb-pipe__t {
  display: block;
  font-family: var(--font-heading);
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: #FFFFFF;
  margin-bottom: 7px;
}
.sb-pipe__b {
  display: block;
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--sb-on-navy-mut);
  max-width: 30ch;
  margin: 0 auto;
  transition: color .45s var(--sb-ease);
}
.sb-pipe__stage.is-live .sb-pipe__b { color: var(--sb-on-navy); }

/* --------------------------------------------------------------- readout */
.sb-pipe__readout {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: clamp(30px, 4vw, 46px);
  padding: 16px 20px;
  border-radius: var(--sb-r-lg);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .11);
}
.sb-pipe__readout-n {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--sb-sky);
  letter-spacing: -.02em;
}
.sb-pipe__readout-t {
  display: block;
  font-family: var(--font-heading);
  font-size: .9375rem;
  font-weight: 800;
  letter-spacing: .05em;
  color: #FFFFFF;
}
.sb-pipe__readout-b {
  display: block;
  margin-top: 2px;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--sb-on-navy-mut);
}
.sb-pipe__readout-live {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--sb-r-pill);
  background: rgba(0, 195, 137, .14);
  border: 1px solid rgba(0, 195, 137, .32);
  font-family: var(--font-mono);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7DF0C6;
}
.sb-pipe__readout-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sb-green);
  animation: sbPipePip 1.6s var(--sb-ease) infinite;
}
@keyframes sbPipePip {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%      { opacity: .4; transform: scale(.7); }
}

/* --------------------------------------------------------------- ≤ 900px */
@media (max-width: 900px) {
  /* Two across keeps the copy readable; the connector only spans within a
     row, so it is dropped on the second column of each pair. */
  .sb-pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
  .sb-pipe__stage:nth-child(2n) .sb-pipe__link { display: none; }
}

/* --------------------------------------------------------------- ≤ 560px */
@media (max-width: 560px) {
  /* On a phone the pipeline turns vertical: tile on the left, copy on the
     right, connector running down the gutter between tiles. This is the only
     arrangement where four stages and their descriptions all stay legible. */
  .sb-pipe { grid-template-columns: 1fr; gap: 0; }
  /* The 900px rule drops the connector on every second stage because the row
     ends there. In one column there is no row end, so it comes back. */
  .sb-pipe__stage:nth-child(2n) .sb-pipe__link { display: block; }
  .sb-pipe__stage {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    text-align: left;
    padding: 0 0 26px;
  }
  .sb-pipe__stage--end { padding-bottom: 0; }
  .sb-pipe__tile { width: 56px; height: 56px; border-radius: 18px; margin: 0; }
  .sb-pipe__tile svg { width: 24px; height: 24px; }
  .sb-pipe__stage.is-live .sb-pipe__tile { transform: scale(1.06); }
  .sb-pipe__halo { inset: -5px; border-radius: 22px; }
  .sb-pipe__no { width: 22px; height: 22px; font-size: .625rem; top: -7px; left: -7px; }
  .sb-pipe__link {
    top: 62px;
    left: 27px;
    width: 2px;
    height: calc(100% - 62px);
  }
  .sb-pipe__link i { transform: scaleY(0); transform-origin: 50% 0; }
  .sb-pipe__stage.is-done .sb-pipe__link i,
  .sb-pipe__stage.is-live .sb-pipe__link i { transform: scaleY(1); }
  .sb-pipe__t { margin-top: 4px; }
  .sb-pipe__b { max-width: none; }
  .sb-pipe__readout { flex-wrap: wrap; row-gap: 12px; padding: 14px 16px; }
  .sb-pipe__readout-live { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sb-pipe__halo { animation: none !important; opacity: 0 !important; }
  .sb-pipe__readout-live i { animation: none !important; }
  .sb-pipe__link i { transition: none !important; }
}

/* =============================================================================
   WHO WE ARE — THE SEVEN EMPHASES  (.sb-emph)
   -----------------------------------------------------------------------------
   A plain balanced grid. auto-fit with a 260px floor gives four across on a
   wide screen, three on a laptop, two on a tablet and one on a phone, without
   a single breakpoint. Card seven spans the remainder so the last row is never
   a lone card stranded on the left.
============================================================================= */
.sb-emph {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: clamp(16px, 1.8vw, 22px);
  margin-bottom: clamp(44px, 6vw, 76px);
}
.sb-emph__card {
  position: relative;
  min-width: 0;
  padding: clamp(22px, 2.4vw, 28px);
  border-radius: var(--sb-r-lg);
  background: var(--sb-white);
  border: 1px solid var(--sb-line);
  box-shadow: var(--sb-shadow-1);
  overflow: hidden;
  isolation: isolate;
  transition: transform .45s var(--sb-ease-out), box-shadow .45s var(--sb-ease),
              border-color .45s var(--sb-ease);
}
/* The wash rises from the bottom on hover, behind the content — the same
   move the services grid uses, so the two read as one system. */
.sb-emph__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(150deg, var(--sb-blue-050) 0%, #F3F8FF 100%);
  transform: translateY(101%);
  transition: transform .55s var(--sb-ease-out);
}
.sb-emph__card:hover {
  transform: translateY(-8px);
  box-shadow: var(--sb-shadow-3);
  border-color: rgba(22, 87, 240, .28);
}
.sb-emph__card:hover::before { transform: translateY(0); }
.sb-emph__card--wide { grid-column: span 2; }

.sb-emph__no {
  position: absolute;
  top: 18px;
  right: 20px;
  font-family: var(--font-mono);
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.05em;
  color: var(--sb-paper-2);
  transition: color .45s var(--sb-ease);
}
.sb-emph__card:hover .sb-emph__no { color: rgba(22, 87, 240, .22); }

.sb-emph__ic {
  width: 50px;
  height: 50px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: var(--sb-paper);
  color: var(--sb-blue);
  margin-bottom: 18px;
  transition: transform .55s var(--ease-spring), background .45s var(--sb-ease),
              color .45s var(--sb-ease);
}
.sb-emph__ic svg { width: 22px; height: 22px; }
.sb-emph__card:hover .sb-emph__ic {
  transform: rotate(-8deg) scale(1.08);
  background: var(--sb-blue);
  color: #FFFFFF;
}

.sb-emph__card h3 {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--sb-ink);
  margin: 0 0 7px;
}
.sb-emph__card p {
  font-size: .875rem;
  line-height: 1.6;
  color: var(--sb-muted);
  margin: 0 0 14px;
}
.sb-emph__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sb-emph__tags span {
  font-size: .6875rem;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: var(--sb-r-pill);
  background: var(--sb-paper);
  border: 1px solid var(--sb-line);
  color: var(--sb-muted);
}

/* =============================================================================
   WHO WE ARE — THE WORKFLOW  (.sb-work)
   -----------------------------------------------------------------------------
   Demand on the left, supply on the right, the platform between them. One
   clock writes data-work-stage on the root; the lanes, the feeds and the
   compliance checks all derive from it, so no two halves can disagree.

   Replaces a browser-chrome mock with a fake URL and four bars on a timer.
============================================================================= */
.sb-work {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(26px, 3.4vw, 46px);
  border-radius: var(--sb-r-xl);
  background: linear-gradient(158deg, var(--sb-ink) 0%, var(--sb-navy) 55%, #061029 100%);
  color: var(--sb-on-navy);
}
.sb-work__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(62% 52% at 8% 4%,   rgba(22, 87, 240, .38), transparent 62%),
    radial-gradient(58% 48% at 94% 96%, rgba(0, 195, 137, .24), transparent 64%);
}

.sb-work__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.sb-work__kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sb-on-navy-mut);
  margin-bottom: 8px;
}
.sb-work__h {
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: #FFFFFF;
  margin: 0;
}
.sb-work__live {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-radius: var(--sb-r-pill);
  background: rgba(0, 195, 137, .13);
  border: 1px solid rgba(0, 195, 137, .34);
  font-size: .8125rem;
  font-weight: 700;
  color: #7DF0C6;
}
.sb-work__live i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sb-green);
  animation: sbWorkPip 1.7s var(--sb-ease) infinite;
}
@keyframes sbWorkPip {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%      { opacity: .35; transform: scale(.68); }
}

/* ------------------------------------------------------------------ layout */
.sb-work__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(180px, 20vw, 236px) minmax(0, 1fr);
  gap: clamp(16px, 2.2vw, 30px);
  align-items: center;
}

.sb-work__lane { min-width: 0; }
.sb-work__lane-h {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--sb-on-navy-mut);
}
.sb-work__lane-h svg { width: 16px; height: 16px; }
.sb-work__lane--supply { text-align: right; }
.sb-work__lane--supply .sb-work__lane-h { flex-direction: row-reverse; }

.sb-work__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  counter-reset: wk;
}
.sb-work__steps li {
  position: relative;
  padding: 13px 16px;
  border-radius: var(--sb-r);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .11);
  transition: background .45s var(--sb-ease), border-color .45s var(--sb-ease),
              transform .45s var(--sb-ease-out);
}
.sb-work__steps b {
  display: block;
  font-size: .875rem;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -.01em;
}
.sb-work__steps small {
  display: block;
  margin-top: 3px;
  font-size: .75rem;
  line-height: 1.5;
  color: var(--sb-on-navy-mut);
}
/* The step whose data-work-node matches the current stage lights. Written as
   attribute selectors so the stylesheet owns the mapping, not the script. */
.sb-work[data-work-stage="0"] .sb-work__steps li[data-work-node="0"],
.sb-work[data-work-stage="1"] .sb-work__steps li[data-work-node="1"],
.sb-work[data-work-stage="2"] .sb-work__steps li[data-work-node="2"],
.sb-work[data-work-stage="3"] .sb-work__steps li[data-work-node="3"] {
  background: rgba(76, 134, 255, .16);
  border-color: rgba(76, 134, 255, .48);
  transform: translateX(6px);
}
.sb-work[data-work-stage="0"] .sb-work__lane--supply li[data-work-node="0"],
.sb-work[data-work-stage="1"] .sb-work__lane--supply li[data-work-node="1"],
.sb-work[data-work-stage="2"] .sb-work__lane--supply li[data-work-node="2"],
.sb-work[data-work-stage="3"] .sb-work__lane--supply li[data-work-node="3"] {
  transform: translateX(-6px);
}

/* -------------------------------------------------------------- the core */
.sb-work__core {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.sb-work__disc {
  position: relative;
  width: clamp(140px, 16vw, 176px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 2px;
  background: radial-gradient(circle at 50% 34%, rgba(76, 134, 255, .34), rgba(7, 22, 52, .5) 68%);
  border: 1px solid rgba(76, 134, 255, .42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 20px 50px -18px rgba(22, 87, 240, .7);
}
.sb-work__disc svg { width: 26px; height: 26px; color: #FFFFFF; margin: 0 auto 6px; }
.sb-work__disc b {
  font-family: var(--font-heading);
  font-size: .9375rem;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -.01em;
}
.sb-work__disc small { font-size: .6875rem; color: var(--sb-on-navy-mut); }

.sb-work__ring {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(76, 134, 255, .4);
  opacity: 0;
  animation: sbWorkRing 3.2s var(--sb-ease-out) infinite;
}
.sb-work__ring:nth-of-type(2) { animation-delay: 1.6s; }
@keyframes sbWorkRing {
  0%   { transform: scale(.86); opacity: .75; }
  100% { transform: scale(1.26); opacity: 0; }
}

/* Feed lines. Both lanes push into the core; the core pushes the delivered
   service back out to the demand side. They are drawn as thin rails with a
   travelling highlight rather than SVG paths, so they reflow with the grid. */
.sb-work__feed {
  position: absolute;
  top: 50%;
  height: 2px;
  width: clamp(16px, 2.2vw, 30px);
  background: rgba(255, 255, 255, .14);
  overflow: hidden;
}
.sb-work__feed--in  { right: 100%; }
.sb-work__feed--out { left: 100%; }
.sb-work__feed i {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--sb-sky), transparent);
  transform: translateX(-100%);
  animation: sbWorkFeed 2.4s linear infinite;
}
.sb-work__feed--out i { background: linear-gradient(90deg, transparent, var(--sb-green), transparent); animation-delay: 1.2s; }
@keyframes sbWorkFeed { to { transform: translateX(100%); } }

.sb-work__checks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}
.sb-work__checks span {
  font-size: .625rem;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: var(--sb-r-pill);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .5);
  transition: background .4s var(--sb-ease), border-color .4s var(--sb-ease), color .4s var(--sb-ease);
}
.sb-work__checks span.is-ok {
  background: rgba(0, 195, 137, .16);
  border-color: rgba(0, 195, 137, .42);
  color: #FFFFFF;
}

/* --------------------------------------------------------------- ≤ 900px */
@media (max-width: 900px) {
  /* The core moves to the top and the two lanes sit side by side beneath it,
     which keeps "two sides, one platform" legible without a 3-across squeeze. */
  .sb-work__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .sb-work__core { grid-column: 1 / -1; order: -1; }
  .sb-work__feed { display: none; }
  .sb-work__lane--supply { text-align: left; }
  .sb-work__lane--supply .sb-work__lane-h { flex-direction: row; }
  .sb-work[data-work-stage] .sb-work__lane--supply li { transform: none; }
  .sb-work[data-work-stage="0"] .sb-work__lane--supply li[data-work-node="0"],
  .sb-work[data-work-stage="1"] .sb-work__lane--supply li[data-work-node="1"],
  .sb-work[data-work-stage="2"] .sb-work__lane--supply li[data-work-node="2"],
  .sb-work[data-work-stage="3"] .sb-work__lane--supply li[data-work-node="3"] { transform: translateX(6px); }
}

/* --------------------------------------------------------------- ≤ 620px */
@media (max-width: 620px) {
  .sb-work { padding: 22px 16px; border-radius: var(--sb-r-lg); }
  .sb-work__grid { grid-template-columns: 1fr; }
  .sb-work__head { flex-direction: column; align-items: flex-start; }
  .sb-work__disc { width: 132px; }
  .sb-emph__card--wide { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .sb-work__ring,
  .sb-work__feed i,
  .sb-work__live i { animation: none !important; opacity: 0; }
  .sb-work__live i { opacity: 1; }
  .sb-work__checks span { background: rgba(0,195,137,.16); border-color: rgba(0,195,137,.42); color: #fff; }
}

/* =============================================================================
   SECTORS  (.sb-sectors)
   -----------------------------------------------------------------------------
   Was a centred flex-wrap of pills, so on a phone the eight sectors came out
   at 124, 221, 169, 128, 138, 143, 294 and 178px — a ragged stack with a
   different indent on every line. A grid gives equal cells at every width.
============================================================================= */
.sb-sectors {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 14px);
  margin-bottom: clamp(44px, 6vw, 64px);
}
.sb-sector {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 15px 18px;
  border-radius: var(--sb-r);
  background: var(--sb-white);
  border: 1px solid var(--sb-line);
  box-shadow: var(--sb-shadow-1);
  overflow: hidden;
  isolation: isolate;
  transition: transform .42s var(--sb-ease-out), box-shadow .42s var(--sb-ease),
              border-color .42s var(--sb-ease), color .42s var(--sb-ease);
}
.sb-sector::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, var(--sb-blue) 0%, var(--sb-sky) 100%);
  transform: translateY(101%);
  transition: transform .5s var(--sb-ease-out);
}
.sb-sector:hover {
  transform: translateY(-5px);
  box-shadow: var(--sb-shadow-2);
  border-color: transparent;
  color: #FFFFFF;
}
.sb-sector:hover::before { transform: translateY(0); }
.sb-sector svg {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--sb-blue);
  transition: color .42s var(--sb-ease), transform .5s var(--ease-spring);
}
.sb-sector:hover svg { color: #FFFFFF; transform: rotate(-8deg) scale(1.1); }
.sb-sector span {
  min-width: 0;
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.3;
}

@media (max-width: 900px) { .sb-sectors { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .sb-sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sb-sector { padding: 13px 14px; gap: 10px; }
  .sb-sector span { font-size: .8125rem; }
  .sb-sector svg { width: 19px; height: 19px; }
}

/* =============================================================================
   BENEFIT ROWS — tighter, and they respond
============================================================================= */
.benefit-row-card {
  transition: transform .38s var(--sb-ease-out), box-shadow .38s var(--sb-ease),
              border-color .38s var(--sb-ease);
}
.benefit-row-card:hover {
  transform: translateX(7px);
  box-shadow: var(--sb-shadow-1);
  border-color: rgba(22, 87, 240, .28);
}
@media (max-width: 620px) {
  .benefit-row-card { padding: 13px 14px; }
  .benefit-row-card span { font-size: .875rem; line-height: 1.5; }
}

/* =============================================================================
   THE DEVICE FRAME  (.sb-phone)
   -----------------------------------------------------------------------------
   The dashboard asset is a 740 x 1600 portrait screenshot. Framed as a handset
   it reads as a product; as a bare bordered rectangle it read as a crop.
   The frame is pure CSS, so it costs nothing in image weight and stays sharp.
============================================================================= */
.sb-phone {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(18px, 3vw, 34px) 0;
  isolation: isolate;
}
.sb-phone__glow {
  position: absolute;
  z-index: -1;
  width: min(112%, 460px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(22, 87, 240, .20) 0%, rgba(0, 195, 137, .10) 46%, transparent 70%);
  filter: blur(18px);
}

.sb-phone__device {
  position: relative;
  width: min(100%, 288px);
  aspect-ratio: 740 / 1600;
  padding: 11px;
  border-radius: 44px;
  background: linear-gradient(160deg, #2B3550 0%, #0E1526 46%, #232C42 100%);
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, .10) inset,
    0 30px 70px -20px rgba(7, 22, 52, .55),
    0 8px 20px -8px rgba(7, 22, 52, .35);
  transition: transform .6s var(--sb-ease-out);
}
.sb-phone:hover .sb-phone__device { transform: translateY(-8px) rotate(-1.2deg); }

/* The pill cut-out. Sits above the screen, not inside it, so no image bleed. */
.sb-phone__island {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: 33%;
  height: 20px;
  border-radius: var(--sb-r-pill);
  background: #060B16;
}

.sb-phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 34px;
  overflow: hidden;
  background: var(--sb-ink);
}
.sb-phone__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
/* A slow diagonal sheen across the glass. Decorative only. */
.sb-phone__sheen {
  position: absolute;
  inset: -40% -60%;
  background: linear-gradient(74deg, transparent 42%, rgba(255, 255, 255, .17) 50%, transparent 58%);
  transform: translateX(-60%);
  animation: sbPhoneSheen 7s var(--sb-ease) infinite;
  pointer-events: none;
}
@keyframes sbPhoneSheen {
  0%, 68%  { transform: translateX(-60%); }
  100%     { transform: translateX(60%); }
}

/* Floating proof chips. They ride in on entry and hold. */
.sb-phone__chip {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: var(--sb-r-pill);
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid var(--sb-line);
  box-shadow: var(--sb-shadow-2);
  font-size: .75rem;
  font-weight: 700;
  color: var(--sb-ink);
  white-space: nowrap;
}
.sb-phone__chip svg { width: 15px; height: 15px; color: var(--sb-blue); }
.sb-phone__chip--a { top: 12%;  left: -6%;  animation: sbChipFloat 5.4s var(--sb-ease) infinite; }
.sb-phone__chip--b { top: 45%;  right: -4%; animation: sbChipFloat 5.4s var(--sb-ease) infinite -1.8s; }
.sb-phone__chip--c { bottom: 14%; left: -2%; animation: sbChipFloat 5.4s var(--sb-ease) infinite -3.6s; }
.sb-phone__chip--b svg { color: var(--sb-amber); }
.sb-phone__chip--c svg { color: var(--sb-green); }
@keyframes sbChipFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

@media (max-width: 620px) {
  .sb-phone__device { width: min(100%, 236px); border-radius: 38px; padding: 9px; }
  .sb-phone__screen { border-radius: 30px; }
  .sb-phone__island { height: 17px; top: 17px; }
  .sb-phone__chip { font-size: .6875rem; padding: 7px 11px; }
  /* Two chips on a phone; three crowds the frame. */
  .sb-phone__chip--c { display: none; }
  .sb-phone__chip--a { left: -2%; }
  .sb-phone__chip--b { right: -1%; }
}

@media (prefers-reduced-motion: reduce) {
  .sb-phone__sheen,
  .sb-phone__chip { animation: none !important; }
}

/* =============================================================================
   PROVIDER ONBOARDING STEPPER  (.sb-onb)
   -----------------------------------------------------------------------------
   Three rows of icon-plus-paragraph became a progress interface: a track that
   fills, a numbered state per step, and per-step detail tags. One clock writes
   data-onb-step; every visual state below derives from it or from .is-* classes
   the script sets alongside it.
============================================================================= */
.sb-onb {
  position: relative;
  padding: clamp(24px, 3vw, 34px);
  border-radius: var(--sb-r-xl);
  background: var(--sb-white);
  border: 1px solid var(--sb-line);
  box-shadow: var(--sb-shadow-2);
}
.sb-onb__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.sb-onb__kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sb-blue);
  margin-bottom: 7px;
}
.sb-onb__h {
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--sb-ink);
  margin: 0;
}
.sb-onb__pct {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: .8125rem;
  font-weight: 700;
  color: var(--sb-muted);
}
.sb-onb__pct b {
  font-size: 1.5rem;
  color: var(--sb-blue);
  letter-spacing: -.03em;
}

.sb-onb__track {
  height: 6px;
  border-radius: 3px;
  background: var(--sb-paper-2);
  overflow: hidden;
  margin-bottom: clamp(20px, 2.4vw, 26px);
}
.sb-onb__track i {
  display: block;
  height: 100%;
  width: 33.33%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--sb-blue), var(--sb-green));
  transition: width .8s var(--sb-ease-out);
}

.sb-onb__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }

.sb-onb__step {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 16px;
  padding: 0 0 20px;
  cursor: pointer;
  outline: none;
}
.sb-onb__step:last-child { padding-bottom: 0; }
/* The spine between dots. Drawn per step so it stops at the last one. */
.sb-onb__step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 40px;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: var(--sb-line);
}
.sb-onb__step.is-done:not(:last-child)::before { background: var(--sb-green); }

.sb-onb__dot {
  position: relative;
  z-index: 1;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--sb-white);
  border: 2px solid var(--sb-line-2);
  color: var(--sb-muted);
  font-family: var(--font-mono);
  font-size: .8125rem;
  font-weight: 800;
  transition: background .4s var(--sb-ease), border-color .4s var(--sb-ease),
              color .4s var(--sb-ease), transform .45s var(--ease-spring);
}
.sb-onb__n, .sb-onb__tick {
  grid-area: 1 / 1;
  transition: opacity .3s var(--sb-ease), transform .3s var(--sb-ease);
}
.sb-onb__tick { width: 16px; height: 16px; opacity: 0; transform: scale(.5); }
.sb-onb__step.is-live .sb-onb__dot {
  background: var(--sb-blue);
  border-color: var(--sb-blue);
  color: #FFFFFF;
  transform: scale(1.08);
  box-shadow: 0 0 0 5px rgba(22, 87, 240, .14);
}
.sb-onb__step.is-done .sb-onb__dot {
  background: var(--sb-green);
  border-color: var(--sb-green);
  color: #04351F;
}
.sb-onb__step.is-done .sb-onb__n   { opacity: 0; transform: scale(.5); }
.sb-onb__step.is-done .sb-onb__tick { opacity: 1; transform: scale(1); }

.sb-onb__body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 12px 14px;
  border-radius: var(--sb-r);
  border: 1px solid transparent;
  transition: background .4s var(--sb-ease), border-color .4s var(--sb-ease);
}
.sb-onb__step.is-live .sb-onb__body {
  background: var(--sb-blue-050);
  border-color: rgba(22, 87, 240, .22);
}
.sb-onb__step:hover .sb-onb__body { background: var(--sb-paper); }
.sb-onb__step:focus-visible .sb-onb__body { outline: 3px solid var(--sb-blue); outline-offset: 2px; }

.sb-onb__ic {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--sb-paper);
  color: var(--sb-muted);
  transition: background .4s var(--sb-ease), color .4s var(--sb-ease),
              transform .5s var(--ease-spring);
}
.sb-onb__ic svg { width: 20px; height: 20px; }
.sb-onb__step.is-live .sb-onb__ic {
  background: var(--sb-blue);
  color: #FFFFFF;
  transform: rotate(-6deg) scale(1.06);
}
.sb-onb__step.is-done .sb-onb__ic { background: var(--sb-green-050); color: #05714F; }

.sb-onb__body b {
  display: block;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--sb-ink);
  letter-spacing: -.01em;
}
.sb-onb__body small {
  display: block;
  margin-top: 4px;
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--sb-muted);
}
.sb-onb__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
  /* Detail belongs to the step being read. Collapsed elsewhere so the panel
     stays one screen tall instead of three stacked paragraphs of chips. */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .5s var(--sb-ease-out), opacity .4s var(--sb-ease), margin-top .4s var(--sb-ease);
  margin-top: 0;
}
.sb-onb__step.is-live .sb-onb__tags { max-height: 90px; opacity: 1; margin-top: 10px; }
.sb-onb__tags span {
  font-size: .6875rem;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: var(--sb-r-pill);
  background: var(--sb-white);
  border: 1px solid var(--sb-line);
  color: var(--sb-muted);
}

@media (max-width: 560px) {
  .sb-onb { padding: 20px 16px; border-radius: var(--sb-r-lg); }
  .sb-onb__head { flex-direction: column; }
  .sb-onb__step { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; }
  .sb-onb__dot { width: 32px; height: 32px; font-size: .75rem; }
  .sb-onb__step:not(:last-child)::before { left: 15px; top: 34px; }
  .sb-onb__body { grid-template-columns: 1fr; gap: 10px; padding: 11px 12px; }
  .sb-onb__ic { width: 34px; height: 34px; border-radius: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .sb-onb__tags { max-height: 90px; opacity: 1; margin-top: 10px; }
}

/* =============================================================================
   THE LOGO  (.sb-logo)
   -----------------------------------------------------------------------------
   Both variants ship in the markup and the context decides which one shows.
   Put .sb-on-dark on any dark ancestor — a navy band, the footer, a dark
   drawer — and the white mark takes over automatically. Nothing has to
   remember to swap a src, and a section that changes background later cannot
   end up with a navy logo sitting on navy.

   Source artwork is 2048 x 308, so the mark stays sharp at 2x.
============================================================================= */
.sb-logo {
  display: inline-block;
  position: relative;
  line-height: 0;
}
.sb-logo img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
}
/* Every rule below carries the `img` qualifier deliberately.
   `.sb-logo img` above is (0,1,1); a bare `.sb-logo__dark` is only (0,1,0),
   so `display:block` won the cascade and BOTH marks rendered — the white one
   stacked directly under the navy one in the navbar, reading as a ghost.
   Qualifying with img makes these (0,2,1) and the swap deterministic. */
.sb-logo img.sb-logo__dark { display: none; }

/* Two ways to ask for the white mark, and they need different selectors:
     .sb-on-dark    sits on an ANCESTOR (a navy section, the footer wrapper)
     .sb-logo--dark sits on the LOGO ITSELF (footer brand mark)
   Writing only the descendant form silently failed for the second case. */
.sb-on-dark .sb-logo img.sb-logo__light,
.sb-logo--dark img.sb-logo__light { display: none; }

.sb-on-dark .sb-logo img.sb-logo__dark,
.sb-logo--dark img.sb-logo__dark { display: block; }

/* The navbar is glass over whatever is behind it, but it always resolves to a
   light surface, so it keeps the navy mark in both scrolled and top states. */
.navbar .sb-logo { height: 38px; }
.navbar .sb-logo img { height: 38px; }

.site-footer .sb-logo,
.site-footer .sb-logo img { height: 38px; }

.mobile-nav-drawer .sb-logo,
.mobile-nav-drawer .sb-logo img { height: 36px; }

@media (max-width: 480px) {
  .navbar .sb-logo,
  .navbar .sb-logo img { height: 32px; }
}

/* =============================================================================
   SERVICE PAGES  (.svc-*)
   -----------------------------------------------------------------------------
   One component set, eight pages. Built on the deep-dive pattern the Air Spider
   theme settled on: a dark page hero, a two-column intro with a live scene, a
   scope grid, an animated delivery pipeline, a sector rail and a closing CTA.

   Every page passes its own copy in; nothing below is service-specific except
   the accent hook (--svc-accent), which each page sets once on .svc-page.
============================================================================= */
.svc-page {
  --svc-accent: #1657F0;
  --svc-accent-2: #4C86FF;
  --svc-soft: #EAF0FF;
}
.svc-page--amber  { --svc-accent: #C2740A; --svc-accent-2: #F5A524; --svc-soft: #FEF4E1; }
.svc-page--green  { --svc-accent: #058A62; --svc-accent-2: #00C389; --svc-soft: #E5FAF3; }
.svc-page--violet { --svc-accent: #6D28D9; --svc-accent-2: #A78BFA; --svc-soft: #F1EBFF; }
.svc-page--rose   { --svc-accent: #BE123C; --svc-accent-2: #FB7185; --svc-soft: #FFE9EE; }
.svc-page--teal   { --svc-accent: #0E7490; --svc-accent-2: #38BDF8; --svc-soft: #E4F6FD; }

/* ------------------------------------------------------------------- hero */
.svc-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(158deg, var(--sb-ink) 0%, var(--sb-navy) 54%, #061029 100%);
  color: var(--sb-on-navy);
  padding-top: clamp(120px, 13vw, 168px);
  padding-bottom: clamp(56px, 7vw, 92px);
}
.svc-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(62% 54% at 10% 6%,  color-mix(in srgb, var(--svc-accent-2) 42%, transparent), transparent 62%),
    radial-gradient(56% 48% at 92% 94%, rgba(0, 195, 137, .24), transparent 64%);
}
/* A quiet moving grid. Transform only, so it stays on the compositor. */
.svc-hero__grid {
  position: absolute;
  inset: -40% -10%;
  z-index: -1;
  opacity: .5;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 62px 62px;
  animation: svcGrid 26s linear infinite;
}
@keyframes svcGrid { to { transform: translate3d(62px, 62px, 0); } }

.svc-hero__in { position: relative; z-index: 1; max-width: 820px; }
.svc-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: .8125rem;
  color: var(--sb-on-navy-mut);
  margin-bottom: 18px;
}
.svc-crumb a { transition: color .25s var(--sb-ease); }
.svc-crumb a:hover { color: #FFFFFF; }
.svc-crumb span[aria-current] { color: #FFFFFF; font-weight: 600; }

.svc-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border-radius: var(--sb-r-pill);
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.svc-badge--live {
  background: rgba(0, 195, 137, .14);
  border: 1px solid rgba(0, 195, 137, .38);
  color: #7DF0C6;
}
.svc-badge--soon {
  background: rgba(245, 165, 36, .13);
  border: 1px solid rgba(245, 165, 36, .36);
  color: #FBCB7A;
}
.svc-badge i {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
  animation: svcPip 1.7s var(--sb-ease) infinite;
}
@keyframes svcPip { 0%,100% { opacity:1; transform:scale(1);} 50% { opacity:.35; transform:scale(.68);} }

.svc-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.035em;
  color: #FFFFFF;
  margin: 0 0 18px;
}
.svc-hero__lede {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.7;
  color: var(--sb-on-navy-mut);
  max-width: 62ch;
  margin: 0 0 28px;
}
.svc-hero__acts { display: flex; flex-wrap: wrap; gap: 14px; }
.svc-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: var(--sb-r-pill);
  font-family: var(--font-heading);
  font-size: .9375rem;
  font-weight: 700;
  transition: transform .3s var(--sb-ease-out), box-shadow .3s var(--sb-ease),
              background .3s var(--sb-ease), border-color .3s var(--sb-ease);
}
.svc-btn svg { width: 18px; height: 18px; transition: transform .3s var(--sb-ease-out); }
.svc-btn--solid {
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--svc-accent) 0%, var(--svc-accent-2) 100%);
  box-shadow: 0 14px 34px -10px color-mix(in srgb, var(--svc-accent) 70%, transparent);
}
.svc-btn--solid:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -12px color-mix(in srgb, var(--svc-accent) 80%, transparent); }
.svc-btn--ghost {
  color: #FFFFFF;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .2);
}
.svc-btn--ghost:hover { background: rgba(255, 255, 255, .14); transform: translateY(-3px); }
.svc-btn:hover svg { transform: translateX(4px); }

/* Hero stat strip */
.svc-hero__facts {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-top: clamp(34px, 4.5vw, 52px);
}
.svc-fact {
  padding: 18px 20px;
  border-radius: var(--sb-r);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .11);
  transition: transform .4s var(--sb-ease-out), background .4s var(--sb-ease);
}
.svc-fact:hover { transform: translateY(-5px); background: rgba(255, 255, 255, .09); }
.svc-fact b {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 3px;
  letter-spacing: -.01em;
}
.svc-fact span { font-size: .8125rem; line-height: 1.5; color: var(--sb-on-navy-mut); }

/* ------------------------------------------------------- section furniture */
.svc-band { padding: clamp(56px, 7.5vw, 104px) 0; }
.svc-band--soft { background: var(--sb-paper); }
.svc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sb-muted);
  margin-bottom: 14px;
}
.svc-eyebrow .bar {
  width: 26px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--svc-accent), var(--svc-accent-2));
}
.svc-h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.032em;
  line-height: 1.14;
  color: var(--sb-ink);
  margin: 0 0 16px;
}
.svc-lede { font-size: 1.02rem; line-height: 1.7; color: var(--sb-muted); max-width: 60ch; margin: 0; }

/* ------------------------------------------------- intro: copy + live scene */
.svc-intro { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.svc-intro > * { min-width: 0; }

.svc-points { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 11px; }
.svc-points li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 15px 18px;
  border-radius: var(--sb-r);
  background: var(--sb-white);
  border: 1px solid var(--sb-line);
  transition: transform .4s var(--sb-ease-out), box-shadow .4s var(--sb-ease), border-color .4s var(--sb-ease);
}
.svc-points li:hover { transform: translateX(8px); box-shadow: var(--sb-shadow-1); border-color: color-mix(in srgb, var(--svc-accent) 32%, transparent); }
.svc-points .tick {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--svc-soft);
  color: var(--svc-accent);
}
.svc-points .tick svg { width: 13px; height: 13px; }
.svc-points b { display: block; font-size: .9375rem; font-weight: 700; color: var(--sb-ink); }
.svc-points small { display: block; margin-top: 3px; font-size: .8125rem; line-height: 1.55; color: var(--sb-muted); }

/* The scene panel. Same construction as the homepage deep-dive so the two
   read as one system; the artwork inside differs per service. */
.svc-scene {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--sb-r-xl);
  background: linear-gradient(158deg, var(--sb-ink) 0%, var(--sb-navy) 55%, #061029 100%);
  padding: clamp(24px, 3vw, 34px) clamp(20px, 2.6vw, 30px) clamp(58px, 5vw, 66px);
  box-shadow: var(--sb-shadow-3);
}
.svc-scene__glow {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(84% 62% at 50% 4%, color-mix(in srgb, var(--svc-accent-2) 40%, transparent), transparent 62%),
    radial-gradient(70% 56% at 12% 100%, rgba(0, 195, 137, .24), transparent 66%);
}
.svc-scene svg { width: 100%; height: auto; display: block; }
.svc-scene__tag {
  position: absolute;
  left: clamp(20px, 2.6vw, 30px);
  bottom: 18px;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px;
  border-radius: var(--sb-r-pill);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: #FFFFFF; font-size: .75rem; font-weight: 700;
}
.svc-scene__tag i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--sb-green);
  animation: svcPip 2s var(--sb-ease) infinite;
}

/* Shared scene animation utilities — one vocabulary across all eight pages. */
.sv-orbit  { animation: svOrbit 9s linear infinite; transform-origin: center; transform-box: fill-box; }
.sv-drift  { animation: svDrift 5.6s var(--sb-ease) infinite; }
.sv-rise   { animation: svRise 4.2s var(--sb-ease) infinite; }
.sv-pulse  { animation: svPulse 2.8s var(--sb-ease) infinite; }
.sv-dash   { stroke-dasharray: 5 8; animation: svDash 1.5s linear infinite; }
.sv-draw   { stroke-dasharray: 1; stroke-dashoffset: 1; animation: svDraw 3.4s var(--sb-ease-out) infinite; }
.sv-blink  { animation: svBlink 3s var(--sb-ease) infinite; }
@keyframes svOrbit { to { transform: rotate(360deg); } }
@keyframes svDrift { 0%,100% { transform: translateX(0); } 50% { transform: translateX(13px); } }
@keyframes svRise  { 0%,100% { transform: translateY(0); }  50% { transform: translateY(-11px); } }
@keyframes svPulse { 0%,100% { transform: scale(1); opacity:.9; } 50% { transform: scale(1.1); opacity:1; } }
@keyframes svDash  { to { stroke-dashoffset: -26; } }
@keyframes svDraw  { 0% { stroke-dashoffset: 1; } 60%,100% { stroke-dashoffset: 0; } }
@keyframes svBlink { 0%,100% { opacity: .25; } 50% { opacity: 1; } }

/* ---------------------------------------------------------------- scope grid */
.svc-scope { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: clamp(16px, 1.8vw, 22px); margin-top: clamp(32px, 4vw, 46px); }
.svc-card {
  position: relative;
  min-width: 0;
  padding: clamp(22px, 2.4vw, 28px);
  border-radius: var(--sb-r-lg);
  background: var(--sb-white);
  border: 1px solid var(--sb-line);
  box-shadow: var(--sb-shadow-1);
  overflow: hidden;
  isolation: isolate;
  transition: transform .45s var(--sb-ease-out), box-shadow .45s var(--sb-ease), border-color .45s var(--sb-ease);
}
.svc-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(150deg, var(--svc-soft) 0%, #FFFFFF 100%);
  transform: translateY(101%);
  transition: transform .55s var(--sb-ease-out);
}
.svc-card:hover { transform: translateY(-8px); box-shadow: var(--sb-shadow-3); border-color: color-mix(in srgb, var(--svc-accent) 30%, transparent); }
.svc-card:hover::before { transform: translateY(0); }
.svc-card__no {
  position: absolute; top: 18px; right: 20px;
  font-family: var(--font-mono); font-size: 2rem; font-weight: 800; line-height: 1;
  letter-spacing: -.05em; color: var(--sb-paper-2);
  transition: color .45s var(--sb-ease);
}
.svc-card:hover .svc-card__no { color: color-mix(in srgb, var(--svc-accent) 22%, transparent); }
.svc-card__ic {
  width: 50px; height: 50px; border-radius: 15px;
  display: grid; place-items: center;
  background: var(--sb-paper); color: var(--svc-accent);
  margin-bottom: 18px;
  transition: transform .55s var(--ease-spring), background .45s var(--sb-ease), color .45s var(--sb-ease);
}
.svc-card__ic svg { width: 22px; height: 22px; }
.svc-card:hover .svc-card__ic { transform: rotate(-8deg) scale(1.08); background: var(--svc-accent); color: #FFFFFF; }
.svc-card h3 { font-family: var(--font-heading); font-size: 1.0625rem; font-weight: 800; letter-spacing: -.015em; color: var(--sb-ink); margin: 0 0 7px; }
.svc-card p { font-size: .875rem; line-height: 1.6; color: var(--sb-muted); margin: 0; }

/* ------------------------------------------------------------ the pipeline */
.svc-flow { position: relative; overflow: hidden; background: var(--sb-navy); color: var(--sb-on-navy); padding: clamp(56px, 7.5vw, 104px) 0; }
.svc-flow__bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(58% 50% at 14% 10%, color-mix(in srgb, var(--svc-accent-2) 34%, transparent), transparent 62%),
    radial-gradient(54% 46% at 88% 88%, rgba(0, 195, 137, .22), transparent 64%);
}
.svc-flow > .container { position: relative; z-index: 1; }
.svc-flow .svc-h2 { color: #FFFFFF; }
.svc-flow .svc-lede { color: var(--sb-on-navy-mut); }
.svc-flow .svc-eyebrow { color: var(--sb-on-navy-mut); }

.svc-steps { list-style: none; margin: clamp(34px, 4.5vw, 52px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); }
.svc-step { position: relative; min-width: 0; text-align: center; }
.svc-step__link {
  position: absolute; top: 40px; left: calc(50% + 40px);
  width: calc(100% - 80px + clamp(14px, 2vw, 26px));
  height: 2px; border-radius: 2px;
  background: rgba(255, 255, 255, .14);
  overflow: hidden;
}
.svc-step__link i {
  position: absolute; inset: 0; border-radius: 2px;
  background: linear-gradient(90deg, var(--svc-accent-2), var(--sb-green));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .9s var(--sb-ease-out);
}
.svc-step.is-in .svc-step__link i { transform: scaleX(1); }
.svc-step__tile {
  position: relative;
  width: 70px; height: 70px; margin: 0 auto 18px;
  border-radius: 22px; display: grid; place-items: center;
  color: #FFFFFF;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform .5s var(--ease-spring), background .5s var(--sb-ease), border-color .5s var(--sb-ease), box-shadow .5s var(--sb-ease);
}
.svc-step__tile svg { width: 26px; height: 26px; }
.svc-step:hover .svc-step__tile,
.svc-step.is-in .svc-step__tile {
  transform: translateY(-6px);
  background: linear-gradient(135deg, var(--svc-accent) 0%, var(--svc-accent-2) 100%);
  border-color: transparent;
  box-shadow: 0 16px 40px -12px color-mix(in srgb, var(--svc-accent) 75%, transparent);
}
.svc-step__no {
  position: absolute; top: -8px; left: -8px; z-index: 2;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: .625rem; font-weight: 800; line-height: 1;
  background: #FFFFFF; color: var(--sb-ink);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
}
/* These two target the step COPY only. They must stay scoped to direct,
   class-less children: a bare `.svc-step span` also matches .svc-step__tile and
   .svc-step__no, and at 0,1,1 it outranks their own 0,1,0 rules — which forced
   display:block over the tile's display:grid and pushed the icon out of centre. */
.svc-step > b { display: block; font-family: var(--font-heading); font-size: .9375rem; font-weight: 800; letter-spacing: .05em; color: #FFFFFF; margin-bottom: 6px; }
.svc-step > span:not([class]) { display: block; font-size: .8125rem; line-height: 1.55; color: var(--sb-on-navy-mut); max-width: 28ch; margin: 0 auto; }

/* ------------------------------------------------------------- sector rail */
.svc-sectors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 14px); margin-top: clamp(30px, 4vw, 44px); }
.svc-sector {
  position: relative; display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 15px 18px; border-radius: var(--sb-r);
  background: var(--sb-white); border: 1px solid var(--sb-line);
  box-shadow: var(--sb-shadow-1); overflow: hidden; isolation: isolate;
  transition: transform .42s var(--sb-ease-out), box-shadow .42s var(--sb-ease), border-color .42s var(--sb-ease), color .42s var(--sb-ease);
}
.svc-sector::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(135deg, var(--svc-accent) 0%, var(--svc-accent-2) 100%);
  transform: translateY(101%); transition: transform .5s var(--sb-ease-out);
}
.svc-sector:hover { transform: translateY(-5px); box-shadow: var(--sb-shadow-2); border-color: transparent; color: #FFFFFF; }
.svc-sector:hover::before { transform: translateY(0); }
.svc-sector svg { flex: 0 0 auto; width: 21px; height: 21px; color: var(--svc-accent); transition: color .42s var(--sb-ease), transform .5s var(--ease-spring); }
.svc-sector:hover svg { color: #FFFFFF; transform: rotate(-8deg) scale(1.1); }
.svc-sector span { min-width: 0; font-size: .9rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }

/* ------------------------------------------------------------- compliance */
.svc-comply { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(26px, 3.4vw, 36px); }
.svc-comply span {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px; border-radius: var(--sb-r-pill);
  background: var(--sb-white); border: 1px solid var(--sb-line);
  font-size: .875rem; font-weight: 600; color: var(--sb-text);
  transition: transform .35s var(--sb-ease-out), border-color .35s var(--sb-ease), background .35s var(--sb-ease);
}
.svc-comply span::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--svc-accent-2);
}
.svc-comply span:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--svc-accent) 34%, transparent); background: var(--svc-soft); }

/* -------------------------------------------------------------------- FAQ */
.svc-faq { display: grid; gap: 12px; margin-top: clamp(30px, 4vw, 42px); max-width: 860px; }
.svc-faq details {
  border-radius: var(--sb-r); background: var(--sb-white);
  border: 1px solid var(--sb-line); overflow: hidden;
  transition: border-color .35s var(--sb-ease), box-shadow .35s var(--sb-ease);
}
.svc-faq details[open] { border-color: color-mix(in srgb, var(--svc-accent) 34%, transparent); box-shadow: var(--sb-shadow-1); }
.svc-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 17px 20px; cursor: pointer; list-style: none;
  font-size: .9375rem; font-weight: 700; color: var(--sb-ink);
}
.svc-faq summary::-webkit-details-marker { display: none; }
.svc-faq summary::after {
  content: ""; flex: 0 0 auto; width: 11px; height: 11px;
  border-right: 2.5px solid var(--sb-muted); border-bottom: 2.5px solid var(--sb-muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .35s var(--sb-ease-out), border-color .3s var(--sb-ease);
}
.svc-faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); border-color: var(--svc-accent); }
.svc-faq p { margin: 0; padding: 0 20px 19px; font-size: .9rem; line-height: 1.7; color: var(--sb-muted); }

/* -------------------------------------------------------------------- CTA */
.svc-cta {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--sb-r-xl);
  background: linear-gradient(158deg, var(--sb-ink) 0%, var(--sb-navy) 55%, #061029 100%);
  padding: clamp(32px, 5vw, 62px);
  text-align: center;
}
.svc-cta__bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 60% at 20% 10%, color-mix(in srgb, var(--svc-accent-2) 38%, transparent), transparent 62%),
    radial-gradient(56% 50% at 84% 92%, rgba(0, 195, 137, .24), transparent 64%);
}
.svc-cta h2 { font-family: var(--font-heading); font-size: clamp(1.5rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: -.032em; color: #FFFFFF; margin: 0 0 14px; }
.svc-cta p { font-size: 1rem; line-height: 1.7; color: var(--sb-on-navy-mut); max-width: 56ch; margin: 0 auto 28px; }
.svc-cta__acts { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ------------------------------------------------------------- responsive */
@media (max-width: 1024px) {
  .svc-intro { grid-template-columns: 1fr; }
  .svc-sectors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .svc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
  .svc-step:nth-child(2n) .svc-step__link { display: none; }
}
@media (max-width: 620px) {
  .svc-sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-sector { padding: 13px 14px; gap: 10px; }
  .svc-sector span { font-size: .8125rem; }
  .svc-hero__acts .svc-btn { width: 100%; justify-content: center; }
  .svc-cta__acts .svc-btn { width: 100%; justify-content: center; }
}
@media (max-width: 560px) {
  /* Vertical pipeline on a phone: tile left, copy right, rail down the gutter. */
  .svc-steps { grid-template-columns: 1fr !important; gap: 0 !important; }
  .svc-step:nth-child(2n) .svc-step__link { display: block !important; }
  .svc-step {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    column-gap: 16px !important;
    row-gap: 4px !important;
    align-items: start !important;
    text-align: left !important;
    padding-bottom: 26px !important;
    position: relative !important;
  }
  .svc-step:last-child { padding-bottom: 0 !important; }
  .svc-step__tile {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 17px !important;
    margin: 0 !important;
  }
  .svc-step__tile svg { width: 22px !important; height: 22px !important; }
  .svc-step__no { width: 21px !important; height: 21px !important; top: -7px !important; left: -7px !important; }
  .svc-step > b {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    font-size: 1rem !important;
    line-height: 1.3 !important;
    color: #FFFFFF !important;
  }
  .svc-step > span:not([class]) {
    grid-column: 2 !important;
    grid-row: 2 !important;
    max-width: none !important;
    margin: 0 !important;
    font-size: 0.85rem !important;
    line-height: 1.55 !important;
    color: var(--sb-on-navy-mut, rgba(255, 255, 255, 0.75)) !important;
  }
  .svc-step__link {
    top: 58px !important;
    left: 25px !important;
    width: 2px !important;
    height: calc(100% - 58px) !important;
    display: block !important;
  }
  .svc-step:last-child .svc-step__link { display: none !important; }
  .svc-step__link i { transform: scaleY(0); transform-origin: 50% 0; }
  .svc-step.is-in .svc-step__link i { transform: scaleY(1); }
  .svc-scene { padding: 20px 16px 58px; border-radius: var(--sb-r-lg); }
  .svc-cta { border-radius: var(--sb-r-lg); padding: 28px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-hero__grid,
  .svc-badge i,
  .svc-scene__tag i,
  .sv-orbit, .sv-drift, .sv-rise, .sv-pulse, .sv-dash, .sv-draw, .sv-blink { animation: none !important; }
  .sv-draw { stroke-dashoffset: 0 !important; }
  .svc-step__link i { transform: scaleX(1) !important; transition: none !important; }
}

/* =============================================================================
   LEGAL PAGES  (.legal-*)
   -----------------------------------------------------------------------------
   Seven policy pages share this. Long-form reading, so the measure is capped at
   72 characters, the heading rhythm is generous, and nothing moves once the
   page has settled — a policy page is for reading, not for demonstrating.
============================================================================= */
.legal-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(158deg, var(--sb-ink) 0%, var(--sb-navy) 56%, #061029 100%);
  color: var(--sb-on-navy);
  padding-top: clamp(118px, 12vw, 158px);
  padding-bottom: clamp(46px, 6vw, 74px);
}
.legal-hero__bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(58% 52% at 10% 6%, rgba(22, 87, 240, .34), transparent 62%),
    radial-gradient(52% 46% at 92% 94%, rgba(0, 195, 137, .18), transparent 64%);
}
.legal-hero__in { position: relative; z-index: 1; max-width: 800px; }
.legal-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -.035em;
  color: #FFFFFF; margin: 0 0 16px;
}
.legal-hero__lede { font-size: 1.02rem; line-height: 1.7; color: var(--sb-on-navy-mut); max-width: 62ch; margin: 0 0 22px; }
.legal-hero__meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.legal-hero__meta span {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border-radius: var(--sb-r-pill);
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16);
  font-size: .8125rem; color: var(--sb-on-navy-mut);
}
.legal-hero__meta strong { color: #FFFFFF; font-weight: 700; }

.legal-band { padding: clamp(48px, 6vw, 84px) 0 clamp(56px, 7vw, 100px); }

.legal-doc { max-width: 72ch; }
.legal-doc h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 800; letter-spacing: -.022em; color: var(--sb-ink);
  margin: 2.2em 0 .7em; padding-top: .2em;
}
.legal-doc h2:first-of-type { margin-top: 0; }
.legal-doc p { font-size: 1rem; line-height: 1.78; color: var(--sb-text); margin: 0 0 1.05em; }
.legal-doc ul { margin: 0 0 1.3em; padding: 0; list-style: none; display: grid; gap: 9px; }
.legal-doc ul li {
  position: relative; padding-left: 26px;
  font-size: 1rem; line-height: 1.7; color: var(--sb-text);
}
.legal-doc ul li::before {
  content: ""; position: absolute; left: 4px; top: .62em;
  width: 7px; height: 7px; border-radius: 2px;
  background: var(--sb-blue); opacity: .55;
}
.legal-doc a { color: var(--sb-blue); text-decoration: underline; text-underline-offset: 2px; }
.legal-doc a:hover { color: var(--sb-blue-600); }

.legal-dl { margin: 0 0 1.4em; display: grid; gap: 0; border-radius: var(--sb-r); overflow: hidden; border: 1px solid var(--sb-line); }
.legal-dl > div {
  display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: 18px; padding: 14px 18px; background: var(--sb-white);
  border-bottom: 1px solid var(--sb-line);
}
.legal-dl > div:last-child { border-bottom: none; }
.legal-dl > div:nth-child(odd) { background: var(--sb-paper); }
.legal-dl dt { font-size: .9rem; font-weight: 700; color: var(--sb-ink); margin: 0; }
.legal-dl dd { font-size: .9rem; line-height: 1.65; color: var(--sb-muted); margin: 0; }

.legal-note {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start;
  padding: 20px 22px; margin: 0 0 2.2em;
  border-radius: var(--sb-r-lg);
  background: var(--sb-blue-050);
  border: 1px solid rgba(22, 87, 240, .22);
}
.legal-note__ic {
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--sb-blue); color: #FFFFFF;
}
.legal-note__ic svg { width: 19px; height: 19px; }
.legal-note p { margin: 0; font-size: .9rem; line-height: 1.7; color: var(--sb-text); }

.legal-more { margin-top: clamp(48px, 6vw, 76px); padding-top: clamp(30px, 4vw, 44px); border-top: 1px solid var(--sb-line); }
.legal-more__h {
  display: block; font-family: var(--font-mono);
  font-size: .6875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sb-muted); margin-bottom: 16px;
}
.legal-more__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.legal-more__grid a {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 18px; border-radius: var(--sb-r);
  background: var(--sb-white); border: 1px solid var(--sb-line);
  font-size: .9rem; font-weight: 700; color: var(--sb-ink);
  transition: transform .35s var(--sb-ease-out), box-shadow .35s var(--sb-ease), border-color .35s var(--sb-ease);
}
.legal-more__grid a svg { width: 16px; height: 16px; color: var(--sb-faint); transition: transform .3s var(--sb-ease-out), color .3s var(--sb-ease); }
.legal-more__grid a:hover { transform: translateY(-3px); box-shadow: var(--sb-shadow-1); border-color: rgba(22, 87, 240, .3); }
.legal-more__grid a:hover svg { transform: translateX(4px); color: var(--sb-blue); }

@media (max-width: 620px) {
  .legal-dl > div { grid-template-columns: 1fr; gap: 4px; }
  .legal-note { grid-template-columns: 1fr; }
}

/* =============================================================================
   THE WORKFLOW — SECOND PASS
   -----------------------------------------------------------------------------
   The first build lit one step per lane and left everything else static. This
   adds the motion the section was missing: the step being worked shows a
   progress bar running its duration, completed steps hold a green tick, the
   feed rails carry a visible payload in the correct direction per stage, and
   the core disc reacts when it is the thing doing the work (stage 1).
============================================================================= */

/* Numbered markers so each lane reads as a sequence, not a list. */
.sb-work__steps { counter-reset: sbwk; }
.sb-work__steps li { counter-increment: sbwk; padding-left: 46px; }
.sb-work__steps li::before {
  content: counter(sbwk);
  position: absolute;
  left: 14px;
  top: 13px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: .625rem;
  font-weight: 800;
  line-height: 1;
  color: var(--sb-on-navy-mut);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  transition: background .4s var(--sb-ease), color .4s var(--sb-ease),
              border-color .4s var(--sb-ease);
}
.sb-work__lane--supply .sb-work__steps li { padding-left: 16px; padding-right: 46px; }
.sb-work__lane--supply .sb-work__steps li::before { left: auto; right: 14px; }

/* A progress bar on the step currently being worked. It runs the same 2.8s the
   clock holds each stage, so the bar finishing and the stage advancing are the
   same event to a viewer. */
.sb-work__steps li::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: 0 0 var(--sb-r) var(--sb-r);
  background: linear-gradient(90deg, var(--sb-sky), var(--sb-green));
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: 0;
}
.sb-work[data-work-stage="0"] .sb-work__steps li[data-work-node="0"]::after,
.sb-work[data-work-stage="1"] .sb-work__steps li[data-work-node="1"]::after,
.sb-work[data-work-stage="2"] .sb-work__steps li[data-work-node="2"]::after,
.sb-work[data-work-stage="3"] .sb-work__steps li[data-work-node="3"]::after {
  opacity: 1;
  animation: sbWorkRun 2.8s linear forwards;
}
@keyframes sbWorkRun { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* The live step's marker turns solid; a step already passed holds a tick. */
.sb-work[data-work-stage="0"] .sb-work__steps li[data-work-node="0"]::before,
.sb-work[data-work-stage="1"] .sb-work__steps li[data-work-node="1"]::before,
.sb-work[data-work-stage="2"] .sb-work__steps li[data-work-node="2"]::before,
.sb-work[data-work-stage="3"] .sb-work__steps li[data-work-node="3"]::before {
  background: var(--sb-sky);
  border-color: transparent;
  color: #061029;
}
.sb-work__steps li.is-done::before {
  content: "✓";
  background: rgba(0, 195, 137, .22);
  border-color: rgba(0, 195, 137, .5);
  color: #7DF0C6;
  font-size: .6875rem;
}

/* Feed rails: direction and colour follow the stage. Inbound while the
   requirement and the match are being worked, outbound once it is delivered. */
.sb-work__feed { width: clamp(18px, 2.4vw, 34px); }
.sb-work__feed i { animation-duration: 1.9s; }
.sb-work[data-work-stage="3"] .sb-work__feed--in i  { opacity: .25; }
.sb-work[data-work-stage="3"] .sb-work__feed--out i { opacity: 1; animation-duration: 1.2s; }
.sb-work:not([data-work-stage="3"]) .sb-work__feed--out i { opacity: .25; }

/* The core does the work at stage 1, so that is when it reacts. */
.sb-work__disc { transition: transform .6s var(--ease-spring), box-shadow .6s var(--sb-ease); }
.sb-work[data-work-stage="1"] .sb-work__disc {
  transform: scale(1.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 26px 60px -16px rgba(22, 87, 240, .85);
}
.sb-work__ring { animation-duration: 2.6s; }
.sb-work[data-work-stage="1"] .sb-work__ring { animation-duration: 1.5s; }

/* The compliance chips settle in rather than snapping. */
.sb-work__checks span {
  transform: translateY(4px) scale(.97);
  transition: background .4s var(--sb-ease), border-color .4s var(--sb-ease),
              color .4s var(--sb-ease), transform .45s var(--ease-spring);
}
.sb-work__checks span.is-ok { transform: none; }

/* The stage readout gets a bar of its own so the pill is not the only cue. */
.sb-work__live { position: relative; overflow: hidden; }
.sb-work__live::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--sb-green);
  transform: scaleX(0);
  transform-origin: 0 50%;
  animation: sbWorkRun 2.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .sb-work__steps li::after,
  .sb-work__live::after { animation: none !important; opacity: 0 !important; }
  .sb-work__checks span { transform: none !important; }
}

/* =============================================================================
   NAVBAR — LABEL WRAPPING FIX
   -----------------------------------------------------------------------------
   Nav labels were wrapping onto two and three lines ("Who We Are" rendered at
   93px tall). Three causes, all fixed here:

   1. .nav-link had no white-space rule, so a squeezed flex item wrapped its
      text instead of holding one line. A nav label must never wrap.
   2. The logo lost its width cap when it moved to the .sb-logo component. The
      old markup carried max-width:220px inline; the artwork is 2048x308, so
      at 38px tall it wants 253px and ate 33px of the nav's room.
   3. The desktop nav was kept until 1080px, but seven labels plus a logo and a
      CTA need more than that. The drawer now takes over at 1180px.
============================================================================= */
.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.nav-link {
  white-space: nowrap;
  flex: 0 0 auto;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: nowrap;
  flex-shrink: 1;
  min-width: 0;
}
.nav-dropdown-wrapper { flex: 0 0 auto; }
.nav-cta-btn {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.nav-cta-btn .btn,
.btn {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Restore the cap the inline style used to provide. */
.navbar .sb-logo { max-width: 180px; }
.navbar .sb-logo img { max-width: 180px; object-fit: contain; object-position: left center; }

@media (max-width: 1200px) {
  .nav-links,
  .nav-cta-btn { display: none !important; }
  .hamburger-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
}