/* RoboMecs V5.12 — interaction and mobile-home standard
   Loaded last so interaction feedback is consistent without redesigning page geometry. */
:root{
  --rm-hover-red-soft:rgba(193,10,10,.095);
  --rm-hover-red-soft-strong:rgba(193,10,10,.14);
  --rm-hover-red-border:rgba(193,10,10,.36);
  --rm-hover-red-shadow:0 14px 34px rgba(193,10,10,.115);
}

/* -------------------------------------------------------------------------
   Home mobile Hero: remove proof bullets only on phones. Desktop is unchanged.
   This lowers the CTA group and returns vertical space to the Hero copy.
   ------------------------------------------------------------------------- */
@media(max-width:760px){
  .hero .hero-lower-zone .hero-proof{display:none!important}
  .hero .hero-lower-zone{padding-top:0!important}

  /* Home Process section: heading must precede the image on mobile. */
  #process .process-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    row-gap:0!important;
    column-gap:0!important;
  }
  #process .process-grid > :not(.process-media){display:contents!important}
  #process .process-grid > :not(.process-media) > .eyebrow{order:1;margin-bottom:12px!important}
  #process .process-grid > :not(.process-media) > .title-lg,
  #process .process-grid > :not(.process-media) > h2{order:2;margin-bottom:22px!important}
  #process .process-media{order:3;height:auto!important;min-height:300px!important;margin-bottom:24px!important}
  #process .process-grid > :not(.process-media) > .lead{order:4;margin-bottom:0!important}
  #process .process-grid > :not(.process-media) > .process-list{order:5;margin-top:22px!important}
}

/* -------------------------------------------------------------------------
   Execution Methodology: premium motion rather than a static illustration.
   ------------------------------------------------------------------------- */
.methodology .flow-step{
  opacity:0;
  transform:translateY(22px) scale(.97);
  transform-origin:center bottom;
  transition:
    opacity .55s cubic-bezier(.2,.75,.2,1),
    transform .55s cubic-bezier(.2,.75,.2,1),
    border-color .25s ease,
    box-shadow .28s ease,
    background .28s ease;
  will-change:transform,opacity;
}
.methodology .flow-step.is-method-visible{opacity:1;transform:none}
.methodology .flow-icon{
  transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s ease,background .32s ease;
  animation:rm-method-breathe 3.4s ease-in-out infinite;
  animation-delay:calc(var(--flow-index,0) * 180ms);
}
.methodology .flow-icon svg{transition:transform .32s cubic-bezier(.2,.8,.2,1),stroke .25s ease}
.methodology .flow-underline{transition:width .28s ease,box-shadow .28s ease}
.methodology .flow-step:not(:last-child)::after{animation:rm-method-arrow 1.8s ease-in-out infinite}

@media(hover:hover) and (pointer:fine){
  .methodology .flow-step:hover,
  .methodology .flow-step:focus-within{
    transform:translateY(-9px) scale(1.015);
    border-color:var(--rm-hover-red-border);
    background:linear-gradient(145deg,#fff 0%,rgba(193,10,10,.045) 100%);
    box-shadow:0 24px 50px rgba(0,0,71,.11),0 8px 26px rgba(193,10,10,.10);
  }
  .methodology .flow-step:hover .flow-icon,
  .methodology .flow-step:focus-within .flow-icon{
    transform:translateY(-4px) scale(1.07) rotate(-2deg);
    background:linear-gradient(180deg,#000061,#000047);
    box-shadow:0 0 0 7px rgba(193,10,10,.08),0 18px 34px rgba(0,0,71,.22);
  }
  .methodology .flow-step:hover .flow-icon svg,
  .methodology .flow-step:focus-within .flow-icon svg{transform:scale(1.06)}
  .methodology .flow-step:hover .flow-underline,
  .methodology .flow-step:focus-within .flow-underline{width:54px;box-shadow:0 0 16px rgba(193,10,10,.25)}
}

@keyframes rm-method-breathe{
  0%,100%{box-shadow:inset 0 0 0 6px rgba(255,255,255,.06),0 8px 22px rgba(0,0,71,.12)}
  50%{box-shadow:inset 0 0 0 6px rgba(255,255,255,.08),0 12px 30px rgba(0,0,71,.18),0 0 0 4px rgba(193,10,10,.035)}
}
@keyframes rm-method-arrow{
  0%,100%{transform:translateX(0);box-shadow:0 8px 20px rgba(0,0,71,.18)}
  50%{transform:translateX(4px);box-shadow:0 10px 24px rgba(193,10,10,.16)}
}
html[dir="rtl"] .methodology .flow-step:not(:last-child)::after{animation-name:rm-method-arrow-rtl}
@keyframes rm-method-arrow-rtl{0%,100%{transform:translateX(0)}50%{transform:translateX(-4px)}}

/* -------------------------------------------------------------------------
   Shared interaction feedback. Primary CTAs and photographic overlays retain
   their established treatment; selection rows, related links, menu rows and
   editorial cards use the same restrained transparent RoboMecs red cue.
   ------------------------------------------------------------------------- */
.challenge-btn,
.work-tab,
.nav-solutions-menu a,
.solution-related-links a,
.industry-related a,
.service-related a,
.hub-editorial-row,
.service-editorial-row{
  transition:background-color .22s ease,border-color .22s ease,box-shadow .22s ease,transform .22s ease!important;
}

.challenge-btn:hover,
.challenge-btn:focus-visible,
.challenge-btn.active,
.work-tab:hover,
.work-tab:focus-visible,
.work-tab.active,
.nav-solutions-menu a:hover,
.nav-solutions-menu a:focus-visible{
  background:var(--rm-hover-red-soft)!important;
  color:var(--blue)!important;
}
.challenge-btn:hover,
.challenge-btn:focus-visible,
.challenge-btn.active{box-shadow:inset 3px 0 0 var(--red)}
html[dir="rtl"] .challenge-btn:hover,
html[dir="rtl"] .challenge-btn:focus-visible,
html[dir="rtl"] .challenge-btn.active{box-shadow:inset -3px 0 0 var(--red)}
.work-tab:hover,
.work-tab:focus-visible,
.work-tab.active{box-shadow:inset 3px 0 0 var(--red)}
html[dir="rtl"] .work-tab:hover,
html[dir="rtl"] .work-tab:focus-visible,
html[dir="rtl"] .work-tab.active{box-shadow:inset -3px 0 0 var(--red)}

.challenge-btn:hover,
.challenge-btn:focus-visible,
.challenge-btn.active,
.work-tab:hover .work-tab-copy b,
.work-tab:focus-visible .work-tab-copy b,
.work-tab.active .work-tab-copy b{color:var(--blue)!important}

@media(hover:hover) and (pointer:fine){
  .solution-related-links a:hover,
  .industry-related a:hover,
  .service-related a:hover{
    background:var(--rm-hover-red-soft)!important;
    border-color:var(--rm-hover-red-border)!important;
    box-shadow:var(--rm-hover-red-shadow)!important;
    transform:translateY(-3px);
  }
  .hub-editorial-row:hover,
  .service-editorial-row:hover{
    border-color:var(--rm-hover-red-border)!important;
    box-shadow:0 20px 46px rgba(0,0,71,.09),0 5px 18px rgba(193,10,10,.09)!important;
  }
  .hub-editorial-row:hover .hub-editorial-copy,
  .service-editorial-row:hover .service-editorial-copy{
    background:linear-gradient(135deg,#fff 0%,rgba(193,10,10,.055) 100%)!important;
  }
}

.challenge-btn:focus-visible,
.work-tab:focus-visible,
.nav-solutions-menu a:focus-visible,
.solution-related-links a:focus-visible,
.industry-related a:focus-visible,
.service-related a:focus-visible,
.hub-editorial-row:focus-visible,
.service-editorial-row:focus-visible{
  outline:3px solid rgba(193,10,10,.18)!important;
  outline-offset:2px!important;
}

@media(prefers-reduced-motion:reduce){
  .methodology .flow-step{opacity:1!important;transform:none!important;transition:none!important}
  .methodology .flow-icon,
  .methodology .flow-step:not(:last-child)::after{animation:none!important;transition:none!important}
  .methodology .flow-icon svg,
  .methodology .flow-underline{transition:none!important}
}