/* Edition 3: apps first, one shared device, continuous product stories. */
html{scroll-padding-top:0}
.app-stories,.product-build,.architecture-story,#referenzen{scroll-margin-top:0}
mavi-phone[class]{height:auto;aspect-ratio:1350/2760;border:0;border-radius:0;padding:0;background:none;box-shadow:none;overflow:visible;transform-style:flat;filter:drop-shadow(9px 20px 23px #0004)}
mavi-phone[class]:before,mavi-phone[class]:after{display:none}
mavi-phone:not(:defined){background:#242528;border-radius:14%/7%}
mavi-phone[class]:not(:defined):after{content:"";display:block;position:absolute;inset:0;z-index:3;background:url("../shared-devices/phone-silver-675.webp") center/100% 100% no-repeat;pointer-events:none}
mavi-phone:not(:defined)>.phone-nojs{position:absolute;inset:9% 5% 5%;width:90%;height:86%;object-fit:contain}
.hero h1{font-size:clamp(68px,7.6vw,122px);line-height:.98;letter-spacing:-.068em}
.hero-copy>p{max-width:410px;font-size:16px;line-height:1.7}
.app-hero{height:650px;perspective:1400px;overflow:visible;margin-right:-30px}
.hero-device-field{position:absolute;inset:0;perspective:1400px}
.hero-phone{position:absolute;will-change:transform;--phone-screen:#242528}
.hero-phone-front{width:min(48%,34svh,270px);left:44%;top:1%;transform:rotateY(-13deg) rotateZ(7deg);z-index:2}
.hero-phone-back{width:min(44%,30svh,240px);left:10%;top:13%;transform:rotateY(16deg) rotateZ(-10deg);--phone-screen:#101813;z-index:1}
.hero-project{bottom:1%;left:14%;gap:9px}
.hero-project>span:first-child{font-size:9px;letter-spacing:.12em;color:#9a9ea7}
.intro{padding-top:95px;padding-bottom:100px}
.app-stories{height:540svh}
.app-stage{min-height:740px}
.app-title h2{font-size:clamp(45px,5vw,78px);line-height:1.02}
.app-title p{line-height:1.7;color:#aeb1ba}
.app-phone{width:245px}
.app-composition{perspective:1400px}
.alynivo-phone{--phone-screen:#242528;z-index:3}
.immo-phone{--phone-screen:#101813}
.matcha-front,.matcha-back{--phone-screen:#efede2;--phone-status:#313c27}
.matcha-screen{border-radius:0;padding:0 14px;overflow:hidden}
.matcha-screen>span:first-child{font-size:21px;margin:2px 0 13px}
.matcha-screen h4{font-size:39px;margin:9px 0 12px}
.matcha-screen>img{width:calc(100% + 28px);margin-left:-14px;height:158px}
.matcha-screen>div:not(.matcha-tabbar){margin-top:10px}
.matcha-shop-button{margin-top:14px!important;padding:12px 10px!important;font-size:8px!important}
.matcha-tabbar{margin-top:16px!important;font-size:7px!important}
.ritual-screen>img{margin-top:16px;height:210px}
.ritual-screen h4{font-size:32px;margin-top:16px}
.case-product .case-picture{min-height:0;aspect-ratio:1.23;background:#dedee5}
.case-immo .case-picture{background:#d1dcd3}
.case-product .reference-app{width:33%;height:auto;left:55%;top:7%;transform:none}
.reference-word{left:7%;top:34%;font-size:clamp(30px,3.5vw,58px);letter-spacing:-.065em}
.reference-word span{font-size:12px;line-height:1.6;margin-top:20px;max-width:155px;letter-spacing:0}
.case-alynivo .reference-word{color:#353449}
.case-product .case-arrow{background:#ffffff7a}
.case-mobile{--phone-screen:#f4f4f3;--phone-status:#191a1c;right:7%;top:34%;width:23%}
.case-mobile i{display:none}
.case-heading>.mono{letter-spacing:.04em}
.case:nth-child(even){padding-top:45px}
.food-panel{background:#111214;color:#faf8f1}
.food-huge{color:#faf8f1}
.food-panel .panel-bottom i{border-color:#ffffff70}
.food-panel .panel-top>span,.food-panel .panel-bottom>span{color:#faf8f1}
.order-web,.order-web .browser-top{background:#111214;color:#faf8f1}
.order-web h3{color:#faf8f1}
.order-web .mini-cta{background:#faf8f1;color:#121315}
.phone{--phone-screen:#f2efdf;--phone-status:#181a16;width:252px}
.order-phone-screen{padding:0 13px;color:#181a16;font-size:12px}
.order-phone-screen>small{font:6px Plex,monospace;letter-spacing:.02em}
.order-phone-screen>h3{font:31px/.97 Anton,sans-serif;margin-top:10px;letter-spacing:-.02em}
.order-phone-screen>p{font-size:7px;color:#64645e;margin-top:6px}
.phone-brand{padding-top:5px!important}
.phone .doner-cutout{height:185px!important}
.phone-add{background:#161719;color:white}
.phone-nav{font-size:8px!important;margin-top:15px!important}
.order-brand{background:#111214;color:#faf8f1}
.order-submit{background:#191a1c;color:#faf8f1}
.receipt-brand>span,.pickup>span{background:#202422;color:white}

/* The building always lives inside a website before the camera moves in. */
.architecture-story{height:430svh;background:#eae9e4}
.architecture-heading h2{font-size:clamp(34px,3.5vw,56px)}
.architecture-heading p{font-size:12px}
.architecture-to-web{opacity:1;top:50%;left:48%;width:min(58vw,800px);transform-origin:50% 50%;will-change:transform;z-index:2}
.architecture-browser{aspect-ratio:1.65;border:8px solid #373b3d;background:#eae9e4;border-radius:14px;box-shadow:0 22px 45px #36393230}
.architecture-world{position:absolute;inset:0;z-index:0;transform:none!important;opacity:1!important}
.architecture-browser>img,.architecture-browser>strong,.architecture-browser-bottom{position:absolute;z-index:1}
.architecture-browser>img{inset:0}
.architecture-browser-nav{z-index:3}
.architecture-browser>strong{top:24%;font-size:clamp(32px,4.2vw,65px)}
.architecture-mobile{width:160px;top:28%;right:-13%;--phone-screen:#eeede4;--phone-status:#263024;opacity:0}
.architecture-mobile>div{padding:0 5px;border-radius:0}
.architecture-mobile b{font-size:12cqw;margin:2cqw 0 8cqw}
.architecture-mobile img{width:calc(100% + 10px);margin-left:-5px;height:80cqw;object-fit:cover}
.architecture-mobile h4{font-size:15cqw;margin:10cqw 0 6cqw}
.architecture-mobile span{font-size:4.7cqw}
.architecture-caption{z-index:4;bottom:82px}
.architecture-line{font-size:24px}
.architecture-heading{z-index:4}
.architecture-stage{isolation:isolate}

/* A product assembly: structure → working app → connected laptop → handover. */
.product-build{height:510svh;background:#dce1e8;color:#1c2431}
.build-stage{position:sticky;top:0;height:100svh;min-height:730px;overflow:clip;isolation:isolate}
.build-heading{position:absolute;top:48px;left:var(--pad,5vw);z-index:4}
.build-heading>p{font-size:12px;color:#626c7c;margin:0 0 20px}
.build-heading h2{font-weight:400;font-size:clamp(43px,4.6vw,74px);line-height:1.03;letter-spacing:-.06em}
.build-heading h2 em{font-family:Instrument,serif;font-weight:400}
.build-visual{position:absolute;inset:0 36% 0 0;perspective:1400px;transform-style:flat}
.build-grid{position:absolute;left:5%;right:0;top:18%;bottom:7%;background-image:linear-gradient(#53647b15 1px,transparent 1px),linear-gradient(90deg,#53647b15 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(ellipse,#000 0%,transparent 70%);transform:rotateX(60deg) rotateZ(-20deg);pointer-events:none}
.build-phone{position:absolute;width:235px;left:42%;top:25%;z-index:3;--phone-screen:#101813;will-change:transform}
.build-layer{position:absolute;width:230px;height:435px;border:1px solid #76869c75;border-radius:32px;top:28%;left:42%;background:#f5f7faaf;box-shadow:10px 20px 40px #44566b18;padding:30px 20px;z-index:2;backdrop-filter:blur(8px);will-change:transform,opacity}
.build-layer>span{font-size:8px;letter-spacing:.08em;display:block;margin-bottom:25px;color:#54657c}
.build-layer-data{transform:translate(-180px,40px) rotateY(-26deg) rotateZ(-8deg);z-index:0;background:#c6d1dfaa}
.build-layer-ui{transform:translate(-90px,20px) rotateY(-22deg) rotateZ(-4deg)}
.wire-heading{height:20px;width:70%;background:#b6c3d3;border-radius:4px;margin-bottom:30px}
.wire-row{height:8px;background:#b6c3d3;border-radius:3px;margin:10px 0}
.wire-row:nth-of-type(3){width:63%;margin-bottom:30px}
.wire-card{height:74px;border:1px solid #92a4bb;border-radius:12px;margin-top:13px}
.wire-button{height:33px;background:#8097b4;border-radius:9px;margin-top:24px}
.system-track{display:flex;flex-direction:column;align-items:center;padding-top:22px}
.system-track b{display:grid;place-items:center;border:1px solid #8c9fb8;border-radius:8px;height:44px;width:135px;font-size:12px;font-weight:400;background:#e7edf5}
.system-track i{height:46px;width:1px;background:#889cb9}
.build-laptop{position:absolute;width:600px;height:490px;left:-2%;top:28%;z-index:1;opacity:0;pointer-events:none}
.build-laptop canvas{display:block;width:100%;height:100%}
.build-laptop .device-fallback{inset:12% 5% 18%}
.build-laptop .device-fallback>img{width:100%;height:100%;object-fit:contain;border:9px solid #353a40;border-radius:12px}
.build-note{position:absolute;left:43%;top:78%;display:flex;align-items:center;gap:15px;padding:17px 24px;background:#f4f6f9;border:1px solid white;border-radius:14px;box-shadow:0 15px 40px #465f7825;z-index:5;opacity:0;white-space:nowrap}
.build-note-check{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:#ccdacf;color:#315438}
.build-note b{font-size:13px;font-weight:500}.build-note small{display:block;font-size:10px;color:#6d7784;margin-top:5px}
.build-copy{position:absolute;left:68%;right:5%;top:34%;min-height:300px;z-index:5}
.build-chapter{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .5s,transform .5s,visibility .5s;pointer-events:none}
.build-chapter.active{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.build-chapter>span{font-size:8px;letter-spacing:.09em;color:#53637b;display:block;margin-bottom:25px}
.build-chapter h3{font-size:clamp(24px,2.3vw,35px);line-height:1.12;letter-spacing:-.045em;font-weight:400}
.build-chapter p{font-size:13px;line-height:1.8;color:#536071;margin:22px 0 15px}
.build-chapter .inline-link{font-size:11px;gap:15px}
.build-links{display:flex;flex-direction:column;align-items:start}
.build-navigation{position:absolute;bottom:28px;left:5%;right:5%;display:flex;gap:35px;align-items:center;z-index:6}
.build-navigation button{font-size:11px;color:#52627a;background:transparent;padding:12px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.build-navigation button[aria-pressed=true]{color:#152437;border-color:#152437}
.build-progress{height:1px;background:#53647b30;flex:1;margin-left:30px}
.build-progress i{display:block;background:#53647b;height:1px;transform:scaleX(0);transform-origin:left}
.studio-note{display:grid;grid-template-columns:1.2fr 1fr;gap:12%;padding-top:110px;padding-bottom:110px;background:#f2f0e9;color:#20241f}
.studio-note h2{font-size:clamp(35px,4vw,62px);letter-spacing:-.06em;line-height:1.1;font-weight:400}
.studio-note h2 em{font-family:Instrument,serif}
.studio-note p{font-size:15px;line-height:1.8;color:#62645d;max-width:440px}
.studio-note .inline-link{font-size:12px;margin-top:24px}
.footer-directory{padding-bottom:65px}
.footer-bottom{border-top:1px solid #ffffff20}
.motion-off .product-build{height:auto}
.motion-off .build-stage{position:relative;height:auto;min-height:0;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;padding-top:65px;padding-bottom:65px;gap:45px}
.motion-off .build-heading{position:static;grid-column:1/-1}
.motion-off .build-visual{position:relative;inset:auto;min-height:620px;transform-style:flat}
.motion-off .build-phone{left:25%;top:80px;transform:none!important}
.motion-off .build-layer,.motion-off .build-laptop,.motion-off .build-note,.motion-off .build-navigation{display:none}
.motion-off .build-copy{position:static;min-height:0}
.motion-off .build-chapter{position:static;opacity:1;visibility:visible;transform:none;pointer-events:auto;margin:0 0 40px}
.motion-off .architecture-to-web{opacity:1!important;transform:translate(-50%,-50%)!important}
.motion-off .architecture-mobile{opacity:1!important}
@media(min-width:761px) and (max-width:1050px){
 .hero h1{font-size:8.2vw}.hero-copy>p{font-size:13px}.app-hero{height:560px;margin:0 -25px 0 -10px}.hero-phone-front{width:50%;left:43%;top:4%}.hero-phone-back{width:44%;left:8%;top:15%}.hero-project{bottom:3%;left:12%}
 .build-stage{min-height:760px}.build-heading h2{font-size:46px}.build-phone{width:205px;left:42%;top:34%}.build-layer{width:195px;height:360px;top:35%;left:42%;padding:22px 16px}.wire-card{height:55px}.build-copy{left:65%;right:4%;top:34%}.build-chapter p{font-size:12px}.build-chapter h3{font-size:26px}.build-layer-data{transform:translate(-115px,30px) rotateY(-26deg)}.build-layer-ui{transform:translate(-55px,15px) rotateY(-22deg)}.build-laptop{width:465px;height:380px;left:1%;top:36%}.build-note{left:38%;top:82%;scale:.85;transform-origin:left center}.build-navigation{gap:23px}
 .reference-word{font-size:30px}.reference-word span{font-size:10px;max-width:110px}.case-product .reference-app{top:9%;width:33%}
}
@media(max-width:760px){
 .hero h1{font-size:clamp(52px,14.5vw,85px);line-height:1.04}.hero h1 br{display:block}.hero-copy>p{font-size:14px;max-width:330px;margin:22px 0}.hero-actions{gap:23px}.hero-actions .text-button{max-width:none;white-space:nowrap}.app-hero{height:465px;margin:5px -15px 0}.hero-phone-front{width:47%;max-width:210px;left:44%;top:7%}.hero-phone-back{width:43%;max-width:193px;left:9%;top:16%}.hero-project{left:14%;bottom:1%}.hero-bottom{margin-top:4px}.hero-bottom>a:nth-child(2){display:none}
 .intro{padding-top:65px;padding-bottom:65px}.intro h2{font-size:30px}
 .app-title h2{font-size:34px}.app-stage{min-height:800px}.app-stories{height:510svh}.app-phone{width:245px}.app-composition{height:390px;min-height:390px}.chat-window{width:230px;scale:.65}.alynivo-phone{left:48%}
 .case:nth-child(even){padding-top:0}.case-product .case-picture{aspect-ratio:1.14;min-height:0}.case-product .reference-app{width:35%;top:7%;left:54%}.reference-word{font-size:36px;top:34%}.reference-word span{font-size:10px;max-width:115px}.case-mobile{width:24%}
 .architecture-story{height:340svh}.architecture-stage{min-height:680px}.architecture-heading{top:32px}.architecture-heading h2{font-size:34px}.architecture-heading p{margin-top:14px}.architecture-to-web{width:83%;top:51%;left:46%}.architecture-browser{border-width:5px;aspect-ratio:1.4;border-radius:9px}.architecture-world{inset:0}.architecture-browser>strong{font-size:29px}.architecture-mobile{width:105px;top:37%;right:-9%}.architecture-line{font-size:22px;max-width:300px}.architecture-caption{bottom:92px}.architecture-controls{gap:21px}.architecture-controls button{font-size:9px}
 .product-build{height:470svh}.build-stage{min-height:820px}.build-heading{top:30px;left:24px;right:24px}.build-heading>p{font-size:10px;margin-bottom:13px}.build-heading h2{font-size:37px}.build-visual{inset:160px 0 auto;height:400px;perspective:1100px}.build-phone{width:177px;left:43%;top:10px}.build-layer{width:167px;height:313px;top:22px;left:43%;padding:22px 15px;border-radius:26px}.build-layer>span{font-size:6px;margin-bottom:20px}.build-layer-data{transform:translate(-114px,20px) rotateY(-25deg) rotateZ(-8deg)}.build-layer-ui{transform:translate(-58px,10px) rotateY(-22deg) rotateZ(-4deg)}.wire-heading{height:15px;margin-bottom:20px}.wire-row{height:6px;margin:8px 0}.wire-row:nth-of-type(3){margin-bottom:17px}.wire-card{height:48px;margin-top:10px}.wire-button{height:25px;margin-top:17px}.system-track{padding-top:20px}.system-track b{width:105px;height:36px;font-size:10px}.system-track i{height:33px}.build-laptop{width:330px;height:280px;top:45px;left:1%;}.build-note{left:37%;top:83%;padding:12px 15px;gap:10px;scale:.8;transform-origin:left center}.build-note b{font-size:12px}.build-note small{font-size:9px}.build-note-check{width:23px;height:23px}
 .build-copy{left:24px;right:24px;top:590px;min-height:170px}.build-chapter>span{font-size:7px;margin-bottom:11px}.build-chapter h3{font-size:25px;line-height:1.06}.build-chapter h3 br{display:none}.build-chapter p{font-size:11px;line-height:1.6;margin:12px 0 5px}.build-chapter .inline-link{font-size:10px;padding:7px 0}.build-links{flex-direction:row;gap:22px}.build-navigation{left:24px;right:24px;bottom:15px;gap:0;justify-content:space-between}.build-navigation button{font-size:9px}.build-progress{display:none}
 .studio-note{display:block;padding-top:65px;padding-bottom:65px}.studio-note h2{font-size:38px;margin-bottom:28px}.studio-note p{font-size:13px}.footer-directory{padding-bottom:45px}
 .motion-off .build-stage{display:block;padding-top:55px;padding-bottom:25px}.motion-off .build-visual{height:440px;min-height:440px;margin-top:20px}.motion-off .build-phone{width:190px;top:20px;left:calc(50% - 95px)}.motion-off .build-copy{position:static}.motion-off .build-chapter{margin-bottom:35px}.motion-off .build-chapter p{font-size:13px}.motion-off .build-heading h2{font-size:38px}
}
@media(max-width:760px) and (max-height:760px){.build-stage{min-height:760px}.build-visual{top:145px;scale:.86;transform-origin:top center}.build-copy{top:505px}.build-navigation{bottom:17px}.app-stage{min-height:710px}}
@media(prefers-reduced-motion:reduce){.build-chapter{transition:none}.hero-phone{will-change:auto}}