/* ==========================================================================
   Services listing page (services.html)
   ========================================================================== */

/* Service cards: two big columns */
.services-grid .service-card .body h4 { transition: color .3s; }
.services-grid .service-card:hover .body h4 { color: var(--rust); }

/* "How we work" steps on a dark section */
.on-dark .step { background: rgba(255, 255, 255, .04); border-color: var(--line-dark); }
.on-dark .step p { color: rgba(255, 255, 255, .68); }
.on-dark .step::before { color: transparent; -webkit-text-stroke: 1px var(--cream); }
.work-note { margin-top: 48px; display: flex; justify-content: center; }

/* Field proof split */
.proof-media { position: relative; aspect-ratio: 4 / 3; }
.img-cap {
  position: absolute; left: 14px; bottom: 14px; max-width: calc(100% - 28px);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 100px;
  background: rgba(28, 20, 12, .74); color: var(--white);
  font-size: 13.5px; font-weight: 500; line-height: 1.3;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.img-cap::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cream); flex: none; }
.proof-copy { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.proof-copy p { color: var(--text); }
.equip-grid { margin-top: 80px; }

/* FAQ layout */
.faq-wrap { display: grid; grid-template-columns: .85fr 1.15fr; gap: 60px; align-items: start; }
.faq-wrap .section-head { position: sticky; top: 130px; margin-bottom: 0; align-items: flex-start; }

@media (max-width: 900px) {
  .faq-wrap { grid-template-columns: 1fr; gap: 40px; }
  .faq-wrap .section-head { position: static; }
  .equip-grid { margin-top: 60px; }
}
@media (max-width: 640px) {
  .img-cap { font-size: 12.5px; left: 10px; bottom: 10px; max-width: calc(100% - 20px); }
}