/* ==========================================================================
   FIT BY SCIENCE - SECTION 06: PROOF
   Social proof without testimonial cards. The transformation philosophy
   (Before → After → Still After) is built as an ascending photo sequence
   - same escalating-emphasis logic as the Method staircase - closing on
   a single strong statement. All client data is an explicit, labeled
   placeholder; nothing here is fabricated.
   ========================================================================== */

.proof {
  background: var(--bone);
  color: var(--obsidian);
  padding-block: var(--space-16);
}

@media (min-width: 1024px) {
  .proof { padding-block: var(--space-24); }
}

.proof__intro {
  max-width: 40ch;
}

.proof__headline {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1.05;
  font-size: var(--text-display-lg);
  color: var(--obsidian);
}

.proof__subhead {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  line-height: 1.35;
  color: rgba(11, 13, 15, 0.6);
}

.proof__copy {
  margin-top: var(--space-4);
  max-width: 46ch;
  font-size: var(--text-body-md);
  line-height: var(--lh-body);
  color: rgba(11, 13, 15, 0.62);
}

/* ---- Transformation sequence ----
   Images fill the row proportionally (flex-grow ratios), not fixed
   thumbnail widths - the evidence should occupy real territory. The
   outcome line lives inside the Still After stage itself, so photo
   and result read as one proof unit rather than image + separate stats. */
.proof__transformation {
  margin-top: var(--space-12);
}

.proof__sequence {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-6);
  list-style: none;
  padding: 0;
}

.proof__stage {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.proof__stage-image {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(11, 13, 15, 0.14);
  flex-shrink: 0;
  width: 30%;
  aspect-ratio: 3 / 4;
}

/* neutral placeholder grading, warmer than the dark sections since this
   sits on Bone - still abstract, not pretending to be a real photo */
.proof__stage-image::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.proof__stage--before .proof__stage-image {
  width: 22%;
  background: rgba(11, 13, 15, 0.1);
  opacity: 0.55;
}

.proof__stage--after .proof__stage-image {
  width: 30%;
  background: rgba(11, 13, 15, 0.16);
  opacity: 0.78;
}

.proof__stage--still .proof__stage-image {
  width: 46%;
  background: rgba(11, 13, 15, 0.22);
  opacity: 1;
  border-color: var(--science-blue);
  border-width: 2px;
}

.proof__stage-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-body-md);
  color: var(--obsidian);
}

.proof__stage-label span {
  display: block;
  margin-top: 0.125rem;
  font-weight: 500;
  font-size: var(--text-body-sm);
  color: rgba(11, 13, 15, 0.55);
}

.proof__stage-caption {
  margin-top: var(--space-1);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(11, 13, 15, 0.4);
}

/* ---- Outcome line - nested inside Still After, not a separate block ---- */
.proof__outcome {
  margin-top: var(--space-3);
}

.proof__outcome-line {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.3;
  color: rgba(11, 13, 15, 0.62);
  font-style: italic;
}

.proof__outcome-tag {
  margin-top: var(--space-1);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(11, 13, 15, 0.4);
}

/* ---- Closing statement ---- */
.proof__statement {
  margin-top: var(--space-16);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1.2;
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  color: var(--obsidian);
  max-width: 26ch;
  margin-inline: auto;
}

/* ==========================================================================
   Desktop - sequence runs horizontally, stages step up in scale
   ========================================================================== */
@media (min-width: 768px) {
  .proof__sequence {
    flex-direction: row;
    align-items: flex-end;
    gap: var(--space-8);
  }

  .proof__stage {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .proof__stage--before { flex: 0.8; }
  .proof__stage--after { flex: 1.05; }
  .proof__stage--still { flex: 1.45; }

  .proof__stage-image { width: 100%; }
}