/* ==========================================================================
   Armstrong Build — Services page (02 — Services)
   Page-specific styles only. Reuses tokens + components from main.css.
   Frame width 1440.
   ========================================================================== */

.services-page{ background:var(--paper-2); }

/* ----------------------------------------------------------------- Intro header */
.svc-intro{ background:var(--paper); }
.svc-intro__inner{
  display:flex; flex-direction:column; align-items:flex-start; gap:24px;
  padding-top:100px; padding-bottom:80px;
}
.svc-intro__title{
  font-family:var(--font-serif); font-weight:300;
  color:var(--ink); font-size:79px; line-height:1.04;
}
.svc-intro__lede{
  font-family:var(--font-sans); font-weight:300;
  color:var(--text-soft); font-size:18px; line-height:1.6;
  max-width:680px;
}

/* ----------------------------------------------------------------- Service rows */
.svc-rows{ background:var(--paper-2); }
.svc-rows .container{ padding-bottom:120px; }

.svc-row{
  display:flex; align-items:center; gap:64px;
  padding-top:64px; padding-bottom:64px;
}
.svc-row--reverse{ flex-direction:row-reverse; }
.svc-row--bordered{ border-top:1px solid var(--line-2); }

.svc-row__img{
  flex:0 0 560px; width:560px; height:400px;
  border-radius:var(--radius-img); overflow:hidden;
}
.svc-row__img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.svc-row__img:hover img{ transform:scale(1.04); }

.svc-row__body{
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:flex-start; gap:24px;
}
.svc-row__head{ display:flex; align-items:center; gap:16px; }
.svc-row__num{
  font-family:var(--font-serif); font-weight:300;
  color:var(--muted); font-size:30px; line-height:1;
}
.svc-row__name{
  font-family:var(--font-serif); font-weight:500;
  color:var(--ink); font-size:40px; line-height:1;
}
.svc-row__desc{
  font-family:var(--font-sans); font-weight:300;
  color:var(--text-soft); font-size:17px; line-height:1.75;
}
.svc-row__tags{ display:flex; flex-wrap:wrap; gap:12px; }
.svc-tag{
  display:inline-flex; align-items:center;
  border:1px solid var(--line-2);
  padding:8px 16px;
  font-family:var(--font-sans); font-weight:400;
  font-size:12px; letter-spacing:.5px; color:var(--text-soft);
}
.svc-row__cta{ padding-top:8px; gap:12px; }

/* Testimonial heading on this page reads 57px in Figma */
.services-page .testimonials .section-title--60{ font-size:57px; line-height:1.15; }

/* ----------------------------------------------------------------- Responsive */
@media (max-width:1200px){
  .svc-intro__title{ font-size:64px; }
  .svc-row__img{ flex-basis:460px; width:460px; height:360px; }
}
@media (max-width:900px){
  .svc-intro__inner{ padding-top:72px; padding-bottom:56px; }
  .svc-intro__title{ font-size:48px; }
  .svc-intro__lede{ font-size:16px; }

  .svc-rows .container{ padding-bottom:72px; }
  .svc-row,
  .svc-row--reverse{ flex-direction:column; align-items:stretch; gap:28px; padding-top:48px; padding-bottom:48px; }
  .svc-row__img{ flex-basis:auto; width:100%; height:300px; }
  .svc-row__body{ gap:20px; }
  .svc-row__name{ font-size:32px; }
  .svc-row__desc{ font-size:16px; }
  .svc-row__cta{ flex-wrap:wrap; }

  .services-page .testimonials .section-title--60{ font-size:40px; }
}
@media (max-width:560px){
  .svc-intro__title{ font-size:40px; }
  .svc-row__img{ height:240px; }
  .svc-row__cta .btn{ flex:1 1 auto; }
}