/* Short product demonstrations and one evolving process preview. */
.service-card{grid-template-columns:minmax(0,1fr) 238px;column-gap:26px;min-height:255px}
.service-card .num{grid-column:1}
.service-card h3,.service-card>p{grid-column:1}
.service-card .service-demo{grid-column:2;grid-row:1/5}
.service-row{grid-template-columns:70px minmax(0,1fr) 238px;gap:24px}
.service-row .service-demo{grid-column:3;grid-row:1;align-self:center}
.service-demo,.service-card .service-demo{display:block;position:relative;width:238px;height:164px;min-width:0;min-height:0;margin:0;padding:0;overflow:hidden;appearance:none;text-align:left;border:1px solid rgba(242,237,228,.19);border-radius:11px;background:#191a1e;color:#f2ede4;cursor:pointer;box-shadow:0 16px 35px rgba(0,0,0,.18);transform:none;transition:border-color 180ms var(--ease-out,cubic-bezier(.23,1,.32,1)),box-shadow 180ms var(--ease-out,cubic-bezier(.23,1,.32,1))}
.service-card:hover .service-demo,.service-row:hover .service-demo,.service-demo:focus-visible{border-color:rgba(217,154,104,.7);background:#191a1e;transform:none!important;box-shadow:0 18px 38px rgba(0,0,0,.24)}
.service-demo:focus-visible{outline:2px solid var(--accent-2,var(--accent,#d99a68));outline-offset:4px}
.demo-chrome{position:absolute;inset:0 0 auto;height:28px;display:flex;align-items:center;gap:11px;padding:0 12px;border-bottom:1px solid rgba(242,237,228,.12);color:#a8a39e;font:500 9px/1 var(--f-mono,JBMono,monospace);letter-spacing:.03em}
.demo-dots,.pv-dots{display:flex;gap:4px}
.demo-dots i,.pv-dots i{display:block;width:4px;height:4px;border-radius:50%;background:#716d6a}
.demo-canvas{position:absolute;inset:28px 0 17px;overflow:hidden}
.demo-corner{position:absolute;right:9px;bottom:4px;color:#b5aaa0;font:500 9px/1 var(--f-mono,JBMono,monospace);letter-spacing:.05em}
.demo-site-nav{position:absolute;top:12px;left:14px;right:14px;display:flex;align-items:center;gap:6px;opacity:.62}
.demo-site-nav b{margin-right:auto;color:#f2ede4;font:700 9px/1 Archivo,sans-serif;letter-spacing:-.04em}
.demo-site-nav i{width:18px;height:2px;border-radius:1px;background:#918d89}
.demo-site-title{position:absolute;top:37px;left:14px;max-width:120px;color:#f2ede4;font:500 16px/1.1 Fraunces,Georgia,serif;opacity:.62}
.demo-site-copy{position:absolute;top:62px;left:14px;width:95px;height:13px;background:linear-gradient(#8c8b8b 0 2px,transparent 2px 6px,#8c8b8b 6px 8px,transparent 8px 12px,#8c8b8b 12px);opacity:.5}
.demo-site-photo{position:absolute;top:38px;right:13px;width:84px;height:62px;border-radius:4px;background:linear-gradient(142deg,#72533f,#b6815d 54%,#d2ae86);opacity:.65;transform:translateY(7px)}
.demo-site-photo::after{content:"";position:absolute;left:13px;bottom:0;width:38px;height:48px;border-radius:26px 26px 0 0;background:rgba(36,35,37,.35)}
.demo-site-cta{position:absolute;left:14px;bottom:11px;min-width:62px;padding:5px 8px;border-radius:5px;background:#d99a68;color:#17171a;font:600 8px/1 Archivo,sans-serif;text-align:center;opacity:.58;transform:translateY(6px)}
.demo-shop-photo{position:absolute;left:14px;top:12px;width:87px;height:84px;border-radius:5px;background:linear-gradient(140deg,#a68066,#d4b297 60%,#866a58);opacity:.5}
.demo-shop-photo::before{content:"";position:absolute;left:27px;top:14px;width:34px;height:57px;border-radius:16px 16px 5px 5px;background:rgba(44,38,39,.64)}
.demo-shop-name{position:absolute;top:16px;left:111px;font:500 13px/1.1 Fraunces,Georgia,serif}
.demo-shop-price{position:absolute;top:37px;left:111px;color:#d2b597;font:600 10px/1 var(--f-mono,JBMono,monospace)}
.demo-shop-cta{position:absolute;top:66px;left:111px;padding:8px 10px;border-radius:6px;background:#3c3a3b;color:#f2ede4;font:600 8px/1 Archivo,sans-serif;white-space:nowrap}
.demo-shop-count{position:absolute;top:10px;right:11px;width:18px;height:18px;border:1px solid #b68a6f;border-radius:50%;color:#e5c4a7;font:600 9px/17px var(--f-mono,JBMono,monospace);text-align:center}
.demo-shop-count i,.demo-shop-count b{position:absolute;inset:0;font-style:normal;font-weight:600}
.demo-shop-count b{opacity:0;transform:translateY(5px)}
.demo-shop-confirm{position:absolute;left:14px;bottom:3px;color:#c8bfad;font:500 9px/1 Archivo,sans-serif;opacity:0;transform:translateY(7px)}
.demo-app-rail{position:absolute;left:12px;top:10px;bottom:8px;width:30px;border-right:1px solid #464348;display:flex;flex-direction:column;gap:8px;padding-top:10px}
.demo-app-rail i{width:14px;height:14px;border-radius:4px;background:#575157}
.demo-app-rail i:nth-child(2){background:#bd8d6b}
.demo-app-card{position:absolute;left:54px;right:14px;top:15px;height:55px;padding:10px;border:1px solid #72675f;border-radius:6px;background:#272529;transform:translateY(5px);opacity:.58}
.demo-app-card b{display:block;font:600 10px/1 Archivo,sans-serif}
.demo-app-card i{display:block;width:74%;height:2px;margin-top:8px;background:#8e8986}
.demo-app-card i:last-child{width:50%;margin-top:5px;opacity:.6}
.demo-app-status{position:absolute;left:54px;bottom:9px;min-width:82px;height:21px;border-radius:5px;background:#3b3739;color:#e2d4c6;text-align:center;font:600 9px/21px Archivo,sans-serif}
.demo-app-status span{position:absolute;inset:0}
.demo-app-done{opacity:0;transform:translateY(5px)}
.demo-app-path{position:absolute;right:22px;bottom:18px;width:53px;height:1px;background:#8d7969;transform-origin:left;transform:scaleX(.2)}
.demo-art-grid{position:absolute;inset:8px 14px 6px;background-image:linear-gradient(90deg,rgba(242,237,228,.06) 1px,transparent 1px),linear-gradient(rgba(242,237,228,.06) 1px,transparent 1px);background-size:21px 21px}
.demo-art-type{position:absolute;left:22px;top:12px;font:italic 500 58px/1 Fraunces,Georgia,serif;letter-spacing:-.08em;opacity:.66;transform:translateY(8px)}
.demo-art-rule{position:absolute;left:113px;top:57px;width:79px;height:1px;background:#d99a68;transform-origin:left;transform:scaleX(.12)}
.demo-art-swatches{position:absolute;right:17px;top:17px;display:flex;gap:5px}
.demo-art-swatches i{width:12px;height:12px;border-radius:50%;background:#b98361;opacity:.66;transform:translateY(7px)}
.demo-art-swatches i:nth-child(2){background:#f2ede4}.demo-art-swatches i:nth-child(3){background:#8e9696}
.demo-art-label{position:absolute;left:115px;top:70px;color:#d4c7ba;font:600 9px/1 Archivo,sans-serif;letter-spacing:.08em;opacity:.55}
@keyframes demo-arrive{from{opacity:.28;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@keyframes demo-photo{from{opacity:.65;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes demo-show{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes demo-swap-out{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-5px)}}
@keyframes demo-swap-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@keyframes demo-rule{from{transform:scaleX(.12)}to{transform:scaleX(1)}}
.service-demo.is-playing *,.service-demo.is-playing *::before,.service-demo.is-playing *::after{animation-play-state:running!important}
.service-demo.is-playing .demo-site-nav{animation:demo-arrive 360ms var(--ease-out,cubic-bezier(.23,1,.32,1)) 60ms both}
.service-demo.is-playing .demo-site-title{animation:demo-arrive 440ms var(--ease-out,cubic-bezier(.23,1,.32,1)) 220ms both}
.service-demo.is-playing .demo-site-copy{animation:demo-arrive 440ms var(--ease-out,cubic-bezier(.23,1,.32,1)) 340ms both}
.service-demo.is-playing .demo-site-photo{animation:demo-photo 560ms var(--ease-out,cubic-bezier(.23,1,.32,1)) 390ms both}
.service-demo.is-playing .demo-site-cta{animation:demo-arrive 430ms var(--ease-out,cubic-bezier(.23,1,.32,1)) 730ms both}
.service-demo.is-playing .demo-shop-photo{animation:demo-photo 480ms var(--ease-out,cubic-bezier(.23,1,.32,1)) 70ms both}
.service-demo.is-playing .demo-shop-cta{animation:demo-arrive 380ms var(--ease-out,cubic-bezier(.23,1,.32,1)) 280ms both}
.service-demo.is-playing .demo-shop-cta{background:#d99a68;color:#17171a;transition:background-color 170ms ease 820ms,color 170ms ease 820ms}
.service-demo.is-playing .demo-shop-count i,.service-demo.is-playing .demo-app-pending{animation:demo-swap-out 220ms ease 870ms both}
.service-demo.is-playing .demo-shop-count b,.service-demo.is-playing .demo-app-done{animation:demo-swap-in 290ms var(--ease-out,cubic-bezier(.23,1,.32,1)) 930ms both}
.service-demo.is-playing .demo-shop-confirm{animation:demo-show 350ms var(--ease-out,cubic-bezier(.23,1,.32,1)) 1040ms both}
.service-demo.is-playing .demo-app-card{animation:demo-arrive 500ms var(--ease-out,cubic-bezier(.23,1,.32,1)) 90ms both}
.service-demo.is-playing .demo-app-path,.service-demo.is-playing .demo-art-rule{animation:demo-rule 500ms var(--ease-out,cubic-bezier(.23,1,.32,1)) 500ms both}
.service-demo.is-playing .demo-app-status{background:#5c503e;transition:background-color 220ms ease 910ms}
.service-demo.is-playing .demo-art-type{animation:demo-arrive 510ms var(--ease-out,cubic-bezier(.23,1,.32,1)) 100ms both}
.service-demo.is-playing .demo-art-swatches i{animation:demo-arrive 350ms var(--ease-out,cubic-bezier(.23,1,.32,1)) both}
.service-demo.is-playing .demo-art-swatches i:nth-child(1){animation-delay:400ms}.service-demo.is-playing .demo-art-swatches i:nth-child(2){animation-delay:470ms}.service-demo.is-playing .demo-art-swatches i:nth-child(3){animation-delay:540ms}
.service-demo.is-playing .demo-art-label{animation:demo-show 420ms var(--ease-out,cubic-bezier(.23,1,.32,1)) 700ms both}
.service-demo.is-complete .demo-site-nav,.service-demo.is-complete .demo-site-title,.service-demo.is-complete .demo-site-copy,.service-demo.is-complete .demo-site-photo,.service-demo.is-complete .demo-site-cta,.service-demo.is-complete .demo-shop-photo,.service-demo.is-complete .demo-app-card,.service-demo.is-complete .demo-art-type,.service-demo.is-complete .demo-art-swatches i,.service-demo.is-complete .demo-art-label{opacity:1;transform:none}
.service-demo.is-complete .demo-shop-count i,.service-demo.is-complete .demo-app-pending{opacity:0}.service-demo.is-complete .demo-shop-count b,.service-demo.is-complete .demo-app-done,.service-demo.is-complete .demo-shop-confirm{opacity:1;transform:none}
.service-demo.is-complete .demo-shop-cta{background:#d99a68;color:#17171a}.service-demo.is-complete .demo-app-path,.service-demo.is-complete .demo-art-rule{transform:scaleX(1)}.service-demo.is-complete .demo-app-status{background:#5c503e}
/* A single layout gains content, color, a phone view, and a ready state. */
.process-preview{position:relative;width:min(100%,420px);padding:15px;border:1px solid rgba(242,237,228,.2);border-radius:14px;background:#202025;box-shadow:0 25px 60px rgba(0,0,0,.22);color:#f2ede4}
.pv-meta,.pv-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;font:500 10px/1.3 var(--f-mono,JBMono,monospace);letter-spacing:.06em;color:#c4bdb3}
.pv-meta{margin-bottom:12px}.pv-counter{color:#d99a68;font-variant-numeric:tabular-nums}
.pv-window{position:relative;height:206px;overflow:hidden;border:1px solid #77716c;border-radius:8px;background:#17181c}
.pv-bar{height:25px;display:flex;align-items:center;gap:12px;padding:0 10px;border-bottom:1px solid #4a4646;color:#aaa39c;font:500 9px/1 var(--f-mono,JBMono,monospace)}
.pv-page{position:absolute;left:0;right:0;top:25px;bottom:0;padding:14px 17px;transform-origin:left top;transition:transform 550ms var(--ease-out,cubic-bezier(.23,1,.32,1)),background-color 400ms ease}
.pv-brand{font:700 10px/1 Archivo,sans-serif;letter-spacing:-.04em;opacity:.45}.pv-nav{position:absolute;right:17px;top:15px;display:flex;gap:7px}.pv-nav i{width:26px;height:2px;background:#88817a;opacity:.5}
.pv-title{position:absolute;left:17px;top:51px;padding:2px 0;font:500 26px/1 Fraunces,Georgia,serif;color:transparent;background:#504d4c;transition:color 450ms ease,background-color 450ms ease}
.pv-line{position:absolute;left:17px;height:4px;border-radius:3px;background:#6b6663;opacity:.55}.pv-line-one{top:90px;width:43%}.pv-line-two{top:103px;width:32%}
.pv-photo{position:absolute;right:17px;top:46px;width:34%;height:89px;border:1px dashed #776d65;border-radius:5px;background:transparent;transition:background 500ms ease,border-color 400ms ease,transform 550ms var(--ease-out,cubic-bezier(.23,1,.32,1))}
.pv-photo::after{content:"";position:absolute;left:21%;bottom:0;width:50%;height:68%;border-radius:45% 45% 0 0;background:transparent;transition:background-color 400ms ease}
.pv-action{position:absolute;left:17px;bottom:17px;padding:7px 10px;border:1px solid #746d68;border-radius:5px;color:transparent;background:#65605b;font:600 9px/1 Archivo,sans-serif;transition:color 400ms ease,background-color 400ms ease,border-color 400ms ease}
.pv-phone{position:absolute;right:12px;bottom:9px;width:83px;height:142px;padding:13px 8px;border:3px solid #d9d0c5;border-radius:14px;background:#1f2023;box-shadow:0 14px 28px rgba(0,0,0,.3);opacity:0;transform:translate3d(30px,18px,0) scale(.88);transition:opacity 400ms ease,transform 550ms var(--ease-out,cubic-bezier(.23,1,.32,1))}
.pv-phone-top{display:block;width:30px;height:3px;margin:0 auto 17px;border-radius:3px;background:#b8ada1}.pv-phone-title{display:block;width:49px;height:8px;border-radius:2px;background:#eee2d6}.pv-phone-photo{display:block;height:50px;margin-top:10px;border-radius:4px;background:linear-gradient(145deg,#805d48,#bf926d)}.pv-phone-line{display:block;width:43px;height:3px;margin-top:10px;border-radius:2px;background:#a49a90}
.pv-ready{position:absolute;right:24px;bottom:19px;display:flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid rgba(218,170,125,.65);border-radius:7px;background:#282623;color:#f2ede4;font:600 10px/1 Archivo,sans-serif;opacity:0;transform:translateY(10px);transition:opacity 350ms ease,transform 450ms var(--ease-out,cubic-bezier(.23,1,.32,1))}
.pv-ready-check{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#d99a68;color:#17171a;font:700 11px/1 Arial,sans-serif}
.pv-foot{margin-top:12px}.pv-caption{color:#f2ede4}.pv-foot-line{display:block;width:76px;height:2px;background:#59534f}.pv-foot-line i{display:block;width:100%;height:100%;background:#d99a68;transform-origin:left;transform:scaleX(.25);transition:transform 450ms var(--ease-out,cubic-bezier(.23,1,.32,1))}
.process-preview[data-stage="2"] .pv-title,.process-preview[data-stage="3"] .pv-title,.process-preview[data-stage="4"] .pv-title{color:#f2ede4;background:transparent}
.process-preview[data-stage="2"] .pv-page,.process-preview[data-stage="3"] .pv-page,.process-preview[data-stage="4"] .pv-page{background:#282525}
.process-preview[data-stage="2"] .pv-photo,.process-preview[data-stage="3"] .pv-photo,.process-preview[data-stage="4"] .pv-photo{border-color:transparent;background:linear-gradient(145deg,#805d48,#bf926d 58%,#d2ab85)}
.process-preview[data-stage="2"] .pv-photo::after,.process-preview[data-stage="3"] .pv-photo::after,.process-preview[data-stage="4"] .pv-photo::after{background:rgba(39,34,35,.38)}
.process-preview[data-stage="2"] .pv-action,.process-preview[data-stage="3"] .pv-action,.process-preview[data-stage="4"] .pv-action{color:#17171a;border-color:#d99a68;background:#d99a68}
.process-preview[data-stage="3"] .pv-page,.process-preview[data-stage="4"] .pv-page{transform:translate3d(-5px,10px,0) scale(.78)}
.process-preview[data-stage="3"] .pv-phone,.process-preview[data-stage="4"] .pv-phone{opacity:1;transform:translate3d(0,0,0) scale(1)}
.process-preview[data-stage="4"] .pv-ready{opacity:1;transform:translateY(0)}
.process-preview[data-stage="2"] .pv-foot-line i{transform:scaleX(.5)}.process-preview[data-stage="3"] .pv-foot-line i{transform:scaleX(.75)}.process-preview[data-stage="4"] .pv-foot-line i{transform:scaleX(1)}
.method .timeline{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.82fr);gap:clamp(48px,7vw,105px);align-items:start}
.method .timeline-track{position:absolute;left:4px;top:0;bottom:0;width:1px;height:auto}.method .timeline-track .fill{display:none}
.method .timeline-steps{grid-column:1;grid-row:1;display:grid;grid-template-columns:1fr;gap:0}
.method .timeline-step{min-height:155px;padding:0 0 45px 34px}.method .timeline-step p{max-width:45ch}.method .timeline-step:last-child{min-height:0;padding-bottom:0}
.method .timeline-step .node{left:0;top:6px}.method .timeline-step h3{margin-top:6px}
.method .timeline-step.is-current .node{background:#d99a68;box-shadow:0 0 0 5px rgba(217,154,104,.13)}
.method .process-preview{grid-column:2;grid-row:1;position:sticky;top:118px;align-self:start}
.process-grid{grid-template-rows:auto 1fr;align-items:start;row-gap:24px}
.process .section-heading{grid-column:1;grid-row:1;position:static}
.process .process-preview{grid-column:1;grid-row:2;position:sticky;top:114px;align-self:start;margin-top:30px}
.process .steps{grid-column:2;grid-row:1/3}
.process .steps li.is-current>span{color:#f2ede4}.process .steps li.is-current{border-bottom-color:rgba(217,154,104,.45)}
/* German pages get a distinct, restrained entrance and an honest card interaction. */
html[lang^="de"] .hero-art{--art-back-x:0px;--art-back-y:0px;--art-front-x:0px;--art-front-y:0px}
html[lang^="de"] .art-back{transform:translate3d(var(--art-back-x),var(--art-back-y),0) rotate(4deg)}
html[lang^="de"] .art-front{transform:translate3d(var(--art-front-x),var(--art-front-y),0) rotate(-5deg)}
html[lang^="de"] .art-frame{transition:transform 280ms var(--ease-out,cubic-bezier(.23,1,.32,1)),border-color 180ms ease,box-shadow 250ms ease}
html[lang^="de"] .art-frame:hover,html[lang^="de"] .art-frame:focus-visible{border-color:#d99a68;box-shadow:0 32px 68px rgba(0,0,0,.42)}
html[lang^="de"] .art-frame:focus-visible{outline:2px solid #d99a68;outline-offset:5px}
html[lang^="de"] .demo-card{overflow:hidden}
html[lang^="de"] .demo-card img{transition:transform 350ms var(--ease-out,cubic-bezier(.23,1,.32,1))}
html[lang^="de"] .demo-card:is(:hover,:focus-visible){border-color:#d99a68;transform:none}
html[lang^="de"] .demo-card:is(:hover,:focus-visible) img{transform:scale(1.025)}
html[lang^="de"] .demo-card:focus-visible{outline:2px solid #d99a68;outline-offset:5px}
@media(max-width:1200px){.service-card{grid-template-columns:1fr;min-height:0}.service-card .service-demo{grid-column:1;grid-row:auto;width:100%;height:152px;margin-top:8px}}
@media(max-width:1000px){.service-row{grid-template-columns:60px minmax(0,1fr)}.service-row .service-demo{grid-column:2;grid-row:auto;width:min(100%,300px);margin-top:8px}}
@media(max-width:860px){.method .timeline{grid-template-columns:1fr;gap:0}.method .process-preview{grid-column:1;grid-row:1;top:82px;z-index:2;width:min(100%,420px)}.method .timeline-steps{grid-column:1;grid-row:1;padding-top:286px}.method .timeline-track{top:286px}.method .timeline-step{min-height:158px}.process-grid{grid-template-columns:1fr;grid-template-rows:auto auto}.process .section-heading{grid-column:1;grid-row:1}.process .process-preview{grid-column:1;grid-row:2;top:82px;z-index:2;margin-top:0;width:min(100%,420px)}.process .steps{grid-column:1;grid-row:2;padding-top:286px}}
@media(max-width:600px){.service-card{grid-template-columns:1fr;gap:12px;padding-bottom:34px}.service-card .num,.service-card h3,.service-card>p,.service-card .service-demo{grid-column:1}.service-card .service-demo{grid-row:auto;width:100%;height:164px;max-width:350px;margin-top:7px}.service-row{grid-template-columns:34px minmax(0,1fr);gap:10px}.service-row .service-demo{grid-column:2;max-width:320px;height:154px}.process-preview{padding:11px}.pv-window{height:176px}.pv-page{padding:10px 13px}.pv-title{left:13px;font-size:22px}.pv-line,.pv-action{left:13px}.pv-photo{right:13px}.pv-phone{width:72px;height:124px}.method .timeline-steps,.process .steps{padding-top:267px}.method .timeline-track{top:267px}}
@media(hover:none),(pointer:coarse){html[lang^="de"] .art-back,html[lang^="de"] .art-front{transform:rotate(0)}html[lang^="de"] .demo-card img{transition:none}}
@media(prefers-reduced-motion:reduce){.service-demo,.service-demo *,.process-preview *,.art-frame,.demo-card img{animation:none!important;transition:none!important}.service-demo .demo-corner{opacity:1}.process-preview[data-stage="3"] .pv-page,.process-preview[data-stage="4"] .pv-page{transform:translate3d(-5px,10px,0) scale(.78)}}