/* Services: the three courses set flat on the bone field, like a monograph's menu page */
.services{padding-block:64px}
.services .sec-head{margin-bottom:32px}

.services .courses{display:grid}
.services .course{display:grid;grid-template-columns:44px minmax(0,1fr);padding-block:14px;border-top:1px solid var(--line)}
.services .course:first-child{padding-top:6px;border-top:0}
.services .course:last-child{padding-bottom:0}
.services .c-head{display:contents}
/* the negative top margin keeps the big numeral from heightening the title row while baselines still match */
.services .c-no{grid-column:1;align-self:baseline;margin-top:-.32em;font-family:var(--font-display);font-size:28px;font-weight:700;line-height:1;color:var(--ink);font-variant-numeric:lining-nums}
.services .course h3{grid-column:2;align-self:baseline;font-size:24px;line-height:1.15;color:var(--ink)}
.services .c-desc{grid-column:2;margin-top:4px;max-width:66ch;font-size:17px;line-height:1.45;color:var(--ink)}
.services .c-items{grid-column:2;margin-top:6px}
.services .c-items li{position:relative;padding-left:20px;font-size:16px;line-height:1.45;color:var(--mute)}
.services .c-items li::before{content:"\2013";position:absolute;left:0;top:0;color:var(--mute)}

.services .svc-act{margin-top:32px}
.services .btn.ink:active{transform:translateY(1px)}
.services .btn.ink:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

/* desktop 5/7: photo fills cols 1-5 at the menu's height; numerals get their own 64px gutter */
@media (min-width:901px){
  .services{padding-block:88px}
  .services .split{align-items:stretch}
  .services .svc-ph{grid-column:1/span 4;aspect-ratio:auto;min-height:0}
  .services .svc-ph picture,.services .svc-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
  .services .svc-menu{grid-column:5/-1;padding-left:16px}
  .services .course{grid-template-columns:64px minmax(0,1fr)}
  .services .c-no{font-size:clamp(32px,3vw,44px)}
  .services .svc-act{margin-top:20px;padding-left:64px}
}

/* phones and tablets: 4:3 photo, then the courses, then the button full width */
@media (max-width:900px){
  .services .svc-ph{width:100%;max-width:520px;aspect-ratio:4/3;justify-self:start}
  .services .svc-act .btn{width:100%}
}