/* case.css — /work/ case-study pages only (zero-touch-pipeline, centralized-leasing). Owned by the case-study pages;
   linked from those pages directly so it cannot be lost to a pages.css rewrite. site.css owns tokens and the shell. */
.crumb{font-family:var(--mono);font-size:13px;color:var(--ink-3);padding-top:12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.crumb a{color:var(--ink-3);display:inline-flex;align-items:center;min-height:32px}
.crumb a:hover{color:var(--ink)}
.crumb .sep{color:var(--ink-3);opacity:.6}
.cs-hero{padding:20px 0 40px}
.cs-hero .eyebrow{margin-top:20px}
.cs-hero h1{margin-top:14px;font-size:clamp(2.75rem,5vw + 1rem,4rem);max-width:16ch}
.cs-hero h1 b{color:var(--accent-ink);font-weight:600;font-variant-numeric:tabular-nums}
.cs-hero h1 .to{color:var(--accent);font-weight:400;letter-spacing:0}
.cs-hero .prov{margin-top:16px;font-size:.875rem;color:var(--ink-3);line-height:1.6}
.cs-hero .lede{margin-top:18px}
.cs-body{padding:0 0 64px}
.cs-grid{display:grid;gap:44px}
/* Phones: the main column dissolves into the page grid so the aside (diagrams, screenshot placeholder) can sit right after
   "02 · System", where the copy refers to it. ≥ 900px restores the two-column layout with a sticky aside. */
.cs-main{display:contents}
.cs-main>*{order:0}
.cs-main>#problem,.cs-main>#system{order:-2}
.cs-aside{display:grid;gap:16px;min-width:0;order:-1}
.cs-block .eyebrow{margin-bottom:10px}
.cs-block h2{font-size:clamp(1.5rem,2.4vw + .5rem,2rem);line-height:1.15;margin-bottom:14px}
.cs-block p{color:var(--ink-2);max-width:var(--measure)}
.cs-block p+p{margin-top:12px}
.cs-block p b{color:var(--ink);font-weight:600}
.cs-card{background:var(--surface);border:1px solid var(--hair);border-radius:10px;padding:20px}
.cs-card>h2{margin-bottom:8px}
.cs-card .small{max-width:var(--measure)}
.cs-dl{border-top:1px solid var(--hair);margin-top:14px}
.cs-dl>div{display:grid;gap:4px;padding:14px 0;border-bottom:1px solid var(--hair)}
.cs-dl dt{font-family:var(--mono);font-size:13px;color:var(--ink-3)}
.cs-dl dd{font-size:.9375rem;line-height:1.5;color:var(--ink)}
.cs-dl dd.muted{color:var(--ink-2)}
.pend{display:inline-block;font-family:var(--mono);font-size:12.5px;color:var(--ink-2);border:1px dashed var(--ink-3);border-radius:4px;padding:1px 7px;line-height:1.5;white-space:nowrap}
.cs-kpi{border-top:2px solid var(--accent);padding-top:16px;max-width:var(--measure)}
.cs-kpi .num{font-size:clamp(2.75rem,12vw,4rem);color:var(--ink)}
.cs-kpi .num .to{color:var(--accent);font-weight:400;letter-spacing:0}
.cs-kpi .lab{margin-top:10px;font-size:.9375rem;color:var(--ink-2);line-height:1.4}
.cs-kpi .lab em{font-style:normal;color:var(--ink-3)}
.cs-ctx ul{list-style:none;display:grid;gap:14px;margin-top:14px}
.cs-ctx li{font-size:.9375rem;line-height:1.5;color:var(--ink-2)}
.cs-ctx li b{color:var(--ink);font-weight:600}
.cs-ctx .src{display:block;margin-top:2px;font-size:.8125rem;color:var(--ink-3)}
.cs-ctx .src a{text-decoration:underline;text-underline-offset:3px}
.cs-ctx .src a:hover{color:var(--ink)}
.cs-fig{background:var(--surface);border:1px solid var(--hair);border-radius:10px;padding:20px;margin:0}
.cs-fig figcaption{margin-top:12px;font-family:var(--mono);font-size:12.5px;color:var(--ink-3);line-height:1.5}
.diagram-lg{width:100%;height:auto}
.diagram-lg text{font-family:var(--mono);font-size:12.5px;fill:var(--ink)}
.diagram-lg .b{fill:var(--surface);stroke:var(--ink);stroke-width:1.2}
.diagram-lg g.b rect{fill:var(--surface);stroke:var(--ink);stroke-width:1.2}
.diagram-lg .b.acc{stroke:var(--accent);stroke-width:1.6}
.diagram-lg .e{stroke:var(--ink);stroke-width:1.2;fill:none}
.diagram-lg .m{fill:var(--ink-3);font-size:11.5px}
.diagram-lg .k{fill:var(--accent-ink);font-weight:500}
.diagram-lg .gh{fill:none;stroke:var(--ink-3);stroke-dasharray:3 3;stroke-width:1}
.diagram-lg .gt{fill:var(--ink-3);font-size:11.5px}
.cs-voice{border-left:2px solid var(--accent);padding-left:18px}
.cs-voice p{color:var(--ink)}
.cs-cta{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.cs-cta .btn{text-align:center}
.cs-cta .link{color:var(--ink-2);display:inline-block;padding:6px 0}
.cs-cta .link:hover{color:var(--ink)}
.cs-next{display:flex;justify-content:space-between;align-items:center;gap:16px;border:1px solid var(--hair);border-radius:10px;padding:18px 20px;background:var(--surface);min-height:72px}
.cs-next .k{font-family:var(--mono);font-size:13px;color:var(--ink-3)}
.cs-next b{display:block;font-weight:600;margin-top:4px;letter-spacing:-.015em;line-height:1.3}
.cs-next .go{color:var(--accent-ink);font-weight:500;flex:none}
.cs-next:hover .go{text-decoration:underline;text-underline-offset:3px}
.cs-contact .grid{display:grid;gap:20px}
.cs-contact .sec-head{margin-bottom:0;display:block}
.cs-contact .sec-head .sub{text-align:left;margin-top:12px;max-width:var(--measure)}
.cs-contact .reach{margin-top:8px}
.cs-contact .btn{margin-top:8px}
/* diagram edges draw in on scroll; static under reduced motion or the footer toggle */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    html:not([data-motion="reduce"]) .diagram-lg .e{stroke-dasharray:700;stroke-dashoffset:700;animation:cs-draw linear both;animation-timeline:view();animation-range:entry 5% entry 60%}
  }
}
@keyframes cs-draw{to{stroke-dashoffset:0}}
@media (min-width:900px){
  .crumb{padding-top:8px}
  .cs-hero{padding:40px 0 56px}
  .cs-hero .prov{margin-top:20px}
  .cs-body{padding-bottom:120px}
  .cs-grid{grid-template-columns:7fr 5fr;gap:64px;align-items:start}
  .cs-aside{position:sticky;top:32px;order:0}
  .cs-main{display:grid;gap:64px;min-width:0}
  .cs-card{padding:28px}
  .cs-cta{flex-direction:row;align-items:center;gap:28px}
  .cs-contact .grid{grid-template-columns:5fr 7fr;gap:64px;align-items:start}
  .cs-contact .reach{max-width:420px}
}