/* Four development stages, with a readable static fallback. */
:is(#p12,#serviceApp) .device-hero{position:relative;isolation:isolate;overflow:hidden;background:#071d1b;min-height:660px;padding:64px 7% 24px;display:flex;gap:48px;justify-content:space-between}
.device-hero-images{position:absolute;inset:0;z-index:-2;background:#071d1b}
.device-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transition:opacity 1.6s ease}
.device-scene.is-current{opacity:1}
.device-hero-images:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#061c1bea 0%,#061c1b9e 38%,transparent 75%),linear-gradient(0deg,#061c1bf0,transparent 42%)}
.device-hero-copy{max-width:520px}
:is(#p12,#serviceApp) .device-hero-lead{font-size:clamp(24px,2.6vw,36px);line-height:1.25;color:#d8efbe;margin:22px 0 0;letter-spacing:-.025em}
:is(#p12,#serviceApp) .device-hero .slide-tagline{font-size:16px;max-width:460px;line-height:1.8}
.device-hero-process{width:100%}
.device-phase-buttons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.device-phase-buttons button{font:inherit;font-size:19px;text-align:left;padding:15px 18px;color:#fff;border:1px solid #ffffff40;border-radius:6px;background:#092723c9;backdrop-filter:blur(10px);cursor:pointer;min-width:0;transition:background .5s,border-color .5s}
.device-phase-buttons button[aria-pressed="true"]{background:#1e5246e8;border-color:#d4ef99;box-shadow:inset 0 3px #d4ef99}
.device-phase-buttons small{font-size:11px;color:#d4ef99;display:block;margin-bottom:7px}
.device-phase-buttons span{display:block;font-size:12px;color:#dce9e4;margin-top:5px}
.device-hero-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;font-size:11px;color:#bfd2ca}
.device-hero-controls button{background:#092723d9;border:1px solid #ffffff66;border-radius:5px;color:white;font:inherit;font-size:12px;min-height:44px;padding:9px 16px;cursor:pointer}
.device-hero button:focus-visible{outline:3px solid #efffb4;outline-offset:4px}
.device-data-flow{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.device-data-flow i{position:absolute;left:54%;top:25%;width:25%;height:1px;background:linear-gradient(90deg,transparent,#acffe1,transparent);box-shadow:0 0 12px #5cdeb8;transform:rotate(-24deg);animation:device-signal 5s ease-in-out infinite;animation-play-state:paused;opacity:0}
.device-data-flow i:nth-child(2){top:49%;left:66%;animation-delay:1.7s;transform:rotate(28deg)}
.device-data-flow i:nth-child(3){top:65%;left:49%;animation-delay:3.2s;transform:rotate(-12deg)}
.device-hero.is-playing .device-data-flow i{animation-play-state:running}
@keyframes device-signal{0%,100%{opacity:0;translate:-35px 0}40%,60%{opacity:.65}85%{opacity:0;translate:65px 0}}
.device-introduction{max-width:1440px;margin:auto;padding:32px 7% 0;color:#4e6358;font-size:16px;line-height:1.8}
@media(max-width:900px){:is(#p12,#serviceApp) .device-hero{padding:330px 6% 24px;min-height:0;gap:28px}.device-hero-images{bottom:auto;height:350px}.device-scene{object-position:75% center}.device-hero-images:after{background:linear-gradient(0deg,#071d1b,transparent 45%)}.device-hero-copy{max-width:640px}:is(#p12,#serviceApp) .device-hero .slide-tagline{max-width:640px}.device-phase-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}.device-introduction{padding:26px 6% 0}}
@media(max-width:480px){:is(#p12,#serviceApp) .device-hero{padding-top:255px}.device-hero-images{height:280px}.device-phase-buttons{gap:8px}.device-phase-buttons button{font-size:16px;padding:12px}.device-phase-buttons span{font-size:11px;overflow-wrap:anywhere}.device-hero-controls{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){.device-scene{transition:none}.device-data-flow{display:none}}

/* Software development uses the same stage controls and responsive image layout. */
#serviceApp .software-hero h1{font-size:clamp(30px,3.5vw,50px);line-height:1.12;max-width:540px;color:#fff}
#serviceApp .software-hero .software-hero-intro{font-size:16px;line-height:1.8;color:#e1ebe5;margin:24px 0 26px;max-width:490px}
#serviceApp .software-hero .device-phase-buttons button{font-size:17px;line-height:1.35}
#serviceApp .software-hero .device-phase-buttons span{line-height:1.55}
@media(max-width:480px){#serviceApp .software-hero .device-phase-buttons button{font-size:15px}}

/* Bright collaboration imagery distinguishes software development. */
#serviceApp .software-hero{background:#f4f2eb;color:#193d36}
#serviceApp .software-hero .device-hero-images{background:#f4f2eb}
#serviceApp .software-hero .device-hero-images:after{background:linear-gradient(90deg,#f4f2ebfa 0%,#f4f2ebed 28%,#f4f2eb85 43%,transparent 62%),linear-gradient(0deg,#f4f2ebee,transparent 30%)}
#serviceApp .software-hero h1{color:#193d36}
#serviceApp .software-hero .home-eyebrow{color:#355f52}
#serviceApp .software-hero .software-hero-intro{color:#294b42}
#serviceApp .software-hero .device-phase-buttons button{background:#fffffff2;color:#193d36;border-color:#b6c7bf;box-shadow:0 3px 14px #193d3608}
#serviceApp .software-hero .device-phase-buttons button[aria-pressed="true"]{background:#e4efdc;border-color:#416b4b;box-shadow:inset 0 3px #416b4b}
#serviceApp .software-hero .device-phase-buttons small{color:#3a6648}
#serviceApp .software-hero .device-phase-buttons span{color:#36564b}
#serviceApp .software-hero .device-hero-controls{color:#36564b}
#serviceApp .software-hero .device-hero-controls button{background:#fffffff2;border-color:#92aaa0;color:#193d36}
#serviceApp .software-hero button:focus-visible{outline-color:#1b634d}
#serviceApp .software-hero .device-data-flow i{background:linear-gradient(90deg,transparent,#208974,transparent);box-shadow:0 0 10px #54c0a6}
@media(max-width:900px){#serviceApp .software-hero .device-hero-images:after{background:linear-gradient(0deg,#f4f2eb,transparent 30%)}}