/* Strategic Labs — V002-M4 five practice-specific consulting diagram systems.
   Five different visual logics, one language (rules · tab corner · cross ·
   folio numerals). Every string is approved content; the diagrams only give
   that content a truer shape.

     Strategic Planning      DIRECTION   — one axis, four decision gates, an arrowhead at execution
     Business Model          RELATION    — a value chain of five nodes with the financial band beneath
     Human Resources         PEOPLE ARCH — stepped tiers · a ruled 3×3 organisation matrix · a hub with spokes
     Corporate Transformation LAYERS     — nine strata built on each other (staircase profile) · a recovery ascent
     Startup Establishment   FOUNDATION  — five rising steps · three pillars under one slab */

/* ======================================================================
   STRATEGIC PLANNING — direction architecture
   ====================================================================== */
.dir4 { position: relative; list-style: none; margin: var(--s4) 0 0; padding: clamp(2.5rem, 4vw, 3.5rem) 0 0;
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s5); background: transparent; }
.dir4::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 2px; background: var(--brand-deep); }
/* the arrowhead: direction toward execution (inline-end) */
.dir4::after { content: ""; position: absolute; inset-inline-end: -1px; inset-block-start: -6px; border-block: 7px solid transparent; border-inline-start: 12px solid var(--brand-deep); border-inline-end: 0; }
.dir4 > li.dir4__gate { position: relative; padding: 0; background: transparent; border: 0; box-shadow: none; border-radius: 0; grid-column: auto; }
.dir4 > li.dir4__gate::before { display: none; }
.dir4 > li.dir4__gate:hover { transform: none; box-shadow: none; }
.dir4 > li.dir4__gate:last-child { grid-column: auto; }
/* the gate post: a vertical rule rising from the axis through the numeral */
.dir4__post { position: absolute; inset-inline-start: 0; inset-block-start: calc(-1 * clamp(2.5rem, 4vw, 3.5rem)); block-size: clamp(2.5rem, 4vw, 3.5rem); inline-size: 1px; background: var(--brand-deep); }
.dir4__post::before { content: ""; position: absolute; inset-block-start: -5px; inset-inline-start: -4px; inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--paper-2); border: 2px solid var(--brand-deep); }
.dir4__gate:last-child .dir4__post::before { background: var(--brand-deep); }
.dir4__n { display: block; margin: 0 0 var(--s3); padding-inline-start: var(--s4); font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--brand); }
.dir4__gate strong { display: block; padding-inline-start: var(--s4); font-size: 1.08rem; line-height: 1.5; color: var(--ink); }

/* ======================================================================
   BUSINESS MODEL — value-system relationships
   ====================================================================== */
.bm4 { grid-template-columns: 1fr; gap: var(--s6); }
.bm4__chain { position: relative; padding-block: var(--s5) 0; }
.bm4__line { position: absolute; inset-inline: 6%; inset-block-start: calc(var(--s5) + 9px); block-size: 2px; background: var(--brand-deep); }
.bm4__nodes { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--s3); }
.bm4__nodes > button.bm4__node { position: relative; display: grid; grid-template-columns: minmax(0,1fr); justify-items: center; gap: var(--s2); min-height: 0; padding: 0 var(--s2) var(--s4); text-align: center;
  background: transparent; border: 0; box-shadow: none; border-radius: 0; color: var(--ink); font-weight: 600; font-size: .95rem; line-height: 1.45; cursor: pointer;
  transition: color var(--t) var(--ease); }
.bm4__nodes > button.bm4__node:hover { transform: none; border-color: transparent; background: transparent; }
.bm4__dot { inline-size: 20px; block-size: 20px; border-radius: 50%; background: var(--paper); border: 2px solid var(--brand-deep);
  transition: background var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.bm4__n { font-size: var(--fs-folio); letter-spacing: var(--track-folio); color: var(--brand-mid); font-weight: 700; }
.bm4__node .m2-axis-rail__label { color: var(--ink); }
.bm4__nodes > button.bm4__node.is-active { background: transparent; border: 0; color: var(--brand-deep); box-shadow: none; }
.bm4__node.is-active .bm4__dot { background: var(--brand); border-color: var(--brand-deep); transform: scale(1.35); box-shadow: 0 0 0 6px rgba(68,188,167,.18); }
.bm4__node.is-active .m2-axis-rail__label { color: var(--brand-deep); font-weight: 700; }
.bm4__nodes > button.bm4__node:focus-visible { outline-offset: 0; border-radius: var(--tab-sm); }
/* the financial band beneath the chain — from the targets pole to the capabilities pole */
.bm4__band { position: relative; margin: var(--s2) 8% 0 18%; padding: var(--s3) var(--s4); border: var(--rule-strong); border-block-start: 0;
  border-end-start-radius: var(--tab-sm); border-end-end-radius: var(--tab-sm); display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s4); }
.bm4__band-label { position: absolute; inset-block-end: -.72em; inset-inline-start: 50%; transform: translateX(50%); padding-inline: .6rem; background: var(--paper);
  color: var(--brand-mid); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
.bm4__pole { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.bm4__pole::before { content: ""; display: inline-block; inline-size: 8px; block-size: 8px; margin-inline-end: .45rem; border-radius: 50%; background: var(--brand); vertical-align: middle; }
.bm4 .m2-axis-focus { margin-block-start: var(--s5); }

/* ======================================================================
   HUMAN RESOURCES — organisational / people architecture
   ====================================================================== */
/* three tiers as a stepped stack: each tier sits on the one beneath and is narrower */
.tiers4 { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.tiers4__tier { display: grid; grid-template-columns: 5rem minmax(0,1fr); gap: var(--s5); align-items: start;
  margin-inline-end: calc(var(--i) * 6%); padding: var(--s5) var(--s5) var(--s5) 0; border-block-start: var(--rule-strong); background: transparent; border-radius: 0; box-shadow: none; }
.tiers4__tier:last-child { border-block-end: var(--rule-strong); }
.tiers4__label { display: inline-block; align-self: start; justify-self: start; padding: .35rem .85rem; border: 1px solid var(--brand-deep); border-radius: var(--tab-sm); border-start-start-radius: 14px;
  color: var(--brand-deep); font-size: var(--fs-folio); font-weight: 700; letter-spacing: var(--track-folio); white-space: nowrap; }
.tiers4__body h3 { margin: 0 0 var(--s2); font-size: 1.1rem; }
.tiers4__body p { margin: 0; color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.8; }

/* nine services as a ruled 3×3 organisation matrix — intersections, no cards */
.matrix4 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; border: var(--rule-strong); border-radius: var(--tab-sm); border-start-start-radius: var(--tab); overflow: clip; }
.matrix4 > li.matrix4__cell, .matrix4 > li.matrix4__cell:last-child { grid-column: auto; }
.matrix4__cell { display: grid; grid-template-columns: auto minmax(0,1fr); gap: var(--s3); align-items: start; min-block-size: 108px; padding: var(--s5); background: transparent; border: 0; border-radius: 0; box-shadow: none;
  border-inline-end: var(--rule); border-block-end: var(--rule); transition: background var(--t) var(--ease); }
.matrix4__cell:nth-child(3n) { border-inline-end: 0; }
.matrix4__cell:nth-child(n+7) { border-block-end: 0; }
.matrix4__cell:hover { background: var(--mint-wash); }
.matrix4__n { font-size: var(--fs-folio); font-weight: 700; letter-spacing: var(--track-folio); color: var(--brand-mid); padding-block-start: .3em; }
.matrix4__cell strong { font-size: .98rem; line-height: 1.55; font-weight: 600; }

/* total rewards: the programme as a hub, its five components as spokes on one rule */
.hub4 { margin-block-start: var(--s6); display: grid; grid-template-columns: minmax(0,1fr); gap: 0; background: transparent; }
.hub4 > p.hub4__core, .hub4 > ol.hub4__spokes, .hub4 > ol.hub4__spokes:last-child { grid-column: 1 / -1; }
.hub4__core { position: relative; margin: 0; justify-self: center; padding: .7rem 1.4rem; border: 2px solid var(--brand-deep); border-radius: 999px; border-start-start-radius: var(--tab-sm); color: var(--brand-deep); font-weight: 700; font-size: 1.02rem; background: var(--mint-wash); z-index: 1; }
.hub4__spokes { position: relative; list-style: none; margin: 0; padding: clamp(2rem, 3vw, 2.75rem) 0 0; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--s4); }
.hub4__spokes::before { content: ""; position: absolute; inset-inline: 10%; inset-block-start: 0; block-size: 1px; background: var(--brand-deep); }
.hub4__spokes > li, .hub4__spokes > li:last-child { grid-column: auto; }
.hub4__spokes > li { position: relative; padding: var(--s4) var(--s3) 0; text-align: center; background: transparent; border: 0; box-shadow: none; border-radius: 0; font-size: .95rem; font-weight: 600; color: var(--ink); line-height: 1.5; }
.hub4__spoke { position: absolute; inset-inline-start: 50%; inset-block-start: calc(-1 * clamp(2rem, 3vw, 2.75rem)); inline-size: 1px; block-size: clamp(2rem, 3vw, 2.75rem); background: var(--brand-deep); }
.hub4__spoke::after { content: ""; position: absolute; inset-block-end: -4px; inset-inline-start: -4px; inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--brand); }
.hub4__n { display: block; margin-bottom: var(--s2); font-size: var(--fs-folio); letter-spacing: var(--track-folio); color: var(--brand-mid); font-weight: 700; }
/* the hub's spoke down from the core to the rule */
.hub4__core::after { content: ""; position: absolute; inset-inline-start: 50%; inset-block-start: 100%; inline-size: 1px; block-size: clamp(2rem, 3vw, 2.75rem); background: var(--brand-deep); }

/* ======================================================================
   CORPORATE TRANSFORMATION — layered operating transformation
   ====================================================================== */
/* nine strata, each built on the one below: the start edge steps inward as the
   stack rises, giving the whole a staircase profile — an architecture, not a list */
.layers4 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0,1fr); gap: 0; background: transparent; }
.layers4 > li { grid-column: auto; }
.layers4__stratum { position: relative; display: grid; grid-template-columns: 3.2rem minmax(0, 22rem) minmax(0,1fr); gap: var(--s5); align-items: baseline;
  margin-inline-start: calc((8 - var(--i)) * 2.2%); padding: var(--s4) 0 var(--s4) var(--s4);
  border-block-end: var(--rule); background: transparent; border-radius: 0; box-shadow: none; }
.layers4__stratum:first-child { border-block-start: var(--rule-strong); }
.layers4__stratum:last-child { border-block-end: var(--rule-strong); }
.layers4__edge { position: absolute; inset-inline-start: 0; inset-block: 0; inline-size: 2px; background: var(--brand); opacity: calc(.35 + var(--i) * .08); }
.layers4__n { font-size: var(--fs-folio); font-weight: 700; letter-spacing: var(--track-folio); color: var(--brand-mid); }
.layers4__stratum h3 { margin: 0; font-size: 1.02rem; line-height: 1.5; }
.layers4__stratum p { margin: 0; color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.75; }

/* restructuring: a recovery ascent — four phases, each raised above the last */
.ascent4 { list-style: none; margin: var(--s7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s4); align-items: end; }
.ascent4 > li.ascent4__step, .ascent4 > li.ascent4__step:last-child { grid-column: auto; }
/* each phase is raised above the last — recovery rises toward stability (the final phase) */
.ascent4 > li.ascent4__step { position: relative; display: grid; gap: var(--s2); padding: var(--s4) var(--s4) var(--s4) 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; font-size: 1rem; line-height: 1.6; color: var(--on-dark-soft);
  border-block-start: 2px solid var(--brand); margin-block-end: calc(var(--i) * 1.75rem); }
.ascent4__riser { position: absolute; inset-inline-end: 0; inset-block-start: -2px; inline-size: 2px; block-size: calc(100% + var(--i) * 1.75rem + 2px); background: var(--brand); opacity: .55; transform: translateY(calc(-1 * var(--i) * 0px)); }
.ascent4 > li.ascent4__step:first-child .ascent4__riser { display: none; }
.ascent4__n { font-size: var(--fs-folio); font-weight: 700; letter-spacing: var(--track-folio); color: var(--brand); }
.ascent4__step strong { color: var(--on-dark); font-size: 1.02rem; line-height: 1.5; }

/* ======================================================================
   STARTUP ESTABLISHMENT — foundation / establishment journey
   ====================================================================== */
/* five rising steps: each tread sits higher than the last (reading order) */
.stairs4 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 0; align-items: end; }
.stairs4 > li.stairs4__step, .stairs4 > li.stairs4__step:last-child { grid-column: auto; }
.stairs4__step { position: relative; display: flex; flex-direction: column; gap: var(--s3); padding: var(--s5) var(--s4) 0 var(--s4);
  padding-block-end: calc(var(--s5) + var(--i) * 1.6rem); background: transparent; border: 0; box-shadow: none; border-radius: 0; }
.stairs4__step:first-child { padding-inline-start: 0; }
.stairs4__tread { position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 3px; background: var(--brand-deep); }
.stairs4__step + .stairs4__step .stairs4__tread::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0; inline-size: 3px; block-size: 1.6rem; transform: translateY(-1.6rem); background: var(--brand-deep); }
.stairs4__n { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--brand); }
.stairs4__step h3 { margin: 0; font-size: 1.02rem; line-height: 1.5; }
.stairs4__step p { margin: 0; color: var(--ink-soft); font-size: var(--fs-sm); }
.stairs4__step i { display: none; }

/* the foundation: three pillars under one slab */
.plinth4 { position: relative; padding-block-end: 22px; }
.plinth4__pillars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s6); align-items: end; }
.plinth4__pillars > li { position: relative; display: grid; justify-items: center; gap: var(--s3); padding-block-end: var(--s6); text-align: center; }
.plinth4__cap { font-size: var(--fs-folio); letter-spacing: var(--track-folio); color: var(--brand-mid); font-weight: 700; }
.plinth4__pillars strong { font-size: 1rem; line-height: 1.55; max-width: 24ch; }
.plinth4__pillars small { color: var(--muted); font-size: var(--fs-sm); }
.plinth4__shaft { position: absolute; inset-block-end: 0; inset-inline-start: 50%; inline-size: 1px; block-size: var(--s6); background: var(--brand-deep); }
.plinth4__shaft::before { content: ""; position: absolute; inset-block-start: -4px; inset-inline-start: -4px; inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--brand); }
.plinth4__slab { position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 22px; color: var(--brand-deep); opacity: .38;
  background: var(--hatch-h); border-block-start: 2px solid var(--brand-deep); }

/* ================= RESPONSIVE ================= */
@media (max-width: 1023px) {
  /* tablet keeps all four gates on the one axis — the relationship is the point */
  .dir4 { grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s3); }
  .dir4__n { font-size: 1.5rem; }
  .dir4__gate strong { font-size: .92rem; }
  .bm4__nodes { grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--s2); }
  .bm4__nodes > button.bm4__node { font-size: .84rem; }
  .matrix4__cell { min-block-size: 96px; padding: var(--s4); }
  .hub4__spokes { grid-template-columns: repeat(3, minmax(0,1fr)); row-gap: var(--s6); }
  .hub4__spokes > li:nth-child(n+4) .hub4__spoke { display: none; }
  .layers4__stratum { grid-template-columns: 3rem minmax(0,1fr); margin-inline-start: calc((8 - var(--i)) * 1.4%); }
  .layers4__stratum p { grid-column: 2; }
  .ascent4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ascent4 > li.ascent4__step { margin-block-end: 0; }
  .ascent4__riser { display: none; }
  .stairs4 { grid-template-columns: repeat(3, minmax(0,1fr)); align-items: start; }
  .stairs4__step { padding-block-end: var(--s5); }
  .stairs4__step + .stairs4__step .stairs4__tread::before { display: none; }
  .tiers4__tier { margin-inline-end: calc(var(--i) * 3%); }
}
@media (max-width: 599px) {
  .dir4 { grid-template-columns: 1fr; gap: 0; padding-block-start: 0; }
  .dir4::before { inset-inline: auto; inset-inline-start: 0; inset-block: 0; inline-size: 2px; block-size: 100%; }
  .dir4::after { inset-inline-end: auto; inset-inline-start: -5px; inset-block-start: auto; inset-block-end: -1px; border-inline: 7px solid transparent; border-block-start: 12px solid var(--brand-deep); border-block-end: 0; }
  .dir4 > li.dir4__gate { padding: var(--s4) 0 var(--s4) var(--s5); }
  .dir4__post { inset-block-start: var(--s5); inset-inline-start: 0; inline-size: var(--s5); block-size: 1px; }
  .dir4__post::before { inset-inline-start: -5px; inset-block-start: -4px; background: var(--paper-2); }
  .dir4__n, .dir4__gate strong { padding-inline-start: var(--s5); }
  .dir4__n { font-size: 1.5rem; display: inline-block; margin: 0 0 .25rem; }
  .bm4__chain { padding-block-start: 0; }
  .bm4__line { display: none; }
  .bm4__nodes { grid-template-columns: 1fr; gap: 0; }
  .bm4__nodes > button.bm4__node { grid-template-columns: auto auto minmax(0,1fr); justify-items: start; text-align: start; align-items: center; gap: var(--s3); padding: .7rem 0; min-height: 48px; border-block-end: var(--rule); display: grid; }
  .bm4__node.is-active .bm4__dot { transform: scale(1.15); }
  .bm4__band { margin: var(--s3) 0 0; flex-direction: column; align-items: flex-start; gap: var(--s2); border-block-start: var(--rule-strong); border-radius: 0; padding: var(--s3) 0 0; }
  .bm4__band-label { position: static; transform: none; padding: 0; margin-bottom: var(--s1); }
  .tiers4__tier { grid-template-columns: 1fr; gap: var(--s3); margin-inline-end: 0; padding-inline-end: 0; }
  .matrix4 { grid-template-columns: 1fr; border-start-start-radius: 20px; }
  .matrix4__cell { min-block-size: 0; border-inline-end: 0 !important; border-block-end: var(--rule) !important; }
  .matrix4__cell:last-child { border-block-end: 0 !important; }
  .hub4__spokes { grid-template-columns: 1fr; gap: 0; padding-block-start: var(--s5); }
  .hub4__spokes::before { display: none; }
  .hub4__spokes > li { display: grid; grid-template-columns: auto minmax(0,1fr); gap: var(--s3); text-align: start; padding: var(--s3) 0; border-block-end: var(--rule); }
  .hub4__spoke { display: none; }
  .hub4__n { margin: 0; }
  .hub4__core::after { block-size: var(--s5); }
  .layers4__stratum { margin-inline-start: 0; grid-template-columns: 2.6rem minmax(0,1fr); padding-inline-start: var(--s3); }
  .ascent4 { grid-template-columns: 1fr; gap: 0; margin-block-start: var(--s6); }
  .ascent4 > li.ascent4__step { border-block-start: 0; border-inline-start: 2px solid var(--brand); padding: var(--s3) var(--s4); }
  .stairs4 { grid-template-columns: 1fr; gap: 0; }
  .stairs4__step { flex-direction: row; align-items: baseline; gap: var(--s4); padding: var(--s4) 0 !important; border-block-end: var(--rule); }
  .stairs4__tread { display: none; }
  .stairs4__n { font-size: 1.4rem; }
  .plinth4__pillars { grid-template-columns: 1fr; gap: 0; }
  .plinth4__pillars > li { justify-items: start; text-align: start; padding-block: var(--s4); border-block-end: var(--rule); }
  .plinth4__shaft { display: none; }
  .plinth4__pillars strong { max-width: none; }
  .plinth4 { padding-block-end: 16px; }
  .plinth4__slab { block-size: 16px; }
}