.rh-por { width: 100%; font-family: 'Mont', 'Montserrat', sans-serif; }
.rh-por * { box-sizing: border-box; font-family: 'Mont', 'Montserrat', sans-serif; }
.rh-por-w { max-width: 1600px; margin: 0 auto; }
.rh-por-w-lg { padding-left: 80px; padding-right: 80px; }

.rh-por-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: #99AD8F;
  display: block; margin: 0 0 14px 0;
}
.rh-por-h2 {
  font-size: clamp(24px, 2.8vw, 38px); font-weight: 600; color: #262626;
  line-height: 1.15; margin: 0 0 16px 0; padding: 0;
}
.rh-por-how-intro {
  font-size: 16px; font-weight: 600; color: #585858; line-height: 1.7;
  max-width: 640px; margin: 0; padding: 0;
}

/* buttons */
.rh-por-btn {
  display: inline-flex !important; align-items: center; gap: 8px;
  font-size: 12px !important; font-weight: 600 !important;
  letter-spacing: 0.08em !important; text-transform: uppercase !important;
  text-decoration: none !important; padding: 15px 30px !important;
  border-radius: 100px !important; white-space: nowrap; transition: all 0.2s;
}
.rh-por-btn-dark { background: #262626 !important; color: #ffffff !important; }
.rh-por-btn-dark:hover { background: #464646 !important; transform: translateY(-1px); }

/* ============================================================
   9. HOW IT WORKS
   ============================================================ */
.rh-por-how { background: #ffffff; width: 100%; }
.rh-por-how-pad { padding: 80px 0; }
.rh-por-tl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; margin: 40px 0 0; }
.rh-por-tl::before { content:''; position:absolute; top:20px; left:10%; right:10%; height:2px; background: linear-gradient(to right, #BFD8B3, #DFECD9); z-index: 0; }
.rh-por-tl-item { padding: 0 20px; position: relative; z-index: 1; text-align: center; }
.rh-por-tl-dot {
  width: 40px; height: 40px; border-radius: 50%; background: #262626;
  border: 3px solid #ffffff; box-shadow: 0 0 0 2px #BFD8B3; margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; color: #BFD8B3;
  transition: background 0.3s, transform 0.3s;
}
.rh-por-tl-item:hover .rh-por-tl-dot { background: #BFD8B3; transform: scale(1.15); }
.rh-por-tl-item:hover .rh-por-tl-dot * { color: #262626; }
.rh-por-tl-title { font-size: 14px; font-weight: 600; color: #262626; display: block; margin: 0 0 8px 0; }
.rh-por-tl-text { font-size: 12px; font-weight: 600; color: #808080; line-height: 1.55; display: block; }

/* ── entrance animation ── */
@keyframes rh-fadeup { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
.rh-anim { opacity: 0; }
.rh-anim.visible { animation: rh-fadeup 0.55s ease forwards; }
.rh-anim-delay-1.visible { animation-delay: 0.05s; }
.rh-anim-delay-2.visible { animation-delay: 0.15s; }
.rh-anim-delay-3.visible { animation-delay: 0.25s; }
.rh-anim-delay-4.visible { animation-delay: 0.35s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
  .rh-por-w-lg { padding-left: 60px; padding-right: 60px; }
}
@media (max-width: 960px) {
  .rh-por-tl { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .rh-por-tl::before { display: none; }
}
@media (max-width: 600px) {
  .rh-por-w-lg { padding-left: 20px; padding-right: 20px; }
  .rh-por-how-pad { padding: 48px 0; }
  .rh-por-tl { grid-template-columns: 1fr; row-gap: 32px; }
}