/* ============================================================
   Solutions — case study.
   Structured and evidential where Industries is airy and editorial:
   a customer masthead, a metric band, numbered implementation steps,
   a system flow, and the products that power it.
   ============================================================ */

/* ---------- masthead ---------- */
.sol-hero{padding-top:clamp(8rem,13vw,11rem);padding-bottom:clamp(2rem,4vw,3rem)}
.sol-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem}
.sol-customer{font-family:var(--s);font-size:.74rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-text)}
.sol-sector{font-family:var(--s);font-size:.74rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint)}
.sol-hero h1{margin-top:1.1rem;max-width:17ch}
.sol-hero .lead{margin-top:1.3rem;max-width:50ch}

/* the metric band — the case study's headline evidence */
.sol-band{border-block:1px solid var(--line);margin-top:clamp(2.4rem,5vw,3.5rem);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.sol-metric{padding:clamp(1.5rem,3vw,2.2rem) clamp(1rem,2vw,1.6rem);
  border-right:1px solid var(--line)}
.sol-metric:last-child{border-right:0}
@media(max-width:700px){.sol-metric{border-right:0;border-bottom:1px solid var(--line)}
  .sol-metric:last-child{border-bottom:0}}
.sol-metric b{display:block;font-family:var(--d);font-weight:520;line-height:1;
  font-size:clamp(2rem,4.4vw,3rem);color:var(--ink)}
.sol-metric span{display:block;margin-top:.5rem;font-family:var(--s);font-size:.84rem;
  color:var(--soft);line-height:1.45;max-width:22ch}

/* ---------- the case-study spine ---------- */
.sol-part{border-top:1px solid var(--line);padding-block:clamp(2.8rem,5.5vw,4.5rem);
  display:grid;grid-template-columns:14rem 1fr;gap:clamp(1.2rem,3vw,3rem)}
@media(max-width:860px){.sol-part{grid-template-columns:1fr;gap:1.2rem}}
.sol-part-label{font-family:var(--s);font-size:.72rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);padding-top:.55rem}
.sol-part-body{max-width:64ch}
.sol-part-body h2{font-size:clamp(1.6rem,3.1vw,2.25rem);max-width:22ch}
.sol-part-body p{margin-top:1.05rem;font-size:1.02rem;color:var(--soft);line-height:1.68}
.sol-part-body h2+p{margin-top:1.2rem}

/* numbered implementation steps */
.sol-steps{counter-reset:step;margin-top:1.6rem}
.sol-step{counter-increment:step;position:relative;padding-left:3.1rem;
  padding-block:1.1rem;border-top:1px solid var(--line)}
.sol-step:first-child{border-top:0;padding-top:.4rem}
.sol-step::before{content:counter(step);position:absolute;left:0;top:1.15rem;
  width:2rem;height:2rem;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--s);font-size:.78rem;font-weight:700;color:var(--accent-text)}
.sol-step:first-child::before{top:.45rem}
.sol-step h3{font-size:1.08rem;font-family:var(--s);font-weight:700;letter-spacing:-.01em}
.sol-step p{margin-top:.4rem;font-size:.96rem}

/* the system flow — how data actually moves */
.sol-flow{display:flex;flex-wrap:wrap;align-items:stretch;gap:.6rem;margin-top:1.6rem}
.sol-flow-node{flex:1 1 8.5rem;padding:1rem 1.1rem;border-radius:var(--r-md);
  background:var(--paper);border:1px solid var(--line)}
.sol-flow-node b{display:block;font-family:var(--s);font-size:.86rem;font-weight:700;color:var(--ink)}
.sol-flow-node span{display:block;margin-top:.4rem;font-family:var(--s);font-size:.78rem;
  color:var(--soft);line-height:1.5}
.sol-flow-arrow{align-self:center;color:var(--faint);font-size:1.1rem;flex:none}
@media(max-width:700px){.sol-flow-arrow{transform:rotate(90deg)}}

/* outcome list — plain, checked, no card */
.sol-outcomes{margin-top:1.4rem;list-style:none}
.sol-outcomes li{position:relative;padding-left:1.8rem;margin-top:.85rem;
  font-size:1.02rem;color:var(--soft);line-height:1.62}
.sol-outcomes li::before{content:'';position:absolute;left:0;top:.55rem;width:9px;height:9px;
  border-radius:50%;background:var(--accent-text)}
.sol-outcomes li b{color:var(--ink);font-weight:600}

/* a screenshot of the delivered system */
.sol-shot{margin-top:1.6rem;border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--line);background:var(--paper);box-shadow:var(--shadow)}
.sol-shot img{width:100%;height:auto;display:block}
.sol-shot-cap{padding:.85rem 1.1rem;border-top:1px solid var(--line);
  font-family:var(--s);font-size:.8rem;color:var(--soft)}

/* ---------- solutions index ---------- */
.sol-index{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:clamp(2rem,4vw,3rem)}
@media(max-width:820px){.sol-index{grid-template-columns:1fr}}
.sol-tile{display:flex;flex-direction:column;padding:clamp(1.6rem,3vw,2.2rem);
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);
  transition:border-color .25s,transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.sol-tile:hover{border-color:var(--accent-text);transform:translateY(-3px);box-shadow:var(--shadow)}
.sol-tile-customer{font-family:var(--s);font-size:.7rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-text)}
.sol-tile h2{margin-top:.7rem;font-size:clamp(1.35rem,2.4vw,1.7rem);max-width:20ch}
.sol-tile p{margin-top:.8rem;font-size:.98rem;color:var(--soft);line-height:1.62;flex:1}
.sol-tile-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--line)}
.sol-tile-products{display:flex;flex-wrap:wrap;gap:.3rem;font-family:var(--s);
  font-size:.8rem;font-weight:600;color:var(--soft)}
.sol-tile-foot .a{color:var(--accent-text);transition:transform .25s}
.sol-tile:hover .sol-tile-foot .a{transform:translateX(5px)}

/* ---------- proof ----------
   Built as a list, not a feature slot: a second or third customer under the
   same solution is a new entry here, never a rewrite of the page. */
.sol-proof{list-style:none;margin-top:1.4rem}
.sol-proof-item{border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);
  padding:clamp(1.3rem,2.6vw,1.9rem)}
.sol-proof-item+.sol-proof-item{margin-top:.9rem}
.sol-proof-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.6rem 1rem}
.sol-proof-who{font-family:var(--s);font-size:.72rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-text)}
.sol-proof-tag{font-family:var(--s);font-size:.64rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:.2rem .5rem;border-radius:100px;background:var(--line);color:var(--faint)}
.sol-proof-item h3{margin-top:.7rem;font-family:var(--d);font-weight:500;
  font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1.14;max-width:26ch}
.sol-proof-item p{margin-top:.7rem;font-family:var(--s);font-size:.97rem;color:var(--soft);
  line-height:1.62;max-width:56ch}
.sol-proof-figs{display:flex;flex-wrap:wrap;gap:1.2rem 2.2rem;margin-top:1.2rem;
  padding-top:1rem;border-top:1px solid var(--line)}
.sol-proof-fig b{display:block;font-family:var(--d);font-weight:520;font-size:clamp(1.4rem,2.6vw,1.85rem);
  line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.sol-proof-fig span{display:block;margin-top:.3rem;font-family:var(--s);font-size:.78rem;
  color:var(--soft);line-height:1.4;max-width:17ch}
.sol-proof-pending{margin-top:1.1rem;padding-top:1rem;border-top:1px solid var(--line);
  font-family:var(--s);font-size:.9rem;color:var(--faint);font-style:italic;line-height:1.6}
/* the slot that stays open as the work accumulates */
.sol-proof-open{border-style:dashed;background:transparent}
.sol-proof-open p{color:var(--faint)}
/* the proof line under a solution tile (kept as a class so hidden tiles stay valid) */
.sol-tile-proof{margin-top:.5rem;color:var(--accent-text);font-weight:600;font-size:.88rem}