/* Six small, interactive service studios. */
.services .serviceGrid{gap:20px;grid-template-columns:repeat(2,minmax(0,1fr))}
.serviceGrid .studioCard,.serviceGrid .studioCard:nth-child(n){--studio-offset:0s;position:relative;padding:20px 24px 18px;border:1px solid #79bd9a55;border-radius:24px;background:radial-gradient(ellipse at 45% 15%,#239b6b35,transparent 65%),linear-gradient(155deg,#075e43,#003e2e);box-shadow:inset 0 1px 0 #c7ffe510,0 15px 30px #00352210;isolation:isolate;transition:border-color .3s,box-shadow .3s,transform .3s}
.serviceGrid .studioCard:nth-child(2){background:radial-gradient(ellipse at 75% 10%,#54d89e26,transparent 62%),linear-gradient(140deg,#096b4c,#034634)}
.serviceGrid .studioCard:nth-child(3){background:radial-gradient(ellipse at 15% 20%,#72d9981f,transparent 65%),linear-gradient(140deg,#06513b,#004b36)}
.serviceGrid .studioCard:nth-child(4){background:radial-gradient(ellipse at 80% 30%,#27ad781f,transparent 65%),linear-gradient(140deg,#065e40,#003c2e)}
.serviceGrid .studioCard:nth-child(5){background:radial-gradient(ellipse at 50% 25%,#46e8a02e,transparent 65%),linear-gradient(150deg,#0a5b42,#00382a)}
.serviceGrid .studioCard:nth-child(6){background:radial-gradient(ellipse at 55% 45%,#7dc69824,transparent 65%),linear-gradient(155deg,#006b48,#00442f)}
.studioCard:before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(180px circle at var(--light-x,50%) var(--light-y,25%),#a9ffcd12,transparent 75%);pointer-events:none;z-index:-1}
.serviceGrid .studioCard:hover,.serviceGrid .studioCard:focus-within,.serviceGrid .studioCard.replaying{border-color:#c7f8da9c;box-shadow:inset 0 1px 0 #e0ffed29,0 18px 32px #003d2630}
.studioCardTop{display:flex;align-items:center;justify-content:space-between;width:100%;color:#b6dbc7;font-size:12px;letter-spacing:.06em;line-height:1;min-height:16px}
.studioCycle{display:flex;gap:4px;align-items:center}
.studioCycle i{display:block;width:16px;height:3px;border-radius:5px;background:#baf6d23b;animation:studioPhase 9s infinite;animation-delay:var(--studio-offset)}
.studioCycle i:nth-child(2){animation-delay:calc(var(--studio-offset) + 3s)}
.studioCycle i:nth-child(3){animation-delay:calc(var(--studio-offset) + 6s)}
.studioCard .servicePreview{display:block;flex:none;width:100%;max-width:320px;min-height:0;padding:0;margin:9px 0 0;background:transparent;border:0;border-radius:16px;color:inherit;cursor:pointer;box-shadow:none;transform:none;overflow:visible}
.servicePreview:focus-visible{outline:2px solid #d0ffe4;outline-offset:3px}
.studioCard .studioArt{position:relative;display:block;height:225px;width:100%;max-width:none;overflow:visible;background:none;isolation:isolate;border-radius:0;--rank-step:43px;--rank-top:75px;--rank-height:32px}
.studioArt *{animation-delay:var(--studio-offset)}
.studioCard .studioArt i{display:block}
.serviceGrid .studioCard h3,.serviceGrid .studioCard:nth-child(n) h3{font-size:28px;line-height:1.22;letter-spacing:-.65px;min-height:2.44em;margin:8px 0 18px;font-weight:650;color:#f2fff5;text-align:center;padding:0;max-width:100%}
.studioCard h3 a{color:inherit;text-decoration:none;display:inline-block;border-radius:3px}
.studioCard h3 a:focus-visible{outline:2px solid #c7ffe0;outline-offset:4px}
.studioCard .simpleExplore{position:relative;margin-top:auto;border-top:1px solid #a3d8b52c;padding-top:14px;font-size:14px;min-height:40px;color:#e3fbea;transition:color .2s}
.studioCard .simpleExplore:hover{color:white}
.studioReply{position:absolute;top:42px;inset-inline:12px;z-index:5;padding:10px 8px;color:#005c3d;background:#f1fff5;border:1px solid #b7f1cd;border-radius:12px;text-align:center;line-height:1.3;font-size:12px;font-weight:650;pointer-events:none;opacity:0;transform:translateY(-6px);transition:opacity .2s,transform .2s}
.studioCard.showingReply .studioReply{opacity:1;transform:none}
.studioCard.isPaused .studioArt *,.studioCard.isPaused .studioCycle i{animation-play-state:paused!important}
.studioCard.resetting .studioArt *{animation:none!important}
.studioCard.replaying{--studio-offset:0s!important}
/* Search: a useful answer climbs to the first result. */
.studioSearch{position:absolute;top:25px;left:9%;width:82%;height:32px;border:1px solid #9bd6b5;border-radius:14px;display:flex;align-items:center;gap:10px;padding:0 12px;color:#d8f8e5;font-size:23px;background:#0b6a4b}
.studioSearch>i{width:55%;height:4px;border-radius:4px;background:#c4eed5;animation:studioType 9s infinite;animation-delay:var(--studio-offset)}
.studioCaret{height:12px;width:1px;background:#dcffe9;animation:studioBlink 1s steps(1) infinite}
.studioResult{position:absolute;left:14%;width:72%;height:var(--rank-height);top:var(--rank-top);border:1px solid #78b79866;border-radius:8px;padding:9px 12px;display:flex;flex-direction:column;gap:4px;background:#005a40}
.studioResult i{height:3px;border-radius:3px;width:66%;background:#94c8aa}
.studioResult i+i{width:42%;opacity:.5}
.resultOne{animation:studioRankDown 9s infinite;animation-delay:var(--studio-offset)}
.resultHero{top:calc(var(--rank-top) + var(--rank-step));background:#e3f8eb;border-color:#e3f8eb;box-shadow:0 7px 16px #00352333;animation:studioRankUp 9s infinite;animation-delay:var(--studio-offset)}
.resultHero i{background:#177b50}
.studioCheck{position:absolute;right:10px;top:5px;font-size:19px;font-weight:800;color:#006747;animation:studioRankCheck 9s infinite;animation-delay:var(--studio-offset)}
.resultThree{top:calc(var(--rank-top) + var(--rank-step)*2);opacity:.45}
.studioScan{position:absolute;top:var(--rank-top);left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,#cbffe0,transparent);opacity:0;animation:studioSearchScan 9s infinite;animation-delay:var(--studio-offset)}
/* Websites: the layout builds, then launches. */
.studioBrowser{position:absolute;left:11%;top:29px;width:78%;height:154px;border:1px solid #baebcf;border-radius:10px;overflow:hidden;background:#f0fff5;box-shadow:0 16px 20px #002b282e}
.studioChrome{display:flex;gap:4px;background:#c0e6cf;padding:8px}
.studioChrome i{width:4px;height:4px;border-radius:50%;background:#498568}
.studioWebNav{height:23px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;color:#006747}
.studioWebNav b{font-size:9px;font-weight:750;line-height:1}
.studioWebNav i{width:13px;height:3px;background:#79b091;border-radius:2px}
.studioWebHero{height:72px;display:flex;align-items:center;justify-content:space-between;background:#006b49;padding:9px 11px;animation:studioBuildHero 9s infinite;animation-delay:var(--studio-offset)}
.studioWebHero>span{width:59%}
.studioWebHero i{height:5px;border-radius:2px;background:#c1efd3;width:100%;margin-bottom:6px}
.studioWebHero i+i{width:65%;opacity:.6}
.studioWebHero b{display:block;width:28px;height:9px;background:#edfdf3;border-radius:3px}
.studioWebHero img{object-fit:contain;width:55px;height:55px;animation:studioBuildBot 9s infinite;animation-delay:var(--studio-offset)}
.studioWebTiles{display:flex;padding:9px;gap:7px}
.studioWebTiles i{height:22px;flex:1;border-radius:4px;background:#9ed1b0;animation:studioBuildTile 9s infinite;animation-delay:var(--studio-offset)}
.studioWebTiles i:nth-child(2){animation-delay:calc(var(--studio-offset) + .25s)}
.studioWebTiles i:nth-child(3){animation-delay:calc(var(--studio-offset) + .5s)}
.studioCode{position:absolute;right:4%;bottom:28px;padding:8px;background:#004d36;color:#dcf8e6;border:1px solid #9fdab8;border-radius:10px;font-size:22px;font-weight:700;animation:studioCodeBuild 9s infinite;animation-delay:var(--studio-offset)}
.studioWebDone{position:absolute;right:10%;bottom:31px;background:#e6fff0;color:#006747;border-radius:50%;width:33px;height:33px;display:grid;place-items:center;font-size:21px;animation:studioLaunch 9s infinite;animation-delay:var(--studio-offset)}
/* Social: one identity, two native post formats. */
.studioPost{position:absolute;width:112px;height:151px;left:calc(50% - 56px);top:34px;border-radius:9px;border:1px solid #d6f4e2;box-shadow:0 12px 20px #002c2033;overflow:hidden}
.postBack{background:#8dcca8;transform:rotate(13deg) translateX(25px);display:grid;place-items:center;animation:studioPostBack 9s infinite;animation-delay:var(--studio-offset)}
.postBack b{font-family:Georgia,serif;font-size:80px;color:#00674733}
.postFront{padding:12px;background:#f0fff4;display:flex;flex-direction:column;align-items:center;justify-content:space-between;animation:studioPostFormat 9s infinite;animation-delay:var(--studio-offset);transform:rotate(-8deg)}
.studioPostBrand{font-size:7px;color:#227151;letter-spacing:.6px;font-weight:800;white-space:nowrap}
.postFront>b{font-family:Georgia,serif;font-size:75px;line-height:1;color:#006747;position:relative}
.postFront>b>span{position:absolute;font-family:inherit;font-size:24px;color:#35a36b;right:-10px;top:4px}
.studioPostLines{width:85%}
.studioPostLines i{height:4px;background:#70b58e;border-radius:3px;width:100%;margin:5px auto}
.studioPostLines i+i{width:60%;opacity:.6}
.studioLike{position:absolute;right:12%;top:28px;color:#006747;background:#d7f8e5;border:1px solid #ade8c5;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:28px;animation:studioLikePop 9s infinite;animation-delay:var(--studio-offset)}
.studioFormat{position:absolute;bottom:13px;left:calc(50% - 23px);font-size:10px;background:#003e2e;border:1px solid #8cc5a0;padding:3px 8px;border-radius:8px;color:#d6f7e4;line-height:1.5;min-width:46px}
.formatPost{animation:studioPostLabel 9s infinite;animation-delay:var(--studio-offset)}
.formatStory{animation:studioStoryLabel 9s infinite;animation-delay:var(--studio-offset)}
/* Commerce: select a product, checkout, confirm. */
.studioStore{position:absolute;top:35px;left:7%;width:76%;height:133px;border-radius:10px;overflow:hidden;background:#eafbef;border:1px solid #baedcf;box-shadow:0 10px 20px #002b2033}
.studioStoreItems{display:flex;gap:7px;padding:14px 10px 10px}
.studioStoreItems i{flex:1;height:52px;background:#a3d2b4;border-radius:5px;display:grid!important;place-items:center;position:relative}
.studioStoreItems i:nth-child(2){background:#157f57;animation:studioProduct 9s infinite;animation-delay:var(--studio-offset)}
.studioStoreItems b{font-family:Georgia,serif;font-size:30px;font-style:normal;font-weight:500;color:#005737}
.studioStoreItems i:nth-child(2) b{color:#eafff1}
.studioCheckout{display:flex;align-items:center;justify-content:space-between;margin:0 10px;padding:7px 10px;border-radius:5px;background:#006747}
.studioCheckout i{height:3px;width:50%;background:#b5eecb}
.studioCheckout b{color:#ebfff0;animation:studioPaymentCheck 9s infinite;animation-delay:var(--studio-offset)}
.studioCart{position:absolute;right:3%;bottom:31px;width:60px;height:56px;border-radius:10px;background:#006a47;border:1px solid #9ed2b3;color:#deffe8;box-shadow:0 6px 12px #00331b33;animation:studioCartReceive 9s infinite;animation-delay:var(--studio-offset)}
.studioCart svg{width:47px;height:40px;margin:8px 5px}
.studioCart>b{position:absolute;right:-7px;top:-7px;background:#e4fff0;color:#006747;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;font-size:12px;animation:studioCartCount 9s infinite;animation-delay:var(--studio-offset)}
.studioOrder{position:absolute;left:33%;top:32px;width:38%;height:149px;background:#f4fff7;border:1px solid #caeeda;border-radius:7px;padding:25px 12px;display:flex;flex-direction:column;align-items:center;gap:12px;box-shadow:0 12px 20px #00372044;animation:studioOrderConfirm 9s infinite;animation-delay:var(--studio-offset)}
.studioOrder b{color:#006747;border:1px solid #82c79d;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:27px}
.studioOrder i{width:80%;height:3px;background:#8ac7a2;border-radius:3px}
.studioOrder i+i{width:55%;opacity:.5}
/* Automation: the mascot answers, then completes three tasks. */
.studioBot{position:absolute;width:132px;height:132px;top:20px;left:calc(50% - 66px);animation:studioBotThink 9s infinite;animation-delay:var(--studio-offset)}
.studioBot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.studioChat{position:absolute;right:9%;top:24px;background:#e5fff0;color:#006747;border-radius:13px 13px 13px 3px;display:flex;gap:4px;padding:12px;min-width:43px;height:35px;align-items:center;justify-content:center}
.studioChat i{height:4px;width:4px;border-radius:50%;background:#147b54;animation:studioBotDots 9s infinite;animation-delay:var(--studio-offset)}
.studioChat i:nth-child(2){animation-delay:calc(var(--studio-offset) + .18s)}
.studioChat i:nth-child(3){animation-delay:calc(var(--studio-offset) + .36s)}
.studioChat b{position:absolute;font-size:21px;animation:studioBotAnswer 9s infinite;animation-delay:var(--studio-offset)}
.studioWorkflow{position:absolute;bottom:23px;left:16%;right:16%;display:flex;align-items:center;justify-content:center}
.studioWorkflow>span{width:38px;height:33px;flex-shrink:0;border:1px solid #8ccfa7;border-radius:8px;background:#006e4a;display:grid;place-items:center;position:relative;animation:studioTaskComplete 9s infinite;animation-delay:var(--studio-offset)}
.studioWorkflow>span:nth-of-type(2){animation-delay:calc(var(--studio-offset) + .5s)}
.studioWorkflow>span:nth-of-type(3){animation-delay:calc(var(--studio-offset) + 1s)}
.studioWorkflow b{font-size:19px;color:#ddffe9}
.studioWorkflow>em{height:1px;background:#91d3ab;width:26px;flex:1;position:relative}
.studioWorkflow>em:after{content:"";position:absolute;top:-2px;width:5px;height:5px;background:#d7ffe7;border-radius:50%;animation:studioTaskFlow 9s infinite;animation-delay:var(--studio-offset)}
/* Branding: typography, proportion, palette. */
.studioIdentity{position:absolute;top:24px;left:calc(50% - 71px);width:142px;height:148px;display:grid;place-items:center}
.studioIdentityGuides{position:absolute;inset:10px;border:1px solid #8dd6a744;background:linear-gradient(transparent 49.5%,#9de1b337 49.5%,#9de1b337 50.5%,transparent 50.5%),linear-gradient(90deg,transparent 49.5%,#9de1b337 49.5%,#9de1b337 50.5%,transparent 50.5%);animation:studioBrandGrid 9s infinite;animation-delay:var(--studio-offset)}
.studioIdentity>b{position:absolute;font-size:112px;line-height:1;font-weight:500;color:#eafff0}
.identitySerif{font-family:Georgia,serif;animation:studioBrandSerif 9s infinite;animation-delay:var(--studio-offset)}
.identitySans{font-family:Arial,sans-serif;font-weight:800!important;animation:studioBrandSans 9s infinite;animation-delay:var(--studio-offset)}
.identitySpark{position:absolute;top:19px;right:5px;font-size:27px;color:#89dfac;animation:studioBrandSpark 9s infinite;animation-delay:var(--studio-offset)}
.studioPalette{position:absolute;left:22%;right:22%;bottom:30px;display:flex;gap:7px;align-items:center}
.studioPalette i{height:13px;flex:1;border-radius:4px;background:#edfff3;animation:studioPaletteSet 9s infinite;animation-delay:var(--studio-offset)}
.studioPalette i:nth-child(2){background:#abe8c2;animation-delay:calc(var(--studio-offset) + .2s)}
.studioPalette i:nth-child(3){background:#36bb79;animation-delay:calc(var(--studio-offset) + .4s)}
.studioPalette i:nth-child(4){background:#003f2c;border:1px solid #63b68a;animation-delay:calc(var(--studio-offset) + .6s)}
.studioBrandLine{position:absolute;left:31%;right:31%;bottom:17px;height:1px;background:#90dfaf66;animation:studioBrandUnderline 9s infinite;animation-delay:var(--studio-offset)}
@keyframes studioPhase{0%,28%{background:#d4ffe4}34%,100%{background:#baf6d22b}}
@keyframes studioType{0%,5%{width:10%}25%,93%{width:58%}100%{width:10%}}
@keyframes studioBlink{50%{opacity:0}}
@keyframes studioRankUp{0%,28%,100%{transform:none}48%,90%{transform:translateY(calc(var(--rank-step)*-1))}}
@keyframes studioRankDown{0%,28%,100%{transform:none;opacity:.8}48%,90%{transform:translateY(var(--rank-step));opacity:.4}}
@keyframes studioRankCheck{0%,45%,100%{opacity:0;transform:scale(.5)}55%,90%{opacity:1;transform:scale(1)}}
@keyframes studioSearchScan{0%,24%,65%,100%{opacity:0;transform:translateY(0)}30%{opacity:.6}56%{opacity:0;transform:translateY(calc(var(--rank-step)*2))}}
@keyframes studioBuildHero{0%,10%,100%{opacity:.1;transform:translateY(12px)}25%,90%{opacity:1;transform:none}}
@keyframes studioBuildBot{0%,24%,100%{opacity:0;transform:scale(.8)}42%,90%{opacity:1;transform:none}}
@keyframes studioBuildTile{0%,32%,100%{opacity:0;transform:translateY(12px)}49%,90%{opacity:1;transform:none}}
@keyframes studioCodeBuild{0%,50%,100%{opacity:1;transform:none}65%,90%{opacity:0;transform:scale(.8)}}
@keyframes studioLaunch{0%,55%,100%{opacity:0;transform:scale(.5)}67%,90%{opacity:1;transform:scale(1)}}
@keyframes studioPostBack{0%,100%{transform:rotate(13deg) translateX(25px)}40%,72%{transform:rotate(-13deg) translateX(-17px)}}
@keyframes studioPostFormat{0%,25%,100%{transform:rotate(-8deg) scaleY(.88)}45%,80%{transform:rotate(4deg) scaleY(1.03)}}
@keyframes studioLikePop{0%,40%,100%{transform:scale(.9)}50%{transform:scale(1.22) rotate(-9deg)}62%,85%{transform:scale(1)}}
@keyframes studioPostLabel{0%,30%,100%{opacity:1}40%,90%{opacity:0}}
@keyframes studioStoryLabel{0%,30%,100%{opacity:0}40%,90%{opacity:1}}
@keyframes studioProduct{0%,25%,100%{transform:none}38%{transform:translate(12px,9px) scale(1.08)}50%,90%{transform:none}}
@keyframes studioPaymentCheck{0%,50%,100%{opacity:0}65%,90%{opacity:1}}
@keyframes studioCartReceive{0%,34%,100%{transform:none}44%{transform:scale(1.15) rotate(-5deg)}54%,90%{transform:none}}
@keyframes studioCartCount{0%,35%,100%{opacity:0;transform:scale(.5)}45%,90%{opacity:1;transform:scale(1)}}
@keyframes studioOrderConfirm{0%,62%,100%{opacity:0;transform:translateY(15px) scale(.85)}76%,90%{opacity:1;transform:none}}
@keyframes studioBotThink{0%,100%{transform:none}20%,38%{transform:rotate(-9deg) translateY(-6px)}52%{transform:rotate(5deg)}70%,85%{transform:translateY(-9px)}}
@keyframes studioBotDots{0%,5%,50%,100%{opacity:.6;transform:none}18%,35%{transform:translateY(-4px);opacity:1}56%,90%{opacity:0}}
@keyframes studioBotAnswer{0%,48%,100%{opacity:0;transform:scale(.5)}60%,90%{opacity:1;transform:none}}
@keyframes studioTaskComplete{0%,48%,100%{background:#006e4a;transform:none;opacity:.5}64%,88%{background:#13875c;transform:translateY(-3px);opacity:1}}
@keyframes studioTaskFlow{0%,45%,100%{opacity:0;left:0}50%{opacity:1}64%{opacity:0;left:100%}}
@keyframes studioBrandGrid{0%,35%,100%{opacity:1}48%,88%{opacity:.25}}
@keyframes studioBrandSerif{0%,40%,100%{opacity:1;transform:none}50%,90%{opacity:0;transform:scale(.92)}}
@keyframes studioBrandSans{0%,40%,100%{opacity:0;transform:scale(.92)}50%,90%{opacity:1;transform:none}}
@keyframes studioBrandSpark{0%,42%,100%{transform:scale(.5) rotate(-45deg);opacity:0}60%,90%{transform:none;opacity:1}}
@keyframes studioPaletteSet{0%,18%,100%{transform:scaleX(.6);opacity:.3}38%,90%{transform:none;opacity:1}}
@keyframes studioBrandUnderline{0%,35%,100%{transform:scaleX(0)}62%,90%{transform:scaleX(1)}}
@media(hover:hover){.serviceGrid .studioCard:hover{transform:translateY(-4px)}}
@media(max-width:650px){
 .services .serviceGrid{gap:12px}
 .serviceGrid .studioCard,.serviceGrid .studioCard:nth-child(n){padding:13px 11px 12px;border-radius:19px}
 .studioCardTop{font-size:12px;min-height:14px}.studioCycle{gap:3px}.studioCycle i{width:10px;height:2px}
 .studioCard .servicePreview{margin-top:5px}
 .studioCard .studioArt{height:150px;--rank-step:30px;--rank-top:44px;--rank-height:23px}
 .serviceGrid .studioCard h3,.serviceGrid .studioCard:nth-child(n) h3{font-size:clamp(16px,4.5vw,22px);letter-spacing:-.3px;margin:9px 0 15px;min-height:2.44em}
 .studioCard .simpleExplore{font-size:13px;min-height:36px;padding-top:11px}
 .studioReply{top:32px;inset-inline:7px;padding:8px 5px;font-size:12px}
 .studioSearch{top:7px;height:25px;left:4%;width:92%;padding-inline:8px;font-size:18px;gap:7px;border-radius:10px}.studioCaret{height:9px}
 .studioResult{left:8%;width:84%;border-radius:6px;padding:6px 8px;gap:3px}.studioResult i{height:2px}.studioCheck{font-size:15px;right:7px;top:2px}
 .studioBrowser{top:18px;left:5%;width:90%;height:107px;border-radius:7px}.studioChrome{padding:6px;gap:3px}.studioChrome i{width:3px;height:3px}.studioWebNav{height:18px;padding:0 8px}.studioWebNav b{font-size:7px}.studioWebNav i{width:10px;height:2px}.studioWebHero{height:47px;padding:6px 7px}.studioWebHero img{width:38px;height:38px}.studioWebHero i{height:3px;margin-bottom:4px}.studioWebHero b{width:18px;height:6px}.studioWebTiles{padding:6px;gap:4px}.studioWebTiles i{height:15px;border-radius:3px}.studioCode{bottom:12px;right:0;font-size:14px;padding:5px;border-radius:7px}.studioWebDone{bottom:15px;right:5%;width:25px;height:25px;font-size:17px}
 .studioPost{top:20px;width:77px;height:107px;left:calc(50% - 38.5px);border-radius:7px}.postFront{padding:8px}.postFront>b{font-size:53px}.postFront>b>span{font-size:17px;right:-8px;top:3px}.postBack b{font-size:58px}.studioPostBrand{font-size:5px;letter-spacing:.4px}.studioPostLines i{height:3px;margin:3px auto}.studioLike{top:13px;right:2%;width:27px;height:27px;font-size:21px}.studioFormat{bottom:0;font-size:9px;min-width:38px;padding:2px 6px;left:calc(50% - 19px)}
 .studioStore{top:22px;left:2%;width:87%;height:93px;border-radius:7px}.studioStoreItems{padding:9px 7px 7px;gap:5px}.studioStoreItems i{height:36px;border-radius:4px}.studioStoreItems b{font-size:24px}.studioCheckout{padding:5px 7px;margin-inline:7px;height:18px}.studioCart{right:0;bottom:12px;width:44px;height:42px;border-radius:8px}.studioCart svg{width:34px;height:29px;margin:6px 4px}.studioCart>b{width:17px;height:17px;font-size:10px;right:-4px;top:-4px}.studioOrder{height:105px;top:20px;padding:17px 8px;gap:9px;width:48%;left:27%}.studioOrder b{width:29px;height:29px;font-size:20px}.studioOrder i{height:2px}
 .studioBot{top:10px;left:calc(50% - 48px);width:96px;height:96px}.studioChat{top:11px;right:0;min-width:32px;height:27px;padding:9px;gap:3px;border-radius:10px 10px 10px 2px}.studioChat i{width:3px;height:3px}.studioChat b{font-size:17px}.studioWorkflow{bottom:11px;left:9%;right:9%}.studioWorkflow>span{width:27px;height:26px;border-radius:6px}.studioWorkflow b{font-size:15px}.studioWorkflow>em{width:17px}
 .studioIdentity{top:8px;left:calc(50% - 51px);width:102px;height:105px}.studioIdentity>b{font-size:79px}.identitySpark{font-size:21px;top:12px;right:0}.studioIdentityGuides{inset:7px}.studioPalette{left:14%;right:14%;bottom:21px;gap:5px}.studioPalette i{height:10px;border-radius:3px}.studioBrandLine{bottom:11px}
}
@media(max-width:350px){.studioCard .studioArt{height:138px}.studioWebNav b{font-size:6px}.serviceGrid .studioCard,.serviceGrid .studioCard:nth-child(n){padding-inline:8px}.studioPost{width:68px;left:calc(50% - 34px)}}
@media(prefers-reduced-motion:reduce){
 .studioCard *{animation:none!important;transition:none!important}.serviceGrid .studioCard:hover{transform:none}
 .resultHero{transform:translateY(calc(var(--rank-step)*-1))}.resultOne{transform:translateY(var(--rank-step));opacity:.4}.studioScan,.studioCaret,.studioCode,.formatStory,.studioOrder,.studioChat i,.identitySans{display:none}
 .studioWebDone,.studioCheck,.studioChat b,.studioCart>b{opacity:1;transform:none}.studioWorkflow>span{opacity:1}.identitySerif{opacity:1}.identitySpark{opacity:1;transform:none}
}
/* Branded social campaign, catalog checkout, and identity workbench. */
.art-social-media-design .socialBack{background:linear-gradient(150deg,#048457,#003e2c);border-color:#8bd9af;color:#dfffea;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:12px;animation:socialCardFan 9s infinite;animation-delay:var(--studio-offset)}
.socialBack>span{font-size:6px;letter-spacing:.8px;font-weight:700}
.art-social-media-design .socialBack>b{font-family:inherit;font-size:26px;line-height:1.07;letter-spacing:-1px;font-weight:800;color:#e9fff0}
.art-social-media-design .socialFront{background:linear-gradient(160deg,#f5fff8,#daf4e3);padding:8px;justify-content:flex-start;gap:5px;animation:socialCampaignSwap 9s infinite;animation-delay:var(--studio-offset)}
.socialFront .studioPostBrand{font-size:7px;letter-spacing:-.1px;color:#006747;font-weight:800}
.socialPosterRobot{display:block;width:76px;height:76px;position:relative;flex-shrink:0;margin-top:-4px;animation:socialMascotPop 9s infinite;animation-delay:var(--studio-offset)}
.socialPosterRobot img{height:100%;width:100%;object-fit:contain}
.socialPostHeadline{font-size:14px;line-height:1.05;text-align:center;letter-spacing:-.5px;font-weight:800;color:#005c3d;margin-top:-7px}
.socialPostAccent{width:30px;height:3px;background:#008757;border-radius:5px;margin:0 auto;animation:socialAccentDraw 9s infinite;animation-delay:var(--studio-offset)}
.art-social-media-design .socialLike{top:24px;right:10%;font-size:28px;animation:socialHeartReact 9s infinite;animation-delay:var(--studio-offset);box-shadow:0 5px 14px #00351e20}
.socialCarousel{position:absolute;bottom:13px;left:calc(50% - 19px);display:flex;align-items:center;gap:5px;height:9px}
.socialCarousel i{width:6px;height:6px;background:#a8edc252;border-radius:5px;animation:socialDotSelect 9s infinite;animation-delay:var(--studio-offset)}
.socialCarousel i:nth-child(2){animation-delay:calc(var(--studio-offset) + 3s)}
.socialCarousel i:nth-child(3){animation-delay:calc(var(--studio-offset) + 6s)}
.socialSpark{position:absolute;bottom:43px;left:10%;font-size:27px;color:#aaf1c5;animation:socialSparkReact 9s infinite;animation-delay:var(--studio-offset)}
/* A product is selected, added, and paid for in a miniature store UI. */
.art-ecommerce .commerceStore{height:151px;top:27px;left:5%;width:86%;background:#f0fff5}
.commerceTitle{display:flex;align-items:center;justify-content:space-between;padding:8px 10px 4px;font-size:9px;font-weight:800;letter-spacing:.4px;color:#005b3d}
.commerceTitle>span{font-size:6px;letter-spacing:.5px;color:#4f8c6b}
.art-ecommerce .commerceProducts{padding:6px 9px 8px;gap:6px}
.commerceProduct{display:flex;flex:1;min-width:0;height:64px;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:#c1e5ce;border-radius:5px;border:1px solid #8ac2a4;color:#006747;position:relative}
.commerceProduct:nth-child(3){background:#e1f6e7}
.commerceProduct svg{width:31px;height:31px;stroke-width:1.4}
.commerceProduct img{width:35px;height:35px;object-fit:contain}
.commerceProduct>b{font-size:9px;font-weight:750;font-style:normal;line-height:1}
.commerceProduct>b:before{content:'SAR ';font-size:6px;opacity:.7}
.productPicked{background:#0c8259;color:#e5fff0;border-color:#3ba776;animation:commerceProductPick 9s infinite;animation-delay:var(--studio-offset)}
.art-ecommerce .commerceCheckout{height:23px;margin:0 9px;padding:5px 9px;animation:commerceCheckoutPulse 9s infinite;animation-delay:var(--studio-offset)}
.commerceCheckout>span{font-size:8px;font-weight:750;letter-spacing:.4px;color:#e8fff0}
.art-ecommerce .commerceCart{right:0;bottom:27px;animation:commerceCartBump 9s infinite;animation-delay:var(--studio-offset)}
.art-ecommerce .commerceReceipt{width:45%;height:142px;left:28%;top:25px;gap:12px;padding:21px 8px;animation:commerceReceiptSlide 9s infinite;animation-delay:var(--studio-offset);background:#f6fff8;border-radius:9px}
.commerceReceipt>span{font-size:10px;font-weight:800;letter-spacing:.5px;line-height:1.25;color:#006747;text-align:center}
.commerceReceipt>i{width:60%}
.commerceTouch{position:absolute;left:51%;top:112px;width:16px;height:16px;border:2px solid #e2fff0;border-radius:50%;box-shadow:0 0 0 5px #95efbc30;animation:commerceTap 9s infinite;animation-delay:var(--studio-offset);pointer-events:none}
/* The actual approved mascot becomes a complete brand lockup. */
.brandWorkbench{position:absolute;top:23px;left:7%;width:86%;height:158px;border-radius:10px;border:1px solid #a8e0be;overflow:hidden;background:#f0fff4;box-shadow:0 14px 20px #00392133}
.brandToolbar{display:flex;gap:4px;align-items:center;background:#c6e9d1;padding:7px 9px;height:21px}
.brandToolbar i{width:4px;height:4px;background:#5a9572;border-radius:50%}
.brandToolbar>span{margin-inline-start:auto;font-size:7px;letter-spacing:.7px;color:#317a55;font-weight:700}
.brandCanvas{display:block;position:relative;height:106px;background:linear-gradient(#b6dbc327 1px,transparent 1px),linear-gradient(90deg,#b6dbc327 1px,transparent 1px);background-size:14px 14px;overflow:hidden}
.brandApprovedRobot{position:absolute;width:93px;height:93px;left:calc(50% - 46.5px);top:2px;object-fit:contain;animation:brandLockupBuild 9s infinite;animation-delay:var(--studio-offset)}
.brandApprovedName{position:absolute;top:46px;left:26%;color:#006747;font-size:14px;line-height:1;letter-spacing:-.7px;font-weight:800;white-space:nowrap;animation:brandNameReveal 9s infinite;animation-delay:var(--studio-offset)}
.brandLogoBounds{position:absolute;width:88px;height:88px;top:7px;left:calc(50% - 44px);border:1px solid #4aab744d;animation:brandBoundsExpand 9s infinite;animation-delay:var(--studio-offset)}
.brandLogoBounds:before,.brandLogoBounds:after{content:"";width:5px;height:5px;background:#e7fff0;border:1px solid #398957;position:absolute;top:-3px;left:-3px}
.brandLogoBounds:after{left:auto;right:-3px;top:auto;bottom:-3px}
.brandGuide{position:absolute;opacity:.5;background:#61b081;animation:brandGuidesFade 9s infinite;animation-delay:var(--studio-offset)}
.guideHorizontal{height:1px;left:0;right:0;top:54px}.guideVertical{width:1px;top:0;bottom:0;left:50%}
.brandPalette{height:30px;display:flex;gap:6px;padding:5px 12px;background:#e1f6e8;border-top:1px solid #addec0}
.brandPalette>i{height:15px;flex:1;border-radius:4px;background:#00452e;animation:brandPalettePick 9s infinite;animation-delay:var(--studio-offset)}
.brandPalette>i:nth-child(2){background:#006747;animation-delay:calc(var(--studio-offset) + .2s)}
.brandPalette>i:nth-child(3){background:#35b577;animation-delay:calc(var(--studio-offset) + .4s)}
.brandPalette>i:nth-child(4){background:#d2f6df;border:1px solid #83c59b;animation-delay:calc(var(--studio-offset) + .6s)}
.brandColourChip{position:absolute;left:4%;bottom:21px;padding:6px 9px;background:#006747;color:#e6fff0;font-size:11px;font-family:monospace;border:1px solid #9adeb6;border-radius:8px;box-shadow:0 7px 14px #003c2520;animation:brandChipPick 9s infinite;animation-delay:var(--studio-offset)}
.brandApproved{position:absolute;right:4%;bottom:23px;width:31px;height:31px;border-radius:50%;background:#e2ffed;color:#006747;display:grid;place-items:center;font-size:21px;animation:brandDesignApprove 9s infinite;animation-delay:var(--studio-offset)}
@keyframes socialCardFan{0%,20%,100%{transform:translateX(22px) rotate(12deg)}43%,70%{transform:translateX(-23px) rotate(-12deg)}84%{transform:translateX(21px) rotate(9deg)}}
@keyframes socialCampaignSwap{0%,20%,100%{transform:rotate(-7deg)}43%,70%{transform:translateX(8px) rotate(7deg)}82%,92%{transform:rotate(0deg) translateY(-4px)}}
@keyframes socialMascotPop{0%,100%{transform:none}45%,65%{transform:translateY(-3px) rotate(-8deg)}85%{transform:scale(1.08)}}
@keyframes socialAccentDraw{0%,12%,100%{transform:scaleX(.4)}28%,92%{transform:scaleX(1)}}
@keyframes socialHeartReact{0%,30%,100%{transform:scale(.9)}40%{transform:scale(1.22) rotate(-10deg)}52%,90%{transform:scale(1)}}
@keyframes socialDotSelect{0%,25%{background:#ddffea;transform:scaleX(1.4)}35%,100%{background:#a8edc252;transform:none}}
@keyframes socialSparkReact{0%,58%,100%{opacity:0;transform:scale(.3) rotate(-40deg)}72%,88%{opacity:1;transform:none}}
@keyframes commerceProductPick{0%,15%,100%{transform:none;box-shadow:none}27%,40%{transform:translateY(-3px);box-shadow:0 0 0 2px #61be89}50%,92%{transform:none}}
@keyframes commerceTap{0%,13%,100%{opacity:0;transform:scale(.5)}23%{opacity:1;transform:scale(1)}34%{opacity:0;transform:scale(1.9)}35%,92%{opacity:0}}
@keyframes commerceCartBump{0%,33%,100%{transform:none}44%{transform:translateY(-4px) rotate(-7deg)}54%,90%{transform:none}}
@keyframes commerceCheckoutPulse{0%,47%,100%{background:#006747}59%,72%{background:#219a63}83%,92%{background:#006747}}
@keyframes commerceReceiptSlide{0%,65%,100%{opacity:0;transform:translateY(20px) scale(.85)}77%,92%{opacity:1;transform:none}}
@keyframes brandLockupBuild{0%,32%,100%{transform:none}50%,92%{transform:translateX(-95px) scale(.46)}}
@keyframes brandNameReveal{0%,38%,100%{opacity:0;clip-path:inset(0 100% 0 0)}58%,92%{opacity:1;clip-path:inset(0)}}
@keyframes brandBoundsExpand{0%,32%,100%{width:88px;left:calc(50% - 44px);height:88px;top:7px;opacity:.7}52%,90%{width:91%;left:4.5%;height:48px;top:29px;opacity:.4}}
@keyframes brandGuidesFade{0%,38%,100%{opacity:.5}53%,92%{opacity:.12}}
@keyframes brandPalettePick{0%,5%,100%{transform:translateY(5px);opacity:.4}25%,90%{transform:none;opacity:1}}
@keyframes brandChipPick{0%,25%,100%{opacity:0;transform:translateY(6px)}40%,90%{opacity:1;transform:none}}
@keyframes brandDesignApprove{0%,65%,100%{opacity:0;transform:scale(.5)}77%,92%{opacity:1;transform:none}}
@media(max-width:650px){
 .art-social-media-design .socialFront{padding:7px;gap:4px}.socialFront .studioPostBrand{font-size:5px}.socialPosterRobot{width:56px;height:56px;margin-top:-3px}.socialPostHeadline{font-size:10px;letter-spacing:-.3px;margin-top:-5px}.socialPostAccent{height:2px;width:21px}.art-social-media-design .socialBack{padding:8px}.socialBack>span{font-size:4px;letter-spacing:.3px}.art-social-media-design .socialBack>b{font-size:20px;letter-spacing:-.7px}.art-social-media-design .socialLike{top:12px;right:0;font-size:20px}.socialCarousel{bottom:3px;left:calc(50% - 16px);gap:4px}.socialCarousel i{width:5px;height:5px}.socialSpark{bottom:26px;left:2%;font-size:20px}
 .art-ecommerce .commerceStore{height:105px;top:17px;left:0;width:95%}.commerceTitle{padding:6px 7px 3px;font-size:6px;letter-spacing:.1px}.commerceTitle>span{font-size:5px}.art-ecommerce .commerceProducts{padding:4px 6px 6px;gap:4px}.commerceProduct{height:44px;gap:3px;border-radius:4px}.commerceProduct svg{width:22px;height:22px}.commerceProduct img{width:25px;height:25px}.commerceProduct>b{font-size:7px}.commerceProduct>b:before{font-size:5px}.art-ecommerce .commerceCheckout{height:17px;margin:0 6px;padding:3px 6px}.commerceCheckout>span{font-size:6px}.art-ecommerce .commerceCart{bottom:13px;right:0}.art-ecommerce .commerceReceipt{width:55%;left:23%;height:102px;top:17px;padding:16px 6px;gap:9px}.commerceReceipt>span{font-size:8px;letter-spacing:.2px}.commerceTouch{top:75px;width:12px;height:12px}
 .brandWorkbench{top:14px;left:0;width:100%;height:109px;border-radius:7px}.brandToolbar{height:16px;padding:5px 6px;gap:3px}.brandToolbar i{width:3px;height:3px}.brandToolbar>span{font-size:5px}.brandCanvas{height:71px;background-size:10px 10px}.brandApprovedRobot{width:65px;height:65px;left:calc(50% - 32.5px);top:1px;animation-name:brandLockupBuildMobile}.brandApprovedName{font-size:9px;letter-spacing:-.45px;left:26%;top:31px}.brandLogoBounds{width:61px;height:61px;left:calc(50% - 30.5px);top:4px;animation-name:brandBoundsExpandMobile}.guideHorizontal{top:36px}.brandPalette{height:22px;padding:4px 8px;gap:4px}.brandPalette>i{height:11px;border-radius:3px}.brandColourChip{bottom:12px;left:0;font-size:8px;padding:4px 6px;border-radius:6px}.brandApproved{bottom:14px;right:0;width:24px;height:24px;font-size:17px}
}
@keyframes brandLockupBuildMobile{0%,32%,100%{transform:none}50%,92%{transform:translateX(-49px) scale(.45)}}
@keyframes brandBoundsExpandMobile{0%,32%,100%{width:61px;left:calc(50% - 30.5px);height:61px;top:4px;opacity:.7}52%,90%{width:94%;left:3%;height:33px;top:20px;opacity:.4}}
@media(max-width:350px){.socialPosterRobot{width:56px;height:56px}.brandApprovedName{font-size:8px;left:25%}.brandApprovedRobot{animation-name:brandLockupBuildNarrow}}
@keyframes brandLockupBuildNarrow{0%,32%,100%{transform:none}50%,92%{transform:translateX(-41px) scale(.42)}}
@media(prefers-reduced-motion:reduce){.socialSpark,.commerceTouch{display:none}.art-ecommerce .commerceReceipt{opacity:0;display:none}.brandApprovedName{opacity:1;clip-path:none}.brandApprovedRobot{transform:translateX(-95px) scale(.46)}.brandLogoBounds{width:91%;left:4.5%;height:48px;top:29px;opacity:.4}.brandColourChip,.brandApproved{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce) and (max-width:650px){.brandApprovedRobot{transform:translateX(-49px) scale(.45)}.brandLogoBounds{width:94%;left:3%;height:33px;top:20px}}
/* SEO: query, discovery, then a visibility chart. */
.seoDiscovery{position:absolute;inset:0;display:block;direction:ltr}
.seoQueryBar{position:absolute;left:5%;right:5%;top:19px;height:35px;display:flex;align-items:center;gap:9px;padding:0 12px;border:1px solid #b0e8c6;border-radius:12px;background:#056c49;box-shadow:0 6px 18px #003b2722}
.seoQueryBar>svg{width:17px;height:17px;flex-shrink:0;color:#d5ffe5}
.seoQueryText{font-size:12px;font-weight:550;line-height:1.2;white-space:nowrap;color:#e9fff0;clip-path:inset(0 100% 0 0);animation:seoDiscoverTyping 10s steps(18,end) infinite;animation-delay:var(--studio-offset)}
.seoQueryBar>i{height:13px;width:1px;background:#c4ffdb;flex-shrink:0;animation:seoDiscoverCaret 1s steps(1) infinite}
.seoFoundResult{position:absolute;top:69px;left:9%;right:9%;height:88px;padding:11px 13px;background:linear-gradient(135deg,#f4fff7,#dbf6e4);color:#005b3d;border:1px solid #c7f3d8;border-radius:10px;box-shadow:0 9px 18px #002c2340;display:flex;flex-direction:column;gap:7px;animation:seoDiscoverResult 10s infinite;animation-delay:var(--studio-offset)}
.seoResultBrand{display:flex;align-items:center;gap:5px;height:20px}
.seoResultBrand img{width:24px;height:24px;object-fit:contain}
.seoResultBrand b{font-size:10px;font-weight:800;letter-spacing:-.3px}
.seoFoundResult>strong{font-size:14px;line-height:1.1;font-weight:800;letter-spacing:-.3px;text-align:left}
.seoResultLines{display:flex;flex-direction:column;gap:4px;margin-top:1px}
.seoResultLines i{width:75%;height:3px;background:#81b799;border-radius:4px;opacity:.7}
.seoResultLines i+i{width:50%;opacity:.4}
.seoResultMatch{position:absolute;right:-9px;top:-9px;display:grid;place-items:center;width:27px;height:27px;border:1px solid #9be2b6;border-radius:50%;background:#e9fff1;color:#006747;font-size:18px;font-weight:750;animation:seoDiscoverMatch 10s infinite;animation-delay:var(--studio-offset)}
.seoMagnifier{position:absolute;left:calc(50% - 25px);top:76px;width:56px;height:56px;display:grid;place-items:center;border-radius:50%;background:#00724ee8;border:1px solid #bdedce;box-shadow:0 7px 12px #003d2d40;color:#ddffea;animation:seoDiscoverScan 10s infinite;animation-delay:var(--studio-offset)}
.seoMagnifier svg{width:35px;height:35px;stroke-width:1.35}
.seoInsights{position:absolute;left:10%;right:10%;bottom:6px;height:44px;display:flex;align-items:flex-end;gap:10px;border-bottom:1px solid #9bdab756;padding-bottom:4px}
.seoInsightLabel{align-self:center;text-align:left;font-size:7px;font-weight:750;letter-spacing:.8px;line-height:1.5;max-width:52px;color:#c6f4d9}
.seoInsightBars{display:flex;align-items:flex-end;gap:6px;flex:1;height:37px}
.seoInsightBars i{height:40%;flex:1;min-width:0;border-radius:4px 4px 1px 1px;background:#89dca8;transform-origin:bottom;animation:seoDiscoverGrowth 10s infinite;animation-delay:var(--studio-offset)}
.seoInsightBars i:nth-child(2){height:53%;background:#adecc1;animation-delay:calc(var(--studio-offset) + .15s)}
.seoInsightBars i:nth-child(3){height:67%;background:#c2f8d2;animation-delay:calc(var(--studio-offset) + .3s)}
.seoInsightBars i:nth-child(4){height:83%;background:#d4ffe2;animation-delay:calc(var(--studio-offset) + .45s)}
.seoInsightBars i:nth-child(5){height:100%;background:#edfff3;animation-delay:calc(var(--studio-offset) + .6s)}
.seoInsightSpark{font-size:20px;line-height:1;align-self:flex-start;color:#d0ffe1;animation:seoDiscoverSpark 10s infinite;animation-delay:var(--studio-offset)}
@keyframes seoDiscoverTyping{0%,5%{clip-path:inset(0 100% 0 0)}24%,93%{clip-path:inset(0)}100%{clip-path:inset(0 100% 0 0)}}
@keyframes seoDiscoverCaret{50%{opacity:0}}
@keyframes seoDiscoverResult{0%,18%,100%{opacity:.14;transform:translateY(9px) scale(.96)}35%,92%{opacity:1;transform:none}}
@keyframes seoDiscoverScan{0%,18%,100%{opacity:0;transform:translateX(-35px) scale(.7)}26%{opacity:1;transform:translateX(-29px) rotate(-12deg)}40%{opacity:1;transform:translateX(28px) rotate(8deg)}52%,94%{opacity:0;transform:translateX(45px) scale(.7)}}
@keyframes seoDiscoverMatch{0%,44%,100%{opacity:0;transform:scale(.3)}55%,92%{opacity:1;transform:none}}
@keyframes seoDiscoverGrowth{0%,48%,100%{transform:scaleY(.12);opacity:.3}68%,92%{transform:scaleY(1);opacity:1}}
@keyframes seoDiscoverSpark{0%,70%,100%{opacity:0;transform:scale(.3) rotate(-40deg)}82%,92%{opacity:1;transform:none}}
html[dir=rtl] .seoQueryText{direction:rtl;animation-name:seoDiscoverTypingRtl}
html[dir=rtl] .seoFoundResult>strong,html[dir=rtl] .seoInsightLabel{direction:rtl;text-align:right}
@keyframes seoDiscoverTypingRtl{0%,5%{clip-path:inset(0 0 0 100%)}24%,93%{clip-path:inset(0)}100%{clip-path:inset(0 0 0 100%)}}
@media(max-width:650px){
 .seoQueryBar{top:7px;height:27px;left:0;right:0;padding:0 7px;gap:5px;border-radius:10px}.seoQueryBar>svg{width:13px;height:13px}.seoQueryText{font-size:9px;letter-spacing:-.15px}.seoQueryBar>i{height:10px}
 .seoFoundResult{top:46px;left:3%;right:3%;height:64px;padding:7px 8px;gap:5px;border-radius:8px}.seoResultBrand{height:15px;gap:3px}.seoResultBrand img{width:19px;height:19px}.seoResultBrand b{font-size:7px;letter-spacing:-.1px}.seoFoundResult>strong{font-size:10px;letter-spacing:-.2px}.seoResultLines{gap:3px;margin:0}.seoResultLines i{height:2px}.seoResultMatch{right:-5px;top:-7px;width:21px;height:21px;font-size:14px}
 .seoMagnifier{top:49px;width:42px;height:42px;left:calc(50% - 21px)}.seoMagnifier svg{width:27px;height:27px}
 .seoInsights{bottom:0;left:4%;right:4%;height:29px;gap:5px;padding-bottom:2px}.seoInsightLabel{font-size:5px;letter-spacing:.3px;max-width:33px}.seoInsightBars{height:25px;gap:4px}.seoInsightBars i{border-radius:3px 3px 1px 1px}.seoInsightSpark{font-size:14px}
}
@media(max-width:350px){.seoQueryText{font-size:8px}.seoFoundResult>strong{font-size:9px}.seoResultBrand b{font-size:6px}}
@media(prefers-reduced-motion:reduce){.seoDiscovery *{animation:none!important}.seoQueryText{clip-path:none}.seoQueryBar>i,.seoMagnifier,.seoInsightSpark{display:none}.seoFoundResult,.seoResultMatch{opacity:1;transform:none}.seoInsightBars i{opacity:1;transform:none}}
/* Web card: build, preview, and respond to mobile. */
.webBuildMini{position:absolute;inset:0;display:block}
.miniBuildFrame{position:absolute;left:10%;top:29px;width:83%;height:150px;background:#effff5;border:1px solid #acd9bd;border-radius:10px;overflow:hidden;box-shadow:0 14px 20px #002c2440}
.miniBuildChrome{display:flex;gap:4px;padding:7px;background:#c2e9cf}.miniBuildChrome i{height:4px;width:4px;border-radius:50%;background:#649776}
.miniBuiltBrand{display:block;color:#006747;font-size:9px;letter-spacing:-.2px;font-weight:800;padding:8px 11px;height:24px;animation:webMiniNav 10s infinite;animation-delay:var(--studio-offset)}
.miniBuiltHero{display:flex;align-items:center;justify-content:space-between;height:69px;padding:9px 11px;background:#d8f0e1;animation:webMiniHero 10s infinite;animation-delay:var(--studio-offset)}.miniBuiltHero>span{width:58%}.miniBuiltHero i{height:5px;width:100%;background:#0b7450;border-radius:2px;margin-bottom:6px}.miniBuiltHero i+i{width:67%;opacity:.5}.miniBuiltHero b{display:block;width:30px;height:9px;background:#006747;border-radius:3px}.miniBuiltHero img{height:49px;width:49px;object-fit:contain;animation:webMiniLogo 10s infinite;animation-delay:var(--studio-offset)}
.miniBuiltTiles{display:flex;padding:10px;gap:6px}.miniBuiltTiles i{height:20px;flex:1;border-radius:4px;background:#9bceb0;animation:webMiniTile 10s infinite;animation-delay:var(--studio-offset)}.miniBuiltTiles i:nth-child(2){animation-delay:calc(var(--studio-offset) + .2s)}.miniBuiltTiles i:nth-child(3){animation-delay:calc(var(--studio-offset) + .4s)}
.miniBuildRobot{position:absolute;bottom:10px;left:0;width:73px;height:73px;animation:webMiniBuilder 10s infinite;animation-delay:var(--studio-offset)}.miniBuildRobot>img{width:100%;height:100%;object-fit:contain}.miniBuildRobot>b{position:absolute;left:68%;top:5px;font-size:12px;background:#e7fff0;border:1px solid #90cda6;border-radius:5px;padding:4px;color:#006747;animation:webMiniCode 10s infinite;animation-delay:var(--studio-offset)}
.miniBuildMobile{position:absolute;right:1%;bottom:12px;width:40px;height:72px;background:#f0fff5;border:2px solid #96ceac;border-radius:9px;padding:10px 5px;box-shadow:0 7px 14px #003f2920;animation:webMiniResponsive 10s infinite;animation-delay:var(--studio-offset)}.miniBuildMobile>i{height:3px;width:75%;background:#227d55;border-radius:2px;margin-bottom:5px}.miniBuildMobile>span{display:block;width:100%;height:22px;background:#c2e8cf;border-radius:2px;margin-bottom:5px}.miniBuildMobile>b{display:block;width:100%;height:5px;background:#85bf9c;margin-top:4px;border-radius:2px}
.miniBuildDone{position:absolute;right:12%;top:18px;background:#d9ffe6;color:#006747;display:grid;place-items:center;height:29px;width:29px;border:1px solid #8ccca2;border-radius:50%;font-size:20px;animation:webMiniLaunch 10s infinite;animation-delay:var(--studio-offset)}
@keyframes webMiniNav{0%,9%,100%{opacity:0;transform:translateY(-5px)}22%,92%{opacity:1;transform:none}}@keyframes webMiniHero{0%,21%,100%{opacity:.1;transform:translateY(10px)}36%,92%{opacity:1;transform:none}}@keyframes webMiniLogo{0%,29%,100%{opacity:0;transform:scale(.5)}44%,92%{opacity:1;transform:none}}@keyframes webMiniTile{0%,38%,100%{opacity:0;transform:translateY(9px)}53%,92%{opacity:1;transform:none}}@keyframes webMiniBuilder{0%,100%{transform:none}28%,48%{transform:translate(11px,-6px) rotate(-8deg)}73%,88%{transform:translateY(-7px) rotate(6deg)}}@keyframes webMiniCode{0%,57%,100%{opacity:1}73%,92%{opacity:0}}@keyframes webMiniResponsive{0%,60%,100%{opacity:0;transform:translateY(12px) rotate(8deg)}77%,92%{opacity:1;transform:none}}@keyframes webMiniLaunch{0%,68%,100%{opacity:0;transform:scale(.4)}82%,92%{opacity:1;transform:none}}
@media(max-width:650px){.miniBuildFrame{left:5%;width:91%;top:18px;height:103px;border-radius:7px}.miniBuildChrome{padding:5px;gap:3px}.miniBuildChrome i{width:3px;height:3px}.miniBuiltBrand{font-size:6px;padding:5px 7px;height:17px}.miniBuiltHero{height:47px;padding:7px}.miniBuiltHero i{height:3px;margin-bottom:4px}.miniBuiltHero b{width:18px;height:6px}.miniBuiltHero img{height:33px;width:33px}.miniBuiltTiles{padding:7px;gap:4px}.miniBuiltTiles i{height:13px;border-radius:3px}.miniBuildRobot{width:53px;height:53px;bottom:2px;left:-2px}.miniBuildRobot>b{font-size:9px;padding:3px;top:3px}.miniBuildMobile{width:29px;height:51px;border-radius:7px;bottom:2px;right:0;padding:7px 4px}.miniBuildMobile>i{height:2px;margin-bottom:4px}.miniBuildMobile>span{height:15px;margin-bottom:3px}.miniBuildMobile>b{height:3px;margin-top:3px}.miniBuildDone{height:21px;width:21px;font-size:15px;right:9%;top:8px}}
@media(prefers-reduced-motion:reduce){.webBuildMini *{animation:none!important;opacity:1;transform:none}.miniBuildRobot>b{display:none}}

/* One accessible link covers every part of each service card. */
.serviceGrid .studioCard{cursor:pointer;text-decoration:none;color:inherit;-webkit-tap-highlight-color:#b9f3d133}
.serviceGrid .studioCard:focus-visible{outline:3px solid #d0ffe4;outline-offset:4px}

.servicesCatalog{padding-top:52px}.servicesCatalog h1{font-size:clamp(36px,6vw,72px);line-height:1.1;letter-spacing:-.04em;color:#f2fff7;margin:20px 0 0}.catalogBack{display:inline-block;color:#d1eadc;margin-bottom:28px}html[lang=ar] .socialBack b,html[lang=ar] .socialPostHeadline{line-height:1.45;letter-spacing:0}html[lang=ar] .commerceCheckout span{font-size:10px}html[lang=ar] .commerceReceipt span{font-size:9px;line-height:1.5}