:is(#p-how-we-work, #p-innovation-hub) .stage-track {
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
  border-bottom: 1px solid var(--hairline);
}
:is(#p-how-we-work, #p-innovation-hub) .stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--s-4);
  row-gap: var(--s-2);
  align-items: baseline;
  padding-block: var(--s-5);
  border-top: 1px solid var(--hairline);
}
:is(#p-how-we-work, #p-innovation-hub) .stage-num { font-size: 13px; line-height: 1.5; color: var(--teal-ink); }
:is(#p-how-we-work, #p-innovation-hub) .stage h3 { grid-column: 2; }
:is(#p-how-we-work, #p-innovation-hub) .stage-say,
:is(#p-how-we-work, #p-innovation-hub) .stage-out {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
}
:is(#p-how-we-work, #p-innovation-hub) .stage-out-label {
  margin-right: var(--s-2);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-3);
}
:is(#p-how-we-work, #p-innovation-hub) .stage .tag {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: var(--s-1);
  font-size: 13px;
}
:is(#p-how-we-work, #p-innovation-hub) .hw-track-line { height: 2px; background: var(--teal); }
:is(#p-how-we-work, #p-innovation-hub) .hw-track-line + .stage-track { margin-top: 0; }
:is(#p-how-we-work, #p-innovation-hub) .stage-track .stage:first-child { border-top: 0; }
@media (min-width: 768px) {
  :is(#p-how-we-work, #p-innovation-hub) .stage {
    grid-template-columns: 32px minmax(0, 0.55fr) minmax(0, 1.7fr) auto;
    column-gap: var(--s-5);
  }
  :is(#p-how-we-work, #p-innovation-hub) .stage-num { grid-column: 1; grid-row: 1; }
  :is(#p-how-we-work, #p-innovation-hub) .stage h3 { grid-column: 2; grid-row: 1; }
  :is(#p-how-we-work, #p-innovation-hub) .stage-say { grid-column: 3; grid-row: 1; }
  :is(#p-how-we-work, #p-innovation-hub) .stage-out { grid-column: 3; grid-row: 2; }
  :is(#p-how-we-work, #p-innovation-hub) .stage .tag { grid-column: 4; grid-row: 1; justify-self: end; margin-top: 0; }
}
:is(#p-how-we-work, #p-innovation-hub) .ledger { --cols: minmax(0, 1fr) minmax(0, 1.8fr) max-content; }
:is(#p-how-we-work, #p-innovation-hub) .ledger-row { align-items: start; min-height: 0; }
:is(#p-how-we-work, #p-innovation-hub) .ledger-cell { color: var(--ink-2); }
:is(#p-how-we-work, #p-innovation-hub) .ledger-item { font-weight: 600; color: var(--ink); }
:is(#p-how-we-work, #p-innovation-hub) .ledger-item::before { content: none; }
:is(#p-how-we-work, #p-innovation-hub) .ledger-cell .tag { margin-top: 2px; }
:is(#p-how-we-work, #p-innovation-hub) .ledger-note {
  margin-top: var(--s-4);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-3);
}
:is(#p-how-we-work, #p-innovation-hub) .dl { border-bottom: 1px solid var(--hairline); }
:is(#p-how-we-work, #p-innovation-hub) .hub-band { padding-block: var(--section-pad); }
:is(#p-how-we-work, #p-innovation-hub) .hub-card {
  display: grid;
  gap: var(--s-4);
  min-width: 0;
  margin: 0;
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}
:is(#p-how-we-work, #p-innovation-hub) .hub-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); }
:is(#p-how-we-work, #p-innovation-hub) .hub-place { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--ink-2); }
:is(#p-how-we-work, #p-innovation-hub) .hub-pin {
  position: relative;
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50% 50% 50% 0;
  background: var(--teal);
  transform: rotate(-45deg);
}
:is(#p-how-we-work, #p-innovation-hub) .hub-pin::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--surface);
}
:is(#p-how-we-work, #p-innovation-hub) .hub-coords { color: var(--ink-2); }
:is(#p-how-we-work, #p-innovation-hub) .hub-plan {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: minmax(0, 0.5fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 1px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--line-strong);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-control);
}
:is(#p-how-we-work, #p-innovation-hub) .hub-room {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
  min-height: 0;
  padding: var(--s-3);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-2);
}
@media (max-width: 767px) {
  :is(#p-how-we-work, #p-innovation-hub) .spec-row.rv { animation: none; }
}
:is(#p-how-we-work, #p-innovation-hub) .hub-list { margin: 0; padding: 0; list-style: none; }
:is(#p-how-we-work, #p-innovation-hub) .hub-list li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: var(--s-3);
  padding-block: var(--s-4);
  border-top: 1px solid var(--tint-border);
}
:is(#p-how-we-work, #p-innovation-hub) .hub-list li:first-child { padding-top: 0; border-top: 0; }
:is(#p-how-we-work, #p-innovation-hub) .hub-num { grid-row: 1 / span 2; margin-top: 6px; font-family: var(--font-mono); font-size: 13px; line-height: 1.4; color: var(--teal-ink); }
:is(#p-how-we-work, #p-innovation-hub) .hub-list h3 { grid-column: 2; }
:is(#p-how-we-work, #p-innovation-hub) .hub-list p { grid-column: 2; margin-top: var(--s-2); font-size: 15px; line-height: 1.55; color: var(--ink-2); }
:is(#p-how-we-work, #p-innovation-hub) .hub-cta {
  display: grid;
  justify-items: start;
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--tint-border);
}
:is(#p-how-we-work, #p-innovation-hub) .hub-note { display: flex; align-items: flex-start; gap: var(--s-2); color: var(--ink-2); }
:is(#p-how-we-work, #p-innovation-hub) .hub-note .led { margin-top: 5px; }
@media (max-width: 767px) {
  :is(#p-how-we-work, #p-innovation-hub) .hub-cta .btn { width: 100%; }
}
#p-how-we-work .plat-figure { margin-top: var(--s-6); }
#p-how-we-work .schematic-caption { font-size: 13px; }
#p-how-we-work .plat-fig {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: var(--s-4);
  background: var(--bg-subtle);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}
#p-how-we-work .plat-fig-signals { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
#p-how-we-work .plat-fig-signals li {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--s-2) var(--s-3);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-control);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
}
#p-how-we-work .plat-fig-signals .sig-text { flex: 1 1 auto; min-width: 0; }
#p-how-we-work .plat-fig-signals .led { margin-right: var(--s-2); }
#p-how-we-work .plat-fig-signals .sig-state { flex: none; margin-left: var(--s-3); font-size: 13px; color: var(--teal-ink); }
#p-how-we-work .plat-fig-signals li:nth-child(2) .led { animation-delay: -0.6s; }
#p-how-we-work .plat-fig-signals li:nth-child(3) .led { animation-delay: -1.2s; }
#p-how-we-work .plat-fig-signals li:nth-child(4) .led { animation-delay: -1.8s; }
#p-how-we-work .plat-fig-signals li:nth-child(5) .led { animation-delay: -2.4s; }
#p-how-we-work .plat-fig-link { position: relative; height: 24px; }
#p-how-we-work .plat-fig-link svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
#p-how-we-work .plat-fig-link path { fill: none; stroke: var(--teal); stroke-width: 1; vector-effect: non-scaling-stroke; }
#p-how-we-work .plat-fig-link .pl-tree { display: none; }
#p-how-we-work .plat-fig-card { margin: 0; }
#p-how-we-work .plat-fig-card .meter-row { margin-top: var(--s-4); flex-wrap: nowrap; }
#p-how-we-work .plat-fig-card .meter { flex: 0 1 160px; width: auto; min-width: 0; }
#p-how-we-work .plat-fig-card .dc-reasons { margin-top: var(--s-4); }
#p-how-we-work .plat-fig-card .dc-reasons li { font-size: 14px; line-height: 1.5; }
#p-how-we-work .plat-fig-card .dc-decision { margin-top: var(--s-4); }
@media (min-width: 768px) {
  #p-how-we-work .plat-fig { padding: var(--s-5); }
}
@media (min-width: 1100px) {
  /* The figure runs the full container with the trace; columns scale so the link lines stay short. */
  #p-how-we-work .plat-fig { grid-template-columns: minmax(0, 1fr) minmax(48px, 0.6fr) minmax(0, 1.25fr); }
  #p-how-we-work .plat-fig-signals { grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 0; }
  #p-how-we-work .plat-fig-signals li { align-self: center; }
  #p-how-we-work .plat-fig-link { height: auto; }
  #p-how-we-work .plat-fig-link .pl-tree { display: inline; }
  #p-how-we-work .plat-fig-link .pl-drop { display: none; }
}
#p-how-we-work .plat-fig-link .pl-pulse { display: inline; opacity: 0; fill: none; stroke: var(--teal-ink); stroke-width: 3; }
#p-how-we-work .plat-fig-link .pl-pulse:not(.pl-pulse-drop) { display: none; }
@media (min-width: 1100px) {
  #p-how-we-work .plat-fig-link .pl-pulse:not(.pl-pulse-drop) { display: inline; }
  #p-how-we-work .plat-fig-link .pl-pulse-drop { display: none; }
}
@keyframes co-pulse { 0% { stroke-dashoffset: 0.12; } 60%, 100% { stroke-dashoffset: -1; } }
@keyframes co-pulse-long { 0% { stroke-dashoffset: 0.5; } 60%, 100% { stroke-dashoffset: -1; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    #p-how-we-work .plat-fig-link .pl-pulse {
      opacity: 1;
      stroke-dasharray: 0.12 1;
      animation: co-pulse 4s linear infinite both;
    }
    #p-how-we-work .plat-fig-link .pl-pulse-drop {
      stroke-dasharray: 0.5 1;
      animation-name: co-pulse-long;
      animation-delay: -2s;
    }
    #p-how-we-work .plat-fig-link .pl-pulse-1 { animation-delay: -0.8s; }
    #p-how-we-work .plat-fig-link .pl-pulse-2 { animation-delay: -1.6s; }
    #p-how-we-work .plat-fig-link .pl-pulse-3 { animation-delay: -2.4s; }
    #p-how-we-work .plat-fig-link .pl-pulse-4 { animation-delay: 0s; }
    #p-how-we-work .plat-fig-link .pl-pulse-5 { animation-delay: -3.2s; }
  }
}
/* Hub band: the section head's margin-bottom is the whole gap above the buttons, which sit on one row like Next step. */
#p-how-we-work .section-head + .hub-cta { margin-top: 0; }
#p-how-we-work .hub-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); }

/* ==== The one AI section (#decision-models, "Decision models"): the dark band, trace and node colours carried over from About ==== */
#p-how-we-work .ai-band {
  --ai-edge: color-mix(in srgb, var(--cyan) 38%, var(--navy-line));
  --ai-node: color-mix(in srgb, var(--cyan) 50%, var(--navy-line));
  --ai-tint: color-mix(in srgb, var(--cyan) 8%, var(--navy-800));
}
#p-how-we-work .ai-band .step { border-color: var(--ai-edge); }
#p-how-we-work .ai-band .step-decide { border-color: var(--cyan); background: var(--ai-tint); }
/* .ai-band p (0,1,1) out-ranks the caption and note classes; restore them inside the band. */
#p-how-we-work .ai-band .schematic-caption { color: var(--ink-3); }
#p-how-we-work .ai-band .band-note { color: var(--on-dark-3); }
@media (min-width: 1100px) {
  #p-how-we-work .ai-band .step::before { background: var(--ai-node); }
  #p-how-we-work .ai-band .step-decide::before { background: var(--cyan); }
}
@keyframes co-edge { from { border-color: var(--navy-line); } to { border-color: var(--ai-edge); } }
@keyframes co-edge-decide { from { border-color: var(--navy-line); } to { border-color: var(--cyan); } }
@keyframes co-tint { from { background-color: var(--navy-800); } to { background-color: var(--ai-tint); } }
@keyframes co-node { from { background-color: var(--navy-line); } to { background-color: var(--ai-node); } }
@keyframes co-node-decide { from { background-color: var(--navy-line); } to { background-color: var(--cyan); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    #p-how-we-work .ai-band .step {
      animation: co-edge linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 10%;
    }
    #p-how-we-work .ai-band .step:nth-child(2) { animation-range: cover 5% cover 15%; }
    #p-how-we-work .ai-band .step:nth-child(4) { animation-range: cover 15% cover 25%; }
    #p-how-we-work .ai-band .step-decide {
      animation-name: co-edge-decide, co-tint;
      animation-timeline: view(), view();
      animation-range: cover 10% cover 20%, cover 10% cover 20%;
    }
    #p-how-we-work .ai-band .trace::before {
      animation: rv-draw-x linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 20%;
      transform-origin: 0 50%;
    }
    @media (min-width: 1100px) {
      #p-how-we-work .ai-band .step::before {
        animation: co-node linear both;
        animation-timeline: view();
        animation-range: cover 0% cover 10%;
      }
      #p-how-we-work .ai-band .step:nth-child(2)::before { animation-range: cover 5% cover 15%; }
      #p-how-we-work .ai-band .step:nth-child(4)::before { animation-range: cover 15% cover 25%; }
      #p-how-we-work .ai-band .step-decide::before {
        animation-name: co-node-decide;
        animation-timeline: view();
        animation-range: cover 10% cover 20%;
      }
    }
  }
}