/* Methodology page — builds on /home/home.css tokens and components. */
.intro h1 { font-size: clamp(32px, 5vw, 52px); margin: 24px 0 12px; max-width: 880px; }
.intro p.lead { font-size: clamp(17px, 2vw, 20px); color: var(--muted); max-width: 760px; margin: 0; }

.stages { counter-reset: stage; }
.stage { display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; align-items: center; padding: 56px 0 0; }
.stage:nth-child(even) .stage__media { order: 2; }
.stage__media video { width: 100%; aspect-ratio: 16 / 9; display: block; border: 2px solid var(--ink);
  border-radius: 14px; background: #ebe1d1; box-shadow: 6px 6px 0 rgba(42, 42, 42, .12); }
.stage__eyebrow { font: 700 13px Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  color: #a75840; margin: 0 0 8px; }
.stage h2 { font-size: clamp(24px, 3vw, 32px); margin: 0 0 12px; }
.stage p { margin: 0 0 12px; }
.stage .why { color: var(--muted); }
.shape { background: var(--card); border: 2px solid var(--line); border-radius: 12px; padding: 12px 16px;
  font: 500 15px/1.5 'JetBrains Mono', ui-monospace, monospace; }
.shape b { font-family: Inter, sans-serif; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); display: block; margin-bottom: 4px; }

.refuse { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.refuse div { background: var(--card); border: 2px solid var(--ink); border-radius: 12px; padding: 16px 18px; }
.refuse h3 { font-size: 19px; margin: 0 0 6px; }
.refuse p { margin: 0; color: var(--muted); font-size: 15.5px; }

@media (max-width: 820px) {
  .stage { grid-template-columns: 1fr; gap: 16px; }
  .stage:nth-child(even) .stage__media { order: 0; }
  .refuse { grid-template-columns: 1fr; }
}