/* Services: light section with numbered rows (title darkens on scroll) */
.services {
  background: var(--paper); color: var(--paper-ink);
  border-radius: var(--radius) var(--radius) 0 0;
  padding-block: clamp(70px, 10vw, 150px);
}
.services__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(26px, 4vw, 54px); }
.services__head h2 { font-size: clamp(4.4rem, 13vw, 12rem); --fill: var(--paper-ink); }
.services__head p { max-width: 400px; color: rgba(11, 11, 12, .62); }

.svc { list-style: none; border-top: 1px solid var(--line-dark); }
.svc li { border-bottom: 1px solid var(--line-dark); border-radius: 20px; transition: background .4s var(--ease-out); }
.svc li:has([aria-expanded="true"]) { background: #fff; }
/* the whole row is a button that opens the description (accordion) */
.svc__btn {
  width: 100%; display: grid; grid-template-columns: 110px 1fr 64px 44px; gap: 24px; align-items: center;
  padding: clamp(20px, 2.6vw, 34px) 12px; text-align: start; border-radius: 20px;
  transition: padding .4s var(--ease-out);
}
.svc__btn:hover { padding-inline: 24px; }
.svc__sub { color: rgba(11, 11, 12, .6); font-size: .98rem; margin-top: 4px; }
.svc__plus { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line-dark); display: grid; place-items: center; font-size: 1.4rem; line-height: 1; transition: transform .35s var(--ease-out), background .3s, color .3s; }
.svc__btn[aria-expanded="true"] .svc__plus { transform: rotate(45deg); background: var(--paper-ink); color: #fff; border-color: transparent; }
.svc__panel { padding: 0 clamp(24px, 2.6vw, 34px) clamp(22px, 2.6vw, 34px) 12px; }
.svc__panel p { max-width: 760px; margin-inline-start: 134px; color: rgba(11, 11, 12, .72); line-height: 1.7; }
.services__intro { max-width: 460px; color: rgba(11, 11, 12, .62); }
.services__intro strong { display: block; color: var(--paper-ink); font-size: 1.25rem; font-weight: 900; margin-bottom: 6px; }
.svc__num { font-family: var(--f-display); font-size: clamp(2.6rem, 4.2vw, 3.8rem); line-height: 1; font-weight: 900; letter-spacing: -.04em; }
.svc h3 { font-size: clamp(1.15rem, 1.7vw, 1.5rem); font-weight: 900; line-height: 1.25; }
.svc__icon { width: 58px; opacity: .0; transform: scale(.5) rotate(-15deg); transition: all .5s var(--ease-spring); }
.svc__btn:hover .svc__icon, .svc__btn[aria-expanded="true"] .svc__icon { opacity: 1; transform: none; }
.services__cta { margin-top: 40px; display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 760px) {
  .svc__btn { grid-template-columns: 54px 1fr 36px; gap: 12px; padding-inline: 4px; }
  .svc__btn:hover { padding-inline: 4px; }
  .svc__icon { display: none; }
  .svc__plus { width: 34px; height: 34px; }
  .svc__panel { padding: 0 4px 22px; }
  .svc__panel p { margin-inline-start: 0; }
}