/* ════════════ STUDIO ════════════ */
/* (.page-hero styles are shared — see main.css) */

/* Pipeline */
.pipeline { background: var(--c-ink); padding: var(--section) var(--pad-x); }
.pipe-step {
  display: grid; grid-template-columns: 120px 1fr auto; gap: clamp(1.5rem, 5vw, 6rem);
  align-items: center;
  padding: clamp(2.5rem, 6vh, 5rem) 0;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.pipe-step__media { justify-self: end; }
.pipe-step__img {
  width: clamp(140px, 16vw, 240px);
  height: clamp(140px, 16vw, 240px);
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.pipe-step__idx { font-family: var(--font-display); font-style: italic; font-size: var(--t-md); color: var(--c-grey-dim); }
.pipe-step__title {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(28px, 4vw, 56px); line-height: 1.05; margin-bottom: 1.4rem;
}
.pipe-step__body { max-width: 60ch; color: var(--c-grey-mid); font-size: var(--t-body); }
.pipe-step__note {
  margin-top: 1rem; display: inline-block;
  font-size: var(--t-label); letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-grey-dim);
}

/* Stats */
.stats { background: var(--c-primary); padding: var(--section) var(--pad-x); }
.stats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 5vw, 5rem); }
.stat { text-align: left; }
.stat__num {
  font-family: var(--font-ui); font-weight: 500;
  font-size: clamp(56px, 10vw, 150px); line-height: 1; letter-spacing: -0.03em;
}
.stat__label { margin-top: 1rem; max-width: 18ch; color: var(--c-grey-mid); font-size: var(--t-sm); }
.stats__foot { margin-top: clamp(3rem, 7vh, 6rem); }

/* Output standard */
.output { background: var(--c-ink); padding: var(--section) var(--pad-x); }
/* fixed states only: 1 col < 768, 2×2 to 1279, 1×4 ≥1280 — never 3-up */
.output__grid {
  display: grid; grid-template-columns: 1fr;
  align-items: stretch;
  gap: 1px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.1);
}
@media (min-width: 768px)  { .output__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .output__grid { grid-template-columns: repeat(4, 1fr); } }
.output__cell { background: var(--c-ink); padding: 2.2rem; }
.output__k { font-family: var(--font-display); font-style: italic; font-size: var(--t-md); margin-bottom: .4rem; }
.output__v { color: var(--c-grey-mid); font-size: var(--t-sm); }

@media (max-width: 768px) {
  /* image stacks ABOVE its step text, centered, uniform diameter */
  .pipe-step { grid-template-columns: 1fr; gap: 1.4rem; }
  .pipe-step__media { order: -1; justify-self: center; }
  .pipe-step__img { width: 180px; height: 180px; aspect-ratio: 1; }
  .stats__grid { grid-template-columns: 1fr; }
}