.cm-process-section{background:#ecf2f8;padding:72px 24px 76px}.cm-process-inner{width:min(var(--cm-site-max-width),100%);margin:0 auto}.cm-process-intro{max-width:760px;margin:0 auto 48px;text-align:center}.cm-process-label{margin-bottom:12px;font-size:13px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#c82129}.cm-process-intro h2{margin:0;color:#17212b;font-size:34px;font-weight:600;line-height:1.18;letter-spacing:-.025em}.cm-process-intro p{max-width:720px;margin:17px auto 0;color:#5d6b79;font-size:16px;line-height:1.65}.cm-process-journey{display:grid;grid-template-columns:repeat(var(--cm-process-count),minmax(0,1fr));gap:0}.cm-process-step{position:relative;min-width:0;padding:0 22px;text-align:center}.cm-process-step:first-child{padding-left:0}.cm-process-step:last-child{padding-right:0}.cm-process-step:not(:last-child)::after{content:"";position:absolute;top:28px;left:calc(50% + 34px);right:calc(-50% + 34px);height:1px;background:#bac8d5}.cm-process-marker{position:relative;z-index:2;display:flex;width:56px;height:56px;margin:0 auto 22px;align-items:center;justify-content:center;border:1px solid #aebdca;border-radius:50%;background:#ecf2f8;color:#c82129;font-size:16px;font-weight:700}.cm-process-copy h3{margin:0 0 10px;color:#17212b;font-size:19px;font-weight:600;line-height:1.3}.cm-process-copy p{margin:0;color:#5d6b79;font-size:14px;line-height:1.65}.cm-process-animate .cm-process-step{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease;transition-delay:calc(var(--cm-process-index) * 110ms)}.cm-process-animate.cm-process-visible .cm-process-step{opacity:1;transform:none}@media(max-width:980px){.cm-process-section{padding:62px 24px 66px}.cm-process-journey{grid-template-columns:repeat(2,minmax(0,1fr));gap:42px 28px}.cm-process-step{padding:0 18px}.cm-process-step::after{display:none}.cm-process-intro{margin-bottom:42px}}@media(max-width:620px){.cm-process-section{padding:52px 20px 56px}.cm-process-intro{text-align:left;margin-bottom:36px}.cm-process-intro h2{font-size:30px}.cm-process-intro p{font-size:15px}.cm-process-journey{display:block}.cm-process-step{display:grid;grid-template-columns:56px minmax(0,1fr);gap:18px;padding:0 0 34px;text-align:left}.cm-process-step:not(:last-child)::after{display:block;left:27px;right:auto;top:56px;bottom:0;width:1px;height:auto;background:#bac8d5}.cm-process-step:last-child{padding-bottom:0}.cm-process-marker{margin:0}.cm-process-copy{padding-top:3px}}@media(prefers-reduced-motion:reduce){.cm-process-animate .cm-process-step{opacity:1;transform:none;transition:none}}

@media(min-width:981px){.cm-process-hide-desktop{display:none!important}}
@media(min-width:621px) and (max-width:980px){.cm-process-hide-tablet{display:none!important}}
@media(max-width:620px){.cm-process-hide-mobile{display:none!important}}


/* ==========================================================
 Production Working Process visual integration
 Match the established Services Why Us section language.
 ========================================================== */

/* When Working Process follows Why Us, reclaim the oversized combined
 bottom/top whitespace without changing Why Us on any other page. */
.cm-why-section + .cm-process-section{
  margin-top:-38px;
}

.cm-process-section{
  padding-top:22px;
  padding-bottom:66px;
}

/* Same contained white divider language used around Why Us. */
.cm-process-inner{
  border-top:1px solid rgba(255,255,255,.95);
  padding-top:28px;
}

/* Exact visual language of OUR SERVICES. */
.cm-process-label{
  display:inline-block;
  margin-bottom:10px;
  color:rgb(200,33,41);
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* Tighten only the oversized Process intro whitespace. */
.cm-process-intro{
  margin-bottom:34px;
}
.cm-process-intro p{
  margin-top:14px;
}

@media(max-width:980px){
  .cm-why-section + .cm-process-section{margin-top:-28px}
  .cm-process-section{padding-top:18px;padding-bottom:58px}
  .cm-process-inner{padding-top:24px}
  .cm-process-intro{margin-bottom:30px}
}
@media(max-width:620px){
  .cm-why-section + .cm-process-section{margin-top:-22px}
  .cm-process-section{padding-top:16px;padding-bottom:52px}
  .cm-process-inner{padding-top:22px}
  .cm-process-intro{margin-bottom:28px}
  .cm-process-label{margin-bottom:10px;font-size:12px;font-weight:800;letter-spacing:.12em}
}

/* ==========================================================
 Production Our Process heading parity + mobile fix
 Keep the section intro on the same centered axis as Our Services.
 ========================================================== */
.cm-process-intro{
  text-align:center;
}
.cm-process-intro h2{
  color:#111820;
  font-size:clamp(30px,4vw,46px);
  line-height:1.08;
  font-weight:760;
  letter-spacing:-.025em;
}
.cm-process-intro p{
  max-width:680px;
  margin-left:auto;
  margin-right:auto;
  line-height:1.7;
}
@media(max-width:620px){
  .cm-process-intro{
    text-align:center;
  }
}


/* Production Process typography parity with Services */
@media (min-width:1001px){
  .cm-process-label{font-size:24px!important;color:#17212b!important;font-weight:700!important;letter-spacing:.01em!important;}
  .cm-process-intro h2{font-size:30px!important;line-height:1.18!important;}
}
@media (min-width:621px) and (max-width:1000px){
  .cm-process-label{font-size:22px!important;color:#17212b!important;}
  .cm-process-intro h2{font-size:28px!important;}
}
@media (max-width:620px){
  .cm-process-intro{text-align:center!important;}
  .cm-process-label{font-size:20px!important;color:#17212b!important;}
  .cm-process-intro h2{font-size:26px!important;}
}


/* ==========================================================
 Production Process spacing + exact Services label parity
 Keeps Process compact wherever Section Assignment places it.
 Removes the large intro-to-journey dead space.
 Uses the exact current OUR SERVICES label color token.
 ========================================================== */
.cm-process-section{
  margin-top:-24px;
  padding-top:14px;
  padding-bottom:48px;
}
.cm-why-section + .cm-process-section{
  margin-top:-54px;
}
.cm-process-inner{
  padding-top:18px;
}
.cm-process-intro{
  margin-bottom:20px;
}
.cm-process-label{
  color:#5f6f82!important;
}
@media (min-width:1001px){
  .cm-process-label{color:#5f6f82!important;}
}
@media (min-width:621px) and (max-width:1000px){
  .cm-process-section{margin-top:-20px;padding-top:12px;padding-bottom:42px;}
  .cm-why-section + .cm-process-section{margin-top:-44px;}
  .cm-process-inner{padding-top:16px;}
  .cm-process-intro{margin-bottom:18px;}
  .cm-process-label{color:#5f6f82!important;}
}
@media (max-width:620px){
  .cm-process-section{margin-top:-14px;padding-top:10px;padding-bottom:36px;}
  .cm-why-section + .cm-process-section{margin-top:-34px;}
  .cm-process-inner{padding-top:14px;}
  .cm-process-intro{margin-bottom:16px;}
  .cm-process-label{color:#5f6f82!important;}
}

/* ==========================================================
 Production Premium icon journey
 Full green circles, no step numbers, optional descriptions.
 ========================================================== */
:root{--cm-process-green:#168a45;--cm-process-green-soft:rgba(22,138,69,.14);--cm-process-line:rgba(22,138,69,.46)}
.cm-process-journey{align-items:start}
.cm-process-step{padding-left:24px;padding-right:24px}
.cm-process-marker{
  width:72px;height:72px;margin:0 auto 20px;
  border:2px solid var(--cm-process-green);
  border-radius:50%;background:#fff;color:#17212b;
  box-shadow:0 6px 18px rgba(23,33,43,.06);
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease,background-color .24s ease;
}
.cm-process-marker svg{width:34px;height:34px;display:block;overflow:visible}
.cm-process-marker .cm-icon-stroke{fill:none;stroke:#17212b;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.cm-process-marker .cm-icon-accent{fill:none;stroke:var(--cm-process-green);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.cm-process-custom-symbol{font-size:25px;line-height:1;color:var(--cm-process-green);font-weight:700}
.cm-process-step:not(:last-child)::after{
  top:35px;left:calc(50% + 38px);right:calc(-50% + 38px);height:2px;
  background:var(--cm-process-line);transform-origin:left center;
}
.cm-process-copy h3{margin-bottom:8px;font-size:19px;font-weight:650}
.cm-process-copy p{max-width:245px;margin:0 auto;color:#5d6b79}
.cm-process-step-no-desc .cm-process-copy h3{margin-bottom:0}
@media (hover:hover) and (pointer:fine){
  .cm-process-step:hover .cm-process-marker,
  .cm-process-step:focus-within .cm-process-marker{
    transform:translateY(-5px) scale(1.035);
    background:#fbfffc;
    border-color:#10783a;
    box-shadow:0 12px 26px rgba(22,138,69,.16),0 0 0 5px var(--cm-process-green-soft);
  }
}
.cm-process-animate .cm-process-step:not(:last-child)::after{transform:scaleX(0);transition:transform .65s ease;transition-delay:calc(180ms + var(--cm-process-index) * 120ms)}
.cm-process-animate.cm-process-visible .cm-process-step:not(:last-child)::after{transform:scaleX(1)}
@media(max-width:980px){
  .cm-process-journey{grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 30px}
  .cm-process-step::after{display:none!important}
  .cm-process-marker{width:68px;height:68px}
  .cm-process-marker svg{width:32px;height:32px}
}
@media(max-width:620px){
  .cm-process-journey{display:block}
  .cm-process-step{grid-template-columns:64px minmax(0,1fr);gap:18px;padding:0 0 30px;text-align:left}
  .cm-process-marker{width:60px;height:60px;margin:0}
  .cm-process-marker svg{width:29px;height:29px}
  .cm-process-step:not(:last-child)::after{
    display:block!important;left:29px;right:auto;top:60px;bottom:0;width:2px;height:auto;
    background:var(--cm-process-line);transform-origin:center top;
  }
  .cm-process-animate .cm-process-step:not(:last-child)::after{transform:scaleY(0)}
  .cm-process-animate.cm-process-visible .cm-process-step:not(:last-child)::after{transform:scaleY(1)}
  .cm-process-copy{padding-top:2px}
  .cm-process-copy p{max-width:none;margin:0}
}
@media(prefers-reduced-motion:reduce){
  .cm-process-marker,.cm-process-step:not(:last-child)::after{transition:none!important;transform:none!important}
}

/* ==========================================================
 Production Professional connector polish
 Softer line, midpoint node, synchronized hover, clean motion.
 ========================================================== */
:root{
  --cm-process-line-soft:rgba(22,138,69,.28);
  --cm-process-line-hover:rgba(22,138,69,.62);
  --cm-process-node:#168a45;
  --cm-process-node-halo:rgba(22,138,69,.13);
}
@media(min-width:981px){
  .cm-process-step:not(:last-child)::after{
    top:35px;
    left:calc(50% + 41px);
    right:calc(-50% + 41px);
    height:1px;
    background:linear-gradient(90deg,var(--cm-process-line-soft),rgba(22,138,69,.18),var(--cm-process-line-soft));
    transition:transform .65s ease,background-color .22s ease,opacity .22s ease;
  }
  .cm-process-step:not(:last-child)::before{
    content:"";
    position:absolute;
    z-index:3;
    top:31px;
    left:calc(100% - 4px);
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--cm-process-node);
    box-shadow:0 0 0 4px var(--cm-process-node-halo);
    opacity:.88;
    transform:scale(.92);
    transition:transform .22s ease,box-shadow .22s ease,opacity .22s ease;
  }
  @media (hover:hover) and (pointer:fine){
    .cm-process-step:hover::after,
    .cm-process-step:focus-within::after{
      background:var(--cm-process-line-hover);
      opacity:1;
    }
    .cm-process-step:hover::before,
    .cm-process-step:focus-within::before{
      transform:scale(1.08);
      opacity:1;
      box-shadow:0 0 0 6px var(--cm-process-node-halo);
    }
  }
  .cm-process-animate .cm-process-step:not(:last-child)::before{
    opacity:0;
    transform:scale(.35);
    transition:opacity .3s ease,transform .3s ease,box-shadow .22s ease;
    transition-delay:calc(500ms + var(--cm-process-index) * 120ms);
  }
  .cm-process-animate.cm-process-visible .cm-process-step:not(:last-child)::before{
    opacity:.88;
    transform:scale(.92);
  }
}
@media(max-width:980px){
  .cm-process-step::before{display:none!important}
}
@media(max-width:620px){
  .cm-process-step:not(:last-child)::after{
    background:linear-gradient(180deg,var(--cm-process-line-soft),rgba(22,138,69,.16),var(--cm-process-line-soft));
  }
}
@media(prefers-reduced-motion:reduce){
  .cm-process-step::before{transition:none!important;transform:none!important}
}

/* ==========================================================
 Production Circle-free icon journey + responsive polish
 Removes decorative circles while preserving the icon journey.
 Enlarges icons and restores the established step-title weight.
 Refines connectors independently for desktop, tablet and mobile.
 ========================================================== */
:root{
  --cm-process-line-soft:rgba(22,138,69,.24);
  --cm-process-line-hover:rgba(22,138,69,.58);
  --cm-process-node:#168a45;
  --cm-process-node-halo:rgba(22,138,69,.10);
}

/* Circle-free marker: keep a transparent footprint so the connector can
 stop cleanly before/after the icon instead of running through it. */
.cm-process-marker{
  width:78px;
  height:66px;
  margin:0 auto 14px;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#17212b;
  overflow:visible;
  transition:transform .24s ease,filter .24s ease;
}
.cm-process-marker svg{
  width:48px;
  height:48px;
  overflow:visible;
  transition:transform .24s ease;
}
.cm-process-custom-symbol{font-size:34px}
.cm-process-copy h3{
  margin:0;
  font-weight:600;
  line-height:1.32;
}
.cm-process-copy p{margin-top:8px}
.cm-process-step-no-desc .cm-process-copy h3{margin-bottom:0}

@media (hover:hover) and (pointer:fine){
  .cm-process-step:hover .cm-process-marker,
  .cm-process-step:focus-within .cm-process-marker{
    transform:translateY(-4px) scale(1.025);
    box-shadow:none!important;
    filter:drop-shadow(0 8px 10px rgba(22,138,69,.10));
  }
  .cm-process-step:hover .cm-process-marker svg,
  .cm-process-step:focus-within .cm-process-marker svg{
    transform:scale(1.025);
  }
}

/* Desktop: clear breathing room around icons, subtle midpoint nodes. */
@media(min-width:981px){
  .cm-process-step{padding-left:24px;padding-right:24px}
  .cm-process-step:not(:last-child)::after{
    top:32px;
    left:calc(50% + 52px);
    right:calc(-50% + 52px);
    height:1px;
    background:linear-gradient(90deg,rgba(22,138,69,.18),var(--cm-process-line-soft),rgba(22,138,69,.18));
  }
  .cm-process-step:not(:last-child)::before{
    top:28.5px;
    left:calc(100% - 3.5px);
    width:7px;
    height:7px;
    box-shadow:0 0 0 3px var(--cm-process-node-halo);
  }
  @media (hover:hover) and (pointer:fine){
    .cm-process-step:hover::after,
    .cm-process-step:focus-within::after{background:var(--cm-process-line-hover)}
    .cm-process-step:hover::before,
    .cm-process-step:focus-within::before{box-shadow:0 0 0 5px var(--cm-process-node-halo)}
  }
}

/* Tablet: use a deliberate 2×2 journey instead of squeezing four columns.
 Each row keeps a clean left-to-right connection without crossing lines. */
@media(min-width:621px) and (max-width:980px){
  .cm-process-journey{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:44px;
    row-gap:34px;
    max-width:760px;
    margin-left:auto;
    margin-right:auto;
  }
  .cm-process-step{padding:0 22px}
  .cm-process-marker{width:72px;height:62px;margin-bottom:12px}
  .cm-process-marker svg{width:44px;height:44px}
  .cm-process-step::after,.cm-process-step::before{display:none!important}
  .cm-process-step:nth-child(odd):not(:last-child)::after{
    content:"";
    display:block!important;
    position:absolute;
    z-index:1;
    top:30px;
    left:calc(50% + 49px);
    right:calc(-50% + 49px);
    height:1px;
    background:linear-gradient(90deg,rgba(22,138,69,.16),var(--cm-process-line-soft),rgba(22,138,69,.16));
    transform-origin:left center;
  }
  .cm-process-step:nth-child(odd):not(:last-child)::before{
    content:"";
    display:block!important;
    position:absolute;
    z-index:3;
    top:27px;
    left:calc(100% - 3px);
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--cm-process-node);
    box-shadow:0 0 0 3px var(--cm-process-node-halo);
  }
  .cm-process-animate .cm-process-step:nth-child(odd):not(:last-child)::after{transform:scaleX(0);transition:transform .58s ease}
  .cm-process-animate.cm-process-visible .cm-process-step:nth-child(odd):not(:last-child)::after{transform:scaleX(1)}
}

/* Mobile: a true vertical journey, not a shrunken desktop layout. */
@media(max-width:620px){
  .cm-process-journey{display:block;max-width:480px;margin:0 auto}
  .cm-process-step{
    display:grid;
    grid-template-columns:58px minmax(0,1fr);
    gap:15px;
    padding:0 0 28px;
    text-align:left;
    align-items:start;
  }
  .cm-process-step:last-child{padding-bottom:0}
  .cm-process-marker{width:54px;height:50px;margin:0;justify-self:center}
  .cm-process-marker svg{width:39px;height:39px}
  .cm-process-custom-symbol{font-size:29px}
  .cm-process-copy{padding-top:8px}
  .cm-process-copy h3{font-size:18px;line-height:1.3}
  .cm-process-copy p{margin-top:6px;font-size:14px;line-height:1.58}
  .cm-process-step::before{display:none!important}
  .cm-process-step:not(:last-child)::after{
    display:block!important;
    left:28px;
    right:auto;
    top:51px;
    bottom:2px;
    width:1px;
    height:auto;
    background:linear-gradient(180deg,rgba(22,138,69,.18),var(--cm-process-line-soft),rgba(22,138,69,.18));
    transform-origin:center top;
  }
}

@media(prefers-reduced-motion:reduce){
  .cm-process-marker,.cm-process-marker svg,.cm-process-step::after,.cm-process-step::before{
    transition:none!important;
    transform:none!important;
  }
}

/* ==========================================================
 Large Icon Fine Connector Compact Step Copy
 Makes the process icons the primary visual element.
 Keeps connector strokes deliberately fine and quiet.
 Makes step titles/supporting copy more compact.
 Plan & Implement uses green checklist ticks via .cm-icon-accent.
 ========================================================== */
.cm-process-marker{
  width:104px;
  height:88px;
  margin-bottom:10px;
}
.cm-process-marker svg{
  width:72px;
  height:72px;
}
.cm-process-copy h3{
  font-size:17px;
  font-weight:500;
  line-height:1.28;
}
.cm-process-copy p{
  margin-top:6px;
  font-size:13px;
  line-height:1.5;
}
.cm-process-marker .cm-icon-stroke{
  fill:none;
  stroke:#17212b;
  stroke-width:2.25;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.cm-process-marker .cm-icon-accent{
  fill:none;
  stroke:#168a45;
  stroke-width:2.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@media(min-width:981px){
  .cm-process-step:not(:last-child)::after{
    top:43px;
    left:calc(50% + 68px);
    right:calc(-50% + 68px);
    height:.65px;
    background:rgba(22,138,69,.24);
  }
  .cm-process-step:not(:last-child)::before{
    top:40.25px;
    width:5px;
    height:5px;
    left:calc(100% - 2.5px);
    box-shadow:0 0 0 2px rgba(22,138,69,.08);
  }
  @media (hover:hover) and (pointer:fine){
    .cm-process-step:hover::after,
    .cm-process-step:focus-within::after{background:rgba(22,138,69,.48)}
    .cm-process-step:hover::before,
    .cm-process-step:focus-within::before{box-shadow:0 0 0 3px rgba(22,138,69,.10)}
  }
}

@media(min-width:621px) and (max-width:980px){
  .cm-process-marker{width:92px;height:80px;margin-bottom:9px}
  .cm-process-marker svg{width:64px;height:64px}
  .cm-process-copy h3{font-size:16px}
  .cm-process-copy p{font-size:12.5px}
  .cm-process-step:nth-child(odd):not(:last-child)::after{
    top:39px;
    left:calc(50% + 61px);
    right:calc(-50% + 61px);
    height:.65px;
    background:rgba(22,138,69,.22);
  }
  .cm-process-step:nth-child(odd):not(:last-child)::before{
    top:36.5px;
    width:5px;
    height:5px;
    left:calc(100% - 2.5px);
    box-shadow:0 0 0 2px rgba(22,138,69,.08);
  }
}

@media(max-width:620px){
  .cm-process-step{
    grid-template-columns:76px minmax(0,1fr);
    gap:14px;
    padding-bottom:26px;
  }
  .cm-process-marker{width:72px;height:66px;margin:0}
  .cm-process-marker svg{width:56px;height:56px}
  .cm-process-copy{padding-top:10px}
  .cm-process-copy h3{font-size:16px;font-weight:500;line-height:1.28}
  .cm-process-copy p{margin-top:5px;font-size:12.5px;line-height:1.5}
  .cm-process-step:not(:last-child)::after{
    left:36px;
    top:68px;
    width:.65px;
    background:rgba(22,138,69,.22);
  }
}

/* About-compatible process canvas. The process itself does not create
 an extra major divider; the following Assurance section owns that boundary. */
.cm-process-section{background:#ecf2f8;}


/* replace the old white major divider with a restrained structural rule. */
.cm-process-inner{border-top-color:rgba(95,111,130,.16)!important}


/* ==========================================================
 Common process heading responsive-width polish
 Mirrors the full-width heading behavior already used by Service Scope.
 No page-specific wording or line-break hacks.
 ========================================================== */
@media(max-width:620px){
  .cm-process-intro{
    width:100%!important;
    max-width:none!important;
  }
  .cm-process-intro h2{
    width:100%!important;
    max-width:none!important;
    font-size:clamp(22px,6.2vw,26px)!important;
    line-height:1.12!important;
    letter-spacing:-.028em!important;
    text-wrap:balance;
  }
}