/* =========================
   Base & Background
   ========================= */
html, body {
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: 'Playfair Display', serif;
  color: #000;
  overflow-x: hidden;               /* prevent side-scroll artifacts */
  background:
    linear-gradient(
      to bottom,
      rgba(163,209,169,.55) 0%,
      rgba(36, 59, 39, 0.35) 10%,
      rgba(106, 42, 42, 0.55) 50%,
      rgba(38, 108, 71, 0.42) 75%,
      #000 100%
    );
  background-repeat: no-repeat;
  background-size: 100% auto;
}

header, main, section, footer {
  position: relative;
  z-index: 1;
  background: transparent;
}

/* =========================
   Title
   ========================= */
.page-title {
  margin: 6vh 0 .75rem;
  font-weight: 400;
  font-size: clamp(32px, 5vw, 56px);
  color: #fff;
  letter-spacing: .5px;
}
.page-title::after {
  content: "";
  display: block;
  margin: 12px auto 0;
  width: 68px; height: 3px;
  background: linear-gradient(90deg, transparent, #8cff9e 30%, #8cff9e 70%, transparent);
  border-radius: 999px;
}

/* =========================
   Methods Timeline
   ========================= */
.method-section {
  position: relative;              /* contains canvas */
  padding: 10vh 5vw 12vh;          /* bottom padding so footer is flush */
  overflow: visible;               /* never clip steps */
}

.method-timeline {
  position: relative;
  z-index: 1;                      /* above canvas */
  width: min(900px, 86vw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 9vh;
}

/* Step block */
.method-step {
  position: relative;
  text-align: center;
  opacity: .38;
  transform: scale(.97);
  transition: opacity .35s ease, transform .35s ease;
  --step-progress: 0;
  color: #111;
}
.method-step.active {
  opacity: 1;
  transform: scale(1);
}

/* vertical connectors */
.method-step::before,
.method-step::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 2px;
  height: 6vh;
  transform: translateX(-50%);
  z-index: -1;
}
.method-step::before {
  top: -6vh;
  background: linear-gradient(to bottom, rgba(160,160,160,.55), rgba(160,160,160,0));
}
.method-step::after {
  bottom: -6vh;
  background: linear-gradient(to top, rgba(160,160,160,.55), rgba(160,160,160,0));
}
.method-step:first-child::before { display: none; }
.method-step:last-child::after   { display: none; }

/* titles */
.method-step h3 {
  margin: 0 0 10px;
  font-size: clamp(16px, 1.2vw, 18px);
  font-weight: 600;
  color: #333;
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
}
.method-step h3::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  height: var(--emph-underline-thickness);
  width: calc(60% * var(--step-progress));
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, var(--brand-green), transparent 70%);
  border-radius: 999px;
}

/* sentence */
.method-line {
  margin: 0;
  font-weight: 300;
  line-height: var(--method-line-height);
  font-size: var(--method-line-size);
  display: inline-block;
  padding-bottom: 12px;
  position: relative;
  color: #000;
}
.method-line::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  height: var(--emph-underline-thickness);
  width: 62%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, var(--brand-green), rgba(255,255,255,0) 70%);
  border-radius: 999px;
  opacity: 0;
  transition: opacity 200ms ease;
}


.method-step.active .method-line::before { opacity: 1; }

/* key-phrases (green underline) */
.emph.uline { position: relative; display: inline-block; white-space: nowrap; }
.emph.uline::after {
  content: "";
  position: absolute;
  left: 0; bottom: calc(-1 * var(--emph-underline-offset));
  height: var(--emph-underline-thickness);
  width: calc(var(--reveal, 0) * 100%);   /* JS sets this on the spans */
  background: radial-gradient(ellipse at center, var(--brand-green), transparent 70%);
  transition: width 280ms ease;
  pointer-events: none;
}
.method-step.past .emph.uline::after { width: 0 !important; }

/* =========================
   CTA
   ========================= */
.contact-cta {
  background: transparent;
  color: #fff;
  padding: 8vh 5vw 10vh;
}
.contact-cta h2 { margin: 0 0 16px; font-weight: 400; }
.cta-button {
  border: 1px solid #2a2a2a;
  background: #141414;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
  transition: transform .08s ease, background .2s ease, border-color .2s ease;
}
.cta-button:hover  { transform: translateY(-1px); }
.cta-button:active { transform: translateY(0); }

/* =========================
   Ash Canvas
   ========================= */
.ash-container { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
#ashCanvas     { width: 100%; height: 100%; display: block; }

/* =========================
   Responsive / Motion
   ========================= */
@media (max-width: 768px) {
  .method-timeline { gap: 7vh; }
  .method-step h3  { font-size: clamp(15px, 3.6vw, 17px); }
  .method-line     { font-size: clamp(17px, 4.2vw, 22px); }
}
@media (prefers-reduced-motion: reduce) {
  .method-step,
  .emph.uline::after,
  .method-line::before,
  .method-step h3::after { transition: none !important; }
}