/* ==========================================================================
   FIT BY SCIENCE - SECTION 04: THE METHOD
   The framework (Awareness → Evidence → Consistency → Identity →
   Independence) is a genuine sequence, so structure/scale is used to
   encode it - each word grows on a smooth multiplicative curve, enacting
   the progression as one continuous journey. No icon cards. Science Blue
   appears only in the connecting marks and as a small underline accent
   beneath the destination word - never as the word's own color.
   ========================================================================== */

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

@media (min-width: 1024px) {
  .method { padding-block: calc(var(--space-24) + var(--space-6)); }
}

.method__inner {
  text-align: center;
  max-width: var(--container-max);
  margin-inline: auto;
}

.method__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);
}

.method__subhead {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.3;
  color: rgba(11, 13, 15, 0.55);
}

.method__copy {
  margin-top: var(--space-6);
  margin-inline: auto;
  max-width: 52ch;
  font-size: var(--text-body-lg);
  line-height: var(--lh-body);
  color: rgba(11, 13, 15, 0.62);
}

/* ---- The framework - the centerpiece ----
   An ascending staircase, not a wrapped row: each stage sits further
   right, larger, and more opaque than the last. Independence is the
   destination - deliberately larger, not a wrap accident. */
.method__framework {
  margin-top: var(--space-16);
  margin-inline: auto;
  max-width: 780px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  list-style: none;
  padding: 0;
}

.method__framework li {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1;
  color: var(--obsidian);
}

.method__framework li:not(:last-child)::after {
  content: '↓';
  display: block;
  color: var(--science-blue);
  font-size: 0.9375rem;
  font-weight: 600;
  opacity: 0.55;
}

.method__framework li:nth-child(1) {
  font-size: clamp(1.125rem, 1.9vw, 1.3125rem);
  opacity: 0.42;
  margin-left: 0;
}

.method__framework li:nth-child(1)::after { margin-block: var(--space-2); }

.method__framework li:nth-child(2) {
  font-size: clamp(1.5rem, 2.7vw, 1.8125rem);
  opacity: 0.58;
  margin-left: clamp(0.5rem, 2.6vw, 1.75rem);
}

.method__framework li:nth-child(2)::after { margin-block: var(--space-3); }

.method__framework li:nth-child(3) {
  font-size: clamp(2rem, 3.8vw, 2.5rem);
  opacity: 0.74;
  margin-left: clamp(1rem, 5.2vw, 3.5rem);
}

.method__framework li:nth-child(3)::after { margin-block: var(--space-4); }

.method__framework li:nth-child(4) {
  font-size: clamp(2.625rem, 5vw, 3.4375rem);
  opacity: 0.89;
  margin-left: clamp(1.5rem, 7.8vw, 5.25rem);
}

.method__framework li:nth-child(4)::after { margin-block: var(--space-6); }

.method__framework li:nth-child(5) {
  position: relative;
  font-size: clamp(3.5rem, 6.6vw, 4.75rem);
  opacity: 1;
  color: var(--obsidian);
  margin-left: clamp(2rem, 10.4vw, 7.25rem);
  margin-top: var(--space-2);
}

.method__framework li:nth-child(5)::after {
  content: '';
  display: block;
  width: 3.25rem;
  height: 3px;
  background: var(--science-blue);
  margin-top: var(--space-4);
}

@media (min-width: 1440px) {
  .method__framework li:nth-child(5) { font-size: 5.25rem; }
}

.method__closing {
  margin-top: var(--space-16);
  margin-inline: auto;
  max-width: 44ch;
  font-size: var(--text-body-md);
  line-height: var(--lh-body);
  color: rgba(11, 13, 15, 0.6);
}