/*
   Services landing: one restrained expression of the Lead Manager system.
   This file deliberately leaves the service-pair deck and its scroll behaviour
   alone; it only gives the opening cover a dark canvas shared with the core
   destinations.
*/
.services-landing{
  --services-ink:#030405;
  --services-paper:#f7f6ef;
  --services-muted:#c5cdc0;
  --services-green:#8bea4d;
}

.services-landing .pd-services{
  position:relative;
  isolation:isolate;
  overflow:clip;
  background:var(--services-ink);
  color:var(--services-paper);
}

.services-landing .pd-services::before{
  position:absolute;
  z-index:0;
  top:clamp(50px,7vw,118px);
  right:clamp(-280px,-16vw,-120px);
  width:clamp(380px,49vw,720px);
  aspect-ratio:1;
  border:1px solid rgba(247,246,239,.2);
  border-radius:50%;
  background:
    radial-gradient(circle at 31% 25%,rgba(247,246,239,.8) 0 1.2%,transparent 6%),
    radial-gradient(circle at 35% 34%,rgba(139,234,77,.52) 0 8%,rgba(139,234,77,.16) 29%,transparent 67%);
  box-shadow:
    0 0 0 clamp(22px,3.6vw,54px) rgba(139,234,77,.035),
    0 0 0 clamp(52px,7vw,104px) rgba(247,246,239,.025);
  content:"";
  pointer-events:none;
}

.services-landing .pd-services::after{
  position:absolute;
  z-index:0;
  inset:0;
  background-image:
    linear-gradient(rgba(247,246,239,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(247,246,239,.055) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 57% 84% at 100% 50%,#000 0%,transparent 76%);
  content:"";
  opacity:.56;
  pointer-events:none;
}

.services-landing .pd-services>.pd-shell{position:relative;z-index:1}
.services-landing .pd-services .pd-kicker{color:var(--services-green)}
.services-landing .pd-services #services-hero-title{color:var(--services-paper)}
.services-landing .pd-services #services-hero-title em{color:var(--services-green)}
.services-landing .pd-services .pd-description{color:var(--services-muted)}
.services-landing .pd-services .pd-button{border-color:var(--services-green);background:var(--services-green);color:var(--services-ink)}
.services-landing .pd-services .pd-button:hover{border-color:#a7f471;background:#a7f471;color:var(--services-ink)}
.services-landing .pd-services .pd-link{color:var(--services-paper)}
.services-landing .pd-services .pd-link:hover{color:var(--services-green)}

/* The photographic triptych keeps its existing asymmetry and hover motion. */
.services-landing .pd-services .pd-service-cover{border:1px solid rgba(247,246,239,.18);background:#101510;box-shadow:0 20px 50px rgba(0,0,0,.24)}
.services-landing .pd-services .pd-service-cover::after{background:linear-gradient(180deg,rgba(3,4,5,.04) 18%,rgba(3,4,5,.88) 100%)}
.services-landing .pd-services .pd-service-cover>span{color:var(--services-paper)}
.services-landing .pd-services .pd-service-cover:hover{border-color:rgba(139,234,77,.8)}

.services-landing .pd-services .pd-services-index{border-top-color:rgba(247,246,239,.22);color:var(--services-paper)}
.services-landing .pd-services .pd-services-index>span{color:var(--services-muted)}
.services-landing .pd-services .pd-services-index a{color:inherit}
.services-landing .pd-services .pd-services-index a:hover{color:var(--services-green);text-decoration-color:var(--services-green)}

@media(max-width:800px){
  .services-landing .pd-services::before{top:42%;right:-42%;width:min(640px,104vw)}
  .services-landing .pd-services::after{mask-image:radial-gradient(ellipse 100% 48% at 75% 64%,#000 0%,transparent 81%)}
}

@media(max-width:540px){
  .services-landing{overflow-x:hidden}
  .services-landing .pd-services .pd-description{max-width:calc(100vw - 40px);overflow-wrap:anywhere}
  .services-landing .pd-services .pd-actions{display:grid;grid-template-columns:minmax(0,1fr);justify-items:start;gap:15px}
  .services-landing .pd-services .pd-link{max-width:100%;white-space:normal}
  .services-landing .pd-services .pd-service-collage{min-width:0}
}

@media(prefers-reduced-motion:reduce){
  .services-landing .pd-services .pd-service-cover:hover img{transform:none}
}

/* On phones, keep both supporting covers on the same row below the main cover. */
@media(max-width:600px){
  .services-landing .pd-services .pd-service-cover--marketing{grid-column:1;grid-row:2}
  .services-landing .pd-services .pd-service-cover--systems{grid-column:2;grid-row:2}
}