/* Services page: a grid of the 14 service cards, each with a line icon in a small tile, the service name and one sentence.
   On pointer devices a card lifts on hover, its border and top edge turn red, and a soft red glow follows the pointer
   (--mx / --my, set by js/sections/services-cards.js). The li is the scroll reveal; the inner box does the hover.
   Coming in: one row at a time, every card of the row together, dropping from above; the next row follows (same script). */
.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)}

.sv-grid{list-style:none;margin:0;padding:0 0 80px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.sv-card{display:flex}
.js .sv-card{opacity:0;transform:translateY(-32px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.js .sv-card.in{opacity:1;transform:none}
.sv-box{position:relative;overflow:hidden;isolation:isolate;flex:1;padding:26px 24px 28px;border-radius:var(--r-20);background:var(--ink);border:1px solid var(--line);
  transition:transform .45s var(--ease-out),border-color .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.sv-box::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .45s var(--ease-out);
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,0%),var(--red-a18),transparent 70%)}
.sv-box::after{content:"";position:absolute;inset:0 0 auto;height:1px;opacity:0;transition:opacity .45s var(--ease-out);
  background:linear-gradient(90deg,transparent,var(--red),transparent)}
.sv-ic{width:48px;height:48px;border-radius:var(--r-12);display:grid;place-items:center;background:var(--red-wash);border:1px solid var(--red-a35);color:var(--red-on-dark);
  transition:transform .45s var(--ease-out),background-color .45s var(--ease-out)}
.sv-box h3{margin-top:22px;font-size:var(--fs-19);font-weight:var(--fw-bold);line-height:1.45;color:var(--head)}
.sv-box p{margin-top:10px;font-size:var(--fs-15);line-height:1.85;color:var(--grey)}

@media (hover:hover) and (pointer:fine){
  .sv-box:hover{transform:translateY(-5px);border-color:var(--red-a70);box-shadow:var(--shadow-card)}
  .sv-box:hover::before,.sv-box:hover::after{opacity:1}
  .sv-box:hover .sv-ic{transform:translateY(-2px);background:var(--red-a18)}
}
@media (max-width:1100px){.sv-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.sv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .svx{padding:0 var(--gutter-m)}
  .sv-grid{grid-template-columns:1fr;gap:14px;padding-bottom:56px}
  .sv-box{padding:22px 20px 24px}
  .sv-box h3{margin-top:16px;font-size:var(--fs-17)}
}
@media (prefers-reduced-motion:reduce){.js .sv-card{opacity:1;transform:none;transition:none}.sv-box,.sv-box::before,.sv-box::after,.sv-ic{transition:none}}