/* 06 METHOD: lifecycle phases */
  /* ---------- PHASES (Desire, 3-col lifecycle) ---------- */
  .phases {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid #000;
  }
  .phase {
    border-right: 1px solid #000;
    padding: 40px 36px;
    background: #fff;
    display: flex; flex-direction: column;
    min-height: 400px;
    transition: background-color 0.3s ease;
  }
  .phase:last-child { border-right: none; }
  .phase:hover { background: #000; }
  .phase:hover h3,
  .phase:hover .n,
  .phase:hover .mono,
  .phase:hover .arr { color: #fff; }
  .phase:hover p { color: #ccc; }
  .phase-top {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 28px;
  }
  .phase-top .mono { color: #000; transition: color 0.3s ease; }
  .phase-top .arr { transition: color 0.3s ease, transform 0.4s cubic-bezier(0.32,0.72,0,1); }
  .phase:hover .arr { transform: translateX(6px); }
  .phase .n {
    font-weight: 900; font-size: clamp(3.5rem, 5vw, 5rem);
    letter-spacing: -0.05em; line-height: 0.9;
    margin-bottom: 20px; transition: color 0.3s ease;
  }
  .phase h3 { font-size: 24px; font-weight: 900; letter-spacing: -0.015em; margin-bottom: 10px; transition: color 0.3s ease; }
  .phase p { color: var(--muted); font-size: 16px; transition: color 0.3s ease; }
  @media (max-width: 900px) {
    .phases { grid-template-columns: 1fr; }
    .phase { border-right: none; border-bottom: 1px solid #000; min-height: 0; }
    .phase:last-child { border-bottom: none; }
    .phase-top .arr { transform: rotate(90deg); }
    .phase:hover .arr { transform: rotate(90deg) translateX(6px); }
  }