/* Large type and persistent objects; this layer never participates in the landing. */
.service-story .scene-copy{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0;padding:0}
.service-cinema{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.service-world{position:absolute;top:50%;left:50%;transform-origin:center}
.service-world .website-art,.service-world .automation-art{position:absolute;inset:0}
.service-world .website-art>div,.service-world .automation-art>div,.service-title{position:absolute;top:0;left:0;transform-origin:top left}
.service-title{color:var(--service-ui-ink,#262825);z-index:10;font-family:Oswald,Arial,sans-serif;font-weight:700;letter-spacing:-.035em;line-height:.9;text-align:center;will-change:transform,opacity}
.service-story .brand img,.service-story .brand-fill::before{filter:brightness(calc(1 - var(--logo-invert,0))) invert(var(--logo-invert,0))}
.service-story .header,.service-story .scene-footer,.service-story .stages{color:var(--service-ui-ink,#262825)}
.service-story .ending{background:var(--wash);padding-left:15px}
.service-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;stroke:var(--service-shape);stroke-width:2;stroke-linejoin:round;z-index:1}
.service-lines path{stroke-dasharray:1;stroke-dashoffset:0}
.web-page{background:var(--service-surface);border:1px solid #c9c9c3;box-shadow:0 18px 50px #25282412;overflow:hidden;will-change:transform;--detail:0;--focus:0}
.web-browser{height:8%;border-bottom:1px solid #dcdcd6;display:flex;align-items:center;gap:1%;padding:0 4%;background:#f3f3ef}
.web-browser i{width:1.2%;aspect-ratio:1;border-radius:50%;background:#b6b8b2}
.web-browser b{width:35%;height:18%;background:#e2e3dd;border-radius:3px;margin:auto}
.web-nav{position:absolute;left:7%;right:7%;top:13%;height:5%;display:flex;gap:5%;align-items:center}
.web-nav b{width:14%;height:100%;background:var(--service-deep);margin-right:auto}
.web-nav i{width:10%;height:24%;background:var(--service-muted)}
.web-home{position:absolute;inset:26% 7% 10%;display:flex;gap:7%}
.web-type{width:46%;position:relative;padding-top:4%}
.web-type i{display:block;width:100%;height:9%;margin-bottom:7%;background:var(--service-deep)}
.web-type i:nth-child(2){width:88%}.web-type i:nth-child(3){width:62%}
.web-type b{display:block;width:55%;height:16%;margin-top:18%;background:var(--service-accent)}
.web-hero{width:50%;height:100%;position:relative;overflow:hidden;background:var(--service-soft)}
.web-hero i{position:absolute;width:100%;aspect-ratio:1;border-radius:50%;left:15%;top:15%;background:var(--service-shape)}
.web-hero b{position:absolute;width:130%;height:35%;left:-15%;bottom:0;background:var(--service-mid);transform:rotate(-30deg)}
.web-page-0 .web-catalog,.web-page-0 .web-detail,.web-page-2 .web-catalog,.web-page-2 .web-detail,.web-page-3 .web-catalog,.web-page-3 .web-detail{display:none}
.web-page-1 .web-home{display:none}
.web-page-2 .web-home{flex-direction:row-reverse}.web-page-2 .web-hero{background:color-mix(in srgb,var(--service-soft) 80%,#d4d4cf)}.web-page-2 .web-hero i{border-radius:0;background:var(--service-shape);transform:rotate(30deg)}
.web-page-3 .web-home{gap:4%}.web-page-3 .web-hero{width:40%;background:var(--service-mid)}.web-page-3 .web-type{width:56%}
.web-catalog{position:absolute;inset:28% 7% 10%;opacity:calc(1 - var(--detail))}
.web-catalog-heading{height:20%;width:55%}.web-catalog-heading i{display:block;height:20%;background:var(--service-deep);margin-bottom:7%;width:100%}.web-catalog-heading i:last-child{width:65%}
.web-tiles{position:absolute;left:0;right:0;top:30%;bottom:0;display:flex;gap:5%}
.web-tiles>div{width:30%;position:relative;border:1px solid #e3e4de}
.web-tiles i{position:absolute;inset:0 0 35%;background:var(--service-soft);overflow:hidden}
.web-tiles i::before{content:'';position:absolute;width:70%;aspect-ratio:1;left:30%;top:15%;border-radius:50%;background:var(--service-shape)}
.web-tiles>div:nth-child(2) i{background:var(--service-soft)}.web-tiles>div:nth-child(2) i::before{border-radius:0;transform:rotate(30deg)}
.web-tiles>div:nth-child(3) i{background:color-mix(in srgb,var(--service-soft) 70%,#fff)}
.web-tiles b,.web-tiles span{position:absolute;left:10%;bottom:18%;width:70%;height:4%;background:var(--service-shape)}.web-tiles span{bottom:9%;width:40%;height:2%;background:var(--service-muted)}
.web-detail{position:absolute;inset:28% 7% 10%;opacity:var(--detail);display:flex;gap:8%}
.web-detail-image{width:48%;background:var(--service-soft);position:relative;overflow:hidden}
.web-detail-image i{position:absolute;inset:18% -10% -10% 28%;background:var(--service-shape);transform:rotate(30deg)}
.web-detail-copy{width:44%;padding-top:4%}.web-detail-copy i{display:block;width:100%;height:9%;margin-bottom:6%;background:var(--service-deep)}.web-detail-copy i:nth-child(2){width:77%}
.web-detail-copy span{display:block;width:90%;height:2%;margin-top:10%;background:var(--service-muted)}.web-detail-copy span+span{width:60%;margin-top:5%}
.web-detail-copy b{display:block;width:90%;height:18%;margin-top:17%;background:var(--service-accent)}
.web-focus{position:absolute;left:36%;top:44%;width:28%;height:45%;border:3px solid var(--service-ink);opacity:var(--focus);background:color-mix(in srgb,var(--service-accent) 8%,transparent)}
.web-cursor{z-index:8;filter:drop-shadow(0 3px 2px #0002)}.web-cursor svg{width:100%;height:100%;fill:var(--service-deep);stroke:var(--service-surface);stroke-width:1.5}
.auto-lines{stroke:var(--service-shape);stroke-width:2}
.auto-owner{background:var(--service-surface);border:1px solid #c9cac5;border-radius:50%;z-index:7;box-shadow:0 14px 35px #2528240a}
.auto-owner svg{width:100%;height:100%;fill:none;stroke:var(--service-ink);stroke-width:3}
.auto-assistant{background:var(--service-deep);border-radius:27%;z-index:5;box-shadow:0 18px 55px #2528242a}
.auto-assistant svg{width:100%;height:100%;fill:var(--service-light-ink);stroke:none}
.auto-message,.auto-reply,.auto-case{border:1px solid #c9cac5;background:var(--service-surface);box-shadow:0 12px 30px #25282410;z-index:4;overflow:hidden}
.auto-message,.auto-reply{border-radius:9px}
.auto-message b{position:absolute;left:7%;top:21%;width:11%;aspect-ratio:1;border-radius:50%;background:var(--service-accent)}
.auto-message i{position:absolute;left:25%;top:29%;width:63%;height:7%;background:var(--service-shape)}.auto-message i:last-child{top:54%;width:43%;height:5%;background:var(--service-muted)}
.auto-case{border-radius:12px;--prepared:0;z-index:5}
.case-original{position:absolute;inset:0;opacity:calc(1 - var(--prepared))}
.case-original i{position:absolute;left:9%;top:26%;width:13%;aspect-ratio:1;border-radius:50%;background:var(--service-accent)}.case-original i:nth-child(2){left:30%;top:30%;width:60%;height:7%;border-radius:0;background:var(--service-shape)}.case-original i:last-child{left:30%;top:53%;width:40%;height:5%;border-radius:0;background:var(--service-muted)}
.case-heading{position:absolute;inset:0;opacity:var(--prepared)}
.case-heading b{position:absolute;left:8%;top:8%;width:12%;aspect-ratio:1;background:var(--service-accent);border-radius:50%}
.case-heading i{position:absolute;left:25%;top:11%;width:42%;height:3%;background:var(--service-ink)}.case-heading i+i{top:18%;width:25%;height:2%;background:var(--service-muted)}
.case-heading span{position:absolute;right:8%;top:9%;width:10%;aspect-ratio:1;color:var(--service-shape)}
.auto-reply{z-index:6;background:color-mix(in srgb,var(--service-surface) 85%,var(--service-soft))}
.auto-reply b{position:absolute;left:6%;top:20%;height:60%;aspect-ratio:1;background:var(--service-mid);border-radius:50%;color:var(--service-ink)}
.auto-reply i{position:absolute;left:30%;top:30%;width:60%;height:8%;background:var(--service-shape)}.auto-reply i:last-of-type{top:57%;width:38%;height:5%;background:var(--service-muted)}
.auto-reply svg,.case-heading svg,.auto-delivered svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.auto-delivered{border-radius:50%;background:var(--service-deep);color:var(--service-light-ink);z-index:8}
@media(prefers-reduced-motion:reduce){.service-title,.web-page{will-change:auto}}
@media(max-width:700px){.service-story .ending{padding-left:0}.service-mobile .service-lines{stroke-width:1.4}.service-mobile .web-page{box-shadow:0 12px 30px #25282412}.service-mobile .web-focus{border-width:2px}.service-mobile .auto-message,.service-mobile .auto-reply{border-radius:5px}}

/* Trial background belongs only to the website story. Lines echo the menu dividers. */
.service-world .website-art>.web-grid{top:-120px;left:-120px;width:calc(100% + 240px);height:calc(100% + 240px);z-index:0;transform-origin:center;pointer-events:none;background-image:linear-gradient(color-mix(in srgb,var(--service-ink) 6%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--service-ink) 6%,transparent) 1px,transparent 1px),linear-gradient(color-mix(in srgb,var(--service-ink) 8%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--service-ink) 8%,transparent) 1px,transparent 1px);background-size:64px 64px,64px 64px,256px 256px,256px 256px;mask-image:radial-gradient(ellipse 62% 62% at 50% 54%,#000 30%,transparent 88%)}
.service-mobile .website-art>.web-grid{background-size:32px 32px,32px 32px,128px 128px,128px 128px;mask-image:radial-gradient(ellipse 67% 62% at 50% 54%,#000 25%,transparent 88%)}
/* Keep the native scroll hint readable over the initial oversized page. */
.service-story .scene-footer{z-index:12}
.service-story:has(.website-art:not([hidden])) .scene-footer::before{content:'';position:absolute;inset:-25px calc(-1 * var(--margin)) -30px;z-index:-1;background:linear-gradient(transparent,var(--wash) 62%);opacity:var(--website-footer-cover,0);pointer-events:none}

/* Scene accents affect type and controls as well as the illustration. */
.service-story .scroll-hint>span{color:inherit}
.service-story .stages button::before,.service-story .progress i{background:var(--service-ui-ink)}
.service-story .progress{background:color-mix(in srgb,var(--service-ui-ink) 12%,transparent)}
.service-story .ending button{color:var(--service-ui-ink)}
.service-story .ending .other{background:var(--service-ui-ink);color:var(--service-action-ink)}
.service-story button:focus-visible{outline-color:var(--service-ui-ink)}

/* The chosen catalog card grows into the product page; its neighbours step aside. */
.web-tiles{display:block}
.web-tiles>div{position:absolute;top:0;bottom:0;width:30%}
.web-tiles>div:nth-child(1){left:0}.web-tiles>div:nth-child(2){left:35%}.web-tiles>div:nth-child(3){left:70%}
.web-page-1{--cta:0}
.web-page-1 .web-catalog{opacity:1}
.web-page-1 .web-catalog-heading{opacity:calc(1 - var(--detail))}
.web-page-1 .web-tiles>div:nth-child(1){transform:translateX(calc(var(--detail) * -45%));opacity:calc(1 - var(--detail) * 1.6)}
.web-page-1 .web-tiles>div:nth-child(3){transform:translateX(calc(var(--detail) * 45%));opacity:calc(1 - var(--detail) * 1.6)}
.web-page-1 .web-tiles>div:nth-child(2){z-index:2;bottom:auto;left:calc(35% * (1 - var(--detail)));top:calc(-42.857% * var(--detail));width:calc(30% + 18% * var(--detail));height:calc(100% + 42.857% * var(--detail));border-color:color-mix(in srgb,#e3e4de calc((1 - var(--detail)) * 100%),transparent)}
.web-page-1 .web-tiles>div:nth-child(2) i{bottom:calc(35% * (1 - var(--detail)))}
.web-page-1 .web-tiles>div:nth-child(2) b,.web-page-1 .web-tiles>div:nth-child(2) span{opacity:calc(1 - var(--detail) * 2.5)}
.web-page-1 .web-detail-image{visibility:hidden}
.web-page-1 .web-detail-copy{transform:translateX(calc((1 - var(--detail)) * 22%))}
.web-page-1 .web-detail-copy b{background:color-mix(in srgb,var(--service-deep) calc(var(--cta) * 100%),var(--service-accent))}
.web-cursor{--ripple:0;--ripple-on:0;--press:0}
.web-cursor svg{position:relative;transform:scale(calc(1 - .16 * var(--press)));transform-origin:9% 5%}
.cursor-ripple{position:absolute;left:-101%;top:-72%;width:220%;aspect-ratio:1;border-radius:50%;border:3px solid var(--service-ink);opacity:calc(var(--ripple-on) * (1 - var(--ripple)));transform:scale(calc(.15 + var(--ripple) * 1.1))}
.service-mobile .cursor-ripple{border-width:2px}

/* Automation: a ringing owner, a helper that types, and a delivery that lands. */
.auto-assistant{z-index:6}
.auto-assistant svg path{transform-origin:50% 50%;animation:assistant-breathe 2.6s ease-in-out infinite}
.auto-owner{--ringing:0}
.auto-owner::before,.auto-owner::after{content:'';position:absolute;inset:-1px;border-radius:50%;border:2px solid var(--service-shape);opacity:0;animation:owner-ring 1.8s cubic-bezier(.2,.6,.3,1) infinite;pointer-events:none}
.auto-owner::after{animation-delay:.9s}
.auto-reply{--typed:0}
.auto-reply b{opacity:var(--typed);transform:scale(calc(.6 + .4 * var(--typed)))}
.auto-reply i{transform:scaleX(var(--typed));transform-origin:left center}
.auto-typing{position:absolute;left:30%;top:30%;width:26%;height:40%;display:flex;align-items:center;gap:12%;opacity:calc(1 - var(--typed) * 1.6)}
.auto-typing span{width:16%;aspect-ratio:1;border-radius:50%;background:var(--service-shape);animation:typing-dot 1.1s ease-in-out infinite}
.auto-typing span:nth-child(2){animation-delay:.15s}.auto-typing span:nth-child(3){animation-delay:.3s}
@keyframes owner-ring{0%{opacity:calc(.75 * var(--ringing));transform:scale(1)}100%{opacity:0;transform:scale(1.75)}}
@keyframes typing-dot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-45%);opacity:1}}
@keyframes assistant-breathe{0%,100%{transform:scale(1) rotate(0deg)}50%{transform:scale(1.08) rotate(8deg)}}