/* Stack: a bounded sticky introduction and five consistent feature cards. */
.osc { --ink:var(--text); --soft:var(--muted); --panel:#171a17; --panel-hi:#20251f; --edge:#323a30; --green:var(--brand); --green-ink:#11260c; }
.osc { grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:clamp(32px,4vw,72px); padding:var(--section-y) var(--gutter); }
.osc.is-on { display:grid; }
.osc-side { position:sticky; top:154px; align-self:start; }
.osc-label { font:500 11px Inter,sans-serif; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); }
.osc-title { margin-top:24px; font-size:clamp(50px,5.2vw,94px); line-height:.96; letter-spacing:-.02em; }
.osc-title span { display:block; }
.osc-title br { display:none; }                /* "One System, / Five Jobs." — two lines, not four */
.osc-blurb { margin-top:28px; max-width:40ch; color:var(--muted); font-size:14px; line-height:1.7; }
.osc-list { display:flex; flex-direction:column; gap:24px; min-width:0; }
.osc-card { position:relative; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:24px; padding:24px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line); margin-left:calc(var(--step) * 10px); }
.osc-art { position:relative; height:340px; min-width:0; border-radius:12px; overflow:clip; background:var(--bg); border:1px solid var(--line); }
.osc-fit { position:absolute; width:460px; height:440px; left:50%; top:50%; margin:-220px 0 0 -230px; transform-origin:center; }
.osc-copy { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; min-width:0; }
.osc-copy .num { font:500 10px Inter,sans-serif; letter-spacing:.15em; color:var(--accent); margin-bottom:20px; }
.osc-copy h3 { font:600 clamp(21px,1.65vw,28px)/1.15 Inter,sans-serif; letter-spacing:-.035em; }
.osc-copy p { margin-top:16px; color:var(--muted); font-size:14px; line-height:1.7; max-width:30ch; }
.osc-more { display:inline-flex; gap:8px; margin-top:18px; font:600 14px Inter,sans-serif; color:var(--text); }
.osc-more::after { content:"→"; color:var(--accent); transition:transform .4s var(--ease); }
.osc-more:hover::after { transform:translateX(4px); }
@media (min-width:1500px) { .osc-art { height:390px; } .osc-card { gap:32px; padding:28px; } .osc-copy p { font-size:16px; } }
@media (min-width:901px) and (max-width:1150px) {
 .osc { grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr); gap:28px; }
 .osc-card { grid-template-columns:1fr; margin-left:0; gap:24px; }
 .osc-art { height:360px; }
 .osc-copy .num { margin-bottom:12px; }
 .osc-copy p { max-width:48ch; margin-top:10px; }
}
@media (max-width:900px) {
 .osc.is-on { grid-template-columns:1fr; gap:var(--head-gap); }
 .osc-side { position:static; }
 .osc-title { font-size:clamp(48px,8vw,72px); max-width:14ch; }
 .osc-title br { display:none; }

 .osc-blurb { max-width:48ch; margin-top:20px; }
 .osc-card { margin-left:0; }
}
@media (max-width:600px) {
 .osc-card { grid-template-columns:1fr; gap:22px; padding:16px; }
 .osc-art { height:300px; }
 .osc-copy { padding:0 4px 8px; }
 .osc-copy .num { margin-bottom:12px; }
 .osc-copy p { max-width:40ch; margin-top:12px; }
 .osc-list { gap:20px; }
}

@media (min-width:901px) and (max-height:700px) { .osc-side { position:static; } }

/* Stacking cards (desktop, tall enough screens): every card pins at the same spot as the
   sticky left column, and the next card scrolls up and slides over it. The covered card
   recedes slightly (demos/driven-stack.js). Later cards paint on top by DOM order. */
@media (min-width:901px) and (min-height:701px) {
  .osc-card { position:sticky; top:154px; transform-origin:50% 0; }
  .osc-list { padding-bottom:12vh; }
}