/* Brand Identity · construct — a drawing board whose SVG layers change with data-step (0–4). */
.cbi-cx__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--cbi-gap-l);row-gap:56px;align-items:start}
.cbi-cx__board{position:relative;min-width:0;margin:26px;padding:clamp(16px,2vw,26px);background:var(--paper);box-shadow:var(--sh-1)}
.cbi-cx__bar{display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);line-height:1.3}
.cbi-cx__count b{font-weight:500;color:var(--ink)}
.cbi-cx__svg{display:block;width:100%;height:auto;margin-top:12px}
.cbi-cx__svg text{font-family:var(--f);font-size:12px;letter-spacing:.08em;fill:var(--muted)}
.cbi-cx__svg :is(g,circle,path,rect,line){transform-box:fill-box;transform-origin:center}

.cbi-cx__svg .l-grid line{stroke:var(--line-2);stroke-width:1}
.cbi-cx__svg .l-grid line.mj{stroke:var(--line-3)}
.cbi-cx__svg .l-units .frame{stroke:var(--ink);stroke-width:1}
.cbi-cx__svg .l-geo :is(circle,line){stroke:var(--blue);stroke-width:1.2;stroke-dasharray:5 5}
.cbi-cx__svg .l-outline :is(circle,path){stroke:var(--ink);stroke-width:2}
.cbi-cx__svg .l-fill :is(circle,path){fill:var(--ink)}
.cbi-cx__svg .l-fill .b{fill:var(--blue)}
.cbi-cx__svg .l-fill .c-counter{fill:var(--paper)}
.cbi-cx__svg .l-optic .dash,.cbi-cx__svg .l-clear .dash{stroke:var(--blue);stroke-width:1.2;stroke-dasharray:6 4}
.cbi-cx__svg .l-optic .lead{stroke:var(--ink);stroke-width:1.2}
.cbi-cx__svg .l-optic text{fill:var(--ink)}
.cbi-cx__svg .l-clear .xbox{fill:var(--blue-wash-2);stroke:var(--blue);stroke-width:1}
.cbi-cx__svg .l-clear .x{font-size:18px;fill:var(--blue);font-style:italic}
.cbi-cx__svg .l-min line{stroke:var(--ink);stroke-width:1}
.cbi-cx__svg .l-min text{fill:var(--ink)}

/* layer visibility per step */
.cbi-cx__svg>g{opacity:0;transition:opacity .6s var(--e),transform .8s var(--e)}
.cbi-cx__svg .l-grid{opacity:1}
[data-step="0"] .l-units,[data-step="1"] .l-units{opacity:1}
[data-step="1"] .l-geo,[data-step="1"] .l-outline{opacity:1}
[data-step="2"] .l-geo{opacity:.35}
[data-step="2"] .l-fill,[data-step="3"] .l-fill{opacity:1}
[data-step="2"] .l-optic,[data-step="3"] .l-clear,[data-step="4"] .l-min{opacity:1}
.cbi-cx__svg .l-fill .c-main,.cbi-cx__svg .l-fill .c-counter{transition:transform .8s var(--e) .2s}
[data-step="2"] .l-fill .c-main,[data-step="3"] .l-fill .c-main,[data-step="4"] .l-fill .c-main{transform:scale(1.04)}
[data-step="2"] .l-fill .c-counter,[data-step="3"] .l-fill .c-counter{transform:scale(1.06)}
.cbi-cx__svg .l-clear .xbox{transform:scale(0);transition:transform .6s var(--e) .25s}
[data-step="3"] .l-clear .xbox{transform:none}
.cbi-cx__svg .l-min>g{transition:transform .8s var(--e),opacity .6s var(--e)}
.cbi-cx__svg .l-outline{transform:scale(.96)}
[data-step="1"] .l-outline{transform:none}

.cbi-cx__track{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:14px}
.cbi-cx__track i{height:3px;background:var(--line);transition:background var(--d2) var(--e-io)}
.cbi-cx__track i.is-on{background:var(--ink)}

/* side: step list, pane, readouts, nav */
.cbi-cx__side{min-width:0;display:flex;flex-direction:column;gap:28px;padding-top:26px}
.cbi-cx__steps{display:flex;flex-direction:column;border-top:1px solid var(--ink)}
.cbi-cx__step{display:flex;align-items:center;gap:14px;width:100%;min-height:48px;padding:10px 2px;border-bottom:1px solid var(--line);text-align:left;font-size:var(--t-body);font-weight:500;color:var(--muted);transition:color var(--d1) var(--e-io)}
.cbi-cx__step span{font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.1em;color:var(--faint);min-width:24px}
.cbi-cx__step:hover,.cbi-cx__step[aria-pressed="true"]{color:var(--ink)}
.cbi-cx__step[aria-pressed="true"] span{color:var(--blue)}
.cbi-cx__panes{display:grid}
.cbi-cx__pane{grid-area:1 / 1;min-width:0;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .45s var(--e),transform .45s var(--e),visibility 0s linear .45s}
.cbi-cx__pane.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .45s var(--e),transform .45s var(--e),visibility 0s}
.cbi-cx__t{font-family:var(--f-h);font-size:clamp(1.45rem,2vw,1.85rem);font-weight:500;letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
.cbi-cx__d{margin-top:12px;font-size:var(--t-body);line-height:1.65;color:var(--txt);max-width:46ch}
.cbi-cx__ro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:22px;padding-top:16px;border-top:1px dashed var(--line-3)}
.cbi-cx__ro dt{font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);line-height:1.3}
.cbi-cx__ro dd{margin-top:8px;font-family:var(--f);font-size:var(--t-sm);font-weight:500;color:var(--ink);line-height:1.35}
.cbi-cx__nav{display:flex;flex-wrap:wrap;gap:10px}

@media (max-width:1023px){.cbi-cx__grid{grid-template-columns:minmax(0,1fr)}.cbi-cx__side{padding-top:0}}
@media (max-width:600px){
  .cbi-cx__board{margin:24px 24px 0}
  .cbi-cx__bar{flex-wrap:wrap}
  .cbi-cx__svg text{font-size:15px}
}