/* ==========================================================================
   SERVICES — hero, service cards, process timeline, closing CTA
   ========================================================================== */

.svc-hero{
  padding: 11rem clamp(1.25rem,4vw,3rem) 4rem;
  border-bottom: 1px solid var(--hairline);
}
.svc-hero h1{ font-size: clamp(2.4rem, 6.4vw, 5rem); max-width: 18ch; }
.svc-hero p{ margin-top:1.6rem; max-width:52ch; color:var(--muted-2); font-size:1.05rem; line-height:1.7; }
.svc-hero .btn{ margin-top:2.4rem; }

/* ---- Service cards ---- */
.services{ padding: 7rem clamp(1.25rem,4vw,3rem); border-bottom:1px solid var(--hairline); }
.svc-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:1px;
  background: var(--hairline); border:1px solid var(--hairline); margin-top:3rem;
}
.svc-card{
  background: var(--bg-card); padding: 2.6rem 2rem;
  transition: background 0.4s var(--ease);
  display:flex; flex-direction:column; gap:1.2rem;
}
.svc-card:hover{ background: var(--bg-raised); }
.svc-card__icon{
  width:44px; height:44px; border:1px solid var(--hairline); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color: var(--gold); font-family:'JetBrains Mono', monospace; font-size:0.95rem;
  transition: border-color 0.4s var(--ease);
}
.svc-card:hover .svc-card__icon{ border-color: var(--gold); }
.svc-card h3{ font-size:1.35rem; }
.svc-card p{ color:var(--muted-2); font-size:0.9rem; line-height:1.65; flex-grow:1; }
.svc-card__link{
  font-family:'JetBrains Mono', monospace; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
  color: var(--muted-2); display:inline-flex; align-items:center; gap:0.5rem; align-self:flex-start;
  transition: color 0.3s var(--ease), gap 0.3s var(--ease);
}
.svc-card:hover .svc-card__link{ color:var(--gold); gap:0.8rem; }

@media (max-width: 960px){ .svc-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){ .svc-grid{ grid-template-columns: 1fr; } }

/* ---- Process timeline ---- */
.process{ padding: 7rem clamp(1.25rem,4vw,3rem); border-bottom:1px solid var(--hairline); }
.timeline{
  display:flex; gap:0; margin-top:4rem; overflow-x:auto; padding-bottom:1.5rem;
  scroll-snap-type:x proximity;
}
.timeline::-webkit-scrollbar{ height:4px; }
.timeline::-webkit-scrollbar-thumb{ background: var(--hairline); }
.step{
  flex: 0 0 220px; position:relative; padding: 0 1.6rem 0 0; scroll-snap-align:start;
}
.step:not(:last-child)::after{
  content:''; position:absolute; top:11px; left:calc(100% - 1.6rem); width:1.6rem; height:1px;
  background: var(--hairline);
}
.step__dot{
  width:22px; height:22px; border-radius:50%; border:1px solid var(--gold);
  display:flex; align-items:center; justify-content:center; margin-bottom:1.4rem;
  font-family:'JetBrains Mono', monospace; font-size:0.62rem; color:var(--gold);
}
.step h4{ font-size:1.05rem; margin-bottom:0.7rem; font-family:'Syne',sans-serif; font-weight:700; }
.step p{ font-size:0.82rem; color:var(--muted-2); line-height:1.6; max-width:22ch; }

@media (max-width: 760px){
  .timeline{ flex-direction:column; gap:2.2rem; overflow:visible; }
  .step{ flex:none; padding-right:0; padding-left:1.6rem; }
  .step::before{
    content:''; position:absolute; left:10px; top:26px; width:1px; height:calc(100% + 1.4rem);
    background: var(--hairline);
  }
  .step:last-child::before{ display:none; }
  .step::after{ display:none; }
  .step__dot{ position:absolute; left:-1.6rem; top:0; }
  .step > h4, .step > p{ margin-left:0.4rem; }
}

/* ---- Closing CTA lives inside the shared .footer block on this page,
       with page-specific copy — see services.html ---- */