/* Services page — layout on top of the shared site.css components.
   Desktop: Services.dc.html | Mobile (<860px): Mobile - Services.dc.html */

.sep-services-grid-section { background: #0A0A0A; }
.sep-services-grid { padding: 28px 20px; display: flex; flex-direction: column; gap: 12px; }
.sep-service-card { padding: 20px; }
.sep-service-card img { width: 34px; height: 34px; }
.sep-service-card__name { font: 600 15px/1.3 'Oswald', sans-serif; letter-spacing: .03em; text-transform: uppercase; color: #fff; margin-top: 12px; }
.sep-service-card__desc { margin: 8px 0 0; font: 400 14px/1.6 'Inter', sans-serif; color: #8d9298; }

.sep-nc-section { background: #131313; border-top: 1px solid #22252a; border-bottom: 1px solid #22252a; }
.sep-nc-section__inner { padding: 32px 20px; display: flex; flex-direction: column; gap: 20px; }

.sep-recent-work { background: #0A0A0A; }
.sep-recent-work .sep-wrap { padding: 32px 20px; }

/* This page's bottom CTA call link is a plain bordered box with just the
   number (no icon/label), unlike Home's — override the shared look. */
.sep-cta-band .sep-cta-band__call { background: transparent; border-color: rgba(255,255,255,.5); }
.sep-cta-band .sep-cta-band__call-num { font-size: 19px; }

@media (min-width: 860px) {
  .sep-services-grid { max-width: 1240px; margin: 0 auto; padding: clamp(36px,4vw,60px) 20px; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .sep-service-card { padding: 26px; }

  .sep-nc-section__inner { max-width: 1240px; margin: 0 auto; padding: clamp(36px,4vw,60px) 20px; flex-direction: row; flex-wrap: wrap; gap: clamp(24px,3vw,44px); align-items: center; }
  .sep-nc-section__copy { flex: 1 1 380px; min-width: 300px; }
  .sep-nc-section .sep-photo-grid { flex: 1 1 480px; min-width: 280px; }

  .sep-recent-work .sep-wrap { max-width: 1240px; margin: 0 auto; padding: clamp(36px,4vw,60px) 20px; }

  .sep-cta-band .sep-cta-band__call-num { font-size: 22px; }
}