/* 2026-10-13 THE SERVICES PAGE, redone in the About page's language (James: "no eyebrow and redesign it to be more in
   line with our aesthetic"). Loaded by services/ only, after the four shared sheets. A small title and a big statement
   on top, a dashed rule, then the two lists as table rows: a number, the service, one sentence. No rails, no circles.
   One screen on desktop. */
.services{border-top:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 clamp(20px,2.4vw,40px);align-content:start}
.sec-head{grid-column:1/5;grid-row:1;padding-top:.25em}
.sec-head h2{margin-top:0;font-size:clamp(20px,1.5vw,24px);line-height:1.15;letter-spacing:-.018em;color:var(--plate)}
.svc-lead{grid-column:5/13;grid-row:1;margin:0;max-width:30ch;color:var(--film);font:500 clamp(24px,2.3vw,34px)/1.22 var(--sans);letter-spacing:-.016em;text-wrap:balance}
.services::before{content:"";grid-column:1/-1;grid-row:2;align-self:start;height:0;margin-top:clamp(20px,2.6vh,32px);border-top:1px dashed var(--dash)}
.svc{grid-column:1/-1;grid-row:3;margin-top:clamp(20px,2.6vh,32px);gap:32px clamp(32px,5vw,96px)}
.svc h3{display:block;padding:14px 0 12px;border-bottom:0;font-size:clamp(18px,1.3vw,20px);line-height:1.2;color:var(--plate)}
.svc ul{margin:0;padding:0;list-style:none}
.svc li{grid-template-columns:44px minmax(0,1fr);gap:4px 0;padding:14px 0 16px;border-top:1px dashed var(--dash);border-bottom:0}
.svc li:last-child{border-bottom:1px dashed var(--dash)}
.svc li::before,.svc li::after{display:none}
.svc-n{grid-row:1/3;align-self:start;margin-top:4px;padding:0;font:500 12px/1.6 var(--sans);letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--dim)}
.svc-n::before{display:none}
.svc li b{font:600 17px/1.3 var(--sans);letter-spacing:-.012em;color:var(--ink)}
.svc li>span:last-child{max-width:46ch;font-size:15px;line-height:1.55;color:var(--muted)}
.svc li:hover .svc-n,.svc li:last-child .svc-n{color:var(--dim)}

/* ── desktop: one screen, like the About page */
@media (min-width:901px){
  html,body{height:100%}
  body{display:flex;flex-direction:column;min-height:100svh}
  #main{flex:1 1 auto;display:flex;flex-direction:column}
  .services.page-sec,main>.services.page-sec{flex:1 1 auto;padding-block:clamp(22px,3vh,40px) 0}
  .foot{padding-block:16px 18px}
}

/* ── phones: one column at reading sizes */
@media (max-width:900px){
  .services{padding-block:36px 56px}
  /* 2026-10-13 (James: "the services header on that page on the phone looks weird"): explicit rows; on auto the dashed
     rule (::before, first in source order) landed ABOVE the title and pushed the header down 27 px */
  .sec-head{grid-column:1/-1;grid-row:1;padding-top:0}
  .sec-head h2{font-size:20px;line-height:1.2;color:var(--muted);letter-spacing:-.01em}
  .svc-lead{grid-column:1/-1;grid-row:2;margin-top:10px;font-size:26px;line-height:1.28;letter-spacing:-.018em;max-width:22ch}
  .services::before{grid-row:3;margin-top:26px}
  .svc{grid-row:4;grid-template-columns:minmax(0,1fr);gap:28px;margin-top:22px}
  .svc h3{font-size:18px;padding:12px 0 10px}
  .svc li{padding:12px 0 14px}
  .svc li b{font-size:16.5px}
  .svc li>span:last-child{font-size:14.5px}
}