/* Page-level additions for the Elastic Services build.
   Only two things live here: a ninth case-study tile colour drawn from the
   template's own palette family, and the proof-metric line in the
   case-study header (source metrics, no filter UI in this template). */

.case-study-showcase-variant-f__tile--teal{background:#1F3F4D}

.page-proof-metrics{
  display:flex;
  flex-wrap:wrap;
  gap:10px 28px;
  margin-top:6px;
}
.page-proof-metrics li{
  display:flex;
  align-items:baseline;
  gap:8px;
  font-family:var(--body);
  font-size:var(--fs-body);
  line-height:var(--lh-tight);
  color:var(--grey-mid);
}
.page-proof-metrics b{
  font-family:var(--display);
  font-weight:400;
  font-size:24px;
  line-height:var(--lh-tight);
  color:var(--deep);
}

/* Hero: the source control-tower banner runs as a full-bleed plate instead of
   the template's scaled device stage, lifted in brightness so the tower side
   reads as lit, with the scrim weighted left to protect the copy column. */
.dark-device-demo-hero__photo{z-index:-2}
.dark-device-demo-hero__stage{
  position:absolute;inset:0;width:auto;height:auto;transform:none;
}
.dark-device-demo-hero__device-photo{
  width:100%;height:100%;object-fit:cover;object-position:74% 50%;
  filter:brightness(1.34) contrast(1.04) saturate(1.1);
}
.dark-device-demo-hero__scrim{
  background:
    linear-gradient(100deg,rgba(8,11,15,.90) 0%,rgba(8,11,15,.78) 30%,rgba(8,11,15,.34) 54%,rgba(8,11,15,0) 76%),
    radial-gradient(52% 60% at 80% 40%,rgba(255,240,214,.20) 0%,rgba(255,240,214,0) 70%),
    linear-gradient(to top,rgba(8,11,15,.52) 0%,rgba(8,11,15,0) 42%);
}
@media (max-width:960px){
  .dark-device-demo-hero__device-photo{object-position:66% 50%}
  .dark-device-demo-hero__photo{aspect-ratio:1672/941}
}

/* Capability band: title, lede and panel content all start on the section's
   own left edge; the white panel card bleeds past it so the numerals and row
   rules keep their gutter. Desktop only — the template's own mobile rules
   already align the head. */
@media (min-width:901px){
  /* The shell edge is the single left datum: title, lede and bronze rule sit on
     it, like every other section on the page. The white panel card bleeds
     outward only where the margin outside the shell genuinely allows it (wide
     windows), and its inner gutter never drops below 40px, so the numerals and
     row rules always keep clearance. */
  .contents-page-index-band{--cpib-bleed:min(48px, max(0px,(100vw - var(--shell))/2 - 40px))}
  .contents-page-index-band__head{padding-left:0;padding-right:0}
  .contents-page-index-band__title{max-width:100%}
  .contents-page-index-band__lede{max-width:none}
  .contents-page-index-band__sections{margin-left:calc(-1 * var(--cpib-bleed));margin-right:calc(-1 * var(--cpib-bleed))}
  /* Standard 56px gap between the band's lede and the first panel. */
  .contents-page-index-band__sections{margin-top:56px}
  .contents-page-index-band__panel{
    padding-left:max(40px, var(--cpib-bleed));
    padding-right:max(40px, var(--cpib-bleed));
  }
}
/* Final CTA reduced to one headline plus the action, with a single oversized
   rocket silhouette flying over the band and the section above it. */
.engagement-ledger-index,
.cta-standard-bronze-ledger-band{position:relative}
/* The oversized rocket ::before overhangs the right edge; clip sideways only (vertical overhang stays). */
.cta-standard-bronze-ledger-band{overflow-x:clip}
.engagement-ledger-index > *,
.cta-standard-bronze-ledger-band__el-2{position:relative;z-index:1}
.cta-standard-bronze-ledger-band::before{
  content:"";
  position:absolute;
  right:calc(4% - 100px);
  bottom:-544px;
  width:min(885px,79vw);
  aspect-ratio:1;
  background:url("../media/rocket-silhouette.svg") no-repeat center/contain;
  transform:rotate(-26deg);
  opacity:.14;
  pointer-events:none;
  z-index:60;
  mix-blend-mode:multiply;
}
.cta-standard-bronze-ledger-band__el-3{align-items:center;justify-content:space-between}
.cta-standard-bronze-ledger-band__el-8{
  flex:none;margin-top:0;padding-top:0;border-top:0;
}
@media (max-width:720px){
  .cta-standard-bronze-ledger-band__el-3{align-items:flex-start;gap:28px}
  .cta-standard-bronze-ledger-band::before{right:calc(-18% + 80px);width:min(570px,113vw)}
}

/* Case-study tiles carry no source artwork: collapse the empty art row. */
.case-study-showcase-variant-f__tile{grid-template-rows:auto minmax(48px,1fr) auto}