/* ═══════════════════════════════════════
   ON-GRID — "OUR APPROACH" SELF-DRAWING ANIMATION (section6)
   Pinned GSAP timeline: steps on the left, drawing scene on the right.
═══════════════════════════════════════ */

#approach {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: stretch;
  background: #e5e7eb;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

/* ── left: heading + steps ── */
#approach-left {
  width: 42%;
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 4vw 0 6vw;
}
#approach-left h2 {
  font-family: var(--font-heading);
  font-size: clamp(28px, 3vw, 46px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: 26px;
}
#step-pills { display: flex; gap: 10px; margin-bottom: 42px; }
.pill {
  width: 34px; height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 14px;
  color: #b3a99c;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.35s, color 0.35s, border-color 0.35s;
}
.pill.active {
  background: #fff;
  color: var(--text-primary);
  border-color: #ddd4c6;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

#step-content { position: relative; min-height: 250px; }
.step {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
.step.active { opacity: 1; }
.step h3 {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.09em;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
}
.step p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  max-width: 44ch;
  color: #5b574e;
}

/* ── right: the animation viewport ── */
#approach-right {
  width: 58%;
  flex: none;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: #e5e7eb;
}
#mega-canvas { width: 174vw; flex: none; will-change: transform; }
#mega-canvas svg { width: 100%; height: auto; display: block; }

.wire {
  fill: none;
  stroke: #f6883a;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── RTL: flip the text column only — keep the SVG/animation upright ── */
body.rtl #approach-left { text-align: right; padding: 0 6vw 0 4vw; }
body.rtl #step-pills { flex-direction: row-reverse; justify-content: flex-end; }
body.rtl .step p { max-width: 44ch; margin-left: auto; }
body.rtl #approach-right,
body.rtl #mega-canvas { direction: ltr; }

/* ── narrow screens: stack panel above animation ── */
@media (max-width: 820px) {
  #approach { flex-direction: column; height: auto; }
  #approach-left { width: 100%; padding: 7vh 7vw 0; justify-content: flex-start; }
  #approach-right { width: 100%; height: 60vh; }
  #mega-canvas { width: 300vw; }
  #step-content { min-height: 170px; }
}