/* Original MENA workflow diagrams. All movement is optional progressive enhancement. */
.service-revision .service-hero .hero-stage{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:clamp(36px,5vw,76px);padding-top:65px;padding-bottom:60px;max-width:1600px;margin:auto}
.service-revision .service-hero .hero-copy{text-align:left;max-width:610px;margin:0}
.service-revision .service-hero h1{font-size:clamp(42px,4.15vw,64px);letter-spacing:-.035em;max-width:17ch;margin:0 0 26px;line-height:1.08}
.service-revision .service-hero .hero-description{font-size:18px;line-height:1.65;max-width:49ch;margin:0}
.service-revision .service-hero .service-context{margin:21px 0 0}
.service-revision .service-hero .hero-actions{justify-content:flex-start;gap:12px}
.service-revision .service-hero .hero-actions .button{padding-inline:23px}
.workflow-studio{margin:0;min-width:0;position:relative;isolation:isolate;text-align:left}
.workflow-studio>figcaption{font-family:var(--display);font-size:21px;letter-spacing:-.02em;margin:0 0 20px}
.workflow-console{background:var(--ink);color:var(--paper);border-radius:14px;box-shadow:0 24px 46px -22px #15151555;position:relative;z-index:2;overflow:hidden}
.console-chrome{display:flex;align-items:center;gap:9px;padding:17px 23px;border-bottom:1px solid #ffffff26;font-size:12px;color:#d7d7d7}
.console-mark{height:9px;width:9px;background:var(--accent);transform:rotate(-12deg)}
.console-window{display:flex;gap:5px;margin-left:auto}
.console-window i{height:5px;width:5px;background:#888;border-radius:50%}
.studio-choices{display:flex;gap:6px;padding:15px 20px 0}
.studio-choices button{background:transparent;color:#cfcfcf;border:0;border-radius:5px;padding:8px 10px;font-size:12px;line-height:1.3;transition:background .18s,color .18s}
.studio-choices button:hover{background:#ffffff18;color:#fff}
.studio-choices button[aria-pressed=true]{background:#fff;color:var(--ink)}
.studio-choices button:focus-visible,.studio-replay:focus-visible{outline-color:white;outline-offset:2px}
.console-command{display:flex;align-items:center;gap:10px;padding:22px 27px 15px;min-height:61px}
.console-command>span:first-child{color:#ff7892;font-size:17px}
.console-command code{font-family:'Roboto Mono',monospace;font-size:13px;color:#f3f3f3}
.console-cursor{display:inline-block;width:6px;height:15px;background:#ff7892;opacity:0}
.console-steps{list-style:none;margin:0;padding:5px 26px 22px;display:grid;gap:16px}
.console-steps li{display:flex;gap:11px;align-items:center;font-size:13px;line-height:1.4;color:#e5e5e5;transition:opacity .25s,color .25s}
.console-step-icon{height:19px;width:19px;flex:0 0 19px;display:grid;place-items:center;border:1px solid #ffffff24;border-radius:50%;color:#ff8ba2;transition:background .25s,border-color .25s}
.console-step-icon svg{width:15px;height:15px}
.console-steps li[data-state=queued]{color:#aaa}
.console-steps li[data-state=queued] svg,.console-steps li[data-state=current] svg{opacity:0}
.console-steps li[data-state=current]{color:#fff}
.console-steps li[data-state=current] .console-step-icon{background:var(--accent);border-color:var(--accent)}
.console-footer{padding:15px 24px;display:flex;justify-content:space-between;align-items:center;gap:12px;background:#ffffff09;border-top:1px solid #ffffff1a;min-height:55px}
.console-status{font-size:12px;color:#ddd}
.studio-replay{padding:2px 0;border:0;color:white;background:transparent;display:flex;align-items:center;gap:7px;font-size:12px;text-decoration:underline;text-underline-offset:4px}
.studio-replay svg{width:17px;height:17px}
.studio-replay:hover{color:#ff8ba2}
.studio-cards{position:relative;display:grid;grid-template-columns:.85fr 1.15fr;gap:19px;padding:0 15px;margin-top:25px;z-index:3;align-items:start}
.studio-source-card,.studio-result-card{background:white;border-radius:12px;box-shadow:0 15px 34px -14px #15151535;padding:18px 18px 14px;position:relative;min-width:0;transform-origin:50% 0}
.studio-source-card{transform:rotate(-3deg)}
.studio-result-card{transform:rotate(3deg);margin-top:12px}
.studio-card-label{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:7px;margin-bottom:12px}
.studio-card-label svg{height:16px;width:16px;color:var(--accent)}
.studio-source-card ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.studio-source-card li{display:flex;align-items:center;gap:7px;font-size:12px;line-height:1.3;overflow-wrap:anywhere}
.source-file-mark{width:11px;height:14px;border:1px solid var(--line);background:var(--surface);flex-shrink:0}
.source-connector{height:27px;position:absolute;width:1px;background:var(--line);left:50%;bottom:100%;z-index:-1}
.source-connector span{position:absolute;left:-2px;top:50%;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.source-connector span:nth-child(2),.source-connector span:nth-child(3){display:none}
.studio-result-card>strong{font:400 15px/1.3 var(--display);display:block;margin-bottom:10px}
.studio-result-card dl{margin:0;font-size:11px}
.studio-result-card dl>div{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding:5px 0}
.studio-result-card dd{margin:0;text-align:right;color:var(--muted)}
.studio-result-card p{font-size:10px;line-height:1.5;margin:8px 0 0;color:var(--muted)}
.workflow-studio .studio-disclosure{font-size:11px;line-height:1.6;color:var(--muted);margin:28px 15px 0;max-width:none;text-align:center}
.workflow-studio.is-running .studio-result-card{opacity:.7}
.workflow-studio.is-in-view:not(.is-still) .studio-source-card{animation:source-float 7s ease-in-out infinite}
.workflow-studio.is-in-view:not(.is-still) .studio-result-card{animation:result-float 8s ease-in-out infinite}
.workflow-studio.is-running.is-in-view:not(.is-still) .console-cursor{animation:console-caret 1s steps(2,end) infinite}
@keyframes source-float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-7px) rotate(-1deg)}}
@keyframes result-float{0%,100%{transform:translateY(0) rotate(3deg)}50%{transform:translateY(8px) rotate(1deg)}}
@keyframes console-caret{50%{opacity:1}}
.service-list article{position:relative;padding-right:120px;min-height:158px}
.service-symbol{position:absolute;right:3px;bottom:25px;width:100px;height:70px;color:var(--accent);pointer-events:none}
.service-list h3 a span{position:absolute;right:0;top:29px;font-size:19px}
.service-revision .service-example{display:block;padding-bottom:75px}
.service-example-intro{display:grid;grid-template-columns:1.25fr .75fr;gap:75px;align-items:end}
.service-example-intro h2{max-width:22ch;margin:0}
.service-example-intro p{max-width:40ch}
.service-example-intro .illustration-note{margin:12px 0 0}
.foundation-explorer{margin-top:38px}
.foundation-hint{font-size:13px;color:var(--muted);margin:0 0 15px}
.foundation-grid{display:grid;grid-template-columns:.78fr 1.35fr 1fr;gap:25px;align-items:center}
.foundation-controls{display:grid;gap:3px}
.foundation-controls button{padding:18px 14px 18px 0;display:flex;align-items:center;gap:11px;text-align:left;background:none;border:0;border-bottom:1px solid #d8d8d8;color:var(--muted);font-size:15px;transition:color .2s}
.foundation-controls button[aria-pressed=true]{color:var(--ink);font-weight:600}
.layer-dot{width:6px;height:6px;flex:0 0 6px;background:var(--line);border-radius:50%}
.foundation-controls button[aria-pressed=true] .layer-dot{background:var(--accent)}
.layer-arrow{margin-left:auto;opacity:0;color:var(--accent);display:flex}
.layer-arrow svg{height:20px;width:20px}
.foundation-controls button[aria-pressed=true] .layer-arrow{opacity:1}
.foundation-controls button:hover{color:var(--accent)}
.foundation-stack{height:435px;position:relative;max-width:420px;width:100%;margin:auto;isolation:isolate;container-type:inline-size;--plate-origin:35px;--plate-gap:66px}
/* The SVG can overlap, but its button occupies only the exposed lower strip. */
.foundation-layer{position:absolute;top:calc(var(--plate-origin) + var(--layer)*var(--plate-gap) + 100cqw*178/360 - 58px);left:0;z-index:calc(5 - var(--layer));width:100%;height:58px;padding:0;background:none;border:0;transform:translate(0,var(--lift));transition:transform .6s cubic-bezier(.16,1,.3,1),filter .6s;filter:drop-shadow(0 12px 10px #15151519)}
.foundation-layer:disabled{cursor:default}
.foundation-layer:not(:disabled):hover{transform:translate(7px,calc(var(--lift) - 5px))}
.foundation-layer.is-selected{filter:drop-shadow(0 14px 12px #1515152b);transform:translate(12px,var(--lift))}
.foundation-layer:focus-visible{outline:none;filter:drop-shadow(0 2px 2px var(--accent))}
.foundation-layer:focus-visible .plate-top{stroke:var(--accent);stroke-width:3}
.foundation-plate{position:absolute;bottom:0;display:block;width:100%;height:auto;pointer-events:none}
.plate-side{fill:#d6d2d1;transition:fill .4s}
.plate-top{fill:#e9e6e5;stroke:#cbc5c3;stroke-width:1;transition:fill .4s,stroke .4s}
.plate-seam{stroke:#b9b4b1;stroke-width:1;opacity:.5}
.plate-symbols{stroke:#98918d;transition:stroke .4s}
.plate-symbols rect{fill:#ffffff42}
.is-selected .plate-top{fill:#fff;stroke:#e5c0c6}
.is-selected .plate-side{fill:var(--accent)}
.is-selected .plate-seam{stroke:#890019}
.is-selected .plate-symbols{stroke:var(--accent)}
.foundation-ground{position:absolute;width:82%;height:85px;left:9%;bottom:0;border:1px solid var(--line);border-radius:50%;transform:rotate(-3deg)}
.foundation-ground span{position:absolute;left:50%;top:50%;height:3px;width:3px;border-radius:50%;background:#b8b2b0}
.foundation-ground span:nth-child(2){left:20%;top:35%}.foundation-ground span:nth-child(3){left:80%;top:65%}
.foundation-panel{margin:0;padding:25px 0}
.foundation-panel h3{font-size:27px;margin:0 0 18px}
.foundation-panel>p{font-size:16px;line-height:1.65}
.foundation-panel .foundation-detail{font-size:14px;color:var(--muted)}
.foundation-panel ul{list-style:none;padding:0;margin:22px 0 0;display:flex;gap:6px 15px;flex-wrap:wrap;font-size:11px;color:var(--muted)}
.foundation-panel li{border-bottom:1px solid #d0c9c7;padding-bottom:4px}
.foundation-explorer.is-enhanced .foundation-panels{min-height:310px;display:flex;align-items:center}
.foundation-explorer:not(.is-enhanced) .foundation-grid{grid-template-columns:.9fr 1.1fr}
.foundation-explorer:not(.is-enhanced) .foundation-panel{border-bottom:1px solid var(--line)}
.service-example-footer{margin:10px 0 0;text-align:right}
.service-example-footer .text-link{font-size:14px}
body.motion-paused .workflow-studio *,body.motion-paused .foundation-layer{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.workflow-studio *,.foundation-layer,.foundation-plate *{animation:none!important;transition:none!important}}
@media(max-width:1200px){.service-revision .service-hero .hero-stage{gap:36px}.service-revision .service-hero h1{font-size:49px}.studio-cards{padding:0;gap:12px}.studio-source-card,.studio-result-card{padding:14px}.console-command{padding-inline:21px}.console-steps{padding-inline:21px;font-size:12px}.foundation-grid{grid-template-columns:.8fr 1.1fr 1fr;gap:20px}.foundation-controls button{font-size:14px}.foundation-stack{height:380px}.foundation-stack{--plate-gap:58px}.service-list article{padding-right:100px}.service-symbol{width:82px}}
@media(max-width:1000px){.service-revision .service-hero .hero-stage{grid-template-columns:1fr;gap:52px;padding-top:45px}.service-revision .service-hero .hero-copy{text-align:center;max-width:760px;margin:auto}.service-revision .service-hero h1{max-width:22ch;margin-inline:auto;font-size:clamp(42px,6vw,58px)}.service-revision .service-hero .hero-description{margin:auto;max-width:60ch}.service-revision .service-hero .hero-actions{justify-content:center}.workflow-studio{max-width:620px;width:100%;margin:auto}.workflow-studio>figcaption{text-align:center}.studio-cards{padding-inline:25px;gap:25px}.foundation-grid{grid-template-columns:1fr 1.1fr}.foundation-controls{grid-column:1 / -1;grid-template-columns:repeat(4,1fr);gap:12px}.foundation-controls button{padding:15px 0;gap:7px;font-size:12px}.layer-arrow{display:none}.foundation-stack{max-width:360px;height:405px}.foundation-stack{--plate-gap:62px}.service-example-intro{grid-template-columns:1fr;gap:24px}.service-example-intro>div{display:flex;justify-content:space-between;gap:30px;align-items:start}.service-example-intro .illustration-note{margin:0}.foundation-explorer.is-enhanced .foundation-panels{min-height:280px}.service-list article{padding-right:0;padding-bottom:90px}.service-symbol{right:auto;left:0;bottom:15px;width:90px}.service-list h3{padding-right:23px}.service-example-footer{text-align:left}}
@media(max-width:640px){.service-revision .service-hero .hero-stage{gap:40px;padding-top:42px;padding-bottom:40px}.service-revision .service-hero h1{font-size:41px;letter-spacing:-.03em}.service-revision .service-hero .hero-description{font-size:16px}.service-revision .service-hero .hero-actions .button{padding-inline:20px}.workflow-studio>figcaption{font-size:19px;margin-bottom:17px}.console-chrome{padding:15px 16px;font-size:10px}.studio-choices{padding:12px 10px 0;gap:3px;justify-content:space-between}.studio-choices button{font-size:10px;padding:8px}.console-command{padding:20px 17px 15px;gap:8px}.console-command code{font-size:11px}.console-steps{padding:4px 16px 20px;gap:15px}.console-steps li{font-size:11px;gap:8px}.console-footer{padding:12px 15px}.console-status,.studio-replay{font-size:10px}.studio-cards{gap:10px;padding:0 1px;margin-top:23px;grid-template-columns:.86fr 1.14fr}.studio-source-card,.studio-result-card{padding:13px 11px}.studio-card-label{font-size:9px;gap:5px}.studio-card-label svg{width:13px;height:13px}.studio-source-card li{font-size:10px;gap:5px}.studio-result-card>strong{font-size:12px}.studio-result-card dl{font-size:9px}.studio-result-card dl>div{gap:5px}.studio-result-card p{font-size:9px}.workflow-studio .studio-disclosure{font-size:10px;margin-top:25px}.service-list article{padding-right:80px;padding-bottom:25px;min-height:145px}.service-symbol{left:auto;right:0;bottom:27px;width:65px}.service-list h3{padding-right:0}.service-list h3 a span{top:22px;font-size:17px}.service-example-intro>div{display:block}.service-example-intro .illustration-note{margin-top:12px}.foundation-controls{grid-template-columns:1fr 1fr;gap:0 16px}.foundation-controls button{font-size:12px;min-height:49px}.foundation-grid{grid-template-columns:1fr;gap:0}.foundation-stack{height:385px;max-width:340px}.foundation-stack{--plate-origin:28px;--plate-gap:58px}.foundation-explorer.is-enhanced .foundation-panels{min-height:280px;align-items:start}.foundation-panel{padding-top:10px}.foundation-panel h3{font-size:27px}.foundation-explorer:not(.is-enhanced) .foundation-grid{grid-template-columns:1fr}.service-revision .service-example{padding-bottom:55px}.service-example-footer{margin-top:15px}}
