/* services.html -- page-specific rules only. Tokens from style.css, never raw values. */

.gap-4{margin-top:var(--space-4)}

/* ---------- page head: h1/lead in the column, small cluster pills below, piece performs split4 beside it ---------- */
.svc-head{
  position:relative; z-index:1;
  padding:calc(var(--nav-h) + var(--space-7)) 0 var(--space-8);
  min-height:calc(100svh - var(--nav-h));
  display:flex; flex-direction:column; justify-content:center;
}
.svc-head h1{margin-top:var(--space-4)}
.svc-head h1 + .lead{margin-top:var(--space-5)}
.svc-head-clusters{
  display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-7);
}
.svc-head-clusters span{
  font-family:var(--font-mono); font-size:var(--step--1); line-height:1; letter-spacing:.04em;
  display:inline-flex; align-items:center; min-height:var(--space-6);
  border:1px solid var(--hair); border-radius:var(--radius-pill); padding:0 var(--space-4);
  color:var(--muted);
}
@media (max-width:640px){ .svc-head{padding-top:calc(var(--nav-h) + var(--space-5))} .svc-head-clusters{gap:var(--space-2); margin-top:var(--space-6)} }

/* ---------- the index ledger: whole row is one link ---------- */
.svc-ledger{margin-top:var(--space-7); border-bottom:1px solid var(--hair)}
.lrow{
  position:relative; display:block; padding:var(--space-7) 0; border-top:1px solid var(--hair);
  text-decoration:none; color:inherit;
}
.lrow:first-child{padding-top:0; border-top:none}
.lrow h3{margin-top:var(--space-2); transition:color .2s ease}
.lrow .body p{margin-top:var(--space-4)}
.lrow .body p b{font-weight:500}
.lrow .body ul{list-style:none; margin:var(--space-4) 0 0; padding:0; color:var(--muted)}
.lrow .body li{padding:var(--space-1) 0 var(--space-1) var(--space-5); position:relative; max-width:var(--measure)}
.lrow .body li::before{content:''; position:absolute; left:0; top:.75em; width:var(--space-3); height:1px; background:var(--blue-light)}
.lrow .ar{display:inline-block; margin-top:var(--space-4); color:var(--blue-light); font-size:var(--step-1); line-height:1; transition:transform .2s ease}
.lrow:hover h3, .lrow:focus-visible h3{color:var(--blue-light)}
.lrow:hover .ar{transform:translateX(var(--space-2))}
.lrow:focus-visible{outline:2px solid var(--blue-light); outline-offset:-2px; border-radius:var(--radius-1)}
@media (prefers-reduced-motion: reduce){ .lrow h3, .lrow .ar{transition:none} }

@media (min-width:820px){
  .lrow{display:grid; grid-template-columns:14rem 1fr; column-gap:var(--space-6); grid-template-rows:auto auto auto 1fr}
  .lrow .n{grid-column:1; grid-row:1}
  .lrow h3{grid-column:1; grid-row:2 / span 3}
  .lrow .body{grid-column:2; grid-row:1 / span 2}
  .lrow .body p:first-child{margin-top:0}
  .lrow .ar{grid-column:2; grid-row:4; justify-self:start}
}

/* ---------- pull quote ---------- */
blockquote.pull{
  margin:var(--space-7) 0; padding:0 0 0 var(--space-5); border-left:2px solid var(--blue-light);
  font-family:var(--font-text); font-size:var(--step-2); line-height:1.3; letter-spacing:-.01em;
  color:var(--paper); max-width:var(--measure-lead);
}

/* ---------- in practice: alternating framed screenshot + text ---------- */
.svc-split{margin-top:var(--space-9)}
.svc-split:first-of-type{margin-top:var(--space-7)}
.svc-split .frame{margin-bottom:var(--space-5)}
.svc-split .txt h3{margin:var(--space-2) 0 var(--space-3)}

@media (min-width:900px){
  .svc-split{display:grid; grid-template-columns:1fr 1fr; column-gap:var(--space-8); align-items:center}
  .svc-split .frame{margin-bottom:0}
  .svc-split--flip{direction:rtl}
  .svc-split--flip > *{direction:ltr}
}

/* ---------- closing CTA ---------- */
.chapter-cta{text-align:left}
.chapter-cta h2 + .lead{margin-top:var(--space-5)}
.chapter-cta .lead + .btn{margin-top:var(--space-6)}