/* Services page - loaded only by template-services.php. */
.svc-overview{padding-bottom:72px}

/* ---- Group bands ------------------------------------------------------
   The catalog is grouped into practices; each band gets a jump target so the
   chip row above can reach it. scroll-margin-top clears the fixed nav bar. */
.svc-jump{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:44px 0 8px}
.svc-jump a{
  display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1rem;
  border:1px solid var(--line);border-radius:999px;background:var(--paper);
  font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)
}
.svc-jump a:hover,.svc-jump a:focus-visible{background:var(--green);border-color:var(--green);color:#fff}
.svc-jump b{
  display:grid;place-items:center;min-width:1.5em;height:1.5em;padding:0 .35em;
  border-radius:999px;background:var(--snow);color:var(--green);font-size:.72rem
}
.svc-jump a:hover b,.svc-jump a:focus-visible b{background:rgba(255,255,255,.22);color:#fff}
.svc-group{scroll-margin-top:120px;padding-top:56px}
.svc-group-head{display:flex;flex-direction:column;gap:.6rem;margin-bottom:28px}
.svc-group-head h3{font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.03em}
.svc-group-head p{color:var(--muted);max-width:62ch}

.svc-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.svc-card{padding:0;overflow:hidden}
.svc-card-link{display:flex;flex-direction:column;height:100%}
.svc-card-media{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  background:linear-gradient(160deg,#fff,#E8EFE7);border-bottom:1px solid var(--line)
}
.svc-card-media::before{
  content:"";position:absolute;inset:auto -10% -30% auto;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(123,163,150,.34),transparent 68%)
}
.svc-card-media::after{
  content:"";position:absolute;top:12%;left:-8%;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(62,98,89,.12),transparent 72%)
}
.svc-card-media img{
  width:100%;height:100%;object-fit:cover;object-position:center;position:relative;z-index:1;
  transform:scale(1.02);transition:transform .85s var(--ease)
}
.svc-card:hover .svc-card-media img{transform:scale(1.07)}
.svc-card-body{padding:30px 30px 34px;display:flex;flex-direction:column;gap:14px;flex:1}
.svc-card-num,.svc-process-num,.svc-deliver-num{
  font-family:var(--display);font-weight:800;font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;color:var(--green)
}
.svc-card h3{font-size:1.38rem;letter-spacing:-.03em}
.svc-card p{color:var(--muted);font-size:.96rem;line-height:1.7;flex:1}
.svc-card .tlink{margin-top:.35rem}

.svc-process{background:linear-gradient(180deg,var(--paper),rgba(239,246,238,.72))}
.svc-process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.svc-process-card{padding:34px}
.svc-process-card h3{font-size:1.25rem;margin:.85rem 0 .8rem}
.svc-process-card p{color:var(--muted)}

.svc-stack{display:flex;flex-direction:column}
.svc-detail{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:74px 0;border-bottom:1px solid var(--line)}
.svc-detail:first-child{padding-top:12px}
.svc-detail:nth-child(even) .sd-media{order:-1}
.svc-detail h3{font-size:clamp(1.9rem,3.4vw,2.7rem);margin:.7rem 0 1rem}
.svc-detail p{color:var(--muted);margin-bottom:1.5rem}

.svc-list{list-style:none;display:flex;flex-direction:column;gap:.78rem}
.svc-list li{display:flex;gap:.75rem;align-items:flex-start;font-size:.98rem;line-height:1.6}
.svc-list li::before{
  content:"";width:16px;height:16px;flex:none;margin-top:.34rem;background:var(--green);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat
}

.sd-media{
  position:relative;min-height:360px;overflow:hidden;border-radius:26px;
  background:#DCE7DE;border:1px solid var(--line);
  box-shadow:0 42px 72px -52px rgba(33,41,34,.55)
}
.sd-media::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(33,41,34,.06))
}
.sd-media::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:44%;z-index:1;
  background:linear-gradient(180deg,transparent,rgba(33,41,34,.14))
}
.sd-media img{
  width:100%;height:100%;position:relative;z-index:0;object-fit:cover;
  filter:none
}

.svc-single{padding-bottom:54px}
.svc-single .tlink{margin-bottom:32px}
.svc-single-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:48px;align-items:center}
.svc-single-copy h2{margin:1rem 0 1.2rem}
.svc-hero-media{min-height:500px}
.svc-metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
.svc-metric{
  background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:20px 18px;
  box-shadow:0 18px 40px -34px rgba(33,41,34,.32)
}
.svc-metric span{
  display:block;font-family:var(--display);font-size:.68rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green);margin-bottom:.55rem
}
.svc-metric b{display:block;font-size:1rem;line-height:1.5}

.svc-inside{padding-top:0}
.svc-info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.svc-side-card{padding:34px}
.svc-side-card p{margin-top:1rem;color:var(--muted);font-size:1rem;line-height:1.75}
.svc-deliver-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.svc-deliver-card{display:flex;gap:18px;align-items:flex-start;padding:28px}
.svc-deliver-card p{font-weight:600;color:var(--ink);line-height:1.65}

.svc-related{background:var(--paper)}

@media(max-width:1080px){
  .svc-card-grid,.svc-process-grid{grid-template-columns:repeat(2,1fr)}
  .svc-detail,.svc-single-grid,.svc-info-grid{grid-template-columns:1fr;gap:34px}
  .svc-detail:nth-child(even) .sd-media{order:0}
  .svc-hero-media{min-height:400px}
}

@media(max-width:840px){
  .svc-card-grid,.svc-process-grid,.svc-deliver-grid,.svc-metric-grid{grid-template-columns:1fr}
  .svc-detail{padding:56px 0}
  .sd-media{min-height:300px}
}
