/* ---------- services: an accordion with one row open ---------- */
.acc { list-style: none; margin: 0; padding: 0; }
.acc li { border-bottom: var(--rule); }
.acc button { all: unset; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 64px 1fr auto; gap: var(--s-5); align-items: center; padding-block: var(--s-4); cursor: pointer; }
.acc button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.acc h3 { margin: 0; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: calc(clamp(2rem, 1rem + 3.6vw, 4.75rem) * var(--display-scale)); line-height: .9; transition: color var(--dur); }
.acc button:hover h3, .acc li.is-open h3 { color: var(--hover-light); }
.acc button .icon { width: 36px; height: 36px; transition: transform 420ms var(--ease-out), color var(--dur); }
.acc li.is-open > button .icon { transform: rotate(90deg); color: var(--accent-ink); }

/* the panel opens by animating its grid row from 0fr to 1fr */
.acc .panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 520ms var(--ease-out); }
.acc li.is-open .panel { grid-template-rows: 1fr; }
.acc .panel > div { overflow: hidden; }
.acc .panel__in { display: grid; grid-template-columns: 64px minmax(0, 4fr) minmax(0, 4fr) minmax(0, 2fr); gap: var(--s-5); padding-bottom: var(--s-6); }
.acc .panel__in p { margin: 0; color: var(--muted); max-width: 40ch; }
.acc .panel__in p span { display: block; margin-top: var(--s-3); color: var(--text); }

/* "What you get" list */
.gets { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-2); }
.gets li { display: flex; gap: var(--s-2); align-items: center; border: 0; }
.gets .icon { width: 18px; height: 18px; color: var(--accent-ink); }

@media (max-width: 760px) {
  .acc button { grid-template-columns: 32px 1fr auto; }
  .acc button .icon { width: 28px; height: 28px; }
  .acc .panel__in { grid-template-columns: 1fr; }
  .acc .panel__in > span { display: none; }
}