/* 55-about-sections.css — #method scroll reveal + layout (/about/ only) */

.method-step .method-step-image {
  filter: grayscale(1);
  transition: filter 0.7s ease;
}
.method-step.method-step-in-view .method-step-image {
  filter: grayscale(0);
}
.method-step .method-step-overlay {
  opacity: 1;
}
.method-step.method-step-in-view .method-step-overlay {
  opacity: 0;
}

.method-step-dot {
  transition: transform 0.45s ease-out, background-color 0.45s ease-out, box-shadow 0.45s ease-out;
}
.method-step .method-step-dot {
  transform: translate(-50%, -50%) scale(0.8);
  background-color: #94a3b8;
}
.method-step .method-step-dot--third {
  box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.25);
}
.method-step.method-step-in-view .method-step-dot {
  transform: translate(-50%, -50%) scale(1.2) !important;
  background-color: var(--brand-color);
}
.method-step.method-step-in-view .method-step-dot--third {
  background-color: var(--accent-color);
  box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.25);
}

#method.method-section-bg {
  position: relative;
}
#method .method-bg-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}
#method .method-bg-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--surface-section);
  pointer-events: none;
}

#method .method-section-lead {
  text-align: left;
}

#method .method-step-figure {
  box-shadow: 0 4px 20px var(--brand-08), 0 1px 3px rgba(0, 0, 0, 0.04);
  aspect-ratio: 1 !important;
  border-radius: 50% !important;
  max-width: 200px;
}
@media (min-width: 768px) {
  #method .method-step-figure {
    max-width: 260px;
  }
}