/* Preview only: one connected direction beside the heading; steps below stay intact. */
.bc-approach-graphic { display:none; }
.bc-approach-graphic > svg { display:block; width:100%; height:auto; overflow:visible; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.bc-approach-graphic .bc-approach-flow-halo { fill:none; stroke:var(--bc-visual-accent); stroke-width:15; opacity:.055; }
.bc-approach-graphic .bc-approach-flow { fill:none; stroke:var(--bc-visual-accent); stroke-width:1.6; }
.bc-approach-graphic .bc-approach-guides { fill:none; stroke:var(--bc-visual-line); stroke-width:1.2; }
.bc-approach-graphic .bc-approach-guide { fill:none; stroke:var(--bc-visual-line); stroke-width:1.1; opacity:.7; }
.bc-approach-graphic .bc-approach-piece { fill:var(--bc-visual-panel); stroke:var(--bc-visual-accent); stroke-width:1.7; }
.bc-approach-graphic .bc-approach-shadow { fill:var(--bc-visual-accent); stroke:none; opacity:.08; }
.bc-approach-graphic .bc-approach-layer { fill:none; stroke:var(--bc-visual-accent); stroke-width:1.7; }
.bc-approach-graphic .bc-approach-link { fill:none; stroke:var(--bc-visual-accent); stroke-width:1.7; }
.bc-approach-graphic .bc-approach-check { fill:none; stroke:var(--bc-visual-accent); stroke-width:2.1; }
.bc-approach-graphic .bc-approach-node { fill:var(--bc-visual-panel); stroke:var(--bc-visual-accent); stroke-width:1.8; }
.bc-approach-graphic .bc-approach-final { fill:var(--bc-visual-accent); stroke:none; }
.bc-approach-graphic .bc-approach-flagpole { fill:none; stroke:var(--bc-visual-accent); stroke-width:2; }
.bc-approach-graphic .bc-approach-flag { fill:var(--bc-visual-core); stroke:var(--bc-visual-accent); stroke-width:1.7; }
.bc-approach-graphic .bc-approach-label { fill:var(--bc-visual-ink); stroke:none; text-anchor:middle; font:500 15px var(--ui-font); }
@media(min-width:768px) {
  #root .approach > .section-head.bc-approach-heading {
    display:grid; grid-template-columns:minmax(0,1fr) minmax(350px,1.18fr);
    gap:20px clamp(32px,4vw,64px); align-items:center;
  }
  #root .approach > .section-head.bc-approach-heading > .kicker { grid-column:1/-1; grid-row:1; margin:0; }
  #root .approach > .section-head.bc-approach-heading > div { grid-column:1; grid-row:2; width:auto; max-width:none; min-width:0; }
  #root .approach > .section-head.bc-approach-heading h2 { max-width:none; font-size:clamp(38px,3.5vw,52px); line-height:1.1; }
  #root .approach > .section-head.bc-approach-heading > .bc-approach-graphic {
    display:block; grid-column:2; grid-row:2; align-self:center; justify-self:end;
    width:100%; max-width:600px; min-width:0; margin:0; padding:0;
    border:0; background:none; box-shadow:none;
  }
}
@media(min-width:768px) and (max-width:1050px) {
  #root .approach > .section-head.bc-approach-heading { grid-template-columns:minmax(0,1fr); gap:26px; }
  #root .approach > .section-head.bc-approach-heading h2 { max-width:23ch; }
  #root .approach > .section-head.bc-approach-heading > .bc-approach-graphic { grid-column:1; grid-row:3; justify-self:center; max-width:600px; }
}
@media(max-width:767px), (pointer:coarse) and (max-height:500px) {
  #root .approach > .section-head.bc-approach-heading { grid-template-columns:minmax(0,1fr); }
  #root .approach .bc-approach-graphic { display:none!important; }
}
@media(prefers-reduced-motion:reduce) {
  .bc-approach-graphic, .bc-approach-graphic * { animation:none!important; transition:none!important; }
}