.services-list{ padding: 40px 0 140px; }

.service-block{
  display:grid;
  grid-template-columns: 0.4fr 1.6fr;
  gap: 60px;
  padding: 70px 0;
  border-bottom: 1px solid var(--hairline);
}
.service-block:first-child{ padding-top: 0; }
.service-block:last-child{ border-bottom:none; }

.service-block-num{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 3.2rem;
  color: var(--gold);
  opacity: 0.5;
  line-height:1;
}

.service-block-body h3{ margin-bottom: 16px; }
.service-block-body > p.desc{ font-size: 1.02rem; margin-bottom: 30px; max-width: 68ch; }

.service-detail-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.service-detail-col h5{
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--gold-bright);
  font-weight: 700;
  margin-bottom: 16px;
}
.service-detail-col ul li{
  padding: 10px 0 10px 22px;
  position: relative;
  font-size: 0.94rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--hairline);
}
.service-detail-col ul li:first-child{ border-top:none; }
.service-detail-col ul li::before{
  content:"—";
  position:absolute; left:0; top:10px;
  color: var(--gold);
}

.service-block-media{
  position: relative;
  margin: 8px 0 34px;
  max-width: 560px;
  border-radius: 4px;
  overflow: visible;
  border: 1px solid var(--hairline);
}
.service-block-media img{
  width: 100%;
  display: block;
  border-radius: 4px;
  filter: saturate(0.95) contrast(1.03);
}
.service-block-media.single{ max-width: 460px; }

.code-window{
  position: absolute;
  bottom: -34px;
  right: -48px;
  width: 280px;
  animation: codeFloat 6s ease-in-out infinite;
}
@keyframes codeFloat{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}

@media (max-width: 900px){
  .service-block-media{ max-width: 100%; }
  .code-window{ position: static; width: 100%; margin-top: 16px; animation: none; }
}

.service-process{
  padding: 100px 0;
  background: var(--bg-elevated);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.process-steps{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap: 30px;
}
.process-step{ position:relative; padding-top: 26px; }
.process-step::before{
  content: attr(data-step);
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold);
  font-size: 1.6rem;
  position:absolute; top:-10px; left:0;
}
.process-step h4{ margin: 14px 0 10px; font-size: 1.1rem; }
.process-step p{ font-size: 0.9rem; }

@media (max-width: 900px){
  .service-block{ grid-template-columns: 1fr; gap: 20px; }
  .service-detail-grid{ grid-template-columns: 1fr; }
  .process-steps{ grid-template-columns: repeat(2,1fr); }
}