/* ==========================================================================
   PERKHIDMATAN — services
   Ported verbatim from the scoped <style> block of src/pages/perkhidmatan.astro.

   Enqueued ONLY on this page. That is load-bearing, not an optimisation:
   several class names here (.project, .explain, .benefit, .step, .cta,
   .prose, .faq-aside) are reused across pages with conflicting rules, and
   Astro's per-file scoping is what kept them apart. Keeping each page's
   rules in a file that loads on that page alone reproduces that isolation.
   Do not merge these into one stylesheet.
   ========================================================================== */

  .svc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-3xl);
  }

  .svc {
    display: grid;
    gap: var(--space-l);
    align-items: start;
  }

  @media (min-width: 60rem) {
    .svc {
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
      gap: var(--space-2xl);
    }

    /* Alternate the image side so the page does not read as a single column
       of repeated blocks. */
    .svc:nth-child(even) .svc__media {
      order: 2;
    }
  }

  .svc__icon {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--radius-s);
    background: var(--brand-100);
    color: var(--brand-700);
    margin-bottom: var(--space-s);
  }

  .svc__body h2 {
    font-size: var(--step-3);
  }

  .svc__body .lede {
    margin-top: var(--space-s);
    font-size: var(--step-1);
  }

  .svc__detail {
    margin-top: var(--space-m);
    color: var(--graphite-700);
  }

  .svc__suit {
    margin-top: var(--space-m);
    padding-top: var(--space-m);
    border-top: 1px solid var(--rule);
  }

  .svc__suit h3 {
    font-size: var(--step--4);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: var(--graphite-500);
    font-stretch: 100%;
  }

  .svc__suit ul {
    list-style: none;
    padding: 0;
    margin: var(--space-xs) 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
  }

  .svc__suit li {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--graphite-700);
  }

  .svc__suit svg {
    color: var(--brand-600);
    flex: none;
  }

  .svc__cta {
    margin-top: var(--space-m);
  }

  /* --- Process --- */
  .steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-l);
  }

  @media (min-width: 44rem) {
    .steps {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-l) var(--space-2xl);
    }
  }

  @media (min-width: 72rem) {
    .steps {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .step {
    display: flex;
    gap: var(--space-s);
  }

  /* The sequence is the information here: these are ordered stages of a job. */
  .step__num {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--graphite-900);
    color: #fff;
    font-weight: 800;
    font-size: var(--step-0);
  }

  .step h3 {
    font-size: var(--step-1);
    line-height: 1.3;
    margin-top: 0.25rem;
  }

  .step p {
    margin-top: 0.5rem;
    color: var(--graphite-600);
    font-size: var(--step--1);
    line-height: 1.6;
  }