/* ==========================================================================
   Service pages: old-gold-exchange.html and jewellery-repairs.html (en/si/ta).
   Loaded after styles.css and reuses its tokens. Plain, editorial styling:
   hairline rules and serif numbers, no icon grids.
   ========================================================================== */

/* Buttons under the banner lead and in the closing call to action.
   .btn--wa is full width by default (product cards); here it sizes to its label,
   and on phones both buttons fill the row so the labels stay on one line. */
.svc-actions { margin-top: 1.8rem; }
.svc-actions .btn--wa, .svc-cta .btn--wa { width: auto; }
@media (max-width: 559px) {
  .svc-actions .btn, .svc-cta .btn { width: 100%; padding-inline: 1.2em; }
}

/* Numbered steps */
.svc-steps { counter-reset: svc; margin-top: 1.4rem; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.svc-steps > li {
  counter-increment: svc;
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  column-gap: 1rem;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--line);
}
.svc-steps > li::before {
  content: counter(svc);
  grid-row: 1 / span 2;
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1;
  color: var(--gold-ink);
}
.svc-steps h3 { font-size: 1.35rem; line-height: 1.25; overflow-wrap: break-word; }
.svc-steps p { margin-top: 0.35rem; color: var(--ink-2); line-height: 1.65; }

/* Services list: the .facts list in two columns on wider screens */
@media (min-width: 760px) {
  .facts--cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 4rem); border-top: 0; }
  .facts--cols > div { border-top: 1px solid var(--line); border-bottom: 0; }
  .facts--cols > div:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
}
.svc-intro { margin-top: 0.9rem; color: var(--ink-2); }
.svc-list-wrap .facts { margin-top: 1.6rem; }

/* Side card */
.svc-card h2 { margin: 0; }
.svc-card p { margin-top: 0.8rem; color: var(--ink-2); }
.svc-card ul { margin-top: 0.9rem; padding-left: 1.1rem; list-style: disc; color: var(--ink-2); }
.svc-card li + li { margin-top: 0.55rem; }
.svc-card li::marker { color: var(--gold-ink); }
.svc-card .pill-row { margin-top: 1.3rem; }

/* Questions and answers */
.svc-faq { margin-top: 1.4rem; border-top: 1px solid var(--line); }
.svc-faq details { border-bottom: 1px solid var(--line); }
.svc-faq summary {
  position: relative;
  padding: 1.1rem 2.4rem 1.1rem 0;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}
.svc-faq summary::-webkit-details-marker { display: none; }
.svc-faq summary::after {
  content: "+";
  position: absolute;
  right: 0.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-body);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--gold-ink);
}
.svc-faq details[open] summary::after { content: "\2212"; }
.svc-faq details p { padding-bottom: 1.2rem; color: var(--ink-2); line-height: 1.7; }

/* Closing call to action */
.svc-cta p { margin-top: 0.8rem; color: var(--ink-2); }
.svc-cta .pill-row { margin-top: 1.4rem; }