/* services.css — services.html: sticky index + service blocks, process, principle */

.jump-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.jump-pill { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 500; transition: border-color .2s, color .2s, transform .25s var(--ease); }
.jump-pill:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }

.services-layout { display: grid; grid-template-columns: 240px 1fr; gap: 56px; align-items: start; }
.services-index { position: sticky; top: calc(var(--header-h) + var(--header-top) + 24px); }
.services-index li + li { margin-top: 2px; }
.services-index a[data-index-link] { display: grid; grid-template-columns: 32px 1fr; gap: 8px; padding: 12px 0; font-size: 15px; color: var(--muted); border-top: 1px solid var(--line); transition: color .2s; }
.services-index a[data-index-link] .num { padding-top: 3px; }
.services-index a:hover, .services-index a.active { color: var(--fg); }
.services-index a.active .num { color: var(--gold); }
.services-index-cta { width: 100%; margin-top: 28px; }

.service { padding: 36px 40px 40px; margin-bottom: 24px; scroll-margin-top: calc(var(--header-h) + var(--header-top) + 24px); }
.service:last-child { margin-bottom: 0; }
.service-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.service-glyph { width: 40px; height: 40px; color: var(--gold); }
.service-head { margin-bottom: 28px; }
.service-head h2 { font-size: clamp(28px, 3vw, 44px); margin-bottom: 10px; }
.service-line { color: var(--muted); font-size: 18px; max-width: 52ch; }
.service-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.service-col { background: var(--cream-2); border-radius: 14px; padding: 24px; }
.service-col h3 { font-family: var(--font-body); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; font-weight: 500; }
.service-col li { position: relative; padding: 10px 0 10px 22px; border-top: 1px solid var(--line); font-size: 16px; }
.service-col li::before { content: ""; position: absolute; left: 0; top: 19px; width: 10px; height: 1px; background: var(--gold); }

/* Process */
.process-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; counter-reset: step; position: relative; }
.process-steps::before { content: ""; position: absolute; left: 0; right: 0; top: 24px; height: 1px; background: var(--line-strong); }
.process-steps li { padding: 0 28px 0 0; position: relative; }
.step-dot { position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--gold); background: var(--cream-2); color: var(--gold); display: grid; place-items: center; font-family: var(--font-display); font-size: 15px; margin-bottom: 28px; }
.process-steps h3 { font-size: 22px; margin-bottom: 10px; }
.process-steps p { font-size: 15px; color: var(--muted); }

/* Principle */
.principle { text-align: center; }
.principle blockquote p { font-family: var(--font-display); font-size: clamp(30px, 4.4vw, 64px); font-style: italic; font-weight: 340; line-height: 1.1; max-width: 20ch; margin-inline: auto; }
.principle cite { display: block; margin-top: 28px; font-style: normal; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }

@media (max-width: 1024px) {
  .services-layout { grid-template-columns: 1fr; gap: 0; }
  .services-index { display: none; }
}
@media (max-width: 900px) {
  .service-cols { grid-template-columns: 1fr; }
  .service { padding: 28px 22px 30px; }
  .process-steps { grid-template-columns: 1fr; gap: 32px; }
  .process-steps::before { display: none; }
  .process-steps li { display: grid; grid-template-columns: 48px 1fr; gap: 0 20px; }
  .step-dot { margin: 0; }
  .process-steps h3 { grid-column: 2; }
  .process-steps p { grid-column: 2; }
}