/* PRAXIA Case Study v1
   Visual system for consulting case studies.
*/
.px-cs-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-top: calc(var(--header-h) + clamp(3rem, 6vw, 6rem));
  padding-bottom: clamp(4rem, 7vw, 7rem);
  background:
    radial-gradient(70% 70% at 88% 10%, rgba(76,122,99,.10), transparent 62%),
    radial-gradient(58% 58% at 8% 8%, rgba(195,171,137,.16), transparent 65%),
    var(--px-ivory);
}
.px-cs-hero__grid {
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(18rem,.8fr);
  gap:clamp(2rem,5vw,5.5rem);
  align-items:end;
}
.px-cs-hero h1 {
  max-width: 15ch;
  font-size:clamp(3rem,6vw,6rem);
  line-height:.96;
  letter-spacing:-.055em;
}
.px-cs-hero__lead {
  max-width: 58ch;
  margin-top:1.5rem;
  color:var(--text-soft);
  font-size:clamp(1.05rem,1rem + .45vw,1.35rem);
  line-height:1.55;
}
.px-cs-hero__aside {
  display:grid;
  gap:.75rem;
  padding:1.35rem;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.58);
  box-shadow:var(--sh-sm);
  backdrop-filter:blur(12px);
}
.px-cs-hero__aside dl {
  display:grid;
  grid-template-columns:7.5rem 1fr;
  gap:.8rem;
  margin:0;
  padding:.75rem 0;
  border-bottom:1px solid var(--line);
}
.px-cs-hero__aside dl:last-child { border-bottom:0; }
.px-cs-hero__aside dt {
  color:var(--text-muted);
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.px-cs-hero__aside dd {
  margin:0;
  color:var(--text);
  font-size:.92rem;
  font-weight:650;
  line-height:1.45;
}

.px-cs-strip {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.42);
}
.px-cs-strip__grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.px-cs-kpi {
  min-height:132px;
  padding:1.35rem 1.25rem;
  border-right:1px solid var(--line);
}
.px-cs-kpi:last-child { border-right:0; }
.px-cs-kpi__eyebrow {
  display:block;
  color:var(--text-muted);
  font-family:var(--font-mono);
  font-size:.66rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.px-cs-kpi strong {
  display:block;
  margin-top:.8rem;
  color:var(--text);
  font-size:clamp(1.1rem,1rem + .35vw,1.35rem);
  line-height:1.2;
}
.px-cs-kpi p {
  margin:.5rem 0 0;
  color:var(--text-muted);
  font-size:.83rem;
  line-height:1.5;
}

.px-cs-section {
  padding:clamp(4rem,7vw,7rem) 0;
}
.px-cs-section--alt { background:var(--px-sand-soft); }
.px-cs-head {
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(18rem,1.2fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:start;
  margin-bottom:clamp(2.5rem,5vw,4.5rem);
}
.px-cs-head h2 {
  max-width:14ch;
  margin:0;
  font-size:clamp(2rem,3.5vw,3.6rem);
  line-height:1.02;
  letter-spacing:-.045em;
}
.px-cs-head p {
  max-width:60ch;
  margin:0;
  color:var(--text-soft);
  font-size:clamp(1rem,.95rem + .25vw,1.15rem);
  line-height:1.68;
}

.px-cs-summary {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
}
.px-cs-summary__card {
  position:relative;
  min-height:260px;
  padding:1.65rem;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface-card);
  box-shadow:var(--sh-sm);
}
.px-cs-summary__card::before {
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:3px;
  background:var(--px-flow);
}
.px-cs-summary__card:nth-child(2)::before { background:var(--px-copper); }
.px-cs-summary__card:nth-child(3)::before { background:var(--px-navy); }
.px-cs-summary__n {
  display:block;
  margin-bottom:2.4rem;
  color:var(--text-muted);
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.1em;
}
.px-cs-summary__card h3 {
  margin:0 0 .8rem;
  font-size:1.45rem;
  letter-spacing:-.025em;
}
.px-cs-summary__card p {
  margin:0;
  color:var(--text-muted);
  font-size:.92rem;
  line-height:1.62;
}

.px-cs-flow {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:.6rem;
  align-items:stretch;
}
.px-cs-flow__step {
  position:relative;
  min-height:160px;
  padding:1.15rem;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--px-white);
}
.px-cs-flow__step:not(:last-child)::after {
  content:"→";
  position:absolute;
  top:50%;
  right:-.55rem;
  z-index:2;
  width:1.1rem;
  height:1.1rem;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--px-ivory);
  color:var(--px-flow);
  font-weight:800;
  transform:translateY(-50%);
}
.px-cs-flow__step small {
  display:block;
  color:var(--text-muted);
  font-family:var(--font-mono);
  font-size:.65rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.px-cs-flow__step strong {
  display:block;
  margin:.9rem 0 .55rem;
  color:var(--text);
  font-size:1rem;
}
.px-cs-flow__step p {
  margin:0;
  color:var(--text-muted);
  font-size:.78rem;
  line-height:1.5;
}

.px-cs-equation {
  margin-top:2rem;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:.6rem;
  align-items:center;
}
.px-cs-equation__cell {
  padding:1rem;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--px-white);
  text-align:center;
}
.px-cs-equation__cell span {
  display:block;
  color:var(--text-muted);
  font-size:.72rem;
}
.px-cs-equation__cell strong {
  display:block;
  margin-top:.35rem;
  font-size:.95rem;
}
.px-cs-equation__op {
  color:var(--text-muted);
  text-align:center;
  font-size:1.2rem;
  font-weight:700;
}

.px-cs-metrics {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem;
}
.px-cs-metric {
  min-height:250px;
  padding:1.5rem;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--px-white);
}
.px-cs-metric__icon {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  margin-bottom:1.4rem;
  border-radius:12px;
  background:var(--accent-tint);
  color:var(--accent-strong);
  font-family:var(--font-mono);
  font-size:.7rem;
  font-weight:700;
}
.px-cs-metric h3 {
  margin:0 0 .65rem;
  font-size:1.1rem;
}
.px-cs-metric p {
  margin:0;
  color:var(--text-muted);
  font-size:.84rem;
  line-height:1.56;
}
.px-cs-metric__formula {
  margin-top:1rem;
  padding-top:1rem;
  border-top:1px solid var(--line);
  color:var(--text-soft);
  font-family:var(--font-mono);
  font-size:.68rem;
  line-height:1.5;
}

.px-cs-signalboard {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
}
.px-cs-signalcol {
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--px-white);
}
.px-cs-signalcol__head {
  padding:1.25rem 1.35rem;
  border-bottom:1px solid var(--line);
  background:var(--px-sand-soft);
}
.px-cs-signalcol__head small {
  display:block;
  color:var(--text-muted);
  font-family:var(--font-mono);
  font-size:.65rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.px-cs-signalcol__head strong {
  display:block;
  margin-top:.4rem;
  font-size:1.05rem;
}
.px-cs-signal {
  padding:1.15rem 1.35rem;
  border-bottom:1px solid var(--line);
}
.px-cs-signal:last-child { border-bottom:0; }
.px-cs-signal b {
  display:block;
  margin-bottom:.35rem;
  color:var(--text);
  font-size:.88rem;
}
.px-cs-signal span {
  display:block;
  color:var(--text-muted);
  font-size:.78rem;
  line-height:1.5;
}

.px-cs-decision {
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--px-white);
}
.px-cs-decision__row {
  display:grid;
  grid-template-columns:.9fr 1.2fr 1fr;
  gap:0;
}
.px-cs-decision__row + .px-cs-decision__row { border-top:1px solid var(--line); }
.px-cs-decision__row--head {
  background:var(--px-navy);
  color:var(--px-ivory);
}
.px-cs-decision__cell {
  padding:1.15rem 1.25rem;
  border-right:1px solid var(--line);
  font-size:.84rem;
  line-height:1.5;
}
.px-cs-decision__row--head .px-cs-decision__cell {
  border-color:rgba(255,255,255,.12);
  font-family:var(--font-mono);
  font-size:.65rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.px-cs-decision__cell:last-child { border-right:0; }
.px-cs-decision__cell strong { color:var(--text); }
.px-cs-decision__row--head strong { color:inherit; }

.px-cs-output {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(18rem,.7fr);
  gap:1rem;
}
.px-cs-output__panel {
  padding:1.5rem;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--px-white);
}
.px-cs-output__panel h3 {
  margin:0 0 1rem;
  font-size:1.2rem;
}
.px-cs-output__stack {
  display:grid;
  gap:.6rem;
}
.px-cs-output__item {
  display:grid;
  grid-template-columns:2.2rem 1fr;
  gap:.8rem;
  align-items:start;
  padding:.85rem 0;
  border-bottom:1px solid var(--line);
}
.px-cs-output__item:last-child { border-bottom:0; }
.px-cs-output__item i {
  width:2.2rem;
  height:2.2rem;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--accent-tint);
  color:var(--accent-strong);
  font:700 .7rem/1 var(--font-mono);
  font-style:normal;
}
.px-cs-output__item strong { display:block; font-size:.9rem; }
.px-cs-output__item span { display:block; margin-top:.25rem; color:var(--text-muted); font-size:.78rem; line-height:1.5; }

.px-cs-principle {
  padding:1.6rem;
  border-radius:var(--r-lg);
  background:var(--px-navy);
  color:var(--px-ivory);
}
.px-cs-principle small {
  color:rgba(251,248,243,.62);
  font-family:var(--font-mono);
  font-size:.66rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.px-cs-principle blockquote {
  margin:1.4rem 0 0;
  font-size:clamp(1.25rem,1.05rem + .75vw,1.75rem);
  line-height:1.35;
  letter-spacing:-.025em;
}
.px-cs-principle p {
  margin:1.25rem 0 0;
  color:rgba(251,248,243,.68);
  font-size:.82rem;
  line-height:1.55;
}

@media (max-width: 980px) {
  .px-cs-hero__grid,
  .px-cs-head,
  .px-cs-output { grid-template-columns:1fr; }
  .px-cs-strip__grid,
  .px-cs-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .px-cs-kpi:nth-child(2) { border-right:0; }
  .px-cs-kpi:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .px-cs-flow { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .px-cs-flow__step:nth-child(3)::after { display:none; }
}

@media (max-width: 720px) {
  .px-cs-hero { padding-top:calc(var(--header-h) + 2.5rem); }
  .px-cs-hero h1 { font-size:clamp(2.6rem,12vw,4.25rem); }
  .px-cs-hero__aside dl { grid-template-columns:1fr; gap:.35rem; }
  .px-cs-strip__grid,
  .px-cs-summary,
  .px-cs-metrics,
  .px-cs-signalboard,
  .px-cs-flow { grid-template-columns:1fr; }
  .px-cs-kpi { border-right:0; border-bottom:1px solid var(--line); }
  .px-cs-kpi:last-child { border-bottom:0; }
  .px-cs-flow__step::after { display:none !important; }
  .px-cs-equation {
    grid-template-columns:1fr;
  }
  .px-cs-equation__op { transform:rotate(90deg); }
  .px-cs-decision { overflow-x:auto; }
  .px-cs-decision__row { min-width:760px; }
}