/* Editable diagrams: all labels use the same live type as the website. */
.sustain-leap,.sustain-governance { --diagram-red: #d20b17; box-sizing: border-box; color: #30343a; background: #fff; font-family: var(--site-title-font); font-size: 16px; line-height: 1.65; }
.sustain-leap *,.sustain-governance * { box-sizing: border-box; font-family: inherit; }
.sustain-leap { display: grid; grid-template-columns: 92px repeat(4,minmax(0,1fr)); gap: 14px 16px; min-width: 1100px; padding: 28px 24px 30px 10px; }
.sl-label { display: flex; align-items: center; justify-content: center; color: var(--diagram-red); font-weight: 600; letter-spacing: .06em; }
.sl-vision { grid-column: 2 / -1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; min-height: 134px; padding: 54px 24px 18px; clip-path: polygon(50% 0,100% 56%,100% 100%,0 100%,0 56%); background: var(--diagram-red); color: #fff; font-size: 24px; font-weight: 600; line-height: 1.5; }
.sl-vision span { color: inherit; font-size: 16px; font-weight: 400; }
.sl-principles { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: center; min-height: 58px; background: #eb9871; color: #fff; text-align: center; }
.sl-goal { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 82px; padding: 14px 10px; border: 2px solid var(--diagram-red); color: var(--diagram-red); font-size: 22px; font-weight: 600; line-height: 1.45; }
.sl-goal span { font-size: 15px; font-weight: 400; }
.sl-path { min-height: 154px; padding: 18px 16px 16px 36px; margin: 0; background: #fceee5; list-style: disc; }
.sl-path li { margin: 6px 0; padding-left: 2px; list-style: disc; font-size: 16px; line-height: 1.85; }
.sl-sdgs { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 60px; }
.sl-sdg { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 43px; height: 48px; border-radius: 3px; background: var(--sdg-color); color: #fff; font-size: 19px; font-weight: 600; line-height: 1.1; }
.sl-sdg small { color: inherit; font-size: 9px; font-weight: 400; letter-spacing: .06em; }
.sl-capabilities { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); }
.sl-capabilities span { display: flex; align-items: center; justify-content: center; min-height: 58px; padding: 12px 8px; background: var(--diagram-red); color: #fff; font-weight: 600; }
.sustain-governance { min-width: 1200px; padding: 30px 24px 34px 12px; }
.sg-row { display: grid; grid-template-columns: 82px minmax(0,1fr); gap: 24px; align-items: stretch; }
.sg-level { display: flex; align-items: center; justify-content: center; min-height: 48px; background: var(--diagram-red); color: #fff; font-size: 17px; font-weight: 600; }
.sg-head { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sg-node { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 10px 18px; border: 1px solid var(--diagram-red); color: var(--diagram-red); text-align: center; font-size: 18px; font-weight: 500; }
.sg-row:first-child .sg-node { background: #fff8f8; }
.sg-row--operations .sg-node { border-color: #e0e2e5; }
.sg-link { display: flex; justify-content: space-evenly; min-height: 56px; margin-left: 106px; color: var(--diagram-red); }
.sg-direction { position: relative; display: flex; align-items: center; gap: 14px; min-height: 56px; font-size: 14px; }
.sg-direction::after { content: ''; display: block; height: 42px; border-left: 1px solid var(--diagram-red); }
.sg-direction::before { content: ''; position: absolute; right: -3px; bottom: 6px; width: 6px; height: 6px; border-right: 1px solid var(--diagram-red); border-bottom: 1px solid var(--diagram-red); transform: rotate(45deg); }
.sg-direction--up::before { top: 6px; bottom: auto; transform: rotate(225deg); }
.sg-fork { display: block; width: calc(100% - 106px); height: 50px; margin-left: 106px; overflow: visible; color: var(--diagram-red); }
.sg-execution { position: relative; display: grid; grid-template-columns: 1.65fr 1fr 1fr; gap: 20px; }
.sg-group { position: relative; min-width: 0; }
.sg-group__lead { margin: 0 0 9px; color: var(--diagram-red); font-size: 13px; line-height: 1.5; text-align: center; }
.sg-group__title { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 9px 8px; margin: 0 0 30px; border: 1px solid #e0e2e5; color: #3c4249; font-size: 18px; font-weight: 600; }
.sg-group--projects .sg-group__title { border-style: dashed; }
.sg-build { position: absolute; z-index: 1; left: -37px; top: 78px; color: var(--diagram-red); background: #fff; font-size: 12px; line-height: 1.3; }
.sg-build::before { content: ''; position: absolute; left: -14px; right: -14px; top: -5px; border-top: 1px solid var(--diagram-red); }
.sg-build::after { content: ''; position: absolute; right: -13px; top: -8px; width: 6px; height: 6px; border-right: 1px solid var(--diagram-red); border-top: 1px solid var(--diagram-red); transform: rotate(45deg); }
.sg-cells { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 0; margin: 0; list-style: none; }
.sg-group--functions .sg-cells { grid-template-columns: repeat(5,minmax(0,1fr)); }
.sg-cells li { display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 9px 5px; border: 1px solid #e0e2e5; background: #fafafa; color: #51565d; font-size: 13px; line-height: 1.55; text-align: center; overflow-wrap: anywhere; }
.sg-group--business .sg-cells li { min-height: 86px; }
.sg-note { margin: 14px 0 0; color: #777e85; font-size: 12px; line-height: 1.8; text-align: left; }
.sg-enable { position: relative; margin: 26px 0 0 106px; border-top: 1px solid var(--diagram-red); color: var(--diagram-red); text-align: center; }
.sg-enable::before,.sg-enable::after { content: ''; position: absolute; top: -12px; height: 12px; border-left: 1px solid var(--diagram-red); }
.sg-enable::before { left: 0; }
.sg-enable::after { right: 0; }
.sg-enable span { position: relative; top: -14px; padding: 0 18px; background: #fff; font-size: 14px; }
@media (max-width: 1380px) { .sustain-diagram__hint { display: block; } }
@media print { .sustain-diagram__scroll { overflow: visible; } .sustain-leap,.sustain-governance { min-width: 0; font-size: 10px; } }