/* ============================================================
   SERVIZI
   ============================================================ */
.services{background:var(--ink);position:relative;overflow:hidden}
.services .head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:clamp(40px,5vw,64px)}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.svc{
  background:var(--surface);padding:clamp(26px,2.4vw,38px) clamp(22px,2vw,32px);
  min-height:300px;display:flex;flex-direction:column;position:relative;overflow:hidden;
  transition:background .35s var(--ease);
}
.svc::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--orange);transition:width .4s var(--ease)}
.svc:hover{background:var(--surface-2)}
.svc:hover::before{width:100%}
.svc .idx{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;color:var(--fog-dim)}
.svc .ic{color:var(--orange);margin:22px 0 18px;transition:transform .45s var(--ease)}
.svc:hover .ic{transform:translateY(-4px)}
.svc h3{font-family:var(--font-display);text-transform:uppercase;font-size:24px;line-height:1.02;letter-spacing:.01em;margin:18px 0 10px}
.svc p{margin:0;font-size:14.5px;color:var(--fog);line-height:1.55}
.svc .tags{margin-top:auto;padding-top:18px;display:flex;flex-wrap:wrap;gap:6px}
.svc .tags i{font-style:normal;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--fog-dim);border:1px solid var(--line);padding:4px 8px;border-radius:999px}

/* --- Expand card structure --- */
.svc-expand{position:relative;overflow:hidden}
.svc-content{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;padding:clamp(26px,2.4vw,38px) clamp(22px,2vw,32px)}
.svc.svc-expand{padding:0}

/* --- Photo background --- */
.svc-photo-bg{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;
  opacity:.07;
  transition:opacity .45s var(--ease);
}
.svc-photo-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.05) 50%,transparent 70%);
  background-size:250% 100%;
  animation:svcShimmer 4.5s ease-in-out infinite;
}
@keyframes svcShimmer{
  0%{background-position:250% 0}
  100%{background-position:-250% 0}
}
.svc-expand:hover .svc-photo-bg{opacity:.16}

/* --- Brief / Full text --- */
.svc.svc-expand p.svc-brief{margin:0 0 auto;font-size:14.5px;color:var(--fog);line-height:1.55}
.svc-full{
  max-height:0;overflow:hidden;
  transition:max-height .5s var(--ease),opacity .35s var(--ease);
  opacity:0;
}
.svc-expand.expanded .svc-full{max-height:480px;opacity:1}
.svc-full p{font-size:13.5px;color:var(--fog);line-height:1.65;margin:0;padding-top:14px;border-top:1px solid var(--line)}
.svc-full p.svc-strong{font-style:italic;color:var(--fog-dim);margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}

/* --- Toggle button --- */
.svc-toggle{
  background:none;border:none;cursor:pointer;
  color:var(--orange);font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;
  display:flex;align-items:center;gap:7px;
  padding:0;margin-top:18px;
  transition:color .2s var(--ease);
}
.svc-toggle:hover,.svc-toggle:focus-visible{color:var(--white)}
.svc-toggle:focus-visible{outline:2px solid var(--orange);outline-offset:4px;border-radius:2px}
.svc-toggle-icon{font-style:normal;font-size:16px;line-height:1;transition:transform .35s var(--ease)}
.svc-expand.expanded .svc-toggle-icon{transform:rotate(45deg)}

/* --- Responsive grid --- */
@media(max-width:960px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.svc-grid{grid-template-columns:1fr}}