/* Services on the home page: six rows in a light, small type, each showing its icon, name and arrow. One row is open at a time: its description and tags
   slide open when the pointer comes over it (tap on phones), see js/sections/services-list.js. */
.svx{padding:0 var(--gutter)}
.x-head{padding:72px 0 36px;max-width:620px}
.x-head h2{font-weight:var(--fw-bold);font-size:var(--fs-services-title);line-height:1.15;color:var(--title)}
.x-head p{margin-top:14px;font-size:var(--fs-18);color:var(--grey)}
.x-stack{display:grid;padding-bottom:80px;max-width:820px;border-top:1px solid var(--line)}
.x-svc{border-bottom:1px solid var(--line);color:var(--head)}

.x-row{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:18px;padding:16px 0;cursor:pointer;
  transition:padding-inline-start .5s var(--ease-out)}
.x-art{width:48px;height:40px;display:grid;place-items:center}
.x-ic{width:32px;height:32px;color:var(--char);transition:color .3s var(--ease-out),transform .5s var(--ease-out)}  /* line icons drawn inline, no tile */
.x-svc h2{font-weight:var(--fw-regular);font-size:var(--fs-22);line-height:1.25;color:inherit;transition:color .3s var(--ease-out)}

.x-go{width:40px;height:40px;border-radius:var(--r-round);display:grid;place-items:center;border:1px solid var(--border-strong);color:var(--head);
  transition:background-color .3s var(--ease-out),border-color .3s var(--ease-out),color .3s var(--ease-out),transform .4s var(--ease-out)}

/* the open row: pushed in a little, name in brand red, arrow filled and turned, details shown */
.x-svc.is-open .x-row{padding-inline-start:14px}
.x-svc.is-open h2{color:var(--red)}
.x-svc.is-open .x-ic{color:var(--red);transform:scale(1.08)}
.x-svc.is-open .x-go{background:var(--red);border-color:var(--red);color:var(--white);transform:rotate(-45deg)}

.x-more{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .5s var(--ease-out),opacity .5s var(--ease-out)}
.x-more>div{overflow:hidden;padding-inline-start:calc(48px + 18px + 14px)}
.x-svc.is-open .x-more{grid-template-rows:1fr;opacity:1}
.x-more p{font-size:var(--fs-15-5);line-height:1.8;max-width:52ch;color:var(--char)}
.x-tg{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 20px}
.x-tg span{font-size:var(--fs-12);padding:6px 14px;border:1px solid var(--white-a22);border-radius:var(--r-pill);color:var(--head)}

@media (max-width:760px){
  .svx{padding:0 var(--gutter-m)}
  .x-row{grid-template-columns:40px minmax(0,1fr) auto;gap:12px;padding:14px 0}
  .x-art{width:40px;height:34px}
  .x-ic{width:28px;height:28px}
  .x-svc.is-open .x-row{padding-inline-start:8px}
  .x-svc h2{font-size:var(--fs-17)}
  .x-go{width:36px;height:36px}
  .x-more>div{padding-inline-start:0}
  .x-more p{font-size:var(--fs-15)}
}
@media (prefers-reduced-motion:reduce){.x-row,.x-more,.x-go,.x-ic{transition:none}}

/* home page: a button to the full services page under the list */
.x-stack:has(+ .sv-all){padding-bottom:0}
.sv-all{margin:32px 0 80px}
@media (max-width:760px){.sv-all{margin:24px 0 56px}}