/* Zach Sites option visuals */
.zha{position:relative;display:block;width:100%;aspect-ratio:16/10;border-radius:.65rem;overflow:hidden;background:#0b0e1c;border:1px solid color-mix(in oklab,var(--border) 80%,transparent);container-type:inline-size;isolation:isolate;contain:layout paint style;--ac:var(--accent,#6366f1);--ease:cubic-bezier(.2,.8,.2,1);font-family:inherit;pointer-events:none;user-select:none}
.zha *{box-sizing:border-box}
.zha-bar{position:absolute;inset:0 0 auto 0;height:8.5cqw;display:flex;align-items:center;gap:1.4cqw;padding:0 3cqw;background:#151a2e;border-bottom:1px solid rgba(255,255,255,.06);z-index:5}
.zha-bar i{width:2cqw;height:2cqw;border-radius:50%;background:#3a405c}
.zha-bar i:first-child{background:#e25d5d}.zha-bar i:nth-child(2){background:#e2b45d}.zha-bar i:nth-child(3){background:#5dbb7a}
.zha-bar span{margin-left:2cqw;flex:1;max-width:58%;height:4.6cqw;border-radius:2.3cqw;background:#0b0e1c;color:#8a90ad;font-size:2.6cqw;line-height:4.6cqw;padding:0 2.4cqw;overflow:hidden;white-space:nowrap}
.zha-v{position:absolute;inset:8.5cqw 0 0 0;overflow:hidden;transition:opacity .4s ease}
.zha.out .zha-v{opacity:0}
.zha.rs *, .zha.rs{transition:none!important}
.zha-final{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transform:scale(1.04);transition:opacity .7s ease,transform 1.2s var(--ease);z-index:3}
.zha-chip{position:absolute;left:3cqw;bottom:3cqw;z-index:6;padding:1.1cqw 2.6cqw;border-radius:99px;background:rgba(8,10,22,.82);color:#fff;font-size:3cqw;font-weight:600;line-height:1.2;white-space:nowrap;opacity:0;transform:translateY(2cqw);transition:opacity .4s ease,transform .5s var(--ease);backdrop-filter:blur(4px)}
.zha-cur{position:absolute;left:0;top:0;width:5cqw;height:5cqw;z-index:7;opacity:0;transform:translate(70cqw,40cqw);transition:transform .55s var(--ease),opacity .3s}
.zha-cur svg{width:100%;height:100%;fill:#fff;stroke:#111;stroke-width:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}

/* 1. new website: wireframe to real site */
.zn{background:#0e1222;padding:3cqw 4cqw;transition:background .6s ease}
.zb{display:block;border:1px dashed rgba(160,170,210,.45);border-radius:.8cqw;opacity:0;transform:scale(.9);transition:opacity .35s ease,transform .45s var(--ease),background .5s ease,border-color .5s ease}
.zn-nav{display:flex;align-items:center;gap:2cqw;height:5cqw}
.zn-logo{width:12cqw;height:3.4cqw}.zn-links{display:flex;gap:1.6cqw;margin-left:auto}.zn-links .zb{width:7cqw;height:2cqw}.zn-btn{width:10cqw;height:4cqw;border-radius:2cqw}
.zn-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:4cqw;margin-top:4cqw;height:30cqw}
.zn-copy{display:flex;flex-direction:column;gap:2cqw;justify-content:center}
.zn-t1{height:4.4cqw;width:92%}.zn-t2{height:4.4cqw;width:70%}.zn-t3{height:2cqw;width:84%}.zn-cta{height:5cqw;width:38%;border-radius:2.5cqw}
.zn-img{height:100%}
.zn-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2.4cqw;margin-top:4cqw}.zn-cards .zb{height:12cqw}
.zha.s1 .zn-nav .zb{opacity:1;transform:none}
.zha.s2 .zn-hero .zb{opacity:1;transform:none}
.zha.s3 .zn-cards .zb{opacity:1;transform:none}
.zha.s3 .zn-cards .zb:nth-child(2){transition-delay:.08s}.zha.s3 .zn-cards .zb:nth-child(3){transition-delay:.16s}
.zha.s4 .zn-t1,.zha.s4 .zn-t2{background:#f2efe8;border-color:transparent}
.zha.s4 .zn-t3,.zha.s4 .zn-links .zb,.zha.s4 .zn-logo{background:#8d93ad;border-color:transparent}
.zha.s5 .zn{background:#1a1410}
.zha.s5 .zn-cta,.zha.s5 .zn-btn{background:#c9a24a;border-color:transparent}
.zha.s5 .zn-img{background:linear-gradient(135deg,#6b4b2a,#c9a24a 60%,#efe0b8);border-color:transparent}
.zha.s5 .zn-cards .zb{background:linear-gradient(160deg,#2b2219,#4a3826);border-color:transparent}
.zha.s6 .zha-final{opacity:1;transform:none}
.zha.s7 .zha-chip{opacity:1;transform:none}
.zha--new.s1 .zha-cur{opacity:1;transform:translate(14cqw,6cqw)}
.zha--new.s2 .zha-cur{transform:translate(26cqw,22cqw)}
.zha--new.s3 .zha-cur{transform:translate(48cqw,46cqw)}
.zha--new.s4 .zha-cur{transform:translate(20cqw,16cqw)}
.zha--new.s5 .zha-cur{transform:translate(70cqw,26cqw)}
.zha--new.s6 .zha-cur{opacity:0}

/* 2. redesign: dated site wiped into a clean one */
.zr-old{position:absolute;inset:0;background:linear-gradient(#ffff66,#ccff99);font-family:"Times New Roman",Times,serif;color:#000;padding:2.4cqw 3cqw;text-align:center}
.zr-h{margin:0;font-size:5.4cqw;font-weight:700;color:#d40000;text-shadow:.3cqw .3cqw 0 #00f;font-family:"Comic Sans MS","Comic Sans",cursive}
.zr-mq{margin:1.6cqw 0;overflow:hidden;white-space:nowrap;background:#000080;color:#ff0;font-size:3cqw;padding:.6cqw 0}
.zr-mq span{display:inline-block;padding-left:100%}
.zha--redesign.is-play .zr-mq span{animation:zrMq 6s linear infinite}
@keyframes zrMq{to{transform:translateX(-100%)}}
.zr-b{display:flex;gap:3cqw;text-align:left;align-items:flex-start}
.zr-img{flex:0 0 26cqw;height:19cqw;border:.6cqw outset #999;background:#ddd;color:#666;font-size:2.6cqw;display:grid;place-items:center;text-align:center}
.zr-b p{margin:0;font-size:3.4cqw;line-height:1.25}
.zr-b u{color:#00e}
.zr-hr{display:block;height:1cqw;margin:2.4cqw 0 1.2cqw;background:linear-gradient(90deg,red,orange,yellow,green,blue,violet)}
.zr-f{margin:0;font-size:2.6cqw;color:#333}
.zr-new{position:absolute;inset:0;clip-path:inset(0 100% 0 0);transition:clip-path 1.6s cubic-bezier(.65,0,.35,1);z-index:2}
.zr-new img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.zr-line{position:absolute;top:0;bottom:0;left:0;width:.7cqw;background:#fff;box-shadow:0 0 3cqw 1cqw rgba(140,150,255,.7);z-index:3;opacity:0;transform:translateX(-1cqw);transition:transform 1.6s cubic-bezier(.65,0,.35,1),opacity .2s}
.zha--redesign.s1 .zr-old{animation:zrShake .3s steps(3) 1}
@keyframes zrShake{33%{transform:translate(.6cqw,-.4cqw)}66%{transform:translate(-.6cqw,.4cqw)}}
.zha--redesign.s2 .zr-new{clip-path:inset(0 0 0 0)}
.zha--redesign.s2 .zr-line{opacity:1;transform:translateX(100cqw)}
.zha--redesign.s3 .zr-line{opacity:0}
.zr-cb{opacity:1;transform:none;background:#7a0000}
.zha--redesign.s2 .zr-cb{opacity:0}
.zha--redesign.s3 .zr-ca{opacity:1;transform:none}

/* 3. online store: grid fills, cart ticks, checkout */
.zha-v.zs{background:#f6f1e9;padding:2.6cqw 4cqw;color:#2a2018}
.zs-h{display:flex;align-items:center;justify-content:space-between;height:6cqw;border-bottom:1px solid rgba(0,0,0,.08)}
.zs-h b{font-size:3.6cqw;font-family:Georgia,serif;letter-spacing:.06em}
.zs-cart{position:relative;width:5cqw;height:5cqw}
.zs-cart svg{width:100%;height:100%;fill:none;stroke:#2a2018;stroke-width:1.4}
.zs-cart em{position:absolute;right:-1.6cqw;top:-1.2cqw;width:3.6cqw;height:3.6cqw;border-radius:50%;background:#c2185b;color:#fff;font-style:normal;font-size:2.4cqw;line-height:3.6cqw;text-align:center;overflow:hidden;transform:scale(.9);transition:transform .25s}
.zs-cart em span{display:block;height:3.6cqw;transition:transform .35s var(--ease)}
.zs-g{display:grid;grid-template-columns:repeat(3,1fr);gap:2.6cqw;margin-top:3cqw}
.zs-p{background:#fff;border-radius:1.2cqw;padding:1.6cqw;box-shadow:0 .4cqw 1.6cqw rgba(0,0,0,.06);opacity:0;transform:translateY(3cqw);transition:opacity .4s ease,transform .5s var(--ease);transition-delay:calc(var(--n) * .09s)}
.zs-pi{display:block;aspect-ratio:1;border-radius:.8cqw;background:#ebe4d8 url(/solarity/brand/anim/store-products.webp) no-repeat;background-size:0 0;transition:background-size 0s}
.zs-pt,.zs-pp{display:block;height:1.8cqw;margin-top:1.4cqw;border-radius:.6cqw;background:#ebe4d8;width:80%}
.zs-pp{width:45%}
.zs-add{display:block;margin-top:1.4cqw;text-align:center;font-size:2.6cqw;padding:.9cqw 0;border-radius:2cqw;background:#2a2018;color:#fff;opacity:0;transition:opacity .3s,transform .2s,background .2s}
.zs-co{position:absolute;left:50%;bottom:4cqw;z-index:2;transform:translate(-50%,8cqw);opacity:0;padding:1.6cqw 4cqw;border-radius:3cqw;background:#25d366;color:#05301a;font-size:3cqw;white-space:nowrap;transition:transform .5s var(--ease),opacity .4s;box-shadow:0 1cqw 3cqw rgba(37,211,102,.35)}
.zha--store.s1 .zs-p{opacity:1;transform:none}
.zha--store.s2 .zs-p:nth-child(-n+2) .zs-pi,.zha--store.s3 .zs-pi{background-size:300% 100%}
.zs-p:nth-child(1) .zs-pi{background-position:0 0}.zs-p:nth-child(2) .zs-pi{background-position:50% 0}.zs-p:nth-child(3) .zs-pi{background-position:100% 0}
.zha--store.s4 .zs-pt{background:#2a2018;width:70%}.zha--store.s4 .zs-pp{background:#c2185b;width:35%}.zha--store.s4 .zs-add{opacity:1}
.zha--store.s5 .zs-cart em span{transform:translateY(-100%)}
.zha--store.s6 .zs-cart em span{transform:translateY(-200%)}
.zha--store.s7 .zs-cart em span{transform:translateY(-300%)}
.zha--store.s5 .zs-p:nth-child(1) .zs-add,.zha--store.s6 .zs-p:nth-child(2) .zs-add,.zha--store.s7 .zs-p:nth-child(3) .zs-add{background:#c2185b}
.zha--store.s8 .zs-co{opacity:1;transform:translate(-50%,0)}
.zha--store.s9 .zha-final{opacity:1;transform:none}
.zha--store.s9 .zha-chip{opacity:1;transform:none}
.zha--store.s4 .zha-cur{opacity:1;transform:translate(16cqw,44cqw)}
.zha--store.s5 .zha-cur{transform:translate(16cqw,47cqw)}
.zha--store.s6 .zha-cur{transform:translate(46cqw,47cqw)}
.zha--store.s7 .zha-cur{transform:translate(76cqw,47cqw)}
.zha--store.s8 .zha-cur{transform:translate(52cqw,54cqw)}
.zha--store.s9 .zha-cur{opacity:0}

/* 4. booking: basic link into an own booking site */
.zk-old{position:absolute;inset:0;background:#fff;color:#333;font-family:Arial,Helvetica,sans-serif;padding:3cqw 6cqw;transition:opacity .6s ease,transform .8s var(--ease),filter .6s}
.zk-t{margin:0;font-size:4cqw;font-weight:700}.zk-s{margin:.6cqw 0 2cqw;font-size:2.6cqw;color:#888}
.zk-r{display:flex;align-items:center;gap:2cqw;border:1px solid #e3e3e3;border-radius:.8cqw;padding:1.6cqw 2cqw;margin-bottom:1.4cqw;font-size:2.8cqw}
.zk-r span{flex:1}.zk-r small{color:#999;font-size:2.4cqw}.zk-r b{background:#e9e9e9;color:#555;padding:.6cqw 2.4cqw;border-radius:.6cqw;font-weight:400}
.zk-pw{position:absolute;bottom:2cqw;right:4cqw;margin:0;font-size:2.2cqw;color:#bbb}
.zk-new{position:absolute;inset:0;opacity:0;transform:scale(1.08);transition:opacity .8s ease,transform 1s var(--ease);z-index:2;overflow:hidden}
.zk-new img{display:block;width:100%;height:auto;transition:transform 2.2s cubic-bezier(.45,0,.25,1)}
.zk-toast{position:absolute;right:3cqw;top:3cqw;z-index:4;display:flex;align-items:center;gap:1.4cqw;padding:1.4cqw 2.6cqw;border-radius:1.4cqw;background:#111;color:#fff;font-size:2.8cqw;opacity:0;transform:translateY(-3cqw);transition:opacity .4s,transform .5s var(--ease)}
.zk-toast svg,.zc-list i svg{width:3cqw;height:3cqw;fill:none;stroke:#4ade80;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.zk-cb{opacity:1;transform:none}
.zha--booking.s1 .zk-r b{background:#d6d6d6}
.zha--booking.s2 .zk-old{opacity:0;transform:scale(.92);filter:blur(2px)}
.zha--booking.s2 .zk-new{opacity:1;transform:none}
.zha--booking.s2 .zk-cb{opacity:0}
.zha--booking.s3 .zk-new img{transform:translateY(-34%)}
.zha--booking.s3 .zk-ca{opacity:1;transform:none}
.zha--booking.s4 .zk-toast{opacity:1;transform:none}

/* 5. care plan: dashboard checks */
.zc{display:flex;background:#0f1424;color:#dfe3f5}
.zc-side{width:9cqw;background:#141a2e;display:flex;flex-direction:column;gap:2.4cqw;padding:3cqw 2.6cqw}
.zc-side i{display:block;height:3.6cqw;border-radius:.8cqw;background:#262d48}.zc-side i:first-child{background:color-mix(in oklab,var(--ac) 70%,#262d48)}
.zc-main{flex:1;padding:3cqw 4cqw;display:grid;grid-template-columns:1.25fr 1fr;gap:3cqw;align-items:start}
.zc-card{background:#151b31;border:1px solid rgba(255,255,255,.06);border-radius:1.4cqw;padding:2.4cqw}
.zc-card p{margin:0 0 1.6cqw;font-size:2.8cqw;color:#9aa1c0}
.zc-card svg{display:block;width:100%;height:26cqw}
.zc-grid{stroke:rgba(255,255,255,.06);stroke-width:1;fill:none}
.zc-l1,.zc-l2{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s cubic-bezier(.45,0,.25,1);vector-effect:non-scaling-stroke}
.zc-l1{stroke:#7c83ff}.zc-l2{stroke:#4ade80;transition-delay:.2s}
.zc-list{list-style:none;margin:0;padding:0;display:grid;gap:1.8cqw}
.zc-list li{display:flex;align-items:center;gap:1.6cqw;font-size:2.9cqw;padding:1.6cqw 2cqw;border-radius:1.2cqw;background:#151b31;color:#6f7696;transition:color .3s,background .3s}
.zc-list i{flex:0 0 3.8cqw;height:3.8cqw;border-radius:50%;border:1px solid #39405f;display:grid;place-items:center;transition:background .3s,border-color .3s}
.zc-list i svg{opacity:0;transform:scale(.4);transition:opacity .25s,transform .35s var(--ease)}
.zha--care.s1 .zc-l1,.zha--care.s1 .zc-l2{stroke-dashoffset:0}
.zha--care.s2 .zc-list li:nth-child(1),.zha--care.s3 .zc-list li:nth-child(2),.zha--care.s4 .zc-list li:nth-child(3),.zha--care.s5 .zc-list li:nth-child(4){color:#e8ebf8;background:#18213a}
.zha--care.s2 .zc-list li:nth-child(1) i,.zha--care.s3 .zc-list li:nth-child(2) i,.zha--care.s4 .zc-list li:nth-child(3) i,.zha--care.s5 .zc-list li:nth-child(4) i{background:rgba(74,222,128,.15);border-color:#4ade80}
.zha--care.s2 .zc-list li:nth-child(1) svg,.zha--care.s3 .zc-list li:nth-child(2) svg,.zha--care.s4 .zc-list li:nth-child(3) svg,.zha--care.s5 .zc-list li:nth-child(4) svg{opacity:1;transform:none}
.zha--care.s6 .zha-chip{opacity:1;transform:none}

/* 6. SEO: your business climbs the results (no numbers) */
.zq{background:#fff;color:#202124;padding:3cqw 5cqw}
.zq-s{display:flex;align-items:center;gap:1.6cqw;height:7cqw;padding:0 2.6cqw;border-radius:99px;border:1px solid #dfe1e5;box-shadow:0 1px 4px rgba(32,33,36,.12);font-size:3cqw;color:#202124;max-width:70cqw}
.zq-s svg{width:3.4cqw;height:3.4cqw;fill:none;stroke:#5f6368;stroke-width:1.6;stroke-linecap:round}
.zq-ty{display:inline-block;overflow:hidden;white-space:nowrap;max-width:0;border-right:1px solid #202124;transition:max-width .9s steps(13)}
.zha--seo.s1 .zq-ty{max-width:40cqw;border-right-color:transparent}
.zq-list{position:relative;margin-top:3.2cqw;height:46cqw}
.zq-r{position:absolute;left:0;right:0;height:10.4cqw;padding:1.2cqw 2cqw;border-radius:1.4cqw;transition:top .7s cubic-bezier(.2,.8,.2,1),background .4s,box-shadow .4s;top:calc(var(--p) * 11.4cqw)}
.zq-r small{display:block;font-size:2.2cqw;color:#5f6368}
.zq-r b{display:block;font-size:3.2cqw;font-weight:500;color:#1a0dab;margin:.3cqw 0 .8cqw}
.zq-r i{display:block;height:1.3cqw;border-radius:1cqw;background:#e8eaed;margin-top:.7cqw;width:86%}.zq-r i+i{width:60%}
.zq-a{--p:0}.zq-b{--p:1}.zq-c{--p:2}.zq-y{--p:3}
.zha--seo.s2 .zq-y{--p:2}.zha--seo.s2 .zq-c{--p:3}
.zha--seo.s3 .zq-y{--p:1}.zha--seo.s3 .zq-b{--p:2}
.zha--seo.s4 .zq-y{--p:0}.zha--seo.s4 .zq-a{--p:1}
.zha--seo.s2 .zq-y{background:#f1f4ff}
.zha--seo.s4 .zq-y{background:#eef1ff;box-shadow:0 0 0 2px #3538f5}
.zha--seo.s5 .zha-chip{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){.zha *{transition:none!important;animation:none!important}}
.zs-grid--vis .zh-tile.is-on .zha{border-color:var(--ac,#6366f1);box-shadow:0 0 0 2px var(--ac,#6366f1)}
@media (max-width:640px){
  .zs-grid--vis .zha-chip{display:none}
}
/* ---- service pages / services cards ---- */
.zha-wrap{max-width:40rem;margin:0 auto}
.zha-wrap .zha{border-radius:1rem;box-shadow:0 1.5rem 3rem -1.5rem rgba(0,0,0,.6)}
.zha-cap{margin:.7rem 0 0;text-align:center;font-size:.85rem;color:var(--muted-foreground)}
.mk-card .zha{margin:-.2rem 0 1rem}
/* v3b start cards: shared start, real end screenshots */
.zk2-card .zha-v.zk2{opacity:1}
.zk2-w{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;z-index:3}
.zk2-w.on{opacity:1}
.zk2-l{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;transform:scale(1.04);transition:transform 6s linear}
.zk2-w.on .zk2-l{transform:scale(1)}
.zk2-wipe{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s cubic-bezier(.65,0,.35,1),transform 6s linear}
.zk2-w.on .zk2-wipe{clip-path:inset(0 0 0 0)}
.zk2-edit{position:absolute;border:2px dashed #a5b4fc;border-radius:.6cqw;background:rgba(99,102,241,.12);animation:zk2p 1s ease-in-out infinite alternate}
@keyframes zk2p{to{opacity:.55}}
.zk2-old{position:absolute;inset:0;background:#f4f4f6;color:#222;padding:5cqw 8cqw;font-size:3cqw;display:grid;gap:1.6cqw;align-content:start}
.zk2-old p{margin:0;font-weight:700;font-size:3.6cqw}
.zk2-old div{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid #ddd;border-radius:1cqw;padding:2cqw 2.6cqw}
.zk2-old b{background:#333;color:#fff;border-radius:.8cqw;padding:.8cqw 2cqw;font-size:2.4cqw}
.zk2-old small{color:#888;font-size:2.4cqw}
.zk2-toast{position:absolute;right:4cqw;bottom:5cqw;display:flex;align-items:center;gap:1.4cqw;background:#0f172a;color:#e7e9f7;font-size:2.8cqw;padding:1.8cqw 2.6cqw;border-radius:1.4cqw;box-shadow:0 1cqw 3cqw rgba(0,0,0,.4);transform:translateY(1cqw);transition:transform .4s}
.zk2-w.on .zk2-toast{transform:none}
.zk2-cur{z-index:6;transition:transform .8s cubic-bezier(.45,0,.25,1),opacity .3s!important}
.zk2-cur.tap svg{animation:zk2t .5s ease .55s}
@keyframes zk2t{50%{transform:scale(.75)}}