/* Service pages (sell your home, buy in Spain, the move plan): a long-form
   reading page in the guide's shape: one measure, a sticky "On this page"
   rail from 64em, numbered steps, and the contact panel at the end. */
@layer page {
  .service { padding-bottom: var(--sp-6); }
  .service__layout { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-6); }

  /* Head */
  .service__head { padding-top: var(--sp-3); display: grid; gap: var(--sp-4); }
  .service__head h1 { max-width: 22ch; }
  .service__lead { font-size: var(--fs-l); line-height: 1.45; color: var(--ink-2); }
  .service__actions { margin-top: var(--sp-1); gap: var(--sp-2) var(--sp-3); }
  .service__proof { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); font-size: var(--fs-s); }
  .service__proof li { display: flex; gap: var(--sp-2); align-items: flex-start; }
  .service__proof .icon { color: var(--ready); margin-top: 0.15em; }
  .service__trust { font-size: var(--fs-xs); color: var(--ink-3); }

  /* On this page: a sticky rail from 64em, hidden below. */
  .service__toc-title { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3); margin-bottom: var(--sp-2); }
  .service__toc-list { counter-reset: toc; display: grid; }
  .service__toc-list li { counter-increment: toc; }
  .service__toc-list a { display: flex; gap: var(--sp-3); padding: 0.35rem 0; color: var(--ink); text-decoration: none; font-size: var(--fs-s); line-height: 1.35; }
  .service__toc-list a::before { content: counter(toc, decimal-leading-zero); flex: none; color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: var(--fs-xs); padding-top: 0.15em; }
  .service__toc-list a:hover { color: var(--sea-ink); }
  .service__toc-list a:hover span { text-decoration: underline; text-underline-offset: 0.14em; }

  /* Body */
  .service__body { display: grid; row-gap: var(--sp-7); min-width: 0; }
  .service__section { scroll-margin-top: calc(var(--header-h) + var(--sp-5)); display: grid; gap: var(--sp-3); }
  .service__section h2 { font-size: var(--fs-xl); }
  .service__section .section__lead { margin-bottom: var(--sp-1); }
  .service__prose { line-height: 1.6; }
  .service__highlight { margin-top: var(--sp-2); border-left: 3px solid var(--brand); padding: var(--sp-1) 0 var(--sp-1) var(--sp-4); font-size: var(--fs-l); line-height: 1.4; font-weight: 500; letter-spacing: -0.01em; text-wrap: balance; }

  /* Steps: the number in the margin, title and text beside it. */
  .service__steps { display: grid; border-top: 1px solid var(--line); }
  .service__steps li { display: flex; gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--line); }
  .service__step-num { flex: none; width: 2.5rem; font-size: var(--fs-xl); font-weight: 650; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink-3); }
  .service__steps h3 { font-size: var(--fs-m); margin-bottom: var(--sp-1); }
  .service__steps p { color: var(--ink-2); font-size: var(--fs-s); }

  /* Decision and essentials: short titled items. */
  .service__items { display: grid; gap: var(--sp-4); }
  .service__items li { display: grid; gap: var(--sp-1); padding-top: var(--sp-3); border-top: 1px solid var(--line); align-content: start; }
  .service__items h3 { font-size: var(--fs-m); }
  .service__items p { color: var(--ink-2); font-size: var(--fs-s); }

  /* The related tool */
  .service__tool { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label icon" "title icon"; column-gap: var(--sp-3); align-items: center; padding: var(--sp-4) var(--sp-5); margin-top: var(--sp-2); color: var(--ink); text-decoration: none; }
  .service__tool-label { grid-area: label; font-size: var(--fs-xs); color: var(--ink-3); }
  .service__tool strong { grid-area: title; font-size: var(--fs-m); }
  .service__tool .icon { grid-area: icon; color: var(--ink-3); }
  .service__tool:hover { border-color: var(--ink); }
  .service__tool:hover strong { text-decoration: underline; text-underline-offset: 0.14em; }
  .service__tool:hover .icon { color: var(--ink); }

  /* Good to know */
  .service__note { background: var(--sea-tint); border-radius: var(--radius-l); padding: var(--sp-5); gap: var(--sp-2); }
  .service__note-kicker { font-size: var(--fs-xs); font-weight: 600; color: var(--sea-ink); }
  .service__note h2 { font-size: var(--fs-l); color: var(--sea-ink); }
  .service__note-text { font-size: var(--fs-s); }
  .service__refs-title { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3); margin-top: var(--sp-3); }
  .service__refs { display: grid; gap: var(--sp-1); font-size: var(--fs-xs); }
  .service__refs a { color: var(--sea-ink); overflow-wrap: anywhere; min-height: 1.5rem; display: inline-flex; align-items: center; }

  /* Next step */
  .service__cta { scroll-margin-top: calc(var(--header-h) + var(--sp-5)); }
  .service__cta .cluster { gap: var(--sp-2) var(--sp-3); }
  .service__agent { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line); }

  @media (min-width: 48em) {
    .service__head { padding-top: var(--sp-5); }
    .service__proof { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
    .service__prose { font-size: 1.125rem; }
    .service__items--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
    .service__steps li { gap: var(--sp-5); padding: var(--sp-5) 0; }
    .service__step-num { width: 3rem; font-size: var(--fs-2xl); }
    .service__note { padding: var(--sp-6); }
  }
  @media (min-width: 64em) {
    .service__layout { grid-template-columns: 12rem minmax(0, 42rem); column-gap: var(--sp-8); row-gap: var(--sp-6); justify-content: start; }
    .service__head { grid-column: 2; padding-top: var(--sp-5); }
    .service__toc { grid-column: 1; grid-row: 2; position: sticky; top: calc(var(--header-h) + var(--sp-5)); align-self: start; }
    .service__body { grid-column: 2; grid-row: 2; row-gap: calc(var(--sp-7) + var(--sp-2)); }
  }
}