/* ============================================
   INTRO — plain white, so Services doesn't open
   the same tinted way Home's hero does
   ============================================ */

.rb-svc-intro {
  background: var(--paper);
}

/* color shows up a section later than it used to */
.rb-svc-list-section {
  background: var(--accent-soft);
  padding-top: 3rem;
}

/* ============================================
   INTRO SUBTEXT
   ============================================ */

.rb-svc-scroll-cue svg {
  width: 24px;
  height: 24px;
  animation: rb-scroll-bounce 1.8s ease-in-out infinite;
}

@keyframes rb-scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* ============================================
   SERVICE LIST — flat, hairline-divided, same
   hover technique as the homepage's process list
   ============================================ */

.rb-svc-list { border-top: 2px solid var(--accent-strong); }

.rb-svc-list li {
  position: relative;
  display: grid;
  grid-template-columns: 70px 1fr auto;
  align-items: center;
  gap: 2rem;
  padding: 2.5rem 0 2.5rem 2.5rem;
  border-bottom: 1px solid var(--rule);
  transition: background 0.25s ease;
}

.rb-svc-list li:hover { background: var(--paper); }

.rb-svc-list li::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 50%;
  width: 3px;
  height: 35%;
  background: var(--accent);
  transform: translateY(-50%);
  transition: height 0.25s ease, background 0.25s ease;
}

.rb-svc-list li:hover::before {
  height: 70%;
  background: var(--accent-strong);
}

.rb-svc-list .rb-folio {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  margin-bottom: 0;
  transition: background 0.25s ease;
}

.rb-svc-list li:hover .rb-folio { background: var(--accent-strong); }

.rb-svc-list__body h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  margin-bottom: 0.5rem;
}

.rb-svc-list__body p { max-width: 50ch; }

.rb-svc-list__price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--ink);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .rb-svc-list li {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .rb-svc-list__price { font-size: 1.6rem; }
}

/* ============================================
   MID-PAGE CONTACT STRIP
   ============================================ */

.rb-svc-midcontact {
  padding: 3rem 0;
  text-align: center;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.rb-svc-midcontact__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  color: var(--ink);
  margin-bottom: 1.5rem;
}

.rb-svc-midcontact__row { justify-content: center; margin: 0; }

/* on the new white strip, give the icons a peach fill so they
   don't disappear against the matching white background */
.rb-svc-midcontact .rb-contact__icon--light { background: var(--accent-soft); }

/* ============================================
   READY TO BOOK (closing section)
   ============================================ */

.rb-svc-ready {
  max-width: 640px;
  text-align: center;
  margin: 0 auto;
}

.rb-svc-ready p { max-width: 480px; margin-left: auto; margin-right: auto; }

.rb-svc-ready .rb-btn-row { justify-content: center; }

.rb-svc-ready__contacts {
  justify-content: center;
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* ============================================
   FOOTER CONTACT ICONS (light-background variant)
   ============================================ */

.rb-contact__row--light {
  justify-content: center;
  margin: 1.25rem 0 1.5rem;
}

.rb-contact__icon--light {
  border-color: var(--accent-strong);
  color: var(--ink);
  background: var(--paper);
}

.rb-contact__icon--light:hover {
  border-color: var(--ink);
  color: var(--paper);
  background: var(--ink);
}