/* ==========================================================================
   SKK CONSULTANTS — services.css
   ========================================================================== */

/* Jump index across the top of the page */
.svc-index {
  background: var(--c-white);
  border-bottom: 1px solid var(--c-rule);
  position: sticky;
  top: var(--header-h);
  z-index: 40;
}
.svc-index__row {
  display: flex;
  gap: var(--sp-5);
  overflow-x: auto;
  padding-block: var(--sp-4);
  scrollbar-width: thin;
}
.svc-index a {
  flex: none;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--c-ink-muted);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.svc-index a:hover { color: var(--c-charcoal); border-bottom-color: var(--c-brand); }

/* One service = one feature block */
.svc {
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
  border-bottom: 1px solid var(--c-rule);
  scroll-margin-top: calc(var(--header-h) + 70px);
}
.svc--alt { background: var(--c-white); }

.svc__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: start;
}
.svc--flip .svc__media { order: 2; }

.svc__num {
  font-family: var(--f-display);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--c-brand);
  margin-bottom: var(--sp-3);
}

.svc h2 { font-size: var(--t-xl); }
.svc__lede {
  margin-top: var(--sp-4);
  color: var(--c-ink-muted);
  max-width: 52ch;
}

.svc__caps {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-rule);
}
.svc__caps h3 {
  font-size: 0.8125rem;
  font-family: var(--f-body);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-slate);
  margin-bottom: var(--sp-4);
}

.svc__actions { margin-top: var(--sp-6); }

/* Main photo + supporting thumbnails */
.svc__gallery { display: grid; gap: 3px; }
.svc__thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}
.svc__thumbs .frame { aspect-ratio: 4 / 3; }
.svc__thumbs img { transition: transform 0.6s var(--ease); }
.svc__thumbs .frame:hover img { transform: scale(1.06); }

@media (max-width: 900px) {
  .svc__grid { grid-template-columns: 1fr; }
  .svc--flip .svc__media { order: 0; }
}

/* Compact list of the remaining services */
.svc-more {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--c-rule-dark);
  border: 1px solid var(--c-rule-dark);
}
.svc-more__item {
  background: var(--s-dark);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.svc-more__item h3 { font-size: 1.125rem; color: var(--c-white); }
.svc-more__item p {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: rgba(232, 230, 227, 0.68);
}
.svc-more__item .icon { width: 22px; height: 22px; color: var(--c-brand-light); margin-bottom: var(--sp-4); }
@media (max-width: 860px) { .svc-more { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .svc-more { grid-template-columns: 1fr; } }

/* Process strip — this content really is a sequence */
.process {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-5);
  counter-reset: step;
}
.process__step { counter-increment: step; }
.process__step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--f-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--c-brand);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-4);
  border-bottom: 2px solid var(--c-rule);
}
.process__step h3 { font-size: 1.0625rem; }
.process__step p {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--c-ink-muted);
}
@media (max-width: 1000px) { .process { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .process { grid-template-columns: 1fr; gap: var(--sp-4); } }