/* ============================================================
   Hero polish — shared premium treatment for every photographic
   hero (home, services, solutions, industries, about, careers,
   contact, estimate, approach, team). Slow image settle, layered
   overlays, glass cards and staggered copy entrance.
   ============================================================ */

/* ---------- Image settle (slow zoom-out on load) ---------- */
.hero-background-image img,
.inner-hero-background-image img,
.team-hero-background-image img,
.careers-hero-background-image img{
  transform-origin:60% 40%;
  animation:heroSettle 2.4s cubic-bezier(.2,.65,.2,1) forwards;
  will-change:transform;
}
@keyframes heroSettle{from{transform:scale(1.09)}to{transform:scale(1)}}

/* ---------- Layered overlays ---------- */
.inner-hero-with-background-image:before{
  background:
    linear-gradient(90deg,rgba(5,12,21,.92) 0%,rgba(5,12,21,.78) 36%,rgba(5,12,21,.34) 64%,rgba(5,12,21,.10) 100%),
    linear-gradient(0deg,rgba(5,12,21,.70) 0%,rgba(5,12,21,.12) 42%,rgba(5,12,21,.22) 100%),
    radial-gradient(ellipse at 8% 100%,rgba(140,255,90,.14),transparent 46%)!important;
}
.inner-hero-with-background-image:after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:84px 84px;
  -webkit-mask-image:radial-gradient(ellipse at 20% 30%,#000 0%,transparent 60%);mask-image:radial-gradient(ellipse at 20% 30%,#000 0%,transparent 60%);
}
.inner-hero-with-background-image .inner-hero-grid{min-height:520px!important;padding-bottom:12px!important}
.inner-hero-with-background-image .inner-hero-copy{padding-top:6px}
.inner-hero-with-background-image .inner-hero-copy h1{text-shadow:0 18px 60px rgba(0,0,0,.35)}
.inner-hero-with-background-image .inner-hero-copy>p{color:rgba(255,255,255,.74)!important}
.inner-hero-with-background-image .eyebrow-dark{display:inline-flex!important;align-items:center;gap:10px;color:rgba(255,255,255,.72)!important}
.inner-hero-with-background-image .eyebrow-dark:before{content:"";width:28px;height:2px;flex:0 0 28px;border-radius:1px;background:#3f9f2c;box-shadow:none;opacity:1}

/* ---------- Glass card ---------- */
.inner-hero-with-background-image .inner-hero-background-card{
  background:rgba(10,16,26,.58)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);
  box-shadow:0 40px 90px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08)!important;
  overflow:hidden;
}
.inner-hero-with-background-image .inner-hero-background-card:before{
  content:"";position:absolute;left:0;top:0;width:100%;height:3px;
  background:linear-gradient(90deg,var(--accent),rgba(140,255,90,0));
}
.inner-hero-with-background-image .inner-hero-background-card>span{color:var(--accent)!important}
.inner-hero-with-background-image .inner-photo-tags i{border-color:rgba(255,255,255,.18)!important;color:rgba(255,255,255,.82)!important}

/* ---------- Copy entrance (progressive, JS-marked) ---------- */
.js .inner-hero-with-background-image .inner-hero-copy>*,
.js .page-home .hero-with-background-image .hero-copy>*,
.js .team-hero-with-background-image .team-hero-copy>*,
.js .careers-hero-with-background-image .careers-copy>*{
  opacity:0;transform:translateY(22px);
  animation:heroRise .95s cubic-bezier(.2,.65,.2,1) forwards;
}
.js .inner-hero-with-background-image .inner-hero-copy>*:nth-child(1),.js .page-home .hero-with-background-image .hero-copy>*:nth-child(1),.js .team-hero-with-background-image .team-hero-copy>*:nth-child(1),.js .careers-hero-with-background-image .careers-copy>*:nth-child(1){animation-delay:.08s}
.js .inner-hero-with-background-image .inner-hero-copy>*:nth-child(2),.js .page-home .hero-with-background-image .hero-copy>*:nth-child(2),.js .team-hero-with-background-image .team-hero-copy>*:nth-child(2),.js .careers-hero-with-background-image .careers-copy>*:nth-child(2){animation-delay:.2s}
.js .inner-hero-with-background-image .inner-hero-copy>*:nth-child(3),.js .page-home .hero-with-background-image .hero-copy>*:nth-child(3),.js .team-hero-with-background-image .team-hero-copy>*:nth-child(3),.js .careers-hero-with-background-image .careers-copy>*:nth-child(3){animation-delay:.34s}
.js .inner-hero-with-background-image .inner-hero-copy>*:nth-child(4),.js .page-home .hero-with-background-image .hero-copy>*:nth-child(4),.js .careers-hero-with-background-image .careers-copy>*:nth-child(4){animation-delay:.48s}
.js .inner-hero-with-background-image .inner-hero-copy>*:nth-child(5),.js .page-home .hero-with-background-image .hero-copy>*:nth-child(5){animation-delay:.6s}
.js .inner-hero-with-background-image .inner-hero-background-card,
.js .page-team .team-count-card{
  opacity:0;transform:translateY(26px);
  animation:heroRise 1s cubic-bezier(.2,.65,.2,1) .55s forwards;
}
@keyframes heroRise{to{opacity:1;transform:none}}
/* the reveal observer also toggles these copy blocks — neutralise so both systems agree */
.js .inner-hero-with-background-image .inner-hero-copy.reveal,
.js .team-hero-with-background-image .team-hero-copy.reveal,
.js .page-home .hero-with-background-image .hero-copy.reveal{opacity:1!important;transform:none!important;transition:none!important}

/* ---------- Home hero ---------- */
.page-home .hero-with-background-image .hero-background-image:after{
  background:
    linear-gradient(90deg,rgba(4,12,21,.90) 0%,rgba(4,12,21,.76) 34%,rgba(4,12,21,.34) 62%,rgba(4,12,21,.08) 86%),
    linear-gradient(0deg,rgba(4,12,21,.62) 0%,transparent 40%,rgba(4,12,21,.14) 100%),
    radial-gradient(ellipse at 6% 96%,rgba(140,255,90,.16),transparent 44%)!important;
}
.page-home .hero-with-background-image .hero-copy h1{text-shadow:0 22px 70px rgba(0,0,0,.4)}
.page-home .hero-with-background-image .hero-kicker{color:rgba(255,255,255,.72)}
.page-home .hero-proof-band{position:relative;z-index:2}

/* ---------- Team / careers heroes ---------- */
.team-hero-background-image:after{
  background:
    linear-gradient(90deg,rgba(5,12,21,.90) 0%,rgba(5,12,21,.70) 40%,rgba(5,12,21,.22) 72%,rgba(5,12,21,.08) 100%),
    linear-gradient(0deg,rgba(5,12,21,.64),transparent 48%)!important;
}
.page-team .team-count-card{
  background:rgba(10,16,26,.6)!important;color:#fff!important;
  border:1px solid rgba(255,255,255,.14)!important;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 40px 90px rgba(0,0,0,.45)!important;
}
.page-team .team-count-card strong{color:var(--accent)!important}
.page-team .team-count-card span{color:#fff!important}
.page-team .team-count-card small{color:rgba(255,255,255,.6)!important}

@media(max-width:1080px){
  .inner-hero-with-background-image .inner-hero-grid{min-height:460px!important}
}
@media(max-width:760px){
  .inner-hero-with-background-image .inner-hero-grid{min-height:0!important}
  .inner-hero-with-background-image:after{display:none}
}
@media(prefers-reduced-motion:reduce){
  .hero-background-image img,.inner-hero-background-image img,.team-hero-background-image img,.careers-hero-background-image img{animation:none}
  .js .inner-hero-with-background-image .inner-hero-copy>*,.js .page-home .hero-with-background-image .hero-copy>*,.js .team-hero-with-background-image .team-hero-copy>*,.js .careers-hero-with-background-image .careers-copy>*,.js .inner-hero-with-background-image .inner-hero-background-card,.js .page-team .team-count-card{animation:none;opacity:1;transform:none}
}
@media(min-width:1081px){.page-home .hero-with-background-image .hero-background-image img{object-position:56% 30%!important}}
/* Contact: subject sits bottom-right, so the card stacks under the copy instead */
@media(min-width:1081px){
  .page-contact .inner-hero-with-background-image .inner-hero-grid{min-height:640px!important}
  .page-contact .inner-hero-with-background-image .inner-hero-background-card{left:0!important;right:auto!important;width:min(440px,40%)!important}
  .page-contact .inner-hero-with-background-image .inner-hero-copy{padding-bottom:230px}
}

/* 2026 clean root-page photographic heroes: one content column, no secondary info card. */
.inner-hero-clean .inner-hero-grid{
  display:block!important;
  min-height:500px!important;
  padding-bottom:0!important;
}
.inner-hero-clean .inner-hero-copy{
  max-width:min(720px,56%)!important;
  padding:26px 0 22px!important;
}
.inner-hero-clean .inner-hero-background-image img{
  object-position:78% 44%!important;
}
.inner-hero-clean:before{
  background:
    linear-gradient(90deg,rgba(5,12,21,.96) 0%,rgba(5,12,21,.88) 31%,rgba(5,12,21,.58) 49%,rgba(5,12,21,.18) 69%,rgba(5,12,21,.05) 100%),
    linear-gradient(0deg,rgba(5,12,21,.54) 0%,rgba(5,12,21,.06) 55%,rgba(5,12,21,.14) 100%)!important;
}

.inner-hero-clean .inner-hero-copy>p{
  max-width:610px!important;
}

/* Team follows the same clean left-copy hero pattern. */
.page-team .team-hero-with-background-image{
  min-height:620px!important;
  padding:132px 0 74px!important;
}
.page-team .team-hero-background-image img{object-position:79% 44%!important}
.page-team .team-hero-background-image:after{
  background:
    linear-gradient(90deg,rgba(5,12,20,.96) 0%,rgba(5,12,20,.86) 32%,rgba(5,12,20,.52) 51%,rgba(5,12,20,.12) 72%,rgba(5,12,20,.04) 100%),
    linear-gradient(0deg,rgba(5,12,20,.50),transparent 55%)!important;
}
.page-team .team-hero-with-background-image .team-hero-refined-grid{
  display:block!important;
  min-height:420px!important;
}
.page-team .team-hero-with-background-image .team-hero-copy{
  max-width:min(700px,56%)!important;
  padding:24px 0!important;
}
.page-team .team-hero-with-background-image .team-hero-copy .hero-actions{margin-top:28px}
.page-team .team-group-scene,.page-team .team-count-card{display:none!important}

/* Careers: remove the floating light wrapper and keep all content cleanly on the left. */
.careers-hero-with-background-image{background:#08111a!important}
.careers-hero-background-image img{object-position:79% 42%!important}
.careers-hero-background-image:after{
  background:
    linear-gradient(90deg,rgba(5,12,20,.96) 0%,rgba(5,12,20,.86) 31%,rgba(5,12,20,.55) 50%,rgba(5,12,20,.14) 72%,rgba(5,12,20,.04) 100%),
    linear-gradient(0deg,rgba(5,12,20,.5),transparent 55%)!important;
}
.careers-hero-with-background-image .careers-copy{
  max-width:min(720px,57%)!important;
  padding:24px 0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  color:#fff!important;
}
.careers-hero-with-background-image .careers-copy .eyebrow{color:#91ff57!important}
.careers-hero-with-background-image .careers-copy h1{color:#fff!important;text-shadow:0 18px 60px rgba(0,0,0,.35)}
.careers-hero-with-background-image .careers-copy h1 em{color:#91ff57!important}
.careers-hero-with-background-image .careers-copy p{color:rgba(255,255,255,.76)!important;max-width:620px!important}
.careers-hero-with-background-image .button-outline{border-color:rgba(255,255,255,.30)!important;color:#fff!important;background:rgba(255,255,255,.06)!important}

@media(max-width:900px){
  .inner-hero-clean .inner-hero-copy,
  .page-team .team-hero-with-background-image .team-hero-copy,
  .careers-hero-with-background-image .careers-copy{max-width:70%!important}
  .inner-hero-clean .inner-hero-background-image img,
  .page-team .team-hero-background-image img,
  .careers-hero-background-image img{object-position:72% center!important}
}
@media(max-width:760px){
  .inner-hero-clean .inner-hero-copy,
  .page-team .team-hero-with-background-image .team-hero-copy,
  .careers-hero-with-background-image .careers-copy{max-width:100%!important;padding:12px 0!important}
  .inner-hero-clean:before,
  .page-team .team-hero-background-image:after,
  .careers-hero-background-image:after{
    background:linear-gradient(90deg,rgba(5,12,20,.94),rgba(5,12,20,.78) 62%,rgba(5,12,20,.44))!important;
  }
  .inner-hero-clean .inner-hero-background-image img,
  .page-team .team-hero-background-image img,
  .careers-hero-background-image img{object-position:68% center!important}
  .page-team .team-hero-with-background-image,
  .careers-hero-with-background-image{min-height:0!important;padding:110px 0 54px!important}
}

/* 2026-10 hero image clarity refinement
   Preserve strong contrast behind left-aligned copy while allowing the
   right-side photographic subject to remain substantially clearer. */
@media(min-width:761px){
  .inner-hero-with-background-image:before,
  .inner-hero-clean:before{
    background:
      linear-gradient(90deg,
        rgba(5,12,21,.94) 0%,
        rgba(5,12,21,.84) 29%,
        rgba(5,12,21,.52) 45%,
        rgba(5,12,21,.18) 57%,
        rgba(5,12,21,.045) 68%,
        rgba(5,12,21,0) 79%),
      linear-gradient(0deg,rgba(5,12,21,.18) 0%,rgba(5,12,21,0) 48%),
      radial-gradient(ellipse at 7% 100%,rgba(140,255,90,.12),transparent 43%)!important;
  }

  /* Solutions previously carried a stronger page-specific overlay. */
  .page-solutions .inner-hero-with-background-image:before,
  .page-solutions .inner-hero-clean:before{
    background:
      linear-gradient(90deg,
        rgba(5,12,21,.94) 0%,
        rgba(5,12,21,.83) 29%,
        rgba(5,12,21,.50) 45%,
        rgba(5,12,21,.16) 57%,
        rgba(5,12,21,.04) 68%,
        rgba(5,12,21,0) 79%),
      linear-gradient(0deg,rgba(5,12,21,.16) 0%,rgba(5,12,21,0) 48%)!important;
  }

  .page-home .hero-with-background-image .hero-background-image:after{
    background:
      linear-gradient(90deg,
        rgba(4,12,21,.92) 0%,
        rgba(4,12,21,.80) 28%,
        rgba(4,12,21,.47) 44%,
        rgba(4,12,21,.14) 57%,
        rgba(4,12,21,.035) 68%,
        rgba(4,12,21,0) 79%),
      linear-gradient(0deg,rgba(4,12,21,.17) 0%,rgba(4,12,21,0) 46%),
      radial-gradient(ellipse at 6% 96%,rgba(140,255,90,.14),transparent 42%)!important;
  }

  .page-team .team-hero-background-image:after,
  .team-hero-background-image:after{
    background:
      linear-gradient(90deg,
        rgba(5,12,20,.94) 0%,
        rgba(5,12,20,.82) 29%,
        rgba(5,12,20,.48) 45%,
        rgba(5,12,20,.13) 58%,
        rgba(5,12,20,.03) 69%,
        rgba(5,12,20,0) 80%),
      linear-gradient(0deg,rgba(5,12,20,.16) 0%,rgba(5,12,20,0) 48%)!important;
  }

  .careers-hero-background-image:after{
    background:
      linear-gradient(90deg,
        rgba(5,12,20,.94) 0%,
        rgba(5,12,20,.82) 29%,
        rgba(5,12,20,.48) 45%,
        rgba(5,12,20,.13) 58%,
        rgba(5,12,20,.03) 69%,
        rgba(5,12,20,0) 80%),
      linear-gradient(0deg,rgba(5,12,20,.15) 0%,rgba(5,12,20,0) 48%)!important;
  }
}

/* 2026-10 hero overlay width refinement
   Keep the readability shade local to the left copy column. On desktop,
   the overlay is fully transparent shortly after the content area so the
   remaining photographic subject is shown without a full-width tint. */
@media(min-width:761px){
  .inner-hero-with-background-image:before,
  .inner-hero-clean:before,
  .page-solutions .inner-hero-with-background-image:before,
  .page-solutions .inner-hero-clean:before{
    background:linear-gradient(90deg,
      rgba(5,12,21,.95) 0%,
      rgba(5,12,21,.88) 27%,
      rgba(5,12,21,.70) 37%,
      rgba(5,12,21,.42) 45%,
      rgba(5,12,21,.16) 52%,
      rgba(5,12,21,.045) 57%,
      rgba(5,12,21,0) 62%)!important;
  }

  .page-home .hero-with-background-image .hero-background-image:after{
    background:linear-gradient(90deg,
      rgba(4,12,21,.94) 0%,
      rgba(4,12,21,.86) 27%,
      rgba(4,12,21,.68) 37%,
      rgba(4,12,21,.40) 45%,
      rgba(4,12,21,.15) 52%,
      rgba(4,12,21,.04) 57%,
      rgba(4,12,21,0) 62%)!important;
  }

  .page-team .team-hero-background-image:after,
  .team-hero-background-image:after,
  .careers-hero-background-image:after{
    background:linear-gradient(90deg,
      rgba(5,12,20,.95) 0%,
      rgba(5,12,20,.87) 27%,
      rgba(5,12,20,.69) 37%,
      rgba(5,12,20,.41) 45%,
      rgba(5,12,20,.15) 52%,
      rgba(5,12,20,.04) 57%,
      rgba(5,12,20,0) 62%)!important;
  }
}

/* 2026-10 CMS hero controls — final cascade layer.
   Extra hero height is deliberately applied to the real content wrapper, not to
   image-only variants. This keeps the CMS control working for image, solid,
   gradient and auto/no-image heroes, and avoids fixed/min-height rules masking it. */
@media (min-width: 761px) {
  /* Each +10% CMS step adds ~30px above and below the existing hero layout.
     Margins are additive, so every hero retains its tuned base padding/min-height. */
  .hero.hero-extra-height-10 > .hero-refined-grid,
  .inner-hero.hero-extra-height-10 > .inner-hero-grid,
  .team-hero.hero-extra-height-10 > .team-hero-refined-grid,
  .careers-hero.hero-extra-height-10 > .careers-hero-grid,
  .case-study-hero.hero-extra-height-10 > .case-study-hero-inner {
    margin-top:30px!important;
    margin-bottom:30px!important;
  }
  .hero.hero-extra-height-20 > .hero-refined-grid,
  .inner-hero.hero-extra-height-20 > .inner-hero-grid,
  .team-hero.hero-extra-height-20 > .team-hero-refined-grid,
  .careers-hero.hero-extra-height-20 > .careers-hero-grid,
  .case-study-hero.hero-extra-height-20 > .case-study-hero-inner {
    margin-top:60px!important;
    margin-bottom:60px!important;
  }
  .hero.hero-extra-height-30 > .hero-refined-grid,
  .inner-hero.hero-extra-height-30 > .inner-hero-grid,
  .team-hero.hero-extra-height-30 > .team-hero-refined-grid,
  .careers-hero.hero-extra-height-30 > .careers-hero-grid,
  .case-study-hero.hero-extra-height-30 > .case-study-hero-inner {
    margin-top:90px!important;
    margin-bottom:90px!important;
  }
  .hero.hero-extra-height-40 > .hero-refined-grid,
  .inner-hero.hero-extra-height-40 > .inner-hero-grid,
  .team-hero.hero-extra-height-40 > .team-hero-refined-grid,
  .careers-hero.hero-extra-height-40 > .careers-hero-grid,
  .case-study-hero.hero-extra-height-40 > .case-study-hero-inner {
    margin-top:120px!important;
    margin-bottom:120px!important;
  }
  .hero.hero-extra-height-50 > .hero-refined-grid,
  .inner-hero.hero-extra-height-50 > .inner-hero-grid,
  .team-hero.hero-extra-height-50 > .team-hero-refined-grid,
  .careers-hero.hero-extra-height-50 > .careers-hero-grid,
  .case-study-hero.hero-extra-height-50 > .case-study-hero-inner {
    margin-top:150px!important;
    margin-bottom:150px!important;
  }
  .hero.hero-extra-height-60 > .hero-refined-grid,
  .inner-hero.hero-extra-height-60 > .inner-hero-grid,
  .team-hero.hero-extra-height-60 > .team-hero-refined-grid,
  .careers-hero.hero-extra-height-60 > .careers-hero-grid,
  .case-study-hero.hero-extra-height-60 > .case-study-hero-inner {
    margin-top:180px!important;
    margin-bottom:180px!important;
  }
  .hero.hero-extra-height-70 > .hero-refined-grid,
  .inner-hero.hero-extra-height-70 > .inner-hero-grid,
  .team-hero.hero-extra-height-70 > .team-hero-refined-grid,
  .careers-hero.hero-extra-height-70 > .careers-hero-grid,
  .case-study-hero.hero-extra-height-70 > .case-study-hero-inner {
    margin-top:210px!important;
    margin-bottom:210px!important;
  }
  .hero.hero-extra-height-80 > .hero-refined-grid,
  .inner-hero.hero-extra-height-80 > .inner-hero-grid,
  .team-hero.hero-extra-height-80 > .team-hero-refined-grid,
  .careers-hero.hero-extra-height-80 > .careers-hero-grid,
  .case-study-hero.hero-extra-height-80 > .case-study-hero-inner {
    margin-top:240px!important;
    margin-bottom:240px!important;
  }

  /* Home: width is the actual shaded coverage. Darkness is the actual leading opacity. */
  html body.page-home .hero-with-background-image .hero-background-image::after {
    inset: 0 auto 0 0 !important;
    right: auto !important;
    width: var(--hero-overlay-width, 62%) !important;
    opacity: 1 !important;
    background: linear-gradient(90deg,
      rgba(4, 12, 21, var(--hero-overlay-darkness, .82)) 0%,
      rgba(4, 12, 21, var(--hero-overlay-darkness, .82)) 58%,
      rgba(4, 12, 21, 0) 100%) !important;
  }

  /* Standard/entity full-background heroes. */
  html body[class*="page-"] .inner-hero-with-background-image::before,
  html body[class*="page-"] .inner-hero-with-background-image.inner-hero-clean::before,
  html body.page-solutions .inner-hero-with-background-image::before,
  html body.page-solutions .inner-hero-with-background-image.inner-hero-clean::before {
    inset: 0 auto 0 0 !important;
    right: auto !important;
    width: var(--hero-overlay-width, 62%) !important;
    opacity: 1 !important;
    background: linear-gradient(90deg,
      rgba(5, 12, 21, var(--hero-overlay-darkness, .86)) 0%,
      rgba(5, 12, 21, var(--hero-overlay-darkness, .86)) 58%,
      rgba(5, 12, 21, 0) 100%) !important;
  }

  /* Team full-background hero. */
  html body.page-team .team-hero-with-background-image .team-hero-background-image::after,
  html body .team-hero-with-background-image .team-hero-background-image::after {
    inset: 0 auto 0 0 !important;
    right: auto !important;
    width: var(--hero-overlay-width, 62%) !important;
    opacity: 1 !important;
    background: linear-gradient(90deg,
      rgba(5, 12, 20, var(--hero-overlay-darkness, .88)) 0%,
      rgba(5, 12, 20, var(--hero-overlay-darkness, .88)) 58%,
      rgba(5, 12, 20, 0) 100%) !important;
  }

  /* Careers full-background hero. */
  html body.page-careers .careers-hero-with-background-image .careers-hero-background-image::after,
  html body .careers-hero-with-background-image .careers-hero-background-image::after {
    inset: 0 auto 0 0 !important;
    right: auto !important;
    width: var(--hero-overlay-width, 62%) !important;
    opacity: 1 !important;
    background: linear-gradient(90deg,
      rgba(5, 11, 18, var(--hero-overlay-darkness, .40)) 0%,
      rgba(5, 11, 18, var(--hero-overlay-darkness, .40)) 58%,
      rgba(5, 11, 18, 0) 100%) !important;
  }
}

/* 2026-10 CMS hero overlay — dedicated rendered layer.
   Uses inline width/alpha values from JSON so page-specific legacy CSS cannot override CMS controls. */
@media (min-width:761px){
  .hero-cms-overlay{
    position:absolute!important;
    top:0!important;bottom:0!important;left:0!important;right:auto!important;
    z-index:1!important;
    pointer-events:none!important;
    display:block!important;
  }
  .hero-with-background-image .hero-background-image::after,
  .team-hero-with-background-image .team-hero-background-image::after,
  .careers-hero-with-background-image .careers-hero-background-image::after{
    background:none!important;
  }
  .inner-hero-with-background-image::before{
    background:none!important;
  }
  .hero-with-background-image .hero-refined-grid,
  .hero-with-background-image .hero-proof-band .hero-proof-wide,
  .inner-hero-with-background-image .inner-hero-grid,
  .team-hero-with-background-image .team-hero-refined-grid,
  .careers-hero-with-background-image .careers-hero-grid{
    position:relative!important;
    z-index:2!important;
  }
}
@media (max-width:760px){
  .hero-cms-overlay{display:none!important}
}

/* Final CMS hero-overlay authority: the rendered overlay is a real DOM layer,
   so saved coverage/darkness values are never replaced by legacy pseudo-elements. */
@media (min-width:761px){
  .hero-with-background-image,
  .inner-hero-with-background-image,
  .team-hero-with-background-image,
  .careers-hero-with-background-image{position:relative!important;isolation:isolate!important}
  .hero-with-background-image>.hero-cms-overlay,
  .inner-hero-with-background-image>.hero-cms-overlay,
  .team-hero-with-background-image>.hero-cms-overlay,
  .careers-hero-with-background-image>.hero-cms-overlay{
    display:block!important;
    position:absolute!important;
    inset:0 auto 0 0!important;
    right:auto!important;
    z-index:1!important;
    pointer-events:none!important;
  }
  .hero-with-background-image .hero-background-image,
  .inner-hero-with-background-image .inner-hero-background-image,
  .team-hero-with-background-image .team-hero-background-image,
  .careers-hero-with-background-image .careers-hero-background-image{z-index:0!important}
  .hero-with-background-image .hero-refined-grid,
  .hero-with-background-image .hero-proof-band,
  .inner-hero-with-background-image .inner-hero-grid,
  .team-hero-with-background-image .team-hero-refined-grid,
  .careers-hero-with-background-image .careers-hero-grid{position:relative!important;z-index:2!important}
  .hero-with-background-image .hero-background-image::after,
  .team-hero-with-background-image .team-hero-background-image::after,
  .careers-hero-with-background-image .careers-hero-background-image::after,
  .inner-hero-with-background-image::before{background:none!important}
}

/* 2026-10-11 — definitive CMS hero shade authority.
   Legacy pseudo overlays MUST be removed, otherwise their default shade remains
   visible under the CMS-controlled overlay and makes 0%/100% appear identical. */
@media (min-width:761px){
  html body.page-home .hero-with-background-image .hero-background-image::after,
  html body .hero-with-background-image .hero-background-image::after,
  html body[class*="page-"] .inner-hero-with-background-image::before,
  html body[class*="page-"] .inner-hero-with-background-image.inner-hero-clean::before,
  html body.page-solutions .inner-hero-with-background-image::before,
  html body.page-solutions .inner-hero-with-background-image.inner-hero-clean::before,
  html body.page-team .team-hero-with-background-image .team-hero-background-image::after,
  html body .team-hero-with-background-image .team-hero-background-image::after,
  html body.page-careers .careers-hero-with-background-image .careers-hero-background-image::after,
  html body .careers-hero-with-background-image .careers-hero-background-image::after{
    display:none!important;
    content:none!important;
    background:none!important;
    opacity:0!important;
    width:0!important;
  }

  .hero-with-background-image>.hero-cms-overlay,
  .inner-hero-with-background-image>.hero-cms-overlay,
  .team-hero-with-background-image>.hero-cms-overlay,
  .careers-hero-with-background-image>.hero-cms-overlay{
    display:block!important;
    position:absolute!important;
    top:0!important;
    bottom:0!important;
    left:0!important;
    right:auto!important;
    z-index:1!important;
    pointer-events:none!important;
  }
}

/* 2026-10-11 — deterministic CMS hero shade classes.
   Coverage and darkness are intentionally limited to 10% increments so the
   public result is always one of these predefined, inspectable styles. */
@media (min-width:761px){
  .hero-with-background-image>.hero-cms-overlay{
    background:linear-gradient(90deg,rgba(4,12,21,1) 0%,rgba(4,12,21,1) 58%,rgba(4,12,21,0) 100%)!important;
  }
  .inner-hero-with-background-image>.hero-cms-overlay{
    background:linear-gradient(90deg,rgba(5,12,21,1) 0%,rgba(5,12,21,1) 58%,rgba(5,12,21,0) 100%)!important;
  }
  .team-hero-with-background-image>.hero-cms-overlay{
    background:linear-gradient(90deg,rgba(5,12,20,1) 0%,rgba(5,12,20,1) 58%,rgba(5,12,20,0) 100%)!important;
  }
  .careers-hero-with-background-image>.hero-cms-overlay{
    background:linear-gradient(90deg,rgba(5,11,18,1) 0%,rgba(5,11,18,1) 58%,rgba(5,11,18,0) 100%)!important;
  }

  .hero-shade-width-0>.hero-cms-overlay{width:0!important}
  .hero-shade-width-10>.hero-cms-overlay{width:10%!important}
  .hero-shade-width-20>.hero-cms-overlay{width:20%!important}
  .hero-shade-width-30>.hero-cms-overlay{width:30%!important}
  .hero-shade-width-40>.hero-cms-overlay{width:40%!important}
  .hero-shade-width-50>.hero-cms-overlay{width:50%!important}
  .hero-shade-width-60>.hero-cms-overlay{width:60%!important}
  .hero-shade-width-70>.hero-cms-overlay{width:70%!important}
  .hero-shade-width-80>.hero-cms-overlay{width:80%!important}
  .hero-shade-width-90>.hero-cms-overlay{width:90%!important}
  .hero-shade-width-100>.hero-cms-overlay{width:100%!important}

  .hero-shade-darkness-0>.hero-cms-overlay{opacity:0!important}
  .hero-shade-darkness-10>.hero-cms-overlay{opacity:.1!important}
  .hero-shade-darkness-20>.hero-cms-overlay{opacity:.2!important}
  .hero-shade-darkness-30>.hero-cms-overlay{opacity:.3!important}
  .hero-shade-darkness-40>.hero-cms-overlay{opacity:.4!important}
  .hero-shade-darkness-50>.hero-cms-overlay{opacity:.5!important}
  .hero-shade-darkness-60>.hero-cms-overlay{opacity:.6!important}
  .hero-shade-darkness-70>.hero-cms-overlay{opacity:.7!important}
  .hero-shade-darkness-80>.hero-cms-overlay{opacity:.8!important}
  .hero-shade-darkness-90>.hero-cms-overlay{opacity:.9!important}
  .hero-shade-darkness-100>.hero-cms-overlay{opacity:1!important}
}

/* Case-study hero participates in the same deterministic CMS shade system. */
@media (min-width:761px){
  .case-study-hero.has-background{position:relative!important;isolation:isolate!important}
  .case-study-hero.has-background>.hero-cms-overlay{display:block!important;position:absolute!important;inset:0 auto 0 0!important;right:auto!important;z-index:1!important;pointer-events:none!important;background:linear-gradient(90deg,rgba(7,16,27,1) 0%,rgba(7,16,27,1) 58%,rgba(7,16,27,0) 100%)!important}
  .case-study-hero.has-background .case-study-hero-media{z-index:0!important}
  .case-study-hero.has-background .case-study-hero-inner{position:relative!important;z-index:2!important}
}

/* Mobile performance: LCP imagery and copy paint immediately; retain desktop polish. */
@media (max-width:760px){
  .hero-background-image img,
  .inner-hero-background-image img,
  .team-hero-background-image img,
  .careers-hero-background-image img{
    animation:none!important;
    transform:none!important;
    will-change:auto!important;
  }
  .js .inner-hero-with-background-image .inner-hero-copy>*,
  .js .page-home .hero-with-background-image .hero-copy>*,
  .js .team-hero-with-background-image .team-hero-copy>*,
  .js .careers-hero-with-background-image .careers-copy>*{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
  }
}

/* CMS hero background authority — solid and gradient modes.
   Auto/Image keep the existing image-first hero behaviour. Explicit colour modes
   are painted only by .hero-cms-color-background so page-specific hero CSS,
   pseudo-elements and older decorative fills cannot override the CMS choice. */
.hero-custom-background{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden;
  /* Dark fallback so light hero text stays readable even if the colour layer fails to paint. */
  background:#16324F!important;
  background-image:none!important;
  background-color:#16324F!important;
}
.hero-custom-background>.hero-cms-color-background{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  width:100%!important;
  height:100%!important;
  opacity:1!important;
  pointer-events:none!important;
}

/* Explicit colour modes never render the image/shade/decorative background layers. */
.hero-custom-background>.hero-background-image,
.hero-custom-background>.inner-hero-background-image,
.hero-custom-background>.team-hero-background-image,
.hero-custom-background>.careers-hero-background-image,
.hero-custom-background>.case-study-hero-media,
.hero-custom-background>.hero-cms-overlay,
.hero-custom-background>.hero-refined-bg,
.hero-custom-background>.inner-orbit{
  display:none!important;
}
.hero-custom-background::before,
.hero-custom-background::after{
  content:none!important;
  display:none!important;
  background:none!important;
  background-image:none!important;
  opacity:0!important;
}

/* Keep every hero's real content above the dedicated colour layer. */
.hero-custom-background>.shell,
.hero-custom-background>.hero-refined-grid,
.hero-custom-background>.inner-hero-grid,
.hero-custom-background>.team-hero-refined-grid,
.hero-custom-background>.careers-hero-grid,
.hero-custom-background>.case-study-hero-inner{
  position:relative!important;
  z-index:2!important;
}

/* Colour-mode typography remains readable regardless of selected dark preset. */
.hero-custom-background .hero-copy h1,
.hero-custom-background .inner-hero-copy h1,
.hero-custom-background .team-hero-copy h1,
.hero-custom-background .careers-copy h1,
.hero-custom-background .case-study-hero-copy h1{color:#fff!important}
.hero-custom-background .hero-lede,
.hero-custom-background .inner-hero-copy>p,
.hero-custom-background .team-hero-copy>p,
.hero-custom-background .careers-copy>p,
.hero-custom-background .case-study-hero-copy>p{color:rgba(255,255,255,.78)!important}
.hero-custom-background .eyebrow,
.hero-custom-background .eyebrow-dark,
.hero-custom-background .hero-kicker{color:rgba(255,255,255,.76)!important}
.hero-custom-background .button-ghost,
.hero-custom-background .button-outline{
  color:#fff!important;
  border-color:rgba(255,255,255,.28)!important;
  background:rgba(255,255,255,.06)!important;
}

/* Entity detail hero (services / solutions / industries) — colour modes.
   Hides the decorative glow/mesh so the chosen solid or gradient is what shows. */
.dp-hero.hero-custom-background>.dp-hero-bg{display:none!important}
.dp-hero.hero-custom-background>.dp-hero-layout{position:relative!important;z-index:2!important}
.dp-hero.hero-custom-background .dp-hero-watermark{z-index:1}
.dp-hero.hero-custom-background .dp-display,
.dp-hero.hero-custom-background .dp-line-inner{color:#fff}

/* Full-width image heroes need a stronger, even mobile shade because the copy
   stacks over the image instead of sitting beside the photographic subject. */
@media (max-width:760px){
  .hero-with-background-image:not(.hero-custom-background),
  .inner-hero-with-background-image:not(.hero-custom-background),
  .team-hero-with-background-image:not(.hero-custom-background),
  .careers-hero-with-background-image:not(.hero-custom-background),
  .case-study-hero.has-background:not(.hero-custom-background),
  .dp-hero.hero-has-shade:not(.hero-custom-background){
    isolation:isolate!important;
  }
  .hero-with-background-image:not(.hero-custom-background) .hero-background-image::after,
  .inner-hero-with-background-image:not(.hero-custom-background)::before,
  .team-hero-with-background-image:not(.hero-custom-background) .team-hero-background-image::after,
  .careers-hero-with-background-image:not(.hero-custom-background) .careers-hero-background-image::after{
    display:none!important;
    content:none!important;
    background:none!important;
    opacity:0!important;
  }
  .hero-with-background-image:not(.hero-custom-background)>.hero-background-image,
  .inner-hero-with-background-image:not(.hero-custom-background)>.inner-hero-background-image,
  .team-hero-with-background-image:not(.hero-custom-background)>.team-hero-background-image,
  .careers-hero-with-background-image:not(.hero-custom-background)>.careers-hero-background-image,
  .case-study-hero.has-background:not(.hero-custom-background)>.case-study-hero-media{
    z-index:0!important;
  }
  .hero-with-background-image:not(.hero-custom-background)>.hero-cms-overlay,
  .inner-hero-with-background-image:not(.hero-custom-background)>.hero-cms-overlay,
  .team-hero-with-background-image:not(.hero-custom-background)>.hero-cms-overlay,
  .careers-hero-with-background-image:not(.hero-custom-background)>.hero-cms-overlay,
  .case-study-hero.has-background:not(.hero-custom-background)>.hero-cms-overlay,
  .dp-hero.hero-has-shade:not(.hero-custom-background)>.hero-cms-overlay{
    display:block!important;
    position:absolute!important;
    inset:0!important;
    z-index:2!important;
    width:auto!important;
    opacity:1!important;
    pointer-events:none!important;
    background:linear-gradient(180deg,rgba(var(--hero-overlay-rgb,5,12,20),var(--hero-mobile-alpha,.8)) 0%,rgba(var(--hero-overlay-rgb,5,12,20),var(--hero-mobile-alpha,.8)) 100%)!important;
  }
  .dp-hero.hero-has-shade:not(.hero-custom-background)>.hero-cms-overlay{
    z-index:1!important;
  }
  .hero-with-background-image:not(.hero-custom-background)>.hero-refined-grid,
  .inner-hero-with-background-image:not(.hero-custom-background)>.inner-hero-grid,
  .team-hero-with-background-image:not(.hero-custom-background)>.team-hero-refined-grid,
  .careers-hero-with-background-image:not(.hero-custom-background)>.careers-hero-grid,
  .case-study-hero.has-background:not(.hero-custom-background)>.case-study-hero-inner{
    position:relative!important;
    z-index:3!important;
  }
}

@media (min-width:761px){
  .hero-with-background-image>.hero-cms-overlay{
    background:linear-gradient(90deg,rgba(var(--hero-overlay-rgb,4,12,21),1) 0%,rgba(var(--hero-overlay-rgb,4,12,21),1) 58%,rgba(var(--hero-overlay-rgb,4,12,21),0) 100%)!important;
  }
  .inner-hero-with-background-image>.hero-cms-overlay{
    background:linear-gradient(90deg,rgba(var(--hero-overlay-rgb,5,12,21),1) 0%,rgba(var(--hero-overlay-rgb,5,12,21),1) 58%,rgba(var(--hero-overlay-rgb,5,12,21),0) 100%)!important;
  }
  .team-hero-with-background-image>.hero-cms-overlay{
    background:linear-gradient(90deg,rgba(var(--hero-overlay-rgb,5,12,20),1) 0%,rgba(var(--hero-overlay-rgb,5,12,20),1) 58%,rgba(var(--hero-overlay-rgb,5,12,20),0) 100%)!important;
  }
  .careers-hero-with-background-image>.hero-cms-overlay{
    background:linear-gradient(90deg,rgba(var(--hero-overlay-rgb,5,11,18),1) 0%,rgba(var(--hero-overlay-rgb,5,11,18),1) 58%,rgba(var(--hero-overlay-rgb,5,11,18),0) 100%)!important;
  }
  .case-study-hero.has-background>.hero-cms-overlay{
    background:linear-gradient(90deg,rgba(var(--hero-overlay-rgb,7,16,27),1) 0%,rgba(var(--hero-overlay-rgb,7,16,27),1) 58%,rgba(var(--hero-overlay-rgb,7,16,27),0) 100%)!important;
  }
  .dp-hero.hero-has-shade:not(.hero-custom-background)>.hero-cms-overlay{
    display:block!important;
    position:absolute!important;
    inset:0 auto 0 0!important;
    z-index:1!important;
    width:var(--hero-overlay-width,60%);
    pointer-events:none!important;
    background:linear-gradient(90deg,rgba(var(--hero-overlay-rgb,5,12,21),1) 0%,rgba(var(--hero-overlay-rgb,5,12,21),1) 58%,rgba(var(--hero-overlay-rgb,5,12,21),0) 100%)!important;
  }
}