/* the phones' project background fades between colours (home-v3.js sets --mb, the halo comes per project) */
@property --mb{syntax:'<color>';inherits:true;initial-value:#1a0c34}
@property --pglow{syntax:'<color>';inherits:true;initial-value:rgba(255,244,250,.15)}
@property --pglow2{syntax:'<color>';inherits:true;initial-value:rgba(255,244,250,.06)}
/* home v3: started 2026-10-27 as a copy of home-v2.css (the page keeps the "v2" class too, so the shared scripts behave the same; v3-only changes go here) */
/* home v2: the middle of the page (projects, services, testimonials) sits on one light lavender block.
   Hero, story, About, process and footer stay dark and untouched. Loaded only by home-v2.html (html.v2). */
html.v2{
  --base:#14082a;          /* the site's dark purple (the page background used everywhere in fx.css) */
  --pink:#f87ed9;          /* the site's pink (end of the logo gradient) */
  --pink-ink:#b5308f;      /* the same pink, deep enough for text on the light block (4.8:1 on the lavender, 5.5:1 on white) */
  --lz-bg:#f3edfa;
  --lz-border:#e2d6f3;
  --lz-ink:#2a1840;        /* headings, 14:1 on the lavender */
  --lz-text:#5a4a70;       /* body text, 6.9:1 on the lavender, 8:1 on white */
  --lz-line:#7b4fc9;
  --lz-card:#fff;
  --lz-fade:200px;
  --hg1:#9a5fe3;           /* heading gradient: the site lilac and pink (#cca3f9, #f87ed9), a shade deeper */
  --hg2:#d93fa8;
}

/* the block: lavender from the projects title to the end of the testimonials; a strip at each end for the growing circles */
html.v2:not(#a):not(#b):not(#c) .light-zone{position:relative;z-index:1;--lz-pad:90vh;--lz-padb:22vh;--lz-ext:100vh;padding-top:var(--lz-pad);padding-bottom:var(--lz-padb);background:var(--lz-bg)}
/* the way out: a strip at the bottom of the block; the ball at the end of the testimonials line grows into the dark over the whole screen, then About fades in to its moving background */
/* the way in: a see-through strip at the top of the block, while a dot at the end of the story line grows over the whole screen (home-v2.js) */
html.v2:not(#a):not(#b):not(#c) .lz-orb2{z-index:1}
html.v2:not(#a):not(#b):not(#c) #about{position:relative;z-index:2}
html.v2:not(#a):not(#b):not(#c) :is(.lz-orb,.lz-orb2){position:fixed;left:0;top:0;z-index:2;width:20px;height:20px;border-radius:50%;background:#ffd23f;opacity:0;pointer-events:none;will-change:transform,width,height}
/* no line running into the projects in v2 */
/* the projects line (projlead.js) comes in from the left edge in this version */
html.v2:not(#a):not(#b):not(#c) .light-zone>:is(.sec-title,#projects,#zoorix,#services,#testimonials){background:none!important}
html.v2:not(#a):not(#b):not(#c) .light-zone :is(.pj-blobs,.sc-blobs){display:none!important}
html.v2:not(#a):not(#b):not(#c) .light-zone .sec-title:has(+ #projects)::before,html.v2:not(#a):not(#b):not(#c) .light-zone .sec-title:has(+ #projects)::after{display:none!important}

/* headings: the first word dark; the last word(s) in the flowing purple-to-pink of the site, one shade deeper for the light block (3.5:1, large text) */
html.v2:not(#a):not(#b):not(#c) .light-zone :is(.sec-title h2,.svs-h1){background:none!important;color:var(--lz-ink)!important;-webkit-text-fill-color:var(--lz-ink)!important;animation:none!important}
html.v2:not(#a):not(#b):not(#c) .light-zone .sec-title h2>.wd>.ch{background:none!important;-webkit-text-fill-color:currentColor!important;color:inherit!important}
html.v2:not(#a):not(#b):not(#c) .light-zone :is(.sec-title h2 em,.svs-h2){font-style:normal;background-image:linear-gradient(90deg,var(--hg1),var(--hg2),var(--hg1))!important;background-size:200% 100%!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important;animation:gradRL 4.5s linear infinite!important}
@media(prefers-reduced-motion:reduce){html.v2:not(#a):not(#b):not(#c) .light-zone :is(.sec-title h2 em,.svs-h2){animation:none!important}}

/* project cards: dark as they are, floating a little over the light block */
html.v2:not(#a):not(#b):not(#c) .light-zone :is(.cfp-card,#zoorix .zx-wrap){box-shadow:0 30px 60px rgba(45,20,80,.25)!important}
html.v2:not(#a):not(#b):not(#c) .light-zone #zoorix.zx-in-stack{box-shadow:none!important;background:none!important}


/* testimonials: white cards, the big quote mark in the site pink */
html.v2:not(#a):not(#b):not(#c) .light-zone .rfc-card{background:var(--lz-card)!important;border:1px solid var(--lz-border)!important;border-radius:44px!important;box-shadow:0 22px 46px -28px rgba(45,20,80,.4)!important;color:var(--lz-text)!important}
html.v2:not(#a):not(#b):not(#c) .light-zone .rfc-card blockquote{color:var(--lz-text)!important}
html.v2:not(#a):not(#b):not(#c) .light-zone .rfc-card blockquote::before{background:none!important;color:var(--pink)!important;-webkit-text-fill-color:var(--pink)!important}
html.v2:not(#a):not(#b):not(#c) .light-zone .rfc-card figcaption{border-color:var(--lz-border)!important}
html.v2:not(#a):not(#b):not(#c) .light-zone .tst-who b{color:var(--lz-ink)!important}
html.v2:not(#a):not(#b):not(#c) .light-zone .tst-who span{color:var(--lz-text)!important}
html.v2:not(#a):not(#b):not(#c) .light-zone .tst-site{display:block;margin-top:3px;font-size:.85rem;font-weight:600;color:var(--pink-ink);text-decoration:none;direction:ltr;text-align:right}
html.v2:not(#a):not(#b):not(#c) .light-zone .tst-site:hover{text-decoration:underline}
html.v2:not(#a):not(#b):not(#c) .light-zone .tst-av{box-shadow:0 0 0 2px var(--lz-border)!important}
html.v2:not(#a):not(#b):not(#c) .light-zone :is(.rfc-prev,.rfc-next){color:var(--lz-line)!important}

/* the connecting line: deep purple and no glow while it runs over the light block; back to the dark look outside it */
html.v2:not(#a):not(#b):not(#c) .light-zone :is(.svs-tail path,.lane2 path,.lane3 path,.zx-flow path,.pl-fill):not(.ln-trk){stroke:var(--lz-line)!important;filter:none!important}
html.v2:not(#a):not(#b):not(#c) .light-zone :is(.svs-tail circle,.lane2 circle,.zx-flow .zf-ball,svg circle.yball.yball.yball){filter:none!important}
html.v2:not(#a):not(#b):not(#c) .plead-line{background:var(--lz-line)!important;box-shadow:none!important;filter:none!important}
html.v2:not(#a):not(#b):not(#c) .plead-ball{filter:none!important;box-shadow:none!important}
/* once the story is done, the dim track ahead of its ball goes, so the ball is where the line ends and grows from there */
html.v2:not(#a):not(#b):not(#c) .story-line .ln-trk{transition:opacity .4s ease}
html.v2:not(#a):not(#b):not(#c) .story.story-done .story-line .ln-trk{opacity:0!important}

/* header over the light block: slides away up; back down on the dark purple when the pointer comes to the top */
html.v2:not(#a):not(#b):not(#c) header{transition:transform .45s cubic-bezier(.2,.8,.2,1),background-color .35s ease,opacity .35s ease!important}
html.v2.hd-away:not(#a):not(#b):not(#c) header{transform:translateY(-140%)!important;opacity:0}
html.v2.hd-peek:not(#a):not(#b):not(#c) header{transform:none!important;opacity:1}
html.v2.hd-peek:not(#a):not(#b):not(#c) header .glass-nav{background:linear-gradient(135deg,rgba(40,18,84,.55),rgba(20,8,42,.5))!important;border-color:rgba(201,166,255,.35)!important;-webkit-backdrop-filter:blur(18px) saturate(1.4)!important;backdrop-filter:blur(18px) saturate(1.4)!important;box-shadow:0 14px 36px -16px rgba(40,10,90,.55)!important}

/* the quick lead bar: dark purple with a slow moving glow, along the bottom of the screen between the avatar and the accessibility
   button; it opens out from the avatar. Heading, fields, button and phone sit in one row (stacked on phones) */
.v2-lead{position:fixed;left:104px;right:96px;bottom:16px;z-index:60;display:flex;align-items:center;gap:clamp(14px,1.6vw,26px);padding:14px 22px 14px 56px;border-radius:26px;overflow:hidden;isolation:isolate;
  background:#1b0c38;border:1px solid rgba(204,163,249,.28);box-shadow:0 30px 60px -26px rgba(10,4,24,.85);color:#ede8f5;
  clip-path:inset(0 100% 0 0 round 26px);opacity:0;transition:clip-path .75s cubic-bezier(.65,0,.2,1),opacity .3s ease}
.v2-lead.on{clip-path:inset(0 0 0 0 round 26px);opacity:1}
.v2-lead[hidden]{display:flex;visibility:hidden}
.v2l-fx{position:absolute;inset:0;z-index:-1;pointer-events:none}
.v2l-fx b{position:absolute;width:40%;aspect-ratio:1;border-radius:50%;filter:blur(40px);opacity:.5}
.v2l-fx b:nth-child(1){right:-5%;top:-120%;background:#8a2be2;animation:v2lA 9s ease-in-out infinite alternate}
.v2l-fx b:nth-child(2){left:30%;top:-80%;background:#f87ed9;opacity:.28;animation:v2lB 11s ease-in-out infinite alternate}
.v2l-fx b:nth-child(3){left:-8%;bottom:-140%;background:#4b2a9a;animation:v2lA 13s ease-in-out infinite alternate-reverse}
@keyframes v2lA{to{transform:translate(30%,20%) scale(1.15)}}
@keyframes v2lB{to{transform:translate(-25%,25%) scale(.9)}}
.v2l-x{position:absolute;top:50%;left:12px;translate:0 -50%;width:32px;height:32px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:20px;line-height:1;cursor:pointer}
.v2l-x:hover{background:rgba(255,255,255,.2)}
.v2-lead h3{flex:0 1 360px;margin:0;font-family:'Rubik',sans-serif;font-size:clamp(.95rem,1.05vw,1.1rem);line-height:1.4;font-weight:700;color:#fff}
.v2-lead h3 em{font-style:normal;background:linear-gradient(90deg,#cca3f9,#f87ed9);-webkit-background-clip:text;background-clip:text;color:transparent}
.v2l-f{flex:1 1 auto;display:grid;grid-template-columns:1fr 1fr 1.6fr auto;gap:10px;align-items:center;min-width:0}
.v2l-f label{display:block;min-width:0}
.v2l-f label span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.v2l-f input{width:100%;box-sizing:border-box;height:46px;padding:0 14px;border-radius:14px;border:1px solid rgba(204,163,249,.3);background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:.98rem;outline:none;transition:border-color .2s,background .2s}
.v2l-f input::placeholder{color:rgba(237,232,245,.55)}
.v2l-f input:focus{border-color:#cca3f9;background:rgba(255,255,255,.13)}
.v2l-err{position:absolute;left:56px;bottom:2px;margin:0;font-size:.8rem;color:#ffb3d9}
.v2l-go{height:46px;padding:0 26px;justify-content:center;border:0;cursor:pointer;background:#ffd23f!important;color:#14082a!important;font-weight:800;white-space:nowrap}
.v2l-go[disabled]{opacity:.7;cursor:wait}
.v2l-tel{flex:0 0 auto;display:flex;align-items:center;gap:8px;color:#ede8f5;text-decoration:none;font-size:.92rem;white-space:nowrap}
.v2l-tel b{color:#ffd23f}
.v2l-tel:hover b{text-decoration:underline}
@media(max-width:1180px){.v2l-tel span{display:none}.v2-lead h3{flex-basis:260px}}
@media(max-width:900px){
  .v2-lead{left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom,0px));flex-direction:column;align-items:stretch;gap:12px;padding:20px 16px 16px;border-radius:24px;clip-path:inset(100% 0 0 0 round 24px)}
  .v2-lead.on{clip-path:inset(0 0 0 0 round 24px)}
  .v2l-x{top:12px;left:12px;translate:none}
  .v2-lead h3{flex:none;padding-inline-start:36px;font-size:1rem}
  .v2l-f{grid-template-columns:1fr 1fr}.v2l-f .v2l-w,.v2l-go{grid-column:1/-1}
  .v2l-err{position:static;grid-column:1/-1}
  .v2l-tel{justify-content:center}.v2l-tel span{display:inline}
}
@media(prefers-reduced-motion:reduce){.v2-lead{transition:opacity .2s}.v2l-fx b{animation:none}}


/* services: the image cards of the first version, every card with its picture; the open card wider and the closed ones narrower;
   a black fade from the bottom behind light text, and the titles in the first version's purple-to-pink */
html.v2:not(#a):not(#b):not(#c) .light-zone #services .acc-on .srv-card{border-radius:44px!important;border:1px solid var(--lz-border)!important;box-shadow:0 26px 50px -30px rgba(45,20,80,.55)!important}
html.v2:not(#a):not(#b):not(#c) .light-zone #services .acc-on .srv-card.is-open{flex-grow:4.6!important}
html.v2:not(#a):not(#b):not(#c) .light-zone #services .acc-on .srv-card:not(.is-open) .srv-shade{background:linear-gradient(0deg,rgba(0,0,0,.85),rgba(0,0,0,.35) 45%,rgba(0,0,0,.25))!important}
html.v2:not(#a):not(#b):not(#c) .light-zone #services .acc-on .srv-card.is-open .srv-shade{background:linear-gradient(0deg,rgba(0,0,0,.94) 0,rgba(0,0,0,.72) 30%,rgba(0,0,0,.18) 62%,rgba(0,0,0,0) 80%)!important}
html.v2:not(#a):not(#b):not(#c) .light-zone #services .srv-card :is(.srv-txt h3,.srv-vt){background-image:linear-gradient(90deg,#cca3f9,#f87ed9,#cca3f9)!important;background-size:200% 100%!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important;animation:gradRL 4.5s linear infinite!important}
html.v2:not(#a):not(#b):not(#c) .light-zone #services .srv-card .srv-vt{background-image:linear-gradient(180deg,#cca3f9,#f87ed9,#cca3f9)!important;background-size:100% 200%!important}
html.v2:not(#a):not(#b):not(#c) .light-zone #services .srv-card .srv-txt p{color:rgba(255,255,255,.88)!important}
@media(prefers-reduced-motion:reduce){html.v2:not(#a):not(#b):not(#c) .light-zone #services .srv-card :is(.srv-txt h3,.srv-vt){animation:none!important}}
/* while the dot grows, the story line fades so nothing hangs below it */
html.v2:not(#a):not(#b):not(#c) .story .story-line{transition:opacity .5s ease}
html.v2.lz-orbing:not(#a):not(#b):not(#c) .story .story-line{opacity:0!important}
/* the services line runs up out of the slide to the last project card, so the slide doesn't clip it */
html.v2:not(#a):not(#b):not(#c) .light-zone #services .svs-stage{overflow:visible!important}
/* a lighter line: thinner all the way down */
html.v2:not(#a):not(#b):not(#c) :is(.zx-flow path,.proc-lines.draw path,.story-line .sl-fill,.story-line .ln-trk,.svs-tail path,.lane2 path,.lane3 path,.hero-line path,.story-end path,.cta-line path,.pl-fill,.ln-trk){stroke-width:5px!important}
html.v2:not(#a):not(#b):not(#c) :is(.plead-line,.lane3-line){width:5px!important}
/* the open service card: the text stays on the right, its button goes to the bottom left corner */
html.v2:not(#a):not(#b):not(#c) .light-zone #services .acc-on .srv-card .srv-txt{width:100%!important;left:0!important;box-sizing:border-box}
html.v2:not(#a):not(#b):not(#c) .light-zone #services .acc-on .srv-card .srv-txt :is(h3,p){max-width:520px}
html.v2:not(#a):not(#b):not(#c) .light-zone #services .acc-on .srv-card .srv-go{position:absolute!important;left:34px!important;right:auto!important;bottom:34px!important;margin:0!important}
/* the dark parts keep the line of the first version (#34205c); only over the light block is it the light purple */
html.v2:not(#a):not(#b):not(#c) .light-zone :is(.svs-tail path,.lane2 path,.zx-flow path,.pl-fill):not(.ln-trk){stroke:var(--lz-line)!important}
/* more room between About and the process, and the process fades in from the moving background instead of a hard edge */
@media(min-width:901px){html.v2:not(#a):not(#b):not(#c) body[data-page="home"] #about{padding-bottom:240px!important}}
html.v2:not(#a):not(#b):not(#c) body[data-page="home"] #process.proc{background:linear-gradient(180deg,rgba(20,8,42,0) 0,rgba(20,8,42,.75) 160px,var(--base) 320px,var(--base) calc(100% - 200px),rgba(20,8,42,0))!important}
/* the dark dot on the way out stands over the light block (and under About) */
html.v2:not(#a):not(#b):not(#c) .lz-orb2.lz-orb2{z-index:1}
/* the strip at the bottom of the block counts as a dark part, so the moving background runs behind the opening window */
html.v2:not(#a):not(#b):not(#c) .lz-gl{position:absolute;left:0;right:0;bottom:0;height:var(--lz-padb);pointer-events:none}

/* About right after the opening window: no dark fade at its top (the window already shows the moving background) and less room above it */
html.v2:not(#a):not(#b):not(#c) body[data-page="home"] #about::before{display:none!important}
@media(min-width:901px){html.v2:not(#a):not(#b):not(#c) body[data-page="home"] #about{padding-top:150px!important}}
/* the lead bar: centred at the bottom, a little wider than the project cards and clear of the avatar; it slides up while the projects
   are on screen and back down once they've gone */
html.v2:not(#a):not(#b):not(#c) .v2-lead{left:50%!important;right:auto!important;width:min(var(--lw,1240px),calc(100vw - 24px))!important;box-sizing:border-box;bottom:18px!important;z-index:39!important;border-radius:26px!important;border-bottom:1px solid rgba(204,163,249,.28)!important;padding:16px 24px 16px 60px!important;clip-path:none!important;opacity:0;transform:translate(-50%,calc(100% + 40px))!important;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .4s ease!important}
html.v2:not(#a):not(#b):not(#c) .v2-lead.on{opacity:1;transform:translate(-50%,0)!important}
html.v2:not(#a):not(#b):not(#c) .v2l-x{left:14px!important;right:auto!important;top:50%!important;translate:0 -50%!important;width:32px!important;height:32px!important}
html.v2:not(#a):not(#b):not(#c) .v2l-err{left:60px!important}
@media(max-width:900px){
  html.v2:not(#a):not(#b):not(#c) .v2-lead{bottom:calc(84px + env(safe-area-inset-bottom,0px))!important;padding:20px 16px 16px!important}
  html.v2:not(#a):not(#b):not(#c) .v2l-x{top:12px!important;translate:none!important}
}
@media(prefers-reduced-motion:reduce){html.v2:not(#a):not(#b):not(#c) .v2-lead{transition:opacity .2s!important}}
/* the lead bar's layout: the heading on the right in exactly two lines, the fields and the button together in the middle, the × in
   the left corner. Phones: heading on top, the fields one under the other, the button full width */
html.v2:not(#a):not(#b):not(#c) .v2-lead{display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:20px}
html.v2:not(#a):not(#b):not(#c) .v2-lead h3{grid-column:1;justify-self:start;flex:none!important;white-space:nowrap}
html.v2:not(#a):not(#b):not(#c) .v2l-f{grid-column:2;display:grid!important;grid-template-columns:120px 120px 145px auto!important;width:auto}
html.v2:not(#a):not(#b):not(#c) .v2l-go{padding:0 22px!important}
@media(max-width:1320px){html.v2:not(#a):not(#b):not(#c) .v2-lead{grid-template-columns:1fr;justify-items:center}html.v2:not(#a):not(#b):not(#c) .v2-lead h3{grid-column:1;justify-self:center;text-align:center}html.v2:not(#a):not(#b):not(#c) .v2l-f{grid-column:1}}
@media(max-width:900px){
  html.v2:not(#a):not(#b):not(#c) .v2-lead{grid-template-columns:1fr;justify-items:stretch;gap:12px}
  html.v2:not(#a):not(#b):not(#c) .v2-lead h3{white-space:normal;justify-self:stretch;text-align:right;padding-inline-start:36px}
  html.v2:not(#a):not(#b):not(#c) .v2l-f{grid-template-columns:1fr!important;width:100%}
  html.v2:not(#a):not(#b):not(#c) .v2l-f>*{grid-column:1!important}
  html.v2:not(#a):not(#b):not(#c) .v2l-go{width:100%}
}
@media(min-width:1321px){html.v2:not(#a):not(#b):not(#c) .v2-lead{padding-left:56px!important;padding-right:56px!important}html.v2:not(#a):not(#b):not(#c) .v2-lead h3{font-size:.92rem!important}}
/* the header over the light block: lavender glass, dark text, pink for the open item and the arrows, the dark name logo; the yellow
   phone button stays as it is; back to the dark look over the dark parts. The mega menu panel keeps its dark look. */
html.v2:not(#a):not(#b):not(#c) .lz-hd{position:absolute;left:0;right:0;top:var(--lz-pad);bottom:var(--lz-padb);pointer-events:none}
html.v2:not(#a):not(#b):not(#c) header .glass-nav,html.v2:not(#a):not(#b):not(#c) header .dnav a,html.v2:not(#a):not(#b):not(#c) header .burger .bl i,html.v2:not(#a):not(#b):not(#c) header .brand-txt.brand-svg{transition:background-color .3s ease,background .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease,-webkit-backdrop-filter .3s ease,backdrop-filter .3s ease!important}
html.v2.hd-lz:not(#a):not(#b):not(#c) header .glass-nav{background:rgba(243,237,250,.85)!important;-webkit-backdrop-filter:blur(12px)!important;backdrop-filter:blur(12px)!important;border-color:rgba(42,24,64,.1)!important;box-shadow:0 14px 34px -18px rgba(45,20,80,.35)!important}
html.v2.hd-lz:not(#a):not(#b):not(#c) header .dnav a{color:#2a1840!important}
html.v2.hd-lz:not(#a):not(#b):not(#c) header .dnav a svg,html.v2.hd-lz:not(#a):not(#b):not(#c) header .dnav li.on>a{color:var(--pink-ink)!important}
html.v2.hd-lz:not(#a):not(#b):not(#c) header .brand-txt.brand-svg{background-image:url(logo-name-dark.svg)!important}
html.v2.hd-lz:not(#a):not(#b):not(#c) header .burger .bl i{background:#2a1840!important}
html.v2.hd-lz:not(#a):not(#b):not(#c) header .burger .bt{color:#2a1840!important}
/* the lead bar: an even, deep purple (the bright glow on its right side read as childish); the close button is an arrow pointing
   down to the avatar, where the bar goes */
html.v2:not(#a):not(#b):not(#c) .v2-lead{background:#1b0c38!important}
html.v2:not(#a):not(#b):not(#c) .v2l-fx b{opacity:.16!important;filter:blur(50px)!important}
html.v2:not(#a):not(#b):not(#c) .v2l-fx b:nth-child(1){background:#3a1d7a!important}
html.v2:not(#a):not(#b):not(#c) .v2l-fx b:nth-child(2){background:#5a2a9a!important;opacity:.1!important}
html.v2:not(#a):not(#b):not(#c) .v2l-fx b:nth-child(3){background:#2a145e!important}
html.v2:not(#a):not(#b):not(#c) .v2l-x{display:grid;place-items:center;color:#ede8f5}
html.v2:not(#a):not(#b):not(#c) .v2l-x svg{display:block}
html.v2:not(#a):not(#b):not(#c) .v2l-f input{direction:rtl!important;text-align:right!important}
/* the lead bar on wide screens: the heading on the right, the fields stretch over the rest of the bar to its far end; bigger text */
@media(min-width:1101px){
  html.v2:not(#a):not(#b):not(#c) .v2-lead{grid-template-columns:auto minmax(0,1fr)!important;justify-items:stretch!important;padding-left:60px!important;padding-right:28px!important}
  html.v2:not(#a):not(#b):not(#c) .v2-lead h3{grid-column:1!important;justify-self:start!important;text-align:right!important;font-size:1.05rem!important}
  html.v2:not(#a):not(#b):not(#c) .v2l-f{grid-column:2!important;width:100%!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.6fr) auto!important}
  html.v2:not(#a):not(#b):not(#c) .v2l-f input{height:50px!important;font-size:1.08rem!important}
  html.v2:not(#a):not(#b):not(#c) .v2l-go{height:50px!important;font-size:1.08rem!important;padding:0 30px!important}
}
/* no "היי, אפשר לעזור?" bubble next to the avatar in v2 */
html.v2:not(#a):not(#b):not(#c) .bot-tip{display:none!important}
/* the line, all the way down the page: as thin as the ring's outline, and quieter */
html.v2:not(#a):not(#b):not(#c){--lz-line:#c4ace9}
html.v2:not(#a):not(#b):not(#c) :is(.zx-flow path,.proc-lines.draw path,.story-line .sl-fill,.story-line .ln-trk,.svs-tail path,.lane2 path,.lane3 path,.hero-line path,.story-end path,.cta-line path,.pl-fill,.ln-trk){stroke-width:2px!important}
html.v2:not(#a):not(#b):not(#c) :is(.plead-line,.lane3-line){width:2px!important}
/* testimonials: the two arrows sit in soft round buttons, chevrons with no shaft and no outline */
html.v2:not(#a):not(#b):not(#c) .rfc-root .rfc-nav{gap:14px!important}
html.v2:not(#a):not(#b):not(#c) .rfc-root .rfc-nav a{width:52px;height:52px;padding:0!important;border-radius:50%!important;font-size:0!important;border:0!important;background:rgba(123,79,201,.12)!important;color:#7b4fc9!important;transition:background .2s,color .2s,translate .2s}
html.v2:not(#a):not(#b):not(#c) .rfc-root .rfc-nav a::before{content:'';width:11px;height:11px;border-top:2.5px solid currentColor;border-left:2.5px solid currentColor;border-radius:2px}
html.v2:not(#a):not(#b):not(#c) .rfc-root .rfc-nav a.rfc-prev::before{transform:translateX(-2px) rotate(135deg)}
html.v2:not(#a):not(#b):not(#c) .rfc-root .rfc-nav a.rfc-next::before{transform:translateX(2px) rotate(-45deg)}
html.v2:not(#a):not(#b):not(#c) .rfc-root .rfc-nav a:hover{background:rgba(248,126,217,.22)!important;color:#b5308f!important}
/* the lead bar has no close button: the fields run to the left edge of the bar */
@media(min-width:1101px){html.v2:not(#a):not(#b):not(#c) .v2-lead{padding-left:28px!important}}
/* the line: as thick as the ring around the avatar (4px) */
html.v2:not(#a):not(#b):not(#c) :is(.zx-flow path,.proc-lines.draw path,.story-line .sl-fill,.story-line .ln-trk,.svs-tail path,.lane2 path,.lane3 path,.hero-line path,.story-end path,.cta-line path,.pl-fill,.ln-trk){stroke-width:4px!important}
html.v2:not(#a):not(#b):not(#c) :is(.plead-line,.lane3-line){width:4px!important}
/* less empty space at the bottom of the light block (under the testimonials' arrows) */
html.v2:not(#a):not(#b):not(#c) .light-zone{--lz-padb:8vh}
html.v2:not(#a):not(#b):not(#c) .light-zone #testimonials{padding-bottom:40px!important}
/* the contact box: see-through glass (no pink fill), light text; it widens to the full screen width as it reaches the middle of the screen
   and narrows back to a box on the way to the footer (home-v2.js sets the side margins) */
html.v2:not(#a):not(#b):not(#c) #contact .contact.ct,html.v2:not(#a):not(#b):not(#c) #contact .contact.ct.hit,html.v2:not(#a):not(#b):not(#c) #contact .contact.ct:not(.hit){background:rgba(204,163,249,.10)!important;background-image:none!important;-webkit-backdrop-filter:blur(16px) saturate(150%)!important;backdrop-filter:blur(16px) saturate(150%)!important;box-shadow:inset 0 0 0 1px rgba(230,200,255,.26),inset 0 1px 0 rgba(255,255,255,.18),0 30px 60px -30px rgba(0,0,0,.6)!important;animation:none!important;border-radius:var(--ctr,26px)!important}
html.v2:not(#a):not(#b):not(#c) #contact .contact.ct>*{opacity:1!important;filter:none!important}
html.v2:not(#a):not(#b):not(#c) #contact .contact.ct h2{color:#fff!important;-webkit-text-fill-color:#fff!important;background:none!important}
html.v2:not(#a):not(#b):not(#c) #contact .contact.ct>p,html.v2:not(#a):not(#b):not(#c) #contact .contact.ct :is(.ct-form p,.ct-form label,.ct-form small,.ct-form span:not(.sr)){color:#e6dcf5!important;-webkit-text-fill-color:#e6dcf5!important}
html.v2:not(#a):not(#b):not(#c) #contact .contact.ct .ct-form a{color:#f8a6e6!important;-webkit-text-fill-color:#f8a6e6!important}
html.v2:not(#a):not(#b):not(#c) #contact .ct .ct-form :is(input[type=text],input[type=tel],input[type=email]){background:rgba(255,255,255,.08)!important;border-color:rgba(230,200,255,.32)!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
html.v2:not(#a):not(#b):not(#c) #contact .ct .ct-form input::placeholder{color:rgba(237,232,245,.6)!important;-webkit-text-fill-color:rgba(237,232,245,.6)!important}
html.v2:not(#a):not(#b):not(#c) #contact .ct .ct-form input:focus{background:rgba(255,255,255,.14)!important;border-color:#cca3f9!important;box-shadow:0 0 0 4px rgba(204,163,249,.22)!important}
html.v2:not(#a):not(#b):not(#c) #contact .contact.ct .cta .btn{background:rgba(255,255,255,.08)!important;border:1.5px solid rgba(230,200,255,.4)!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
html.v2:not(#a):not(#b):not(#c) #contact .contact.ct .cta .btn:hover{background:#ffd23f!important;border-color:#ffd23f!important;color:#14082a!important;-webkit-text-fill-color:#14082a!important}
html.v2:not(#a):not(#b):not(#c) #contact .contact.ct .cta .btn svg{stroke:currentColor}
html.v2:not(#a):not(#b):not(#c) #contact .contact.ct :is(hr,.cta){border-color:rgba(230,200,255,.2)!important}
/* the services' "לפרויקטים" buttons look like the projects' "לצפייה בפרויקט": see-through pill, light text and outline, with the turning light on its edge */
html.v2:not(#a):not(#b):not(#c) #services .srv-go{position:relative;background:transparent!important;background-image:none!important;border:1.5px solid rgba(237,232,245,.6)!important;color:#ede8f5!important;-webkit-text-fill-color:#ede8f5!important;box-shadow:none!important;font-weight:800!important;transition:background .2s,border-color .2s,transform .2s}
html.v2:not(#a):not(#b):not(#c) #services .srv-go:hover,html.v2:not(#a):not(#b):not(#c) #services .srv-go:focus-visible{background:rgba(237,232,245,.1)!important;border-color:#ede8f5!important;color:#fff!important;-webkit-text-fill-color:#fff!important;transform:translateY(-2px)}
html.v2:not(#a):not(#b):not(#c) #services .srv-go::before{content:"";position:absolute;inset:-1.5px;border-radius:inherit;padding:2px;background:conic-gradient(from var(--ra),transparent 0 62%,rgba(201,166,255,.6) 72%,#fff 80%,#ff7ad9 86%,transparent 94%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:moreSpin 3.2s linear infinite;pointer-events:none;filter:drop-shadow(0 0 4px rgba(255,122,217,.8))}
@media(prefers-reduced-motion:reduce){html.v2:not(#a):not(#b):not(#c) #services .srv-go::before{animation:none}}
/* About's "לקריאה נוספת" button: see-through like the projects' button, with the turning light on its edge */
html.v2:not(#a):not(#b):not(#c) #about .about-toggle{position:relative;background:transparent!important;background-image:none!important;border:1.5px solid rgba(237,232,245,.6)!important;color:#ede8f5!important;-webkit-text-fill-color:#ede8f5!important;box-shadow:none!important;animation:none!important;transition:background .2s,border-color .2s,transform .2s}
html.v2:not(#a):not(#b):not(#c) #about .about-toggle:hover,html.v2:not(#a):not(#b):not(#c) #about .about-toggle:focus-visible{background:rgba(237,232,245,.1)!important;border-color:#ede8f5!important;color:#fff!important;-webkit-text-fill-color:#fff!important;transform:translateY(-2px)}
html.v2:not(#a):not(#b):not(#c) #about .about-toggle::before{content:"";position:absolute;inset:-1.5px;border-radius:inherit;padding:2px;background:conic-gradient(from var(--ra),transparent 0 62%,rgba(201,166,255,.6) 72%,#fff 80%,#ff7ad9 86%,transparent 94%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:moreSpin 3.2s linear infinite;pointer-events:none;filter:drop-shadow(0 0 4px rgba(255,122,217,.8))}
@media(prefers-reduced-motion:reduce){html.v2:not(#a):not(#b):not(#c) #about .about-toggle::before{animation:none}}

/* ===== home v3: the projects on one full-screen stage (desktop; home-v3.js builds it and adds .v3p) =====
   the first project comes up as a card and grows to fill the screen; after that the projects follow one another on the same stage:
   only the purple of the background changes between them, and each project's parts slide in from the right (screen, mark, texts) */
@media(min-width:901px){
  html.v3.v3p:not(#a):not(#b):not(#c) #pstage{position:relative!important;height:var(--v3h,900vh)!important;padding:0!important;margin:0!important}
  html.v3.v3p:not(#a):not(#b):not(#c) #pstage>.cfp-a{display:none!important}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage{position:sticky;top:0;height:100vh;overflow:hidden;z-index:3;will-change:clip-path}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-bg{position:absolute;inset:0;background:radial-gradient(60% 70% at 18% 60%,rgba(255,122,217,.10),transparent 70%),radial-gradient(55% 65% at 85% 25%,rgba(160,110,255,.16),transparent 70%),var(--v3c,#2b1652)}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage>:is(.cfp-card,#zoorix){position:absolute!important;left:50%!important;top:50%!important;width:min(1250px,calc(100vw - 160px))!important;max-width:none!important;margin:0!important;translate:-50% -50%!important;transform:none!important;filter:none!important;opacity:1!important;background:transparent!important;background-image:none!important;box-shadow:none!important;border:0!important;overflow:visible!important;z-index:1!important}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage>:is(.cfp-card,#zoorix)::before,html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage>:is(.cfp-card,#zoorix)::after{display:none!important}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage #zoorix .zx-wrap{background:transparent!important;box-shadow:none!important;border:0!important}
  /* the parts are moved by home-v3.js; no transitions of their own, so they follow the scroll exactly */
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .v3-part{transition:none!important;animation-delay:0s}
  /* the line beside the numbers belongs to the old stack */
  html.v3.v3p:not(#a):not(#b):not(#c) :is(svg.plead,.plead-line,.plead-ball){display:none!important}
}
/* the contact glass also opens up and down as it widens: the glass is a layer behind the content that grows past the box's top and bottom (the content stays where it is) */
@media(min-width:901px){
  html.v2:not(#a):not(#b):not(#c) #contact .contact.ct,html.v2:not(#a):not(#b):not(#c) #contact .contact.ct.hit,html.v2:not(#a):not(#b):not(#c) #contact .contact.ct:not(.hit){background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;overflow:visible!important;isolation:isolate}
  html.v2:not(#a):not(#b):not(#c) #contact .contact.ct::before{content:""!important;display:block!important;position:absolute!important;inset:calc(var(--cty,0px) * -1) 0!important;z-index:-1!important;border-radius:var(--ctr,26px)!important;background:rgba(204,163,249,.10)!important;-webkit-backdrop-filter:blur(16px) saturate(150%)!important;backdrop-filter:blur(16px) saturate(150%)!important;box-shadow:inset 0 0 0 1px rgba(230,200,255,.26),inset 0 1px 0 rgba(255,255,255,.18),0 30px 60px -30px rgba(0,0,0,.6)!important;clip-path:none!important;opacity:1!important;transform:none!important;animation:none!important;pointer-events:none}
}
@media(min-width:901px){html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage #zoorix .zx-wrap::before,html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage #zoorix .zx-wrap::after{display:none!important}}
/* no progress bars under the avatar in the story (the growing bar made a jump) */
html.v2:not(#a):not(#b):not(#c) .sav-bars{display:none!important}
/* the screens grow toward the outer side, away from the texts */
@media(min-width:901px){html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage :is(.cfp-card>.pimg,#zoorix .zx-scene,#zoorix .zx-out){transform-origin:100% 50%!important}}
/* no glass box behind Zoorix on the stage: it sits right on the purple like the others */
@media(min-width:901px){html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage #zoorix .zx-wrap{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}
@media(min-width:901px){
  /* the project numbers in a plain see-through colour: the gradient clipped to the text broke while the number moves and showed a block */
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .pnum{background:none!important;background-image:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;color:rgba(237,232,245,.24)!important;-webkit-text-fill-color:rgba(237,232,245,.24)!important}
  /* the taxi road video runs the full height of the screen (1.276 = the card's and the screens' growth on the stage), keeps its shape, and fades only toward the texts */
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .ptaxi .pimg .vbox{--vh:calc(100vh / 1.276);top:calc(50% - var(--vh) / 2)!important;bottom:auto!important;height:var(--vh)!important;left:auto!important;right:-6%!important;width:auto!important;aspect-ratio:16/9!important;translate:none!important;-webkit-mask-image:linear-gradient(to left,transparent 0,#000 22%)!important;mask-image:linear-gradient(to left,transparent 0,#000 22%)!important}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .ptaxi .pimg .vbox :is(video,img){width:100%!important;height:100%!important;object-fit:cover!important;object-position:50% 50%!important;left:0!important;top:0!important;translate:none!important}
}
@media(min-width:901px){
  /* the road video's own zoom from the card is not needed on the stage: it is already screen-high */
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .ptaxi .pimg .vbox{scale:1!important}
  /* Trigo: the upright phone is shown whole and bigger (on the card it hides half below the edge) */
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .cfp-card.ptrigo .pimg .tg-ph{width:31%!important;right:-12%!important;top:50%!important;bottom:auto!important;translate:0 -50%!important}
}
/* the phone in the middle of the road video sits at about a third of the screen (the video's own box is scaled 1.276 on the stage) */
@media(min-width:901px){html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .ptaxi .pimg .vbox{translate:22vw 0!important}}
/* the yellow border that runs round the contact glass from where the line meets it (drawn by home-v2.js / home-v3.js) */
html.v2:not(#a):not(#b):not(#c) #contact .contact .ct-border{position:absolute;left:0;right:0;top:calc(var(--cty,0px) * -1);bottom:calc(var(--cty,0px) * -1);width:100%;height:calc(100% + 2 * var(--cty,0px));overflow:visible;pointer-events:none;z-index:2}
html.v2:not(#a):not(#b):not(#c) #contact .contact .ct-border path{fill:none;stroke:#ffd23f;stroke-width:2.5;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(255,210,63,.75));transition:stroke-dashoffset 1.5s cubic-bezier(.45,0,.2,1)}
@media(max-width:900px){html.v2:not(#a):not(#b):not(#c) #contact .contact .ct-border{display:none}}
@media(prefers-reduced-motion:reduce){html.v2:not(#a):not(#b):not(#c) #contact .contact .ct-border path{transition:none}}
/* AUTO 360 on the stage: the screen and the car bigger, growing away from the texts (as much as the screen width leaves room for) */
@media(min-width:901px){html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .pa3 .a3{scale:1.08;transform-origin:100% 50%}}
@media(min-width:1540px){html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .pa3 .a3{scale:1.2}}
@media(min-width:1800px){html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .pa3 .a3{scale:1.3}}
@media(min-width:901px){
  /* taxi on the stage: a smaller road video with soft edges all round, and the texts on top of it */
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .ptaxi .pimg .vbox{--vh:calc(74vh / 1.276);translate:16vw 0!important;-webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%)!important;mask-image:radial-gradient(closest-side,#000 62%,transparent 100%)!important;-webkit-mask-size:100% 100%!important;mask-size:100% 100%!important}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .ptaxi>.pinfo{position:relative!important;z-index:3!important}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .ptaxi>.pimg{z-index:1!important}
}
/* on the stage the texts always pass above the screens */
@media(min-width:901px){html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .cfp-card>.pinfo,html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage #zoorix .zx-txt{position:relative!important;z-index:5!important}}
/* LiaMOR on the stage: the screen and the couple bigger, growing away from the texts (as much as the screen width leaves room for) */
@media(min-width:901px){html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .plia .lia{scale:1.03;transform-origin:100% 50%}}
@media(min-width:1540px){html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .plia .lia{scale:1.17}}
@media(min-width:1800px){html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .plia .lia{scale:1.27}}
@media(min-width:901px){
  /* dining rooms on the stage: the dashboard, the QR and the plate bigger, growing away from the texts (as much as the width leaves room for) */
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .cfp-card .pimg>.dsc{scale:1.03;transform-origin:100% 50%}
}
@media(min-width:1540px){html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .cfp-card .pimg>.dsc{scale:1.17}}
@media(min-width:1800px){html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .cfp-card .pimg>.dsc{scale:1.27}}
/* the lead strip at the bottom is narrower in this version */
html.v3:not(#a):not(#b):not(#c) .v2-lead{width:min(1060px,calc(100vw - 48px))!important}
@media(min-width:901px){
  /* Trigo on the stage: the main picture higher up, the upright phone much bigger and running off the bottom of the screen, the mark behind higher up */
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .cfp-card.ptrigo .pimg>img{translate:0 -11vh!important}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .cfp-card.ptrigo .pimg .tg-ph{width:46%!important;right:-20%!important;top:calc(50% - 7vh)!important;bottom:auto!important;translate:none!important}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .cfp-card.ptrigo>.cf-mark{translate:-50% calc(-50% - 16vh)!important}
}
@media(min-width:901px){
  /* Zoorix on the stage: the screens grow from a point left of their middle (so neither the left edge nor the texts are reached), the phone a little less than the desktop, the cat shrinks toward its feet, the mark behind sits higher */
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage #zoorix .zx-scene{transform-origin:40% 50%!important}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage #zoorix .zx-phone{scale:.9!important}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage #zoorix .zx-out{transform-origin:50% 100%!important}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage #zoorix .zx-mark{translate:0 -14vh!important}
}
/* Zoorix's "לצפייה בפרויקט" button like the other projects' one: see-through pill, light outline, the turning light on its edge */
html.v2:not(#a):not(#b):not(#c) #zoorix .zx-go{position:relative;background:transparent!important;background-image:none!important;border:1.5px solid rgba(237,232,245,.6)!important;color:#ede8f5!important;-webkit-text-fill-color:#ede8f5!important;box-shadow:none!important;animation:none!important}
html.v2:not(#a):not(#b):not(#c) #zoorix .zx-go:hover,html.v2:not(#a):not(#b):not(#c) #zoorix .zx-go:focus-visible{background:rgba(237,232,245,.1)!important;border-color:#ede8f5!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
html.v2:not(#a):not(#b):not(#c) #zoorix .zx-go::after{display:none!important}
html.v2:not(#a):not(#b):not(#c) #zoorix .zx-go::before{content:""!important;display:block!important;position:absolute!important;inset:-1.5px!important;border-radius:inherit!important;padding:2px!important;background:conic-gradient(from var(--ra),transparent 0 62%,rgba(201,166,255,.6) 72%,#fff 80%,#ff7ad9 86%,transparent 94%)!important;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important;-webkit-mask-composite:xor!important;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)!important;animation:moreSpin 3.2s linear infinite!important;pointer-events:none;filter:drop-shadow(0 0 4px rgba(255,122,217,.8))!important;opacity:1!important}
/* the contact box: the process section's dark purple, only a little see-through */
@media(min-width:901px){html.v2:not(#a):not(#b):not(#c) #contact .contact.ct::before{background:rgba(20,8,42,.86)!important}}
/* the contact box's edge: a light line in the buttons' colours along the top and the bottom only (the sides are the screen's edges) */
html.v2:not(#a):not(#b):not(#c) #contact .contact .ct-border path{stroke:url(#ctbg)!important;stroke-width:1.5!important;filter:drop-shadow(0 0 5px rgba(255,122,217,.6))!important}
html.v2:not(#a):not(#b):not(#c) #contact .contact .ct-border path:nth-of-type(n+3){transition-delay:.25s}
@media(min-width:901px){html.v2:not(#a):not(#b):not(#c) #contact .contact.ct::before{box-shadow:0 30px 60px -30px rgba(0,0,0,.6)!important}}
@media(min-width:901px){
  /* AUTO 360 on the stage: the screen (with its round logo) a little higher and to the right, the mark behind higher up */
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .pa3 :is(.a3-dev,.a3-logo){translate:3vw -7vh!important}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .cfp-card.pa3>.cf-mark{translate:-50% calc(-50% - 14vh)!important}
}
/* AUTO 360: the screen a bit lower and a bit bigger (it grows from its top right corner, where the round logo sits) */
@media(min-width:901px){
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .pa3 :is(.a3-dev,.a3-logo){translate:3vw -3vh!important}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .pa3 .a3-dev{scale:1.1!important;transform-origin:100% 0!important}
}
/* on the stage the project descriptions are narrower, so they keep clear of the screens and the road video */
@media(min-width:901px){html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .cfp-card>.pinfo>p{max-width:min(390px,26vw)!important}}
/* the wrapper home-v3.js puts round the AUTO 360, LiaMOR, dining-room and Zoorix scenes to bring their screens to one size and place */
.v3-fit{position:absolute;inset:0;transform-origin:0 0}
/* Zoorix: with its screen brought to the common size, the phone sits over the screen's corner (like the car on AUTO 360) instead of running into the texts */
@media(min-width:901px){html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage #zoorix .zx-phone{translate:-4.5vw 0!important}}
/* Trigo: the main picture bigger, the upright phone smaller and further left, over the picture's right edge */
@media(min-width:901px){
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .cfp-card.ptrigo .pimg>img{translate:-2vw -6vh!important;scale:1.16!important;transform-origin:50% 50%}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .cfp-card.ptrigo .pimg .tg-ph{width:36%!important;right:-4%!important;top:calc(50% - 6vh)!important}
}

/* ===== home v3: the plain header (home-v3.js) ===== */
html.v3:not(#a):not(#b):not(#c) header .v3nav ul{display:flex;gap:clamp(22px,3vw,44px);margin:0;padding:0;list-style:none}
html.v3:not(#a):not(#b):not(#c) header .v3nav a{padding:8px 2px}
html.v3:not(#a):not(#b):not(#c) header .v3-cta{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 24px;border-radius:99px;background:#ffd23f!important;color:#14082a!important;-webkit-text-fill-color:#14082a!important;font-weight:800;font-size:1rem;text-decoration:none;white-space:nowrap;box-shadow:0 8px 20px -10px rgba(255,210,63,.7);transition:background .2s,transform .2s}
html.v3:not(#a):not(#b):not(#c) header .v3-cta:hover,html.v3:not(#a):not(#b):not(#c) header .v3-cta:focus-visible{background:#ffdb5c!important;transform:translateY(-1px)}
html.v3:not(#a):not(#b):not(#c) .mm .mm-links li .mm-kids{display:none!important}
@media(max-width:900px){
  html.v3:not(#a):not(#b):not(#c) header .v3nav{display:none!important}
  html.v3:not(#a):not(#b):not(#c) header .v3-cta{height:36px;padding:0 14px;font-size:.88rem}
  html.v3:not(#a):not(#b):not(#c) header .hd-actions{display:flex;align-items:center;gap:8px}
}

/* ===== home v3: each project's background in a shade of its own brand, all at the same deep darkness, fading into the site purple ===== */
html.v3{--site-purple:#14082a;--pbg-0:#1a0c34;--pbg-1:#2B201C;--pbg-2:#0F1B3D;--pbg-3:#361A0B;--pbg-4:#3A0F16;--pbg-5:#16140F;--pbg-6:#0B2A24}
html.v3 [data-pi="0"]{--project-bg:var(--pbg-0)}   /* 01 taxi: the night purple of its scene */
html.v3 [data-pi="1"]{--project-bg:var(--pbg-1)}   /* 02 LiaMOR: warm mocha */
html.v3 [data-pi="2"]{--project-bg:var(--pbg-2)}   /* 03 labour-ministry chat: navy */
html.v3 [data-pi="3"]{--project-bg:var(--pbg-3)}   /* 04 dining rooms: dark burnt orange */
html.v3 [data-pi="4"]{--project-bg:var(--pbg-4)}   /* 05 AUTO 360: deep wine */
html.v3 [data-pi="5"]{--project-bg:var(--pbg-5)}   /* 06 Trigo: warm charcoal */
html.v3 [data-pi="6"]{--project-bg:var(--pbg-6)}   /* 07 Zoorix: deep emerald */
@media(min-width:901px){
  /* the stage: the site purple underneath, and one layer per project on top of it (home-v3.js turns the current one on) */
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-bg{background:var(--site-purple)!important}
  html.v3.v3p .v3-stage>.v3-pbg{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .6s ease;pointer-events:none;background:radial-gradient(ellipse 64% 82% at 30% 52%,var(--project-bg) 0%,var(--project-bg) 26%,transparent 100%)}
  html.v3.v3p .v3-stage>.v3-pbg.on{opacity:1}
  /* taxi: a faint taxi-yellow glow behind the phone */
  html.v3.v3p .v3-stage>.v3-pbg[data-pi="0"]::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 24% 50%,rgba(245,197,66,.10) 0,transparent 26vw)}
  @media(prefers-reduced-motion:reduce){html.v3.v3p .v3-stage>.v3-pbg{transition:none}}
}
@media(max-width:900px){
  /* phones: the same colour on each project card, behind its picture, fading into the site purple */
  html.v3:not(#a):not(#b):not(#c) #pstage .cfp-card[data-pi],html.v3:not(#a):not(#b):not(#c) #pstage #zoorix[data-pi] .zx-wrap{background:radial-gradient(ellipse 95% 60% at 50% 28%,var(--project-bg) 0%,var(--project-bg) 30%,var(--site-purple) 100%)!important;background-color:var(--site-purple)!important}
}
/* the project backgrounds are even, solid colours (no fade into the purple); AUTO 360 a burgundy; behind each picture a soft light */
html.v3{--pbg-4:#4A1220}
@media(min-width:901px){
  html.v3.v3p .v3-stage>.v3-pbg{background:var(--project-bg)!important}
  html.v3.v3p .v3-stage>.v3-pbg::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 36% 46% at 30% 50%,rgba(255,244,250,.13) 0%,rgba(255,244,250,.05) 45%,transparent 75%)}
}
@media(max-width:900px){
  html.v3:not(#a):not(#b):not(#c) #pstage .cfp-card[data-pi],html.v3:not(#a):not(#b):not(#c) #pstage #zoorix[data-pi] .zx-wrap{background:radial-gradient(ellipse 70% 40% at 50% 26%,rgba(255,244,250,.12) 0%,transparent 75%),var(--project-bg)!important}
}
/* dining rooms: the plate sits further left, over the screen, so it no longer covers the tags */
@media(min-width:901px){html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .d-plate{translate:-6.5vw 0!important}}
/* the project colours are partly see-through: while the stage fills the screen, the light block behind it is see-through too, so a little of the page's moving background shows */
@media(min-width:901px){
  html.v3.v3p .v3-stage>.v3-pbg.on{opacity:.8}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-bg{background:rgba(20,8,42,.35)!important}
  html.v3.v3p.v3-full:not(#a):not(#b):not(#c) .light-zone{background:transparent!important}
}
@media(min-width:901px){
  /* Zoorix: the mark behind sits further right and lower, whole (its frame no longer cuts it); the desktop screen without the three-dot window bar */
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage #zoorix .zx-clip{overflow:visible!important}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage #zoorix .zx-mark{translate:14vw -2vh!important}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage #zoorix .zx-desk .zx-bar{display:none!important}
}
/* dining rooms: the background takes the colour of the side menu in its dashboard */
html.v3{--pbg-3:#323250}
/* while the stage is card-sized (opening and closing) the light block shows behind it, so the stage's own base is the solid site purple then:
   the see-through project colour looks the same as on the full screen over the dark moving background */
@media(min-width:901px){html.v3.v3p:not(.v3-full):not(#a):not(#b):not(#c) .v3-bg{background:var(--site-purple)!important}}
/* LiaMOR: the background a dark version of its own brown-pink (#845A4F from its side menu); its mark behind sits higher */
html.v3{--pbg-1:#3D2722}
@media(min-width:901px){html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .cfp-card.plia>.cf-mark{translate:-50% calc(-50% - 13vh)!important}}
/* the soft light behind each picture can take a project colour: the dining rooms' is orange, like their QR code */
@media(min-width:901px){
  html.v3.v3p .v3-stage>.v3-pbg::before{background:radial-gradient(ellipse 36% 46% at 30% 50%,var(--pglow,rgba(255,244,250,.13)) 0%,var(--pglow2,rgba(255,244,250,.05)) 45%,transparent 75%)!important}
  html.v3.v3p .v3-stage>.v3-pbg[data-pi="3"]{--pglow:rgba(255,138,40,.24);--pglow2:rgba(255,138,40,.08)}
}
@media(max-width:900px){html.v3:not(#a):not(#b):not(#c) #pstage .cfp-card[data-pi="3"]{background:radial-gradient(ellipse 70% 40% at 50% 26%,rgba(255,138,40,.2) 0%,transparent 75%),var(--project-bg)!important}}
/* dining rooms: the plate a little bigger and lower (and a touch further left, so it still keeps off the tags) */
@media(min-width:901px){html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .d-plate{translate:-8vw 5vh!important;scale:1.15!important}}
/* no light block above the projects: the stage comes straight up out of the dark story; the lavender starts only where the stage
   closes back to a card (--v3lav, set in home-v3.js), and the header keeps its dark look until there */
@media(min-width:901px){
  html.v3.v3p:not(#a):not(#b):not(#c) .light-zone{background:linear-gradient(transparent 0,transparent var(--v3lav,0px),var(--lz-bg) var(--v3lav,0px))!important}
  html.v3.v3p.v3-full:not(#a):not(#b):not(#c) .light-zone{background:transparent!important}
  html.v3.v3p:not(#a):not(#b):not(#c) .lz-hd{top:var(--v3lav,var(--lz-pad))}
  html.v3.v3p:not(#a):not(#b):not(#c) .light-zone>.sec-title:has(+ #projects) h2{color:#f4f1ff!important;-webkit-text-fill-color:#f4f1ff!important}
}
/* the contact form on the lilac of the lit process numbers, with dark text */
html.v2.v3:not(#a):not(#b):not(#c) #contact .contact.ct::before{background:#a88bf5!important}
html.v2.v3:not(#a):not(#b):not(#c) #contact .contact.ct h2{color:#14082a!important;-webkit-text-fill-color:#14082a!important}
html.v2.v3:not(#a):not(#b):not(#c) #contact .contact.ct>p,html.v2.v3:not(#a):not(#b):not(#c) #contact .contact.ct :is(.ct-form p,.ct-form label,.ct-form small,.ct-form span:not(.sr)){color:#2a1840!important;-webkit-text-fill-color:#2a1840!important}
html.v2.v3:not(#a):not(#b):not(#c) #contact .contact.ct .ct-form a{color:#14082a!important;-webkit-text-fill-color:#14082a!important;text-decoration:underline}
html.v2.v3:not(#a):not(#b):not(#c) #contact .ct .ct-form :is(input[type=text],input[type=tel],input[type=email]){background:rgba(255,255,255,.3)!important;border-color:rgba(20,8,42,.28)!important;color:#14082a!important;-webkit-text-fill-color:#14082a!important}
html.v2.v3:not(#a):not(#b):not(#c) #contact .ct .ct-form input::placeholder{color:rgba(20,8,42,.62)!important;-webkit-text-fill-color:rgba(20,8,42,.62)!important}
html.v2.v3:not(#a):not(#b):not(#c) #contact .ct .ct-form input:focus{background:rgba(255,255,255,.5)!important;border-color:#14082a!important;box-shadow:0 0 0 4px rgba(20,8,42,.14)!important}
/* the running lines as thick as in version 1 */
html.v2.v3:not(#a):not(#b):not(#c) :is(.story-line .sl-fill,.svs-tail path,.pl-fill){stroke-width:13px!important}
html.v2.v3:not(#a):not(#b):not(#c) :is(.story-line .ln-trk,.lane2 path,.hero-line path,.cta-line path,.ln-trk){stroke-width:13px!important}
html.v2.v3:not(#a):not(#b):not(#c) .proc-lines path{stroke-width:13px!important}   /* the process line as thick as the others */
/* About: a wider text column (no single word left on a line) and tighter lines */
@media(min-width:901px){
  html.v3:not(#a):not(#b):not(#c) body[data-page="home"] #about .about-card{padding-left:56px!important;padding-right:calc(32px + min(48%,740px))!important}
  html.v3:not(#a):not(#b):not(#c) #about :is(.about-card>p,.about-more p){line-height:1.5!important}
}
/* the projects pager: a number and a line per project at the right edge, shown while the stage fills the screen */
@media(min-width:901px){
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-pager{position:absolute;right:30px;top:50%;translate:0 -50%;z-index:8;display:flex;flex-direction:column;align-items:flex-start;gap:6px;opacity:0;pointer-events:none;transition:opacity .4s ease}
  html.v3.v3p.v3-full:not(#a):not(#b):not(#c) .v3-pager{opacity:1;pointer-events:auto}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-pager button{display:flex;align-items:center;gap:10px;padding:6px 0;background:none;border:0;cursor:pointer;color:rgba(244,241,255,.42);font:700 .82rem/1 'Rubik',sans-serif;letter-spacing:.04em;transition:color .35s ease}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-pager button i{display:block;width:14px;height:2px;border-radius:2px;background:currentColor;transition:width .45s cubic-bezier(.45,0,.2,1)}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-pager button:is(:hover,:focus-visible){color:rgba(244,241,255,.8)}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-pager button.on{color:#fff}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-pager button.on i{width:40px;background:#ffd23f}
  @media(prefers-reduced-motion:reduce){html.v3.v3p:not(#a):not(#b):not(#c) .v3-pager :is(button,i){transition:none}}
}
/* Trigo: the upright phone a little smaller and higher, whole above the lead bar */
@media(min-width:901px){html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .cfp-card.ptrigo .pimg .tg-ph{width:31%!important;top:calc(50% - 20vh)!important}}
/* Zoorix: the cat sits higher */
@media(min-width:901px){html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage #zoorix .zx-out{translate:-7.7vw -9vh!important}}
/* LiaMOR: the couple smaller and further left; beside it a phone with the guest's invitation, scrolling slowly through it */
@media(min-width:901px){
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .plia .lia .l.couple{left:36%!important;top:55%!important;width:40%!important;z-index:3}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .plia .v3-lph{position:absolute;left:63%;top:14%;width:21%;aspect-ratio:9/19;z-index:2;border-radius:15% / 7%;padding:2.2%;background:linear-gradient(145deg,#3a3a40,#121216);box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 30px 60px -20px rgba(0,0,0,.65);container-type:inline-size}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .plia .v3-lph-isl{position:absolute;left:50%;top:4.2%;width:30%;height:2.6%;translate:-50% 0;border-radius:99px;background:#000}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .plia .v3-lph-scr{position:relative;width:100%;height:100%;overflow:hidden;border-radius:13% / 6%;background:#fbf7f4;direction:rtl;text-align:center;color:#3D2722;font-family:'Rubik',sans-serif}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .plia .v3-lph-run{padding:0 0 10cqw;animation:v3LphRun 11s ease-in-out infinite}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .plia .v3-lph-top{position:relative;height:62cqw;margin-bottom:9cqw}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .plia .v3-lph-top>img{width:100%;height:100%;object-fit:cover;display:block}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .plia .v3-lph-top>span{position:absolute;left:50%;bottom:-8cqw;translate:-50% 0;width:17cqw;height:17cqw;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 2cqw 5cqw rgba(61,39,34,.2)}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .plia .v3-lph-top>span img{width:60%}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .plia .v3-lph-h{display:block;font-size:7.4cqw;font-weight:700;margin:0 6cqw 1.5cqw}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .plia .v3-lph-scr p{font-size:4.6cqw;margin:0 7cqw 5cqw;color:#7a5a52;line-height:1.35}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .plia .v3-lph-sh{display:block;font-size:5cqw;font-weight:700;margin:0 0 2.5cqw}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .plia .v3-lph-det{display:flex;flex-direction:column;gap:2cqw;margin:0 7cqw 6cqw;font-size:4.4cqw}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .plia .v3-lph-det span{padding:2.4cqw;border-radius:3cqw;background:#f1e8e3}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .plia .v3-lph-rsvp{display:flex;gap:2cqw;margin:0 7cqw 5cqw;font-size:4cqw}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .plia .v3-lph-rsvp span{flex:1;padding:2.6cqw 0;border-radius:99px;border:.5cqw solid #d9c6bf;color:#7a5a52}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .plia .v3-lph-rsvp .yes{animation:v3LphYes 11s ease-in-out infinite}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .plia .v3-lph-gift{display:flex;align-items:center;justify-content:center;gap:2.5cqw;margin:0 7cqw 4cqw;padding:3cqw;border-radius:3cqw;border:.5cqw dashed #c9a79c;font-size:4.2cqw}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .plia .v3-lph-gift img{width:7cqw}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .plia .v3-lph-cta{display:block;margin:0 7cqw;padding:3.6cqw 0;border-radius:99px;background:#845A4F;color:#fff;font-size:4.4cqw;font-weight:700;animation:v3LphCta 11s ease-in-out infinite}
  @keyframes v3LphRun{0%,18%{translate:0 0}45%,80%{translate:0 -48%}100%{translate:0 0}}
  @keyframes v3LphYes{0%,52%{background:none;color:#7a5a52;border-color:#d9c6bf}58%,92%{background:#845A4F;color:#fff;border-color:#845A4F}100%{background:none;color:#7a5a52;border-color:#d9c6bf}}
  @keyframes v3LphCta{0%,64%{scale:1}68%{scale:.94}72%,100%{scale:1}}
  @media(prefers-reduced-motion:reduce){html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .plia :is(.v3-lph-run,.v3-lph-rsvp .yes,.v3-lph-cta){animation:none}}
}
/* About: the "read more" button is only a round arrow (its words stay for screen readers) and it no longer follows the mouse */
html.v2.v3:not(#a):not(#b):not(#c) #about .about-toggle{translate:none!important;width:56px!important;height:56px!important;min-width:0!important;padding:0!important;gap:0!important;justify-content:center!important;border-radius:50%!important}
html.v2.v3:not(#a):not(#b):not(#c) #about .about-toggle .at-t{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}
html.v2.v3:not(#a):not(#b):not(#c) #about .about-toggle .at-ar{width:22px;height:22px}
/* Trigo: the upright phone further right and lower, off the buildings */
@media(min-width:901px){html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .cfp-card.ptrigo .pimg .tg-ph{right:-15%!important;top:calc(50% - 14vh)!important}}
/* the running line from under the projects title down to the project's number (drawn by home-v3.js) */
.v3-plane{display:none}
@media(min-width:901px){
  html.v3.v3p .v3-plane{display:block;position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:6;overflow:visible}
  html.v3.v3p .v3-plane path{fill:none;stroke-width:13px;stroke-linecap:round;stroke-linejoin:round}
  html.v3.v3p .v3-plane .ln-trk{stroke:rgba(255,255,255,.13)}
  html.v3.v3p .v3-plane .pl-run{stroke:#34205c}
  html.v3.v3p .v3-plane circle{fill:#ffd23f;filter:drop-shadow(0 0 8px rgba(255,210,63,.7))}
  /* "נבחרים" in the colours of the logo */
  html.v3.v3p:not(#a):not(#b):not(#c) .light-zone .sec-title h2 em{background-image:linear-gradient(90deg,#cca3f9,#f87ed9,#cca3f9)!important}
}
@media(min-width:901px){
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-pgfade{position:absolute;top:0;bottom:0;right:0;width:190px;z-index:7;pointer-events:none;opacity:0;background:linear-gradient(to left,color-mix(in srgb,var(--pc,#14082a) 85%,#14082a) 0,color-mix(in srgb,var(--pc,#14082a) 85%,#14082a) 45%,transparent 100%);transition:opacity .4s ease,--pc .6s}
  html.v3.v3p.v3-full:not(#a):not(#b):not(#c) .v3-pgfade{opacity:.92}
}
/* the projects line is a quiet see-through white, without its ball once the stage fills the screen */
@media(min-width:901px){
  html.v3.v3p .v3-plane .ln-trk{stroke:rgba(255,255,255,.07)}
  html.v3.v3p .v3-plane .pl-run{stroke:rgba(255,255,255,.16)}
  html.v3.v3p .v3-plane circle{transition:opacity .4s ease}
  html.v3.v3p.v3-full .v3-plane circle{opacity:0}
}
@media(min-width:901px){
  html.v3.v3p .v3-plane.lz .ln-trk{stroke:rgba(196,172,233,.25)}
  html.v3.v3p .v3-plane.lz .pl-run{stroke:var(--lz-line,#c4ace9)}
}
/* the projects line keeps its yellow ball beside the number */
@media(min-width:901px){html.v3.v3p.v3-full .v3-plane circle{opacity:1}}
/* LiaMOR: the invitation phone in a glass frame like Trigo's, the same size, at the big screen's right side; the couple lower and to the right,
   their ring standing on the dark background below the big screen */
@media(min-width:901px){
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .plia .v3-lph{left:71%!important;top:22%!important;width:25%!important;aspect-ratio:428/926!important;padding:1.6%!important;border-radius:clamp(22px,2.4vw,36px)!important;background:linear-gradient(145deg,rgba(255,255,255,.55),rgba(255,255,255,.18) 45%,rgba(255,255,255,.35))!important;-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 30px 50px -20px rgba(20,16,40,.55)!important}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .plia .v3-lph-scr{border-radius:clamp(14px,1.6vw,24px)!important;background:#fdf9f6!important;container-type:inline-size}
  /* only the invitation card of the picture, filling the phone's width, with a little of the confetti above it */
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .plia .v3-lph-scr>img{position:absolute!important;max-width:none!important;width:327.4cqw!important;height:233cqw!important;object-fit:fill!important;padding:0!important;border:0!important;filter:none!important;transform:none!important;animation:none!important;left:-113.8cqw!important;top:-13.6cqw!important;right:auto!important;bottom:auto!important}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .plia .lia .l.couple{left:44%!important;top:70%!important;width:33%!important}
}
/* Zoorix: the phone higher and a little to the right */
@media(min-width:901px){html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage #zoorix .zx-phone{translate:-2.6vw -4.5vh!important}}
/* LiaMOR: the gift box in front of the phone and the big screen */
@media(min-width:901px){html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .plia .lia .l.gift{z-index:5}}
/* the chat phone a little smaller, whole above the lead bar with its typing area */
@media(min-width:901px){html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .cfp-card.pchat .sa-ph{scale:.76;transform-origin:50% 0}}
/* the chat bot's icon: a white speech bubble with sparkles on the blue header */
html.v3:not(#a):not(#b):not(#c) .sa-av.v3-sa-ic{background:none!important;width:44px;height:44px}
html.v3:not(#a):not(#b):not(#c) .sa-av.v3-sa-ic svg{width:44px!important;height:44px!important;fill:#fff!important}
html.v3:not(#a):not(#b):not(#c) .sa-av.v3-sa-ic svg .b{fill:none;stroke:#fff;stroke-width:2.6;stroke-linejoin:round}
/* the chat's answer buttons: one light-blue bar with outline icons, a thin line running on beside it */
html.v3:not(#a):not(#b):not(#c) .sa-fb.v3{align-self:stretch;align-items:center;gap:10px}
html.v3:not(#a):not(#b):not(#c) .sa-fb.v3::before{content:"";flex:1;height:1px;background:#c9d6ee}
html.v3:not(#a):not(#b):not(#c) .sa-fb.v3 .v3-fb{display:flex;align-items:center;gap:6px;width:auto;height:auto;padding:5px 10px;border-radius:9px;background:#e8f0ff;border:1px solid #b9cdf3;animation:none}
html.v3:not(#a):not(#b):not(#c) .sa-fb.v3 svg{width:20px;height:20px;fill:none;stroke:#1e6bff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* the chat's typing box: question at the top with a paperclip, the send arrow below at the left */
html.v3:not(#a):not(#b):not(#c) .sa-home .v3-sa-in{flex:none;display:flex;flex-direction:column;gap:12px;margin:0 14px 16px;padding:12px 14px 10px;border-radius:10px;border:1.5px solid #8fb0ee;background:#fff;color:#1d2433;font-size:.86rem;direction:rtl}
html.v3:not(#a):not(#b):not(#c) .sa-home .v3-sa-in .t{display:flex;align-items:center;gap:6px}
html.v3:not(#a):not(#b):not(#c) .sa-home .v3-sa-in svg{fill:none;stroke:#1e6bff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
html.v3:not(#a):not(#b):not(#c) .sa-home .v3-sa-in .clip{width:15px;height:15px}
html.v3:not(#a):not(#b):not(#c) .sa-home .v3-sa-in .send{width:18px;height:18px;align-self:flex-end;transform:scaleX(-1)}
html.v3:not(#a):not(#b):not(#c) .sa-home .sa-body{padding-bottom:16px!important}
/* LiaMOR: the phone a little lower, with a slimmer frame; the invitation spread over the screen, its brown button at the bottom;
   the couple lower; the left gift up and to the left, over the big screen's corner */
@media(min-width:901px){
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .plia .v3-lph{top:28%!important;padding:.9%!important;border-radius:30px!important}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .plia .v3-lph-scr{border-radius:23px!important;background:#fff!important}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .plia .v3-lph-scr>div{position:absolute;left:0;right:0;overflow:hidden}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .plia .v3-lph-scr .p1{top:0;height:169cqw}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .plia .v3-lph-scr .p2{bottom:4cqw;height:20cqw}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .plia .v3-lph-scr>div>img{position:absolute!important;max-width:none!important;width:327.4cqw!important;height:233cqw!important;object-fit:fill!important;padding:0!important;border:0!important;filter:none!important;transform:none!important;animation:none!important;left:-113.8cqw!important;right:auto!important;bottom:auto!important;top:-13.6cqw!important}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .plia .v3-lph-scr .p2>img{top:-183.4cqw!important}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .plia .lia .l.couple{top:76%!important}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .plia .lia .l.gift.c{left:-7%!important;top:3%!important;width:9%!important}
}
/* the chat phone is whole: its frame and screen round at the bottom too */
@media(min-width:901px){
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .cfp-card.pchat .sa-ph{border-radius:44px!important;padding-bottom:10px!important}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .cfp-card.pchat .sa-home .sa-win{border-radius:34px!important}
}
/* dining rooms: the plate further right and a little smaller; the QR code smaller, just above the plate, with thinner corner lines */
@media(min-width:901px){
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .d-plate{translate:-1.2vw 2.9vh!important;scale:.92!important}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .dsc-scan{translate:-.9vw 9.7vh!important;scale:.55!important}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .dsc-scan path{stroke-width:3px!important}
}
/* the tags go on two rows, no wider than the text above them */
@media(min-width:901px){html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .pinfo>ul{max-width:min(390px,26vw)!important;flex-wrap:wrap!important}}
/* AUTO 360: the white circle without its blue ring, with room around the logo so none of it is cut */
html.v3:not(#a):not(#b):not(#c) .pa3 .a3 .a3-logo{border:0!important;box-shadow:0 10px 26px -8px rgba(0,0,0,.6)!important;padding:3.6%!important}
/* dining rooms: the plate back to its full size; the floating barcode becomes a phone (glass frame like Trigo's) with the app's welcome screen,
   where a scan line runs over the barcode */
@media(min-width:901px){
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .d-plate{scale:1.15!important;z-index:4}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .dsc .dsc-scan{display:none!important}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .dsc .v3-dph{position:absolute;left:74%;top:14%;width:22.2%;z-index:3;padding:.9%;border-radius:30px;background:linear-gradient(145deg,rgba(255,255,255,.55),rgba(255,255,255,.18) 45%,rgba(255,255,255,.35));-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 30px 50px -20px rgba(20,16,40,.55)}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .dsc .v3-dph-scr{position:relative;aspect-ratio:375/812;overflow:hidden;border-radius:23px;background:#1b1b1b}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .dsc .v3-dph-scr>img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;padding:0!important;border:0!important;filter:none!important;transform:none!important;animation:none!important;opacity:1!important}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .dsc .v3-dph-scan{position:absolute;left:39%;width:23%;top:49%;height:2px;border-radius:2px;background:#ff8a2b;box-shadow:0 0 8px 2px rgba(255,138,43,.85);animation:v3DphScan 2.2s ease-in-out infinite alternate}
  @keyframes v3DphScan{from{top:49%}to{top:58.6%}}
  @media(prefers-reduced-motion:reduce){html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .dsc .v3-dph-scan{animation:none}}
}
/* the services line is drawn by the projects line, which runs on down to service 01 - its own copy stays hidden (it still lights the card) */
@media(min-width:901px){html.v3.v3p:not(#a):not(#b):not(#c) .svs-tail{opacity:0!important}}
/* the headings on the light block: their plain words black, their coloured words in the logo's lilac-to-pink (a shade deeper, to read on the light background) */
html.v3:not(#a):not(#b):not(#c) .light-zone{--hg1:#b583f5;--hg2:#f25fcf}
html.v3:not(#a):not(#b):not(#c) .light-zone .sec-title:not(:has(+ #projects)) h2,html.v3:not(#a):not(#b):not(#c) .light-zone .svs-h1{color:#14082a!important;-webkit-text-fill-color:#14082a!important}
/* the chat phone in a phone's proportions: taller, starting higher */
@media(min-width:901px){html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .cfp-card.pchat .pimg .sa-ph{top:3px!important;bottom:auto!important;height:690px!important}}
/* contact: the WhatsApp button turns WhatsApp green when pointed at */
html.v2.v3:not(#a):not(#b):not(#c) #contact .contact.ct .cta .btn[href*="wa.me"]:is(:hover,:focus-visible){background:#25d366!important;border-color:#25d366!important;color:#fff!important;-webkit-text-fill-color:#fff!important;box-shadow:0 10px 24px -10px rgba(37,211,102,.8)!important}
/* the contact form's lilac: light in the middle, going out to the full lilac at the edges */
html.v2.v3:not(#a):not(#b):not(#c) #contact .contact.ct::before{background:radial-gradient(ellipse 60% 75% at 50% 50%,#cdbcfc 0%,#bba3f9 45%,#a88bf5 100%)!important}
/* AUTO 360: a pink halo behind its scene */
@media(min-width:901px){html.v3.v3p .v3-stage>.v3-pbg[data-pi="4"]{--pglow:rgba(255,110,200,.26);--pglow2:rgba(255,110,200,.09)}}
/* every project's text column the same height (set in home-v3.js), so the numbers sit in one place and the buttons in another */
@media(min-width:901px){
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .cfp-card>.pinfo{display:flex!important;flex-direction:column;align-items:flex-start}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .cfp-card>.pinfo>ul{margin-bottom:58px!important}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage :is(.cfp-card>.pinfo>.more,#zoorix .zx-txt>.zx-go){margin-top:auto!important}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage #zoorix .zx-txt{display:flex!important;flex-direction:column;align-items:flex-start}
  /* AUTO 360: three tags on the first row, the dashboard tag goes to the second */
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .pa3 .pinfo>ul{max-width:330px!important}
}
/* contact: the call and WhatsApp buttons in black text on the lilac */
html.v2.v3:not(#a):not(#b):not(#c) #contact .contact.ct .cta .btn{color:#14082a!important;-webkit-text-fill-color:#14082a!important;border-color:rgba(20,8,42,.35)!important}
html.v2.v3:not(#a):not(#b):not(#c) #contact .contact.ct .cta .btn[href*="wa.me"]:is(:hover,:focus-visible){color:#fff!important;-webkit-text-fill-color:#fff!important}
/* Zoorix's text column sits in a differently built card: moved onto the other projects' place (number and button) */
@media(min-width:901px){html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage #zoorix .zx-txt{translate:6.6px 29.1px}}
/* a halo behind the screens of Trigo (its yellow) and Zoorix (its green) */
@media(min-width:901px){
  html.v3.v3p .v3-stage>.v3-pbg[data-pi="5"]{--pglow:rgba(245,197,66,.22);--pglow2:rgba(245,197,66,.07)}
  html.v3.v3p .v3-stage>.v3-pbg[data-pi="6"]{--pglow:rgba(70,215,165,.24);--pglow2:rgba(70,215,165,.08)}
}
/* the halo behind the screens is wider, so it shows around them (above, beside and below), not only behind the big screen */
@media(min-width:901px){
  html.v3.v3p .v3-stage>.v3-pbg::before{background:radial-gradient(ellipse 52% 72% at 31% 50%,var(--pglow,rgba(255,244,250,.15)) 0%,var(--pglow,rgba(255,244,250,.15)) 38%,var(--pglow2,rgba(255,244,250,.06)) 62%,transparent 88%)!important}
}
/* the footer's "selected projects" heading is a link to the projects, looking as it did */
html.v3 footer h4 a.v3-fh{color:inherit;text-decoration:none}
html.v3 footer h4 a.v3-fh:hover{text-decoration:underline}
/* the line from the top (hero and story) in the same quiet see-through white as the projects line it runs into */
html.v2.v3:not(#a):not(#b):not(#c) :is(.story-line .sl-fill,.hero-line path:not(.ln-trk)){stroke:rgba(255,255,255,.16)!important}
/* the project numbers bigger, drawn as a thin see-through outline */
@media(min-width:901px){html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .pnum{font-size:76px!important;line-height:.9!important;color:transparent!important;-webkit-text-fill-color:transparent!important;-webkit-text-stroke:1.2px rgba(237,232,245,.42)!important;background:none!important}}
/* contact: no yellow glow under the call button */
html.v2.v3:not(#a):not(#b):not(#c) #contact .contact.ct .cta .btn[href^="tel:"]{box-shadow:none!important}
html.v2.v3:not(#a):not(#b):not(#c) #contact .contact.ct .cta .btn::after{display:none!important}
/* the contact form in the logo's colours: lilac into pink */
html.v2.v3:not(#a):not(#b):not(#c) #contact .contact.ct::before{background:linear-gradient(120deg,#c9a6ff 0%,#dc93f0 50%,#ff7ad9 100%)!important}
/* on the light block the running lines are a see-through white too (like on the dark parts) */
@media(min-width:901px){
  html.v3.v3p .v3-plane.lz .pl-run{stroke:rgba(255,255,255,.85)}
  html.v3.v3p .v3-plane.lz .ln-trk{stroke:rgba(255,255,255,.35)}
}
html.v2.v3:not(#a):not(#b):not(#c) .light-zone :is(.svs-tail path,.lane2 path,.lane3 path,.zx-flow path,.pl-fill):not(.ln-trk){stroke:rgba(255,255,255,.85)!important}
/* contact: no thin line drawn along the form's top and bottom edges */
html.v2.v3:not(#a):not(#b):not(#c) #contact .contact .ct-border{display:none!important}
html.v3:not(#a):not(#b):not(#c) .hero .lg3d:not(.intro:not(.filled)) .lg3d-l:not(.top):not(.bot) :is(.a,.b){fill-opacity:.22!important}
html.v3:not(#a):not(#b):not(#c) .hero .lg3d:not(.intro:not(.filled)) .lg3d-l.bot :is(.a,.b){fill-opacity:.4!important}
html.v3:not(#a):not(#b):not(#c) .hero .lg3d:not(.intro:not(.filled)) .lg3d-l.top :is(.a,.b){fill-opacity:.6!important}
/* contact: the form's background like the About card - dark, with soft burgundy and purple spots */
html.v2.v3:not(#a):not(#b):not(#c) #contact .contact.ct::before{background:radial-gradient(40% 70% at 82% 30%,rgba(155,92,255,.42),transparent 72%),radial-gradient(38% 75% at 18% 75%,rgba(140,24,72,.55),transparent 72%),radial-gradient(30% 60% at 50% 110%,rgba(255,111,208,.14),transparent 70%),linear-gradient(145deg,#2a1a4a,#16092c)!important}
html.v2.v3:not(#a):not(#b):not(#c) #contact .contact.ct h2{color:#fff!important;-webkit-text-fill-color:#fff!important}
html.v2.v3:not(#a):not(#b):not(#c) #contact .contact.ct>p,html.v2.v3:not(#a):not(#b):not(#c) #contact .contact.ct :is(.ct-form p,.ct-form label,.ct-form small,.ct-form span:not(.sr)){color:#e6dcf5!important;-webkit-text-fill-color:#e6dcf5!important}
html.v2.v3:not(#a):not(#b):not(#c) #contact .contact.ct .ct-form a{color:#f8a6e6!important;-webkit-text-fill-color:#f8a6e6!important}
html.v2.v3:not(#a):not(#b):not(#c) #contact .ct .ct-form :is(input[type=text],input[type=tel],input[type=email]){background:rgba(255,255,255,.08)!important;border-color:rgba(230,200,255,.32)!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
html.v2.v3:not(#a):not(#b):not(#c) #contact .ct .ct-form input::placeholder{color:rgba(237,232,245,.6)!important;-webkit-text-fill-color:rgba(237,232,245,.6)!important}
html.v2.v3:not(#a):not(#b):not(#c) #contact .ct .ct-form input:focus{background:rgba(255,255,255,.14)!important;border-color:#cca3f9!important;box-shadow:0 0 0 4px rgba(204,163,249,.22)!important}
html.v2.v3:not(#a):not(#b):not(#c) #contact .contact.ct .cta .btn{color:#fff!important;-webkit-text-fill-color:#fff!important;border-color:rgba(230,200,255,.4)!important}
/* the hero logo's colour comes in slowly once its outline is drawn: the front first, then the layers below one after another */
html.v3:not(#a):not(#b):not(#c) .hero .lg3d .lg3d-l path{transition:fill-opacity 1.8s cubic-bezier(.4,0,.2,1)!important}
html.v3:not(#a):not(#b):not(#c) .hero .lg3d .lg3d-l{transition:opacity 1.6s cubic-bezier(.4,0,.2,1)!important;transition-delay:calc((15 - var(--i,0)) * 60ms)!important}
/* the projects' logos small beside their names; no big faint logos behind them, no round badge on AUTO 360 */
@media(min-width:901px){
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .pinfo h3{display:flex;align-items:center;gap:.4em}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .pinfo h3 .v3-tlogo{display:inline-flex;align-items:center;height:.95em;flex:none}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .pinfo h3 .v3-tlogo :is(img,svg){height:100%!important;width:auto!important;max-width:none!important;position:static!important;opacity:1!important;filter:none!important;transform:none!important;translate:none!important;scale:none!important;animation:none!important}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage :is(.cfp-card>.cf-mark,#zoorix .zx-clip){display:none!important}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .pa3 .a3 .a3-logo{display:none!important}
}
@media(min-width:901px){
  /* the taxi rooster (drawn dark for the faint mark) in white beside the name; Trigo's mark in its yellow */
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .ptaxi .pinfo h3 .v3-tlogo img{filter:brightness(0) invert(1)!important}
  html.v3.v3p:not(#a):not(#b):not(#c) .v3-stage .ptrigo .pinfo h3 .v3-tlogo{color:#f5c542}
}
/* no separator line at the top of the footer */
html.v3:not(#a):not(#b):not(#c) footer{border-top:0!important}
/* hero: the grid circle behind the logo fades out sooner and gently (on its own track, in step with the logo's 16s cycle) */
@property --g3{syntax:'<number>';inherits:true;initial-value:0}
@keyframes v3Grid{0%,57%{--g3:0}60%,66.25%{--g3:1}73.5%,100%{--g3:0}}   /* (16s cycle: in over half a second, a second in full view, then a slow fade) */
html.v3:not(#a):not(#b):not(#c) .hero .lg3d-scene,html.v3:not(#a):not(#b):not(#c) .hero .lg3d.intro.go .lg3d-scene{animation:lg3dSeq14 16s ease-in-out infinite,lg3dUp 16s linear infinite,v3Grid 16s ease-in-out infinite!important;animation-delay:0s!important}
html.v3:not(#a):not(#b):not(#c) .hero .lg3d-grid{opacity:var(--g3)!important}
@media(prefers-reduced-motion:reduce){html.v3:not(#a):not(#b):not(#c) .hero .lg3d-scene{animation:none!important}}
/* the line above the about card in the same quiet see-through white as the line at the top */
html.v2.v3:not(#a):not(#b):not(#c) #about .lane2 path:not(.ln-trk){stroke:rgba(255,255,255,.16)!important;filter:none!important}
/* footer contact icons: pink line icons, without their round backgrounds */
html.v3:not(#a):not(#b):not(#c) footer li.fi>i{background:none!important;box-shadow:none!important;color:#f87ed9!important;width:24px!important;height:24px!important}
html.v3:not(#a):not(#b):not(#c) footer li.fi>i svg{color:#f87ed9!important;stroke:currentColor;width:22px!important;height:22px!important}
/* on the light block the running lines more see-through */
@media(min-width:901px){
  html.v3.v3p .v3-plane.lz .pl-run{stroke:rgba(255,255,255,.5)}
  html.v3.v3p .v3-plane.lz .ln-trk{stroke:rgba(255,255,255,.18)}
}
html.v2.v3:not(#a):not(#b):not(#c) .light-zone :is(.svs-tail path,.lane2 path,.lane3 path,.zx-flow path,.pl-fill):not(.ln-trk){stroke:rgba(255,255,255,.5)!important}
html.v2.v3:not(#a):not(#b):not(#c) .light-zone :is(.lane2,.lane3,.svs-tail) .ln-trk{stroke:rgba(255,255,255,.18)!important}
/* phones: the hero logo stands still at its tilted angle, drawn only as outlines (no pink fill, no ball, no grid, no animation);
   and the header has no "let's talk" button */
@media(max-width:900px){
  html.v3:not(#a):not(#b):not(#c) .hero .lg3d-scene,html.v3:not(#a):not(#b):not(#c) .hero .lg3d.intro.go .lg3d-scene{animation:none!important;--lgx:54deg;--lgz:-28deg;--lgsx:1;--lgsy:1;--lgd:1.4px;--up:0;--j:0;--lift:0;--go:0;--gl:0}
  html.v3:not(#a):not(#b):not(#c) .hero .lg3d .lg3d-l path{animation:none!important;fill-opacity:0!important;stroke-dasharray:none!important;stroke-dashoffset:0!important;transition:none!important}
  html.v3:not(#a):not(#b):not(#c) .hero .lg3d .lg3d-l{opacity:1!important;transition:none!important}
  html.v3:not(#a):not(#b):not(#c) .hero .lg3d :is(.lg3d-l.top path.a,.lg3d-l.top path.b,.lg3d-l.bot path.a,.lg3d-l.bot path.b){stroke:rgba(225,205,255,.85)!important;stroke-width:.9!important}
  html.v3:not(#a):not(#b):not(#c) .hero .lg3d :is(.lg3d-ball,.lg3d-grid,.lg3d-rest,.lg3d-mirror),html.v3:not(#a):not(#b):not(#c) .hero .lg3d .lg3d-l.top :is(path.g,path.sline){display:none!important}
  html.v3:not(#a):not(#b):not(#c) header .v3-cta{display:none!important}
}
@media(max-width:900px){
  html.v3:not(#a):not(#b):not(#c) .light-zone{background:linear-gradient(transparent 0,transparent var(--v3mlav,0px),var(--lz-bg) var(--v3mlav,0px))!important}
  html.v3:not(#a):not(#b):not(#c) .light-zone>.sec-title:has(+ #projects) h2{color:#f4f1ff!important;-webkit-text-fill-color:#f4f1ff!important}
  html.v3:not(#a):not(#b):not(#c) #projects :is(.cfp-card,#zoorix){transform-origin:50% 0;transition:none}
}
@media(max-width:900px){
  html.v2.v3:not(#a):not(#b):not(#c) .v2-lead{display:none!important}
  html.v2.v3:not(#a):not(#b):not(#c) .bot-tip{display:block!important;font-size:14px!important;padding:7px 13px!important}
  html.v2.v3:not(#a):not(#b):not(#c) .bot:not(.tip) .bot-tip{opacity:0!important;transform:translateY(6px) scale(.9)!important;pointer-events:none}
  html.v2.v3:not(#a):not(#b):not(#c) .bot.tip .bot-tip{opacity:1!important;transform:none!important;transition:opacity .35s ease,transform .45s cubic-bezier(.2,1.4,.4,1)!important}
}
/* phones: room above the services title, and the running line coming down on the right with its yellow ball beside it */
@media(max-width:900px){
  html.v2.v3:not(#a):not(#b):not(#c) #services{position:relative;padding-top:84px!important}
  /* (one element draws both: the line down from the top and the ball at its end) */
  html.v2.v3:not(#a):not(#b):not(#c) #services::after{content:""!important;display:block!important;position:absolute;right:16px;top:0;width:17px;height:161px;z-index:2;pointer-events:none;background:radial-gradient(circle 8.5px at 50% calc(100% - 8.5px),#ffd23f 0 6px,#e9ad12 6.5px 8px,transparent 8.5px),linear-gradient(90deg,transparent 6px,rgba(255,255,255,.95) 6px 11px,transparent 11px) 0 0/100% calc(100% - 12px) no-repeat;filter:drop-shadow(0 0 4px rgba(150,120,210,.35))}
}
/* phones: the project screens stand still on their first picture (no cycling screens, no moving cursor, no scan line) */
@media(max-width:900px){
  html.v3:not(#a):not(#b):not(#c) #projects .dash>*{opacity:0!important;transition:none!important;animation:none!important}
  html.v3:not(#a):not(#b):not(#c) #projects .dash>:first-child{opacity:1!important;transform:none!important}
  html.v3:not(#a):not(#b):not(#c) #projects .dash>:first-child *{animation:none!important;transition:none!important}
  html.v3:not(#a):not(#b):not(#c) #projects :is(.dash-cur,.dsc-scan .sc-line){display:none!important}
  html.v3:not(#a):not(#b):not(#c) #projects .tg-scr img{opacity:0!important;transition:none!important}
  html.v3:not(#a):not(#b):not(#c) #projects .tg-scr img:first-child{opacity:1!important}
}
/* phones: each project is a full screen of its own, one after another (no stacked cards); only the background colour changes
   between them (a fixed layer behind, home-v3.js), and there are no big faint logos behind them */
@media(max-width:900px){
  html.v3:not(#a):not(#b):not(#c) #pstage>:is(.cfp-card,#zoorix),html.v3:not(#a):not(#b):not(#c) #projects :is(.cfp-card,#zoorix){position:relative!important;top:auto!important;transform:none!important;scale:none!important;height:auto!important;min-height:100svh!important;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;display:flex!important;flex-direction:column;justify-content:center;padding-top:76px!important;padding-bottom:40px!important;box-sizing:border-box;z-index:1}
  html.v3:not(#a):not(#b):not(#c) #projects #zoorix .zx-wrap{background:transparent!important;border:0!important;box-shadow:none!important}
  html.v3:not(#a):not(#b):not(#c) #projects :is(.cf-mark,.zx-clip,.zx-mark,.a3-logo){display:none!important}
  html.v3.v3m-proj:not(#a):not(#b):not(#c) header{translate:0 -130%!important;transition:translate .4s ease!important}
  html.v3:not(#a):not(#b):not(#c) header{transition:translate .4s ease}
  html.v3:not(#a):not(#b):not(#c) #projects .v3-mbg{position:fixed;inset:0;z-index:0;opacity:0;pointer-events:none;background:var(--site-purple,#14082a);transition:opacity .5s ease,background .6s ease}
  html.v3:not(#a):not(#b):not(#c) #projects .v3-mbg.on{opacity:1}
  html.v3:not(#a):not(#b):not(#c) #projects .v3-mbg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 45% at 50% 32%,rgba(255,244,250,.12),transparent 75%)}
  html.v3:not(#a):not(#b):not(#c) #projects .cfp-root{position:relative;z-index:1}
}
/* phones: the projects slider (home-v3.js) - a pinned full screen, the projects side by side in it */
@media(max-width:900px){
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage{position:relative}
  html.v3.v3m:not(#a):not(#b):not(#c) .v3-mstage{position:sticky;top:0;height:100svh;width:100vw;margin-inline:calc(50% - 50vw);overflow:hidden;z-index:1}
  /* as the projects come up they are a card with rounded corners, which grows to the full screen as it reaches the top (--ek from home-v3.js) */
  html.v3.v3m:not(#a):not(#b):not(#c) .v3-mstage{clip-path:inset(0 calc(var(--ek,0) * 16px) round calc(var(--ek,0) * 32px))}
  html.v3.v3m:not(#a):not(#b):not(#c) .v3-mstage>.v3-mbg{position:absolute;inset:0;opacity:1;z-index:0;background:var(--site-purple,#14082a);transition:background .6s ease}
  /* the taxi video grows from its middle, so the phone sits in the centre of the picture */
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage .ptaxi .pimg .vbox{transform-origin:50% 50%!important}
  /* the background as on desktop: the project's colour over the dark purple, with its own halo behind the pictures */
  html.v3.v3m:not(#a):not(#b):not(#c) #projects .v3-mstage>.v3-mbg{position:absolute;inset:0;opacity:1;z-index:0;background:var(--site-purple,#14082a);--pglow:rgba(255,244,250,.15);--pglow2:rgba(255,244,250,.06);transition:--mb .7s ease,--pglow .7s ease,--pglow2 .7s ease}
  html.v3.v3m:not(#a):not(#b):not(#c) #projects .v3-mstage>.v3-mbg::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--mb,#1a0c34) 0%,var(--mb,#1a0c34) 25%,transparent 92%);opacity:calc(.9 * (1 - min(1,var(--zk,0) * 1000)))}
  html.v3.v3m:not(#a):not(#b):not(#c) #projects .v3-mstage>.v3-mbg::after{opacity:calc(1 - min(1,var(--zk,0) * 1000));background:radial-gradient(ellipse 120% 50% at 50% 100%,var(--pglow,rgba(255,244,250,.15)) 0%,var(--pglow,rgba(255,244,250,.15)) 38%,var(--pglow2,rgba(255,244,250,.06)) 62%,transparent 88%)}
  html.v3.v3m:not(#a):not(#b):not(#c) #projects .v3-mstage>.v3-mbg[data-pi="3"]{--pglow:rgba(255,138,40,.24);--pglow2:rgba(255,138,40,.08)}
  html.v3.v3m:not(#a):not(#b):not(#c) #projects .v3-mstage>.v3-mbg[data-pi="4"]{--pglow:rgba(255,110,200,.26);--pglow2:rgba(255,110,200,.09)}
  html.v3.v3m:not(#a):not(#b):not(#c) #projects .v3-mstage>.v3-mbg[data-pi="5"]{--pglow:rgba(245,197,66,.22);--pglow2:rgba(245,197,66,.07)}
  html.v3.v3m:not(#a):not(#b):not(#c) #projects .v3-mstage>.v3-mbg[data-pi="6"]{--pglow:rgba(70,215,165,.24);--pglow2:rgba(70,215,165,.08)}
  /* chat: the whole phone is seen, over the wall of screens that fills the top as on desktop */
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage .pchat .pimg{overflow:visible!important;height:285px!important}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage .pchat .sa-ph{width:330px!important;height:660px!important;bottom:auto!important;left:50%!important;top:4px!important;translate:-50% 0!important;scale:.42!important;transform-origin:50% 0!important;border-radius:52px!important;padding:12px!important}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage .pchat .sa-ph .sa-demo{height:100%!important;border-radius:40px!important;overflow:hidden!important}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage .pchat .sa-wall{opacity:.32!important}
  /* dining rooms: a bigger screen, the app phone on the right (only its barcode is scanned), the plate on the left; the loose barcode goes */
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage .cfp-card:has(.dsc) .pimg{height:270px!important;overflow:visible!important}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage .cfp-card:has(.dsc) .dsc{left:0!important;top:-8px!important;right:auto!important;bottom:auto!important;width:100%!important;height:270px!important;translate:none!important;scale:1!important;transform:none!important}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage .cfp-card:has(.dsc) .dsc .d-dev{left:0!important;top:0!important;right:auto!important;bottom:auto!important;width:92%!important;height:auto!important;translate:none!important;scale:1!important;transform:none!important}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage .cfp-card:has(.dsc) .dsc .d-glow{left:0!important;top:0!important;right:0!important;bottom:0!important;width:auto!important;height:auto!important;translate:none!important}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage .cfp-card:has(.dsc) .dsc .dsc-scan{display:none!important}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage .cfp-card:has(.dsc) .dsc .d-plate{left:3%!important;right:auto!important;top:178px!important;bottom:auto!important;width:46%!important;height:auto!important;translate:none!important;scale:1!important;z-index:2!important}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage .cfp-card:has(.dsc) .dsc .dsc-steam{left:52px!important;right:auto!important;top:140px!important;bottom:auto!important;translate:none!important;z-index:2!important}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage .cfp-card:has(.dsc) .dsc .v3-dph{position:absolute;left:auto;right:0;top:92px;width:25%;z-index:3;padding:1.2%;border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.55),rgba(255,255,255,.18) 45%,rgba(255,255,255,.35));border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 20px 40px -14px rgba(20,16,40,.6)}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage .cfp-card:has(.dsc) .dsc .v3-dph-scr{position:relative;aspect-ratio:375/812;overflow:hidden;border-radius:14px;background:#1b1b1b}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage .cfp-card:has(.dsc) .dsc .v3-dph-scr>img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;padding:0!important;border:0!important;filter:none!important;transform:none!important;animation:none!important;opacity:1!important;display:block!important}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage .cfp-card:has(.dsc) .dsc .v3-dph-scan{position:absolute;left:39%;width:23%;top:49%;height:2px;border-radius:2px;background:#ff8a2b;box-shadow:0 0 8px 2px rgba(255,138,43,.85);animation:v3DphScanM 2.2s ease-in-out infinite alternate}
  @keyframes v3DphScanM{from{top:49%}to{top:58.6%}}
  /* AUTO 360: a bigger screen, and a bigger car standing in its ring, both lower down */
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage .cfp-card.pa3 .pimg{height:285px!important;overflow:visible!important}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage .cfp-card.pa3 .a3{left:0!important;top:-6px!important;right:auto!important;bottom:auto!important;width:100%!important;height:290px!important;translate:none!important;transform:none!important;scale:1!important}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage .cfp-card.pa3 .a3 .a3-dev{left:0!important;top:0!important;right:auto!important;width:100%!important;height:auto!important;translate:none!important;transform:none!important}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage .cfp-card.pa3 .a3 .a3-glow{left:0!important;right:0!important;top:30%!important;bottom:0!important;width:auto!important;height:auto!important;translate:none!important}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage .cfp-card.pa3 .a3 .a3-car{left:50%!important;right:auto!important;top:128px!important;bottom:auto!important;width:72%!important;height:auto!important;translate:-50% 0!important}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage .cfp-card.pa3 .a3 .a3-orbit{left:50%!important;right:auto!important;top:232px!important;bottom:auto!important;width:66%!important;height:auto!important;translate:-50% 0!important}
  /* Trigo: a bigger picture, and the app phone on the right */
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage .cfp-card.ptrigo .pimg{height:280px!important;overflow:visible!important}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage .cfp-card.ptrigo .pimg>img{left:2%!important;top:-14px!important;right:auto!important;bottom:auto!important;width:80%!important;height:auto!important;translate:none!important;transform:none!important;object-fit:contain!important}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage .cfp-card.ptrigo .tg-ph{display:block!important;position:absolute!important;left:auto!important;right:0!important;top:112px!important;bottom:auto!important;width:29%!important;height:auto!important;translate:none!important;transform:none!important;scale:1!important;z-index:3!important}
  /* Zoorix fills the screen in its green like the others; only as the projects leave does it turn back into a card (--zk from home-v3.js) */
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage #zoorix{clip-path:inset(calc(var(--zk,0) * 40px) calc(var(--zk,0) * 14px) round calc(var(--zk,0) * 32px))}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage #zoorix::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 120% 50% at 50% 100%,rgba(70,215,165,.24) 0%,rgba(70,215,165,.24) 38%,rgba(70,215,165,.08) 62%,transparent 88%),linear-gradient(to top,color-mix(in srgb,var(--project-bg,#0B2A24) 90%,#14082a) 0%,color-mix(in srgb,var(--project-bg,#0B2A24) 90%,#14082a) 25%,var(--site-purple,#14082a) 92%);opacity:min(1,calc(var(--zk,0) * 1000))}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage #zoorix .zx-wrap{position:static!important;height:auto!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage #zoorix .zx-wrap::before,  html.v3.v3m:not(#a):not(#b):not(#c) #pstage #zoorix .zx-wrap::after{display:none!important}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage #zoorix .zx-num{position:absolute!important;top:calc(21px + var(--zk,0) * 30px)!important;right:18px!important;left:auto!important;margin:0!important}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage #zoorix{padding:76px 20px 40px!important;justify-content:flex-start!important}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage #zoorix .zx-scene{height:280px!important;margin:0!important}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage #zoorix .zx-wrap .zx-txt{margin-top:10px!important;height:max(200px,calc(100svh - 522px))!important}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage #zoorix .zx-wrap .zx-txt h2{margin-bottom:12px!important}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage #zoorix .zx-desk{left:4%!important;top:0!important;width:92%!important;height:auto!important;translate:none!important}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage #zoorix .zx-phone{left:auto!important;right:0!important;top:104px!important;width:27%!important;height:auto!important;translate:none!important}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage #zoorix .zx-out{left:14px!important;top:270px!important;bottom:auto!important;right:auto!important;width:70px!important;height:auto!important;translate:none!important;z-index:5!important}
  /* every project: the picture area, then the title, the text and the button at the same heights, in bigger type */
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage .v3-mstage>.cfp-card{justify-content:flex-start!important;padding-top:76px!important}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage .v3-mstage>.cfp-card .pimg{flex:none!important;height:280px!important;margin:0!important}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage .v3-mstage>.cfp-card.ptaxi .pimg .vbox{height:215px!important;top:20px!important;-webkit-mask-image:linear-gradient(transparent 0,#000 20%,#000 52%,transparent 90%)!important;mask-image:linear-gradient(transparent 0,#000 20%,#000 52%,transparent 90%)!important}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage .v3-mstage>.cfp-card .pinfo,  html.v3.v3m:not(#a):not(#b):not(#c) #pstage #zoorix .zx-txt{position:static!important;flex:none!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:14px!important;height:max(200px,calc(100svh - 512px))!important;width:100%!important;margin:14px 0 0!important;padding:0!important;translate:none!important;transform:none!important}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage .v3-mstage>.cfp-card .pinfo h3,  html.v3.v3m:not(#a):not(#b):not(#c) #pstage #zoorix .zx-txt h2{font-size:34px!important;line-height:1.25!important;margin:0 0 12px!important}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage .v3-mstage>.cfp-card .pinfo p,  html.v3.v3m:not(#a):not(#b):not(#c) #pstage #zoorix .zx-txt p{font-size:18px!important;line-height:1.6!important;margin:0!important;max-width:100%!important}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage .v3-mstage>.cfp-card .pinfo .more,  html.v3.v3m:not(#a):not(#b):not(#c) #pstage #zoorix .zx-go{margin:auto 0 0!important}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage .v3-mstage>.cfp-card .pinfo>*,html.v3.v3m:not(#a):not(#b):not(#c) #pstage #zoorix .zx-txt>*{flex-shrink:0!important}
  /* LiaMOR: the invitation phone in front on the right, the couple on the left, the gifts on top, and confetti falling over the whole picture */
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage .plia .lia .v3-lph{position:absolute;left:auto;right:3%;top:100px;width:31%;aspect-ratio:428/926;z-index:5;padding:1.3%;border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.55),rgba(255,255,255,.18) 45%,rgba(255,255,255,.35));border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 20px 40px -14px rgba(20,16,40,.6)}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage .plia .lia .v3-lph-scr{position:relative;width:100%;height:100%;overflow:hidden;border-radius:14px;background:#fff;container-type:inline-size}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage .plia .lia .v3-lph-scr>div{position:absolute;left:0;right:0;overflow:hidden}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage .plia .lia .v3-lph-scr .p1{top:0;height:169cqw}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage .plia .lia .v3-lph-scr .p2{bottom:4cqw;height:20cqw}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage .plia .lia .v3-lph-scr>div>img{position:absolute!important;display:block!important;opacity:1!important;max-width:none!important;width:327.4cqw!important;height:233cqw!important;object-fit:fill!important;padding:0!important;border:0!important;filter:none!important;transform:none!important;animation:none!important;left:-113.8cqw!important;right:auto!important;bottom:auto!important;top:-13.6cqw!important}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage .plia .lia .v3-lph-scr .p2>img{top:-183.4cqw!important}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage .plia .lia img.l.couple{left:3%!important;right:auto!important;top:150px!important;bottom:auto!important;width:48%!important;height:auto!important;z-index:4!important}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage .plia .lia img.l.gift.c{display:block!important;left:3%!important;right:auto!important;top:-5%!important;bottom:auto!important;width:12%!important;height:auto!important;z-index:4!important}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage .plia .lia img.l.gift.d{display:block!important;left:auto!important;right:1%!important;top:-4%!important;bottom:auto!important;width:11%!important;height:auto!important;z-index:4!important}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage .plia .lia .lia-conf{left:0!important;right:0!important;top:-12%!important;bottom:auto!important;width:100%!important;height:200%!important;z-index:6!important}
  html.v3.v3m:not(#a):not(#b):not(#c) #pstage .v3-mstage>:is(.cfp-card,#zoorix){position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;min-height:0!important;height:100%!important;max-width:none!important;overflow:hidden;z-index:1;will-change:transform;padding-left:20px!important;padding-right:20px!important}
}
/* phones: no running line through the story (it crossed the sentences and the avatar) */
/* phones: the story line is not seen, but it stays rendered (only hidden) because it holds the yellow gradient every gold ball is filled with, the hero line's among them */
@media(max-width:900px){html.v3:not(#a):not(#b):not(#c) #story .story-line{visibility:hidden!important}html.v3:not(#a):not(#b):not(#c) #story :is(.story-end,.sl-ball){display:none!important}}
/* phones: the story sentences under the hero in bigger type */
@media(max-width:900px){html.v3:not(#a):not(#b):not(#c) #story .beat{font-size:25px!important;line-height:1.4!important}}
/* phones, the story: the block sits a little lower, with the line coming down from the top to a gold ball above the sentences; the character is a bit smaller and its bubble narrower, so on the last sentence it clears the WhatsApp and accessibility buttons */
@media(max-width:900px){html.v3:not(#a):not(#b):not(#c) #story .story-stage{padding-top:166px!important}html.v3:not(#a):not(#b):not(#c) #story .story-beats::before{content:"";position:absolute;left:50%;bottom:calc(100% - 10px);width:13px;height:420px;translate:-50% 0;border-radius:7px;background:rgba(255,255,255,.16);pointer-events:none}html.v3:not(#a):not(#b):not(#c) #story .story-beats::after{content:"";position:absolute;left:50%;top:0;width:20px;height:20px;translate:-50% 0;border-radius:50%;background:#ffd23f;box-shadow:0 0 6px rgba(255,214,60,.95),0 0 14px rgba(255,190,40,.6);pointer-events:none}html.v3:not(#a):not(#b):not(#c) #story .story-av{width:150px!important;height:150px!important}html.v3:not(#a):not(#b):not(#c) #story .story-stage .story-av .sav-bubble{top:calc(100% + 10px)!important;bottom:auto!important;width:180px!important;max-width:180px!important;min-width:0!important}}