/* Strategic Labs — V002-M5 Wave 3: five expressive consulting frameworks.
   One diagram language (stroke 1.6–2.2 · node 9–20px · tab radius · folio
   labels · selected = brand fill + halo · focus = 3px mint ring · touch ≥44px
   · finite draw-in only where signature), five topologies:
     SP  direction architecture  — axis + direction layer + gates + dependencies + progression band
     BM  value relationship      — chain + relationship arcs + financial band + neighbours
     HR  people architecture     — tiers · operating-model RING · diagnostic matrix · hub
     CT  layered transformation  — strata cross-section with ties · current→target ascent
     SU  foundation journey      — slab → rising steps → destination anchors */

/* ======================================================================
   STRATEGIC PLANNING — direction architecture (deepened)
   ====================================================================== */
.dir5 { position: relative; }
.dir5__direction { display: block; margin: 0 0 var(--s2); padding-inline-start: var(--s4); color: var(--brand-mid); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .06em; }
/* dependency bracket: each gate hands over to the next (a bracket on the end edge) */
.dir5__dep { position: absolute; inset-inline-end: calc(-1 * var(--s5) / 2); inset-block-start: calc(-1 * clamp(2.5rem, 4vw, 3.5rem) + 14px); inline-size: 14px; block-size: 22px;
  border-block-end: 1px solid var(--brand-deep); border-inline-end: 1px solid var(--brand-deep); opacity: .45; }
/* progression band: the plan advances gate by gate toward execution */
.dir5__progress { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s5); }
.dir5__progress > li { block-size: 6px; border-radius: 3px; background: color-mix(in srgb, var(--brand) calc(28% + var(--i) * 24%), var(--paper-2)); }
.dir5__progress > li:last-child { background: var(--brand-deep); }

/* ======================================================================
   BUSINESS MODEL — value relationship system (deepened)
   ====================================================================== */
.bm5__arcs { position: absolute; inset-inline: 0; inset-block-start: calc(var(--s5) - 40px); block-size: 48px; inline-size: 100%; overflow: visible; pointer-events: none; }
.bm5__arc { fill: none; stroke: var(--brand-deep); stroke-width: .35; opacity: .28; vector-effect: non-scaling-stroke; stroke-width: 1.2px; transition: opacity var(--t) var(--ease), stroke var(--t) var(--ease); }
.bm5__arc.is-lit { opacity: 1; stroke: var(--brand); stroke-width: 2px; }
.bm4__chain { padding-block-start: calc(var(--s5) + 36px); }
.bm4__line { inset-block-start: calc(var(--s5) + 36px + 9px); }
/* the financial axis runs beneath ALL five components; the poles stay where the approved copy places them */
.bm4__band { margin: var(--s2) 4% 0 4%; }
/* relationships in the panel: previous ← selected ← next (reading direction) */
.bm5__relations { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-block-start: var(--s2); }
.bm5__rel { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--line-dark); color: var(--on-dark-soft); font-size: .82rem; font-weight: 600; }
.bm5__rel .lat { font-size: .7rem; color: var(--brand); letter-spacing: .1em; }
.bm5__rel i { font-style: normal; color: var(--brand); }
.bm5__rel--self { background: var(--brand); border-color: var(--brand); color: var(--ink-900); }
.bm5__rel--self .lat { color: var(--ink-900); }

/* ======================================================================
   HUMAN RESOURCES — the operating model as a ring (new chapter diagram)
   ====================================================================== */
.ring5__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 3vw, 4rem); align-items: center; }
.ring5__head .lead { max-width: 34ch; }
.ring5 { position: relative; aspect-ratio: 1; inline-size: min(100%, 520px); justify-self: end; }
.ring5::before, .ring5::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid var(--line-strong); }
.ring5::before { inset: 4%; }                        /* outer orbit */
.ring5::after { inset: 24%; border-style: dashed; }   /* inner orbit */
.ring5__core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; gap: .3rem;
  inline-size: 30%; aspect-ratio: 1; border-radius: 50%; background: var(--brand-deep); color: var(--on-dark); font-size: .82rem; font-weight: 700; text-align: center; padding: var(--s3); box-shadow: 0 0 0 10px rgba(68,188,167,.08); }
.ring5__core .m4-cross { margin: 0; color: var(--brand); }
.ring5__outer, .ring5__inner { list-style: none; margin: 0; padding: 0; }
.ring5 { container-type: inline-size; }
.ring5__outer > li, .ring5__inner > li { position: absolute; left: 50%; top: 50%; --a: calc(var(--i) * 360deg / var(--n) - 90deg); }
/* polar placement: centre → rotate → push out along the radius → un-rotate so labels stay upright */
.ring5__outer > li { transform: translate(-50%, -50%) rotate(var(--a)) translateX(46cqi) rotate(calc(-1 * var(--a))); }
.ring5__inner > li { transform: translate(-50%, -50%) rotate(calc(var(--a) + 45deg)) translateX(26cqi) rotate(calc(-1 * (var(--a) + 45deg))); }
.ring5__outer > li > span, .ring5__inner > li > span { display: inline-block; white-space: nowrap; padding: .4rem .8rem; border-radius: 999px; background: var(--paper); border: 1.5px solid var(--brand-deep); color: var(--brand-deep); font-size: .86rem; font-weight: 700; }
.ring5__inner > li > span { background: var(--mint-wash); border-color: var(--brand); color: var(--brand-deep); font-size: .8rem; }

/* ======================================================================
   CORPORATE TRANSFORMATION — cross-section with ties; current → target
   ====================================================================== */
.layers4__stratum::before { content: ""; position: absolute; inset-inline-start: -1px; inset-block-start: -8px; inline-size: 10px; block-size: 8px; border-inline-start: 2px solid var(--brand); border-block-end: 2px solid var(--brand); opacity: .35; }
.layers4__stratum:first-child::before { display: none; }
.layers4__n::after { content: ""; display: inline-block; inline-size: 18px; block-size: 1px; margin-inline-start: .5rem; vertical-align: middle; background: var(--line-strong); }
/* ascent: a dashed current baseline under the first phase, a target marker on the last */
.ascent4 { position: relative; }
.ascent4::before { content: ""; position: absolute; inset-inline: 0; inset-block-end: -10px; block-size: 0; border-block-end: 1px dashed var(--line-dark-str); }
.ascent4 > li.ascent4__step:last-child::after { content: ""; position: absolute; inset-inline-end: 0; inset-block-start: -8px; inline-size: 12px; block-size: 12px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 6px rgba(68,188,167,.22); }

/* ======================================================================
   STARTUP — the journey's anchors (from the approved lead) on the path
   ====================================================================== */
.stairs5__anchors { list-style: none; margin: 0 0 var(--s5); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s4); }
.stairs5__anchor { display: flex; align-items: center; gap: .5rem; color: var(--brand-deep); font-size: .86rem; font-weight: 700; }
.stairs5__anchor .m4-cross { color: var(--brand); }
.stairs5__anchor--1 { justify-content: center; }
.stairs5__anchor--2 { justify-content: flex-end; }
.stairs5__anchors::after { content: ""; grid-column: 1 / -1; block-size: 1px; background: var(--line-strong); margin-block-start: -4px; }

/* ================= RESPONSIVE ================= */
@media (max-width: 1023px) {
  .ring5__grid { grid-template-columns: 1fr; }
  .ring5 { justify-self: center; inline-size: min(100%, 460px); }
  .dir5__progress { gap: var(--s3); }
  .dir5__dep { display: none; }
}
@media (max-width: 599px) {
  .dir5__progress { grid-template-columns: 1fr; gap: 6px; margin-block-start: var(--s4); }
  .dir5__progress > li { block-size: 4px; }
  .dir5__direction { padding-inline-start: var(--s5); margin: 0 0 .15rem; }
  .ring5 { inline-size: min(100%, 340px); }
  .ring5__core { inline-size: 34%; font-size: .72rem; padding: var(--s2); }
  .ring5__outer > li > span, .ring5__inner > li > span { font-size: .7rem; padding: .3rem .55rem; }
  .bm5__arcs { display: none; }
  .bm4__chain { padding-block-start: 0; }
  .stairs5__anchors { grid-template-columns: 1fr; gap: var(--s2); }
  .stairs5__anchor--1, .stairs5__anchor--2 { justify-content: flex-start; }
}
@media (max-width: 359px) {
  /* five long labels on a 284px ring: tighter radius and type, and the chapter never widens the page */
  .m2-hr-operating { overflow-x: clip; }
  .ring5__outer > li { transform: translate(-50%, -50%) rotate(var(--a)) translateX(41cqi) rotate(calc(-1 * var(--a))); }
  .ring5__outer > li > span, .ring5__inner > li > span { font-size: .64rem; padding: .25rem .45rem; }
}