[data-mvp-reserved][hidden]{display:none!important}
.flow>.conductor,.flow>.flow-node{display:none!important}
/* A single material spans the sections. The colour changes across their boundaries. */
main.environment-connected{background:linear-gradient(180deg,#fff 0px,#fff var(--blend-light-edge),#dce5ef var(--blend-mid-light),#52677f var(--blend-mid-dark),#0b1421 var(--blend-dark-edge),#0b1421 var(--blend-out-dark),#52677f var(--blend-out-mid),#dce5ef var(--blend-out-light),#fff var(--blend-out-end))}
main.environment-connected{background:linear-gradient(180deg in oklab,#fff 0px,#fff var(--blend-light-edge),#dce5ef var(--blend-mid-light),#52677f var(--blend-mid-dark),#0b1421 var(--blend-dark-edge),#0b1421 var(--blend-out-dark),#52677f var(--blend-out-mid),#dce5ef var(--blend-out-light),#fff var(--blend-out-end))}
.services-section{isolation:isolate;overflow:clip;background:transparent;padding-top:clamp(144px,14vw,200px);padding-bottom:128px}
.services-section::before,.services-section::after,.service-field{display:none}
main.environment-connected .about-story{background:transparent;padding-top:96px}
/* Only decorative background layers fade at the lower edge; text and controls stay intact. */
main.environment-connected .hero{--quiet-hero-edge:clamp(120px,18svh,220px)}
main.environment-connected .hero :is(.hf-back,.hf-main,.hf-front,.hf-objects){mask-image:linear-gradient(#000 calc(100% - var(--quiet-hero-edge) - 140px),transparent calc(100% - var(--quiet-hero-edge)))}
main.environment-connected .hero .hf-light{mask-image:linear-gradient(#000 70%,transparent 95%)}
.continuity-grain{position:absolute;inset:0;z-index:4;pointer-events:none;background-size:180px 180px;opacity:.5;mix-blend-mode:normal}
main.continuity-ready .hero .hf-grain{visibility:hidden}
body.low-power .continuity-grain,body.grain-off .continuity-grain{display:none}
.services-section .section-intro{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:42px;color:#f2f7ff}
.services-section .section-intro p{max-width:44ch;font-size:1.1rem;line-height:1.7;color:#c6d4e5}
.services-eyebrow{display:block;margin-bottom:22px;font-size:12px;letter-spacing:.12em;color:#a5bddb}
.services-eyebrow::before{content:'';display:inline-block;width:6px;height:6px;background:#164bff;margin-right:10px;box-shadow:0 0 12px #164bff}
.service-guide{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:26px;color:#c4d4e8;font-size:13px}
.service-motion-toggle{flex-shrink:0;border:1px solid #7890af;background:#16263b;padding:10px 14px;color:#eef5ff;min-height:44px;font-size:12px}
.mvp-services-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}
.mvp-service{position:relative;min-width:0;border:1px solid #fff;background:linear-gradient(145deg,#fcfdff,#e6edf5);box-shadow:1px 2px 0 #aec4da,3px 5px 0 #7894af,12px 22px 36px #0004,inset 0 0 0 1px #dae4ef;color:#101318}
.plate-heading{display:flex;align-items:center;gap:17px;min-height:110px;padding:24px 28px;border-bottom:1px solid #d6e2ed;box-shadow:0 1px 0 #fff}
.plate-index{display:grid;place-items:center;flex-shrink:0;width:38px;height:42px;border:1px solid #fff;background:linear-gradient(130deg,#fff,#dce7f2);color:#42648b;font-size:13px;box-shadow:2px 3px 0 #c5d4e3,4px 7px 12px #34516d16}
.mvp-service h3{font-size:clamp(1.35rem,1.5vw,1.75rem);line-height:1.15;max-width:22ch}
.service-demonstration{position:relative;overflow:hidden;background:radial-gradient(ellipse at 40% 0%,#fff8,transparent 65%),linear-gradient(150deg,#f1f6fb,#dfe9f3);border-bottom:1px solid #cfdeeb}
.demo-meta{display:flex;justify-content:space-between;padding:18px 24px 0;font-size:12px;letter-spacing:.08em;color:#4b657d;line-height:1.4}
.plate-scene{position:relative;height:325px;font-size:12px;line-height:1.4}
.scene-content{position:absolute;inset:0}
.scene-content *{box-sizing:border-box}
.plate-tiles{position:absolute;inset:22px 18px 28px;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(3,1fr);gap:13px;transform:perspective(900px) rotateX(12deg) rotateZ(-5deg);opacity:.48}
.tile{border:1px solid #fff8;background:linear-gradient(135deg,#f4f8fc,#ccddeb);box-shadow:2px 3px 0 #b7cadb33,8px 9px 15px #455d7612}
.tile:nth-child(4n){transform:translateY(-8px);background:linear-gradient(135deg,#fff,#d8e4ef);box-shadow:3px 5px 0 #b7cadb40,8px 15px 15px #455d7622}
.tile:nth-child(3n){opacity:.2}.tile:nth-child(7n){transform:scale(.45);background:#164bff;opacity:.65;box-shadow:3px 4px 0 #1445b844}
.plate-screw{position:absolute;bottom:15px;width:5px;height:5px;border-radius:50%;background:linear-gradient(130deg,#9cb1c5,#fff);box-shadow:0 1px 1px #657f97}.screw-a{left:18px}.screw-b{right:18px}
.raised-surface{background:linear-gradient(130deg,#fff,#eaf1f8);border:1px solid #fff;box-shadow:1px 2px 0 #c4d3e2,3px 5px 0 #b6c9dc,9px 18px 22px #314d6c25;color:#273c54}
.scene-state{display:block;font-size:12px;line-height:1.4;color:#496786;margin-top:8px}
.phase{display:none;font-size:inherit}
[data-step="0"] .phase-0,[data-step="1"] .phase-1,[data-step="2"] .phase-2{display:block}
.scene-content strong{font-weight:400;font-size:15px;line-height:1.35}
.service-explanation{padding:25px 28px 30px;background:linear-gradient(130deg,#fff9,#eff5fb88)}
.service-steps{display:flex;gap:5px;margin-bottom:18px;background:transparent}
.service-steps button{position:relative;flex:1;text-align:left;display:flex;align-items:center;gap:6px;min-height:44px;padding:8px;border:1px solid #c7d7e5;background:#e9f0f7;color:#50667c;font-size:12px}
.service-steps button span{font-size:12px;opacity:.7}
.service-steps button[aria-pressed="true"]{background:#fff;color:#164bff;border-color:#afc3eb;box-shadow:0 2px 0 #164bff,3px 5px 10px #2b4d6d13}.service-steps button:hover{background:#fff}
.mvp-service .step-description{min-height:3.4em;font-size:14px;color:#263e56;line-height:1.6;margin:0}
.mvp-service .service-approved-copy{margin:20px 0 0;padding-top:20px;border-top:1px solid #d1dfea;font-size:14px;line-height:1.75;max-width:none;color:#526479}
/* 01 — One defect ticket moves through three real workflow columns. No scaled type. */
.work-board{position:absolute;left:4%;right:4%;top:42px;height:246px;padding:18px 12px}
.board-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;text-align:center;color:#3f5872;font-size:12px}
.board-columns span{min-height:38px;padding-bottom:10px;border-bottom:2px solid #bfd0e2}
.board-lanes{position:absolute;inset:66px 10px 44px;display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.board-lanes i{background:#d8e4f166;border:1px solid #c6d6e744}
.work-ticket{position:absolute;left:4%;top:88px;width:28%;min-height:104px;padding:13px 9px;transition:transform 1.2s cubic-bezier(.3,.75,.2,1)}
.work-ticket strong{display:block;font-size:14px}.ticket-marker{display:block;width:18px;height:4px;background:#164bff;margin-bottom:8px}
.ticket-check{display:none;margin-top:7px;width:20px;height:20px;background:#164bff}.ticket-check svg{height:20px;width:20px;fill:none;stroke:#fff;stroke-width:1.5}
.board-status{position:absolute;bottom:13px;left:16px;right:16px;text-align:center}.board-status .scene-state{margin-top:0;color:#305a88}
[data-step="1"] .work-ticket{transform:translateX(113%)}[data-step="2"] .work-ticket{transform:translateX(226%)}[data-step="2"] .ticket-check{display:block}
/* 02 — The packet stops at a person before reaching the other tool. */
.automation-route,.support-route{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke-width:2}
.connection-muted{stroke:#8ea7bf;stroke-width:2}.auto-line-a,.auto-line-b{stroke:#164bff;stroke-dasharray:410;stroke-dashoffset:410;transition:stroke-dashoffset 1s}
.tool-panel{position:absolute;top:158px;width:35%;min-height:127px;padding:15px 12px}.tool-source{left:4%}.tool-destination{right:4%}.tool-symbol{display:block;width:24px;height:24px;font-size:22px;line-height:1;color:#164bff;margin-bottom:11px}.tool-panel strong{display:block;font-size:14px}
.approval-panel{position:absolute;left:27%;top:31px;width:46%;display:flex;gap:12px;align-items:center;padding:15px 12px;min-height:102px;z-index:2}.approval-panel strong{font-size:14px}.approval-person{width:28px;flex-shrink:0}.approval-person svg{width:28px;height:36px;fill:none;stroke:#426d9e;stroke-width:1.5}
.info-packet{position:absolute;left:18%;top:238px;width:16px;height:16px;background:#164bff;border:1px solid #b7d0ff;box-shadow:3px 4px 0 #a3bfe2,0 0 14px #164bff40;z-index:3;transition:left 1.2s,top 1.2s}.info-packet i{display:block;width:6px;height:6px;margin:4px;background:#d9e6ff}
[data-step="1"] .info-packet{left:48%;top:120px}[data-step="2"] .info-packet{left:78%;top:238px}
[data-step="1"] .auto-line-a,[data-step="2"] .auto-line-a,[data-step="2"] .auto-line-b{stroke-dashoffset:0}
[data-step="2"] .tool-destination .scene-state{color:#164bff}
/* 03 — The visible gap is located, repaired, then recorded in the guide. */
.support-route{stroke-width:3}.connection-gap{stroke:#93a9be;stroke-dasharray:5 7}.connection-restored{stroke:#164bff;stroke-dasharray:600;stroke-dashoffset:600;transition:stroke-dashoffset 1.2s}
.fault-locator{stroke:#164bff;stroke-width:1.5;stroke-dasharray:3 5;fill:#e6eff9;fill-opacity:.65;transition:opacity .6s}
.maintenance-origin{position:absolute;left:4%;top:38px;width:53%;padding:14px;min-height:96px}.maintenance-origin strong{display:block;font-size:14px}
.repair-joint{position:absolute;top:174px;left:20%;width:38%;padding:12px;text-align:center;z-index:2;transition:transform .8s}.repair-joint .scene-state{margin:0}
.maintenance-guide{position:absolute;right:5%;top:233px;width:48%;padding:13px 14px;min-height:83px}.guide-icon{float:right;font-size:26px;color:#6584a3;line-height:1}.maintenance-guide strong{font-size:14px;display:block}
[data-step="1"] .connection-restored,[data-step="2"] .connection-restored{stroke-dashoffset:0}[data-step="1"] .connection-gap,[data-step="2"] .connection-gap{opacity:0}[data-step="1"] .fault-locator,[data-step="2"] .fault-locator{opacity:0}[data-step="2"] .maintenance-guide .scene-state{color:#164bff}
/* 04 — A deliberately simple placeholder until the real films are available. */
.motion-frame{position:absolute;left:6%;right:6%;top:34px;padding:17px}.frame-caption>.scene-state{margin:0;color:#3f5c78}.motion-stage{position:relative;height:170px;margin-top:14px;background:linear-gradient(130deg,#d8e5f2,#ebf3fb);border:1px solid #c1d3e5;overflow:hidden}
.story-frames{position:absolute;inset:48px 10px;display:flex;gap:9px;transition:opacity .6s}.story-frames>span{display:flex;flex:1;align-items:center;justify-content:center;background:#f7fbff;border:1px solid #aebfd3;box-shadow:2px 3px 0 #bfd0e1;font-size:12px;min-width:0}
.motion-shapes{position:absolute;inset:0;opacity:0;transition:opacity .6s}.motion-shapes i{position:absolute;width:58px;height:58px;background:#edf5ff;box-shadow:3px 5px 0 #b5c9df;left:17%;top:57px;transition:left 1.2s,top 1.2s,transform 1.2s}.motion-shapes i:nth-child(2){left:43%;top:30px;background:#164bff}.motion-shapes i:nth-child(3){left:68%;top:72px}
.motion-end{position:absolute;inset:0;padding:40px 25px;display:flex;flex-direction:column;justify-content:center;opacity:0;transition:opacity .7s}.motion-end span{font-size:23px;letter-spacing:-.04em}.motion-end strong{font-size:31px;color:#164bff;font-weight:300;letter-spacing:-.04em}
.motion-timeline{display:flex;align-items:center;gap:12px;margin-top:17px;color:#164bff;font-size:12px}.timeline-clips{position:relative;display:flex;gap:5px;flex:1;height:15px}.timeline-clips i{flex:1;background:#b0c9e3}.timeline-clips i:nth-child(2){background:#83a5d0}.timeline-clips b{position:absolute;top:-5px;bottom:-5px;left:0;width:2px;background:#164bff;transition:left 1.2s}.timeline-state .scene-state{margin:0;font-size:12px}
[data-step="1"] .story-frames,[data-step="2"] .story-frames{opacity:0}[data-step="1"] .motion-shapes,[data-step="2"] .motion-shapes{opacity:1}[data-step="1"] .timeline-clips b{left:48%}[data-step="2"] .timeline-clips b{left:99%}[data-step="2"] .motion-end{opacity:1}[data-step="2"] .motion-shapes i:first-child{left:80%;top:-15px;transform:rotate(20deg)}[data-step="2"] .motion-shapes i:nth-child(2){left:82%;top:132px;transform:rotate(-8deg)}[data-step="2"] .motion-shapes i:nth-child(3){left:90%;top:30px}
/* The storyboard pieces themselves become the finished composition. */
.motion-production{height:180px;background:linear-gradient(135deg,#e7f0fa,#cbdced);isolation:isolate}
.production-piece{position:absolute;top:40px;width:29%;height:98px;background:linear-gradient(135deg,#fff,#e4eef8);border:1px solid #a8bfd6;box-shadow:2px 4px 0 #b0c6dc,5px 9px 12px #2d4c681a;transition:left 1.2s,top 1.2s,width 1.2s,height 1.2s,background .8s,border-color .8s,box-shadow .8s;padding:9px 7px}
.production-copy{left:3%}.production-route{left:35.5%}.production-result{left:68%}
.piece-caption{display:block;font-size:12px;line-height:1.3;color:#456482;white-space:normal;transition:opacity .45s}
.production-title{margin-top:14px;line-height:1.15;letter-spacing:-.035em;transition:margin-top 1.1s}
.production-title>span{display:block;font-size:14px;color:#294763;transition:font-size 1.1s}
.production-title>strong{display:block;font-size:18px;font-weight:300;color:#164bff;transition:font-size 1.1s}
.production-route>svg{position:absolute;inset:32px 9px 8px;width:calc(100% - 18px);height:calc(100% - 40px);overflow:visible;fill:#164bff;transition:inset 1.1s,width 1.1s,height 1.1s}
.production-route path{fill:none;stroke:#577ba1;stroke-width:2;stroke-dasharray:140;stroke-dashoffset:0;transition:stroke-dashoffset 1.2s,stroke .8s}
.production-check{display:grid;place-items:center;width:34px;height:34px;background:#164bff;box-shadow:2px 3px 0 #9ebae0;margin:12px auto 0;transition:width 1.1s,height 1.1s,margin 1.1s,box-shadow .8s}
.production-check svg{width:85%;height:85%;fill:none;stroke:#fff;stroke-width:1.3}
.production-lockup{position:absolute;left:19px;right:19px;bottom:13px;display:flex;align-items:center;justify-content:space-between;color:#46688c;font-size:12px;letter-spacing:.09em;opacity:0;transition:opacity .7s}
.production-lockup i{height:3px;width:45px;background:#164bff}
.production-corner{position:absolute;width:15px;height:15px;border-color:#799abd;border-style:solid;opacity:0;transition:opacity .7s}.corner-top{top:8px;left:8px;border-width:1px 0 0 1px}.corner-bottom{bottom:8px;right:8px;border-width:0 1px 1px 0}
[data-step="1"] .production-piece,[data-step="2"] .production-piece{border-color:transparent;background:transparent;box-shadow:none;padding:0}
[data-step="1"] .piece-caption,[data-step="2"] .piece-caption{opacity:0}
[data-step="1"] .production-copy,[data-step="2"] .production-copy{left:8%;top:26px;width:57%;height:105px}
[data-step="1"] .production-title,[data-step="2"] .production-title{margin-top:5px}
[data-step="1"] .production-title>span,[data-step="2"] .production-title>span{font-size:24px}
[data-step="1"] .production-title>strong,[data-step="2"] .production-title>strong{font-size:32px}
[data-step="1"] .production-route,[data-step="2"] .production-route{left:60%;top:60px;width:30%;height:55px}
[data-step="1"] .production-route>svg,[data-step="2"] .production-route>svg{inset:0;width:100%;height:100%}
[data-step="1"] .production-route path{stroke-dashoffset:60;stroke:#164bff}
[data-step="2"] .production-route path{stroke-dashoffset:0;stroke:#164bff}
[data-step="1"] .production-result,[data-step="2"] .production-result{left:77%;top:43px;width:16%;height:52px}
[data-step="1"] .production-check,[data-step="2"] .production-check{width:43px;height:43px;margin:0 auto;box-shadow:3px 5px 0 #a0badb,7px 10px 14px #4261842a}
[data-step="2"] .production-lockup,[data-step="2"] .production-corner{opacity:1}
[data-step="2"] .motion-production{background:linear-gradient(135deg,#f6faff,#dce9f7)}
@media(max-width:760px){.production-piece{padding:8px 5px}.piece-caption{font-size:12px}.production-title>strong{font-size:16px}[data-step="1"] .production-copy,[data-step="2"] .production-copy{left:7%;width:64%}[data-step="1"] .production-title>span,[data-step="2"] .production-title>span{font-size:21px}[data-step="1"] .production-title>strong,[data-step="2"] .production-title>strong{font-size:28px}[data-step="1"] .production-result,[data-step="2"] .production-result{left:78%}[data-step="1"] .production-check,[data-step="2"] .production-check{width:34px;height:34px}.production-lockup{font-size:12px;letter-spacing:.04em}}
/* Removing transition styles settles the old scene immediately before another starts. */
.mvp-service:not([data-playing="true"]):not([data-manual-motion="true"]) .scene-content *{transition:none!important;animation:none!important}
#enquiry-form{scroll-margin-top:7rem}
@media(max-width:1000px){.mvp-services-grid{gap:25px}.plate-heading{padding:20px;gap:13px}.service-explanation{padding:22px 20px}.scene-content strong{font-size:14px}}
@media(max-width:760px){.services-section{padding-top:160px;padding-bottom:104px}main.environment-connected .about-story{padding-top:72px}.services-section .section-intro{grid-template-columns:1fr;gap:24px}.mvp-services-grid{grid-template-columns:minmax(0,1fr);gap:32px}.service-guide{align-items:flex-start;font-size:12px}.service-guide>span{max-width:24ch}.service-motion-toggle{padding:8px 10px}.plate-heading{min-height:100px}.mvp-service h3{font-size:1.4rem}.plate-scene{height:325px}.service-steps button{font-size:12px;padding:9px 6px;gap:4px}.mvp-service .step-description{min-height:4.8em}.services-eyebrow{font-size:12px;letter-spacing:.06em}.demo-meta{padding:18px 18px 0;letter-spacing:.04em}.tool-panel{padding:13px 9px}.approval-panel{padding:12px 9px;gap:7px}.approval-person{width:22px}.approval-person svg{width:22px}.work-ticket{padding:10px 7px}.work-ticket strong{font-size:13px}.motion-frame{padding:12px}.motion-end{padding-left:18px}.services-demo-inview .header-cta{transform:translateY(160%)!important;visibility:hidden}}
@media(prefers-reduced-motion:reduce){.mvp-service,.mvp-service *{transition:none!important;animation:none!important}}




/* Explicit controls on every example, including touch screens. */
.mvp-service .step-hint{font-size:12px;line-height:1.5;color:#3e5a76;margin:0 0 12px}
.service-steps{gap:8px}
.service-steps button{display:grid;grid-template-columns:minmax(0,1fr) 12px;grid-template-rows:auto auto;gap:4px 6px;min-width:0;min-height:66px;padding:10px 9px;border:1px solid #9cb4cc;border-bottom-width:3px;background:linear-gradient(135deg,#f8fbff,#dce7f2);box-shadow:1px 3px 0 #c7d6e5;cursor:pointer;color:#29445f;touch-action:manipulation}
.service-steps button .step-number{grid-column:1;grid-row:1;font-size:12px;color:#587694;opacity:1}
.service-steps button .step-label{grid-column:1;grid-row:2;font-size:12px;line-height:1.35;opacity:1}
.step-affordance{grid-column:2;grid-row:1 / 3;align-self:center;width:12px;height:16px;color:#164bff}
.service-steps button[aria-pressed="true"]{border-color:#164bff;background:#fff;color:#164bff;box-shadow:1px 3px 0 #b6c9e8}
.service-steps button:focus-visible{outline:2px solid #164bff;outline-offset:4px}
.service-steps button:active{box-shadow:none;transform:translateY(2px)}
@media(max-width:600px){
 body.low main #top.hero{min-height:100svh;padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
 body.low #top .visitor-down{bottom:12px}
 body.low #top .phone-motion{bottom:16px}
 body.low #top .visitor-sound{bottom:66px}
 #top .hero-replay{left:24px;max-width:calc(100% - 48px)}
 .service-steps button{padding:10px 8px;gap:4px 5px;min-height:66px}
}
/* State changes use both a symbol and contrast, never colour alone. */
.state-symbol{display:inline-block;vertical-align:-3px;width:14px;height:14px;margin-right:5px;flex-shrink:0}
.mvp-service[data-step="0"] .scene-state{color:#52708e}
.mvp-service[data-step="1"] .scene-state{color:#164bff}
.mvp-service[data-step="2"] .scene-state{color:#1036b8}
.board-status{padding:5px 8px;border:1px solid #bdcfdf;background:#eff5fb}
.mvp-service[data-step="1"] .board-status{border-color:#92adff;background:#e7eeff}
.mvp-service[data-step="2"] .board-status{border-color:#164bff;background:#164bff}
.mvp-service[data-step="2"] .board-status .scene-state{color:#fff}
.frame-caption .state-symbol,.timeline-state .state-symbol{display:none}