/*
  Service group (.services; Figma Approach 486:87, 486:136, 486:43): one practice and what it covers. On the left, a
  Cal Sans title, a Cal Sans subtitle and a short white lede; on the right (the 880px column at x 519), the services,
  each a Cal Sans name over a white description and an optional grey note ("Good for: …"), with a hairline between them.

  Markup:
    <section class="services rule-b" aria-labelledby="strategy-title">
      <div class="services__head">
        <h2 class="cal h-section" id="strategy-title">Strategy</h2>
        [<p class="services__sub cal">Know what to build, and why</p>]
        <p class="services__lede">We work across the full spectrum…</p>
      </div>
      <ul class="services__list">
        <li class="service"><h3 class="service__name">Research</h3><p class="service__text t-summary">Evidence-based…</p>
          [<p class="service__note t-summary">Good for: …</p>]</li>
        …
      </ul>
    </section>
  Fields: title, subtitle?, lede, items[] of { name, text?, note? }. Any number of items.
  Type: descriptions and notes are the shared .t-summary (site.css; 20/23, phone 16/22): descriptions white, notes grey.
  The title sits 74px under the rule above; the subtitle 38px under the title, the lede 38px under the subtitle's line
  box (the list starts 128px below the title's top); 22px between a service's lines and 100px between services, the
  hairline halfway. Close with .rule-b unless the group is last before the footer (the footer brings its own rule).
*/
.services{display:grid;grid-template-columns:minmax(0,1fr) 88.08rem;column-gap:7.79rem;align-items:start;padding:7.4rem 4rem 5rem}
/* Subtitle, lede, names and descriptions are trimmed to cap height and baseline, as in Figma */
.services__sub{width:34.6rem;margin-top:3.8rem;font-size:2.4rem;line-height:2.4rem;text-box:trim-both cap alphabetic}
.services__lede{width:34.6rem;margin-top:3.8rem;font-weight:500;font-size:1.8rem;line-height:2.4rem;text-box:trim-both cap alphabetic}
.services__sub + .services__lede{margin-top:4.5rem}   /* 38px under the subtitle's 24px line box, not its cap line */
.services__list{margin:0;padding:12.8rem 0 0;list-style:none}
.service + .service{margin-top:5rem;padding-top:5rem;border-top:var(--rule) solid var(--fg)}
.service__name{font-family:"Cal Sans",Inter,sans-serif;font-weight:400;font-size:2.4rem;line-height:2.3rem;text-box:trim-both cap alphabetic}
.service__text,.service__note{margin-top:2.2rem;text-box:trim-both cap alphabetic}
.service__note{color:var(--grey)}

@media (max-width:767px){
  .services{grid-template-columns:1fr;padding:4.8rem 2rem 4rem}
  .services__sub{width:auto;margin-top:2rem;font-size:2rem;line-height:2.2rem}
  .services__lede,.services__sub + .services__lede{width:auto;margin-top:2rem;font-size:1.6rem;line-height:2.2rem}
  .services__list{padding-top:4rem}
  .service + .service{margin-top:3.2rem;padding-top:3.2rem}
  .service__name{font-size:2rem;line-height:2.2rem}
  .service__text,.service__note{margin-top:1.4rem}
}