/* ==========================================================================
   services — calm panels, sticky topic chips, real related work
   ========================================================================== */

@layer pages {
  /* Sticky chip navigation under the header. */
  .services-nav {
    position: sticky;
    top: var(--header-h);
    z-index: 5;
    padding-block: var(--s-3);
    background: rgb(243 246 250 / 0.86);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    transition: top var(--d-ui) var(--ease-out);
  }
  body:has(.site-header.is-hidden) .services-nav { top: 0; }
  .services-nav__list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--margin) * -1); padding-inline: var(--margin); }
  .services-nav__list::-webkit-scrollbar { display: none; }
  .services-nav__list li { flex: none; }
  .services-nav .chip.is-active { background: var(--inverse); color: var(--on-inverse); box-shadow: none; }

  .services { display: grid; gap: var(--gutter); padding-top: var(--s-6); }
  /* One white panel per service. */
  .svc-panel {
    display: grid;
    gap: var(--s-6) var(--gutter);
    padding: clamp(1.5rem, 0.8rem + 3vw, 3rem);
    border-radius: var(--radius-xl);
    background: var(--surface);
    scroll-margin-top: calc(var(--header-h) + 5rem);
  }
  .svc-panel__head { display: grid; gap: var(--s-4); align-content: start; justify-items: start; }
  .svc-panel__title { font-size: var(--fs-2xl); font-weight: var(--w-light); line-height: 1.02; letter-spacing: var(--track-head); max-width: 12ch; }
  .svc-panel__lead { font-size: var(--fs-read); line-height: 1.55; color: var(--ink-2); max-width: 36ch; }
  .svc-panel__head .btn { margin-top: var(--s-2); }
  .svc-panel__num { font-size: var(--fs-xs); font-weight: var(--w-medium); color: var(--mute); font-variant-numeric: tabular-nums; }
  .svc-panel__num::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 0.6rem; border-radius: 50%; background: var(--accent); vertical-align: 0.08em; }
  .svc-panel__term {
    margin-top: calc(var(--s-2) * -1);
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-pill);
    background: var(--sunken);
    font-size: var(--fs-xs);
    font-weight: var(--w-medium);
    color: var(--ink-2);
  }
  .svc-panel__body { display: grid; gap: var(--s-6) var(--s-7); align-content: start; }
  .svc-panel__block { display: grid; gap: var(--s-3); align-content: start; }
  .svc-panel__fit { color: var(--ink-2); line-height: 1.6; max-width: 40ch; }

  .checklist { margin: 0; display: grid; }
  .checklist li { display: flex; gap: var(--s-3); align-items: flex-start; padding-block: var(--s-3); border-top: 1px solid var(--line); font-size: var(--fs-label); color: var(--ink); }
  .checklist li:last-child { border-bottom: 1px solid var(--line); }
  .checklist .icon { width: 1.05rem; height: 1.05rem; margin-top: 0.15em; flex: none; color: var(--accent); }

  .mini-work { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  @media (min-width: 48em) { .mini-work { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); } }
  .mini-work__item { display: grid; gap: var(--s-2); text-decoration: none; font-size: var(--fs-sm); color: var(--ink-2); }
  .mini-work__item img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-md); background: var(--sunken); transition: transform 700ms var(--ease-out); }
  .mini-work__item:focus-visible { outline-offset: 4px; border-radius: var(--radius-md); }
  @media (hover: hover) and (pointer: fine) { .mini-work__item:hover { color: var(--ink); } .mini-work__item:hover img { transform: scale(1.03); } }

  @media (min-width: 48em) {
    .svc-panel__body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .svc-panel__work { grid-column: 1 / -1; }
  }
  @media (min-width: 64em) {
    .svc-panel { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .svc-panel__head { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h) + 6rem); align-self: start; }
    .svc-panel__body { grid-column: 6 / -1; }
  }

  /* Process: three quiet cards. */
  .process__head { display: grid; gap: var(--s-3) var(--gutter); margin-bottom: var(--s-6); }
  .process__head .section-head { margin-bottom: 0; }
  .process__intro { color: var(--ink-2); max-width: 46ch; line-height: 1.6; }
  @media (min-width: 64em) {
    .process__head { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
    .process__head .section-head { grid-column: 1 / span 6; }
    .process__intro { grid-column: 8 / -1; }
  }
  .process__steps { position: relative; margin: 0; padding: 0; list-style: none; display: grid; gap: var(--gutter); counter-reset: none; }
  .process__step {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto auto auto 1fr;
    gap: var(--s-3);
    align-content: start;
    padding: var(--s-6);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
    transition: transform var(--d-ui) var(--ease-out), box-shadow var(--d-ui) var(--ease-out);
  }
  .process__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
  .process__icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.9rem;
    background: var(--tint);
    color: var(--ink);
  }
  .process__icon svg { width: 1.5rem; height: 1.5rem; }
  .process__num { font-size: var(--fs-xs); font-weight: var(--w-medium); color: var(--mute); font-variant-numeric: tabular-nums; }
  .process__title { font-size: var(--fs-lg); font-weight: var(--w-regular); letter-spacing: var(--track-title); }
  .process__text { color: var(--ink-2); line-height: 1.6; max-width: 34ch; }
  .process__label {
    margin-top: var(--s-3);
    padding-top: var(--s-4);
    border-top: 1px dashed var(--line-strong);
    font-size: var(--fs-xs);
    font-weight: var(--w-medium);
    letter-spacing: 0.01em;
    color: var(--mute);
  }
  .process__list { margin: 0; display: grid; gap: 0.45rem; align-content: start; font-size: var(--fs-sm); color: var(--ink); }
  .process__list li { display: flex; gap: 0.6rem; align-items: baseline; }
  .process__list li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; transform: translateY(-0.15em); }
  @media (hover: hover) and (pointer: fine) {
    .process__step:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-float); }
  }
  @media (min-width: 48em) { .process__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 80em) {
    .process__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    /* A quiet connector between the step icons. */
    .process__steps::before {
      content: "";
      position: absolute;
      left: calc(var(--s-6) + 3rem);
      right: calc(var(--s-6) + 3rem);
      top: calc(var(--s-6) + 1.5rem);
      border-top: 1px dashed var(--line-strong);
      z-index: 0;
      pointer-events: none;
    }
  }

  /* Closing panel in the soft blue tint. */
  .services-cta {
    display: grid;
    gap: var(--s-5);
    align-items: center;
    margin-top: var(--s-8);
    padding: clamp(1.5rem, 0.8rem + 3vw, 3rem);
    border-radius: var(--radius-xl);
    background: var(--tint);
  }
  .services-cta__title { font-size: var(--fs-xl); font-weight: var(--w-light); line-height: 1.1; letter-spacing: var(--track-head); max-width: 22ch; }
  .services-cta p { margin-top: var(--s-3); color: var(--ink-2); max-width: 48ch; }
  .services-cta .btn { justify-self: start; }
  @media (min-width: 64em) { .services-cta { grid-template-columns: minmax(0, 1fr) auto; } .services-cta .btn { justify-self: end; } }
}