/* Services page card scenes (build.py service_scene, markup in src/scenes): one CSS-only animated illustration per
   service in white + violet, replacing the CMS stills. Each fills the card's image slot (stretched to the row on
   desktop, 16:9 like the stills when stacked) and is sized in cqmin, so 100cqmin is always the slot's short side.
   Base styles are the resting frame; animations only add motion, so reduced motion shows a complete still.
   Loaded on /services only. */
.yard-scene{position:relative;width:100%;height:100%;aspect-ratio:1600/896;overflow:hidden;container-type:size;
  background:radial-gradient(120% 90% at 50% 42%,#fff 0%,#F3EEFF 42%,#D9CCFF 100%);color:#2B1B66;line-height:1.2;font-size:3cqmin}
.yard-scene::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(rgba(108,59,255,.2) 1px,transparent 1.3px) 0 0/14px 14px;
  -webkit-mask:radial-gradient(closest-side,#000 40%,transparent 100%);mask:radial-gradient(closest-side,#000 40%,transparent 100%)}
.yard-scene *{box-sizing:border-box}
.yard-scene svg{display:block;width:100%;height:100%}

/* shared pieces: --x/--y offset from the centre, --w/--h size; chips are pills that pop in and out on a 6s cycle */
.ys-at,.ys-chip{position:absolute;left:calc(50% + var(--x,0cqmin));top:calc(50% + var(--y,0cqmin));translate:-50% -50%}
.ys-at{width:var(--w);height:var(--h)}
.ys-card{background:#fff;border-radius:3cqmin;box-shadow:0 1.5cqmin 5cqmin rgba(108,59,255,.18),inset 0 0 0 1px rgba(108,59,255,.12)}
.ys-violet{background:linear-gradient(135deg,#9B7CFF,#6C3BFF);color:#fff}
.ys-chip{padding:1.4cqmin 2.6cqmin;border-radius:99px;background:#fff;color:#6C3BFF;font-size:3.3cqmin;font-weight:600;white-space:nowrap;
  box-shadow:0 1cqmin 3cqmin rgba(108,59,255,.22),inset 0 0 0 1px rgba(108,59,255,.18);z-index:5}
.ys-pop{animation:ys-pop 6s ease-in-out infinite both;animation-delay:var(--d,0s)}
.ys-ring{border:1px dashed rgba(108,59,255,.35);border-radius:50%}
.ys-hub,.yard-hub{position:absolute;left:50%;top:50%;width:26cqmin;height:26cqmin;margin:-13cqmin 0 0 -13cqmin;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#9B7CFF,#6C3BFF);
  box-shadow:0 0 6cqmin 1.5cqmin rgba(108,59,255,.45),inset 0 0 0 1px rgba(255,255,255,.35)}
.ys-hub::before,.yard-hub::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(108,59,255,.5);animation:ys-hub-pulse 2.8s ease-out infinite}
.ys-hub img,.yard-hub img{width:68%;height:auto}
@keyframes yard-spin{to{transform:rotate(360deg)}}
@keyframes ys-hub-pulse{from{transform:scale(1);opacity:.9}to{transform:scale(1.7);opacity:0}}
@keyframes ys-pop{0%,8%{opacity:0;transform:translateY(2cqmin) scale(.92)}18%,78%{opacity:1;transform:none}90%,100%{opacity:0;transform:translateY(-1.5cqmin)}}
@keyframes ys-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-2cqmin)}}
@keyframes ys-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes ys-build{0%{opacity:0;transform:translateY(1.5cqmin)}8%,88%{opacity:1;transform:none}96%,100%{opacity:0}}

/* AI and Automation for SMEs: tool orbit (inner ring violet tiles clockwise, outer ring white tiles back; tiles stay
   upright; two sparks run the rings like data) */
.yard-orbit,.yard-spark{position:absolute;left:50%;top:50%;border-radius:50%;width:calc(var(--r)*2);height:calc(var(--r)*2);
  margin:calc(var(--r)*-1) 0 0 calc(var(--r)*-1)}
.yard-orbit{border:1px dashed rgba(108,59,255,.35);animation:yard-spin var(--t) linear infinite}
.yard-orbit-1,.yard-spark-1{--r:27cqmin;--t:36s}
.yard-orbit-2,.yard-spark-2{--r:41cqmin;--t:54s}
.yard-orbit-2{animation-direction:reverse}
.yard-tool{--s:13cqmin;position:absolute;left:50%;top:50%;width:var(--s);height:var(--s);margin:calc(var(--s)/-2) 0 0 calc(var(--s)/-2);
  transform:rotate(var(--a)) translateY(calc(var(--r)*-1)) rotate(calc(var(--a)*-1))}
.yard-tool i{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:28%;
  animation:yard-spin var(--t) linear infinite reverse}
.yard-orbit-2 .yard-tool i{animation-direction:normal}
.yard-tool svg{width:54%;height:54%}
.yard-tool-zapier svg{width:76%;height:76%}  /* the mark is a badge with the wordmark cut out; larger so the word reads */
.yard-orbit-1 .yard-tool i{color:#fff;background:linear-gradient(135deg,#9B7CFF,#6C3BFF);box-shadow:0 1.5cqmin 4cqmin rgba(108,59,255,.35)}
.yard-orbit-2 .yard-tool i{color:#6C3BFF;background:#fff;box-shadow:0 1.5cqmin 4cqmin rgba(108,59,255,.18),inset 0 0 0 1px rgba(108,59,255,.16)}
.yard-spark{animation:yard-spin 7s linear infinite}
.yard-spark-2{animation-duration:11s;animation-direction:reverse}
.yard-spark::before{content:"";position:absolute;left:50%;top:0;width:2cqmin;height:2cqmin;margin:-1cqmin 0 0 -1cqmin;border-radius:50%;
  background:#6C3BFF;box-shadow:0 0 2cqmin .6cqmin rgba(155,124,255,.9)}

/* Affiliate and Alliances: partner network; referral sparks run in along the spokes to the hub */
.ys-spoke{position:absolute;left:50%;top:50%;width:36cqmin;height:0;border-top:1px dashed rgba(108,59,255,.3);transform-origin:0 0;transform:rotate(var(--a))}
.ys-spoke::after{content:"";position:absolute;left:0;top:-1cqmin;width:2cqmin;height:2cqmin;border-radius:50%;background:#6C3BFF;
  box-shadow:0 0 2cqmin .6cqmin rgba(155,124,255,.9);transform:translateX(14cqmin);animation:ys-inbound 3s linear infinite both;animation-delay:var(--d)}
@keyframes ys-inbound{0%{transform:translateX(30cqmin);opacity:0}15%,80%{opacity:1}100%{transform:translateX(14cqmin);opacity:0}}
.ys-partner{position:absolute;left:50%;top:50%;width:13cqmin;height:13cqmin;margin:-6.5cqmin 0 0 -6.5cqmin;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:#fff;color:#6C3BFF;
  box-shadow:0 1.5cqmin 4cqmin rgba(108,59,255,.2),inset 0 0 0 1px rgba(108,59,255,.16);
  transform:rotate(var(--a)) translateX(36cqmin) rotate(calc(var(--a)*-1))}
.ys-partner.ys-violet{background:linear-gradient(135deg,#9B7CFF,#6C3BFF);color:#fff;box-shadow:0 1.5cqmin 4cqmin rgba(108,59,255,.35)}
.ys-partner svg{width:52%;height:52%}

/* Website Development: a page builds block by block, the cursor clicks Publish, then Live */
.ys-browser{display:flex;flex-direction:column;overflow:hidden}
.ys-bar{display:flex;align-items:center;gap:1.4cqmin;padding:2cqmin 2.6cqmin;background:#F4F0FF;border-bottom:1px solid rgba(108,59,255,.12)}
.ys-bar i{width:2cqmin;height:2cqmin;border-radius:50%;background:#D3C4FF}
.ys-url{margin-left:1.6cqmin;flex:1;padding:.9cqmin 2cqmin;border-radius:99px;background:#fff;font-size:2.7cqmin;color:#8B78C9}
.ys-page{flex:1;display:flex;flex-direction:column;gap:2.2cqmin;padding:3cqmin}
.ys-blk{display:block;border-radius:1.6cqmin;background:#ECE6FF;animation:ys-build 6s ease infinite both;animation-delay:var(--d)}
.ys-hero{height:15cqmin;background:linear-gradient(120deg,#B49DFF,#6C3BFF)}
.ys-l1,.ys-l2{height:2.4cqmin}.ys-l1{width:72%}.ys-l2{width:48%}
.ys-row{display:flex;gap:2cqmin}.ys-row .ys-blk{flex:1;height:9cqmin}
.ys-cta{align-self:flex-start;padding:1.5cqmin 3.4cqmin;background:#6C3BFF;color:#fff;font-size:2.7cqmin;font-weight:600}
.ys-cursor{position:absolute;left:50%;top:50%;width:6cqmin;height:6cqmin;transform:translate(-29cqmin,-2cqmin);animation:ys-cursor 6s ease-in-out infinite;z-index:4}
@keyframes ys-cursor{0%{transform:translate(28cqmin,34cqmin);opacity:0}10%{opacity:1}40%{transform:translate(-29cqmin,-2cqmin)}
  44%{transform:translate(-29cqmin,-2cqmin) scale(.82)}48%,80%{transform:translate(-29cqmin,-2cqmin) scale(1);opacity:1}92%,100%{transform:translate(-29cqmin,-2cqmin);opacity:0}}

/* Social Media Marketing: a phone feed scrolls, hearts float up */
.ys-phone{border-radius:6cqmin;background:#F6F2FF;border:1.4cqmin solid #fff;box-shadow:0 2cqmin 6cqmin rgba(108,59,255,.25);overflow:hidden}
.ys-feed{display:flex;flex-direction:column;gap:2.4cqmin;padding:2.4cqmin;animation:ys-feed 9s linear infinite}
@keyframes ys-feed{to{transform:translateY(-97.2cqmin)}}
.ys-post{flex:none;height:30cqmin;border-radius:3cqmin;background:#fff;padding:2cqmin;display:flex;flex-direction:column;gap:1.6cqmin}
.ys-ph{display:flex;align-items:center;gap:1.4cqmin}
.ys-ph i{width:4cqmin;height:4cqmin;border-radius:50%;background:linear-gradient(135deg,#9B7CFF,#6C3BFF)}
.ys-ph b{width:12cqmin;height:1.6cqmin;border-radius:99px;background:#E6DEFF}
.ys-pimg{flex:1;border-radius:2cqmin;background:linear-gradient(135deg,#C9B8FF,#7E57FF)}
.ys-p2 .ys-pimg{background:linear-gradient(160deg,#F1ECFF,#B49DFF)}
.ys-p3 .ys-pimg{background:linear-gradient(200deg,#9B7CFF,#4E22E0)}
.ys-pact{display:flex;gap:1.4cqmin}
.ys-pact i{width:3cqmin;height:3cqmin;border-radius:50%;border:.5cqmin solid #C9B8FF}
.ys-pact i:first-child{background:#6C3BFF;border-color:#6C3BFF}
.ys-heart{position:absolute;left:calc(50% + var(--x));top:calc(50% + 28cqmin);width:6cqmin;height:6cqmin;color:#6C3BFF;opacity:0;
  filter:drop-shadow(0 .8cqmin 1.6cqmin rgba(108,59,255,.35));animation:ys-rise 4.8s ease-out infinite;animation-delay:var(--d)}
@keyframes ys-rise{0%{opacity:0;transform:translateY(0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translate(3cqmin,-56cqmin) scale(1.1)}}

/* AI Creatives and AI UGC: three 9:16 variants fanned out; the centre one generates (shimmer), a winner is picked */
.ys-frame{border-radius:3.5cqmin;overflow:hidden;border:1cqmin solid #fff;box-shadow:0 2cqmin 6cqmin rgba(108,59,255,.25)}
.ys-frame::before{content:"";position:absolute;left:50%;top:40%;width:46%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:rgba(255,255,255,.5)}
.ys-frame::after{content:"";position:absolute;left:14%;right:14%;bottom:14%;height:3cqmin;border-radius:99px;background:rgba(255,255,255,.75)}
.ys-fl{rotate:-10deg;background:linear-gradient(160deg,#ECE5FF,#A58BFF);animation:ys-float 5s ease-in-out infinite}
.ys-fr{rotate:10deg;background:linear-gradient(200deg,#F3EEFF,#8F6BFF);animation:ys-float 5s ease-in-out infinite .8s}
.ys-fc{z-index:2;background:linear-gradient(170deg,#B49DFF,#5A2BF0)}
.ys-tag{position:absolute;left:50%;top:6%;translate:-50% 0;z-index:2;padding:.8cqmin 2cqmin;border-radius:99px;background:rgba(255,255,255,.92);
  color:#6C3BFF;font-size:2.5cqmin;font-weight:700;white-space:nowrap}
.ys-shimmer{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.7) 50%,transparent 70%);
  transform:translateX(120%);animation:ys-shimmer 3s ease-in-out infinite}
@keyframes ys-shimmer{0%{transform:translateX(-120%)}60%,100%{transform:translateX(120%)}}
.ys-pbtn{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;width:12cqmin;height:12cqmin;border-radius:50%;background:#fff;color:#6C3BFF;
  display:flex;align-items:center;justify-content:center;box-shadow:0 1.5cqmin 4cqmin rgba(40,10,120,.3);animation:ys-pulse 2s ease-in-out infinite}
.ys-pbtn svg{width:46%;height:46%;margin-left:.6cqmin}
.ys-spark{color:#6C3BFF;animation:ys-twinkle 2.4s ease-in-out infinite}
@keyframes ys-twinkle{0%,100%{transform:scale(.8) rotate(0)}50%{transform:scale(1.15) rotate(45deg)}}

/* Retention Marketing: a customer dot circles the loop; each stage lights up as it passes */
.ys-orbit-dot{position:absolute;left:50%;top:50%;width:66cqmin;height:66cqmin;margin:-33cqmin 0 0 -33cqmin;animation:yard-spin 8s linear infinite}
.ys-orbit-dot::before{content:"";position:absolute;left:50%;top:0;width:2.4cqmin;height:2.4cqmin;margin:-1.2cqmin 0 0 -1.2cqmin;border-radius:50%;
  background:#6C3BFF;box-shadow:0 0 2.4cqmin .8cqmin rgba(155,124,255,.9)}
.ys-stage{position:absolute;left:50%;top:50%;width:13cqmin;height:13cqmin;margin:-6.5cqmin 0 0 -6.5cqmin;
  transform:rotate(var(--a)) translateX(33cqmin) rotate(calc(var(--a)*-1))}
.ys-stage i{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:28%;background:#fff;color:#6C3BFF;
  box-shadow:0 1.5cqmin 4cqmin rgba(108,59,255,.2),inset 0 0 0 1px rgba(108,59,255,.16);animation:ys-light 8s ease-in-out infinite;animation-delay:var(--d)}
.ys-stage svg{width:50%;height:50%}
.ys-stage b{position:absolute;left:50%;top:100%;translate:-50% 0;margin-top:1cqmin;font-size:2.8cqmin;font-weight:600;color:#5B45B8;white-space:nowrap}
@keyframes ys-light{0%,14%,100%{background:#fff;color:#6C3BFF;transform:scale(1)}4%,9%{background:#6C3BFF;color:#fff;transform:scale(1.12)}}
.ys-ltv{display:flex;flex-direction:column;justify-content:space-between;padding:2.4cqmin;font-size:2.8cqmin;font-weight:600;color:#5B45B8}
.ys-mini{display:flex;align-items:flex-end;gap:1.2cqmin;height:9cqmin}
.ys-mini i,.ys-bars i,.ys-kpis i{flex:1;height:var(--h);border-radius:1cqmin 1cqmin 0 0;background:linear-gradient(to top,#C7B5FF,#7E57FF);
  transform-origin:bottom;animation:ys-bar 6s ease-out infinite both;animation-delay:var(--d,0s)}
@keyframes ys-bar{0%{transform:scaleY(0)}12%,85%{transform:scaleY(1)}95%,100%{transform:scaleY(0)}}

/* Growth Marketing: bars grow and a trend line draws over them */
.ys-chart{display:flex;flex-direction:column;padding:4cqmin}
.ys-chart-head{display:flex;justify-content:space-between;align-items:center;font-size:3cqmin;font-weight:600;color:#5B45B8}
.ys-chart-head i{width:14cqmin;height:2cqmin;border-radius:99px;background:#ECE6FF}
.ys-bars{flex:1;display:flex;align-items:flex-end;gap:3cqmin;margin-top:3cqmin;border-bottom:1px solid rgba(108,59,255,.2)}
.ys-trend{position:absolute;left:4cqmin;top:12cqmin;width:calc(100% - 8cqmin)!important;height:calc(100% - 16cqmin)!important;overflow:visible}
.ys-trend polyline{fill:none;stroke:#4E22E0;stroke-width:3px;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:100;stroke-dashoffset:0;animation:ys-draw 6s ease-in-out infinite}
@keyframes ys-draw{0%,10%{stroke-dashoffset:100}45%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}

/* AI Funnels: leads drop through the funnel, the AI assistant types, a call gets booked */
.ys-funnel{display:flex;flex-direction:column;align-items:center;gap:1.6cqmin}
.ys-funnel i{display:block;height:calc((100% - 3.2cqmin)/3);border-radius:1.6cqmin;clip-path:polygon(0 0,100% 0,88% 100%,12% 100%)}
.ys-funnel i:nth-child(1){width:100%;background:rgba(155,124,255,.35)}
.ys-funnel i:nth-child(2){width:72%;background:rgba(124,88,255,.55)}
.ys-funnel i:nth-child(3){width:46%;background:linear-gradient(135deg,#9B7CFF,#6C3BFF)}
.ys-lead{position:absolute;left:50%;top:50%;width:2.6cqmin;height:2.6cqmin;margin:-1.3cqmin 0 0 -1.3cqmin;border-radius:50%;background:#6C3BFF;
  box-shadow:0 0 1.6cqmin .4cqmin rgba(155,124,255,.8);opacity:0;animation:ys-drop 3s ease-in infinite;animation-delay:var(--d)}
@keyframes ys-drop{0%{opacity:0;transform:translate(var(--x),-44cqmin)}12%{opacity:1}70%{opacity:1;transform:translate(-8cqmin,14cqmin)}85%,100%{opacity:0;transform:translate(-8cqmin,20cqmin)}}
.ys-booked{display:flex;align-items:center;gap:2cqmin;padding:0 2.6cqmin;font-size:3cqmin;font-weight:600;color:#5B45B8}
.ys-booked span{width:6cqmin;height:6cqmin;flex:none;color:#6C3BFF}
.ys-bubble{display:flex;align-items:center;gap:2cqmin;padding:0 2.6cqmin;border-bottom-left-radius:.8cqmin}
.ys-bubble b{padding:.8cqmin 1.8cqmin;border-radius:99px;font-size:2.6cqmin}
.ys-typing{display:flex;gap:1cqmin}
.ys-typing i{width:1.8cqmin;height:1.8cqmin;border-radius:50%;background:#9B7CFF;animation:ys-typing 1.2s ease-in-out infinite}
.ys-typing i:nth-child(2){animation-delay:.15s}.ys-typing i:nth-child(3){animation-delay:.3s}
@keyframes ys-typing{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-1cqmin);opacity:1}}

/* LLM SEO / AEO / GEO: a query types, an AI answer fills in and cites yardagency.ai */
.ys-search{display:flex;align-items:center;gap:2cqmin;padding:0 3cqmin;border-radius:99px;font-size:3.2cqmin;color:#3B2A80}
.ys-search > span:first-child{width:4.4cqmin;height:4.4cqmin;flex:none;color:#6C3BFF}
.ys-type{display:inline-block;max-width:31ch;overflow:hidden;white-space:nowrap;border-right:.4cqmin solid #6C3BFF;padding-right:.4cqmin;
  animation:ys-type 6s steps(31,end) infinite}
@keyframes ys-type{0%{max-width:0}30%,85%{max-width:31ch}95%,100%{max-width:0}}
.ys-answer{display:flex;flex-direction:column;gap:2.4cqmin;padding:3.6cqmin}
.ys-ans-head{display:flex;align-items:center;gap:1.6cqmin;font-size:3cqmin;font-weight:700;color:#5B45B8}
.ys-ans-head span{width:4cqmin;height:4cqmin;color:#6C3BFF}
.ys-ln{display:block;width:var(--w);height:2.4cqmin;border-radius:99px;background:#ECE6FF;animation:ys-build 6s ease infinite both;animation-delay:var(--d)}
.ys-cite{align-self:flex-start;display:flex;align-items:center;gap:1.2cqmin;padding:1.2cqmin 2.4cqmin;border-radius:99px;
  background:linear-gradient(135deg,#9B7CFF,#6C3BFF);color:#fff;font-size:2.8cqmin;font-weight:600;
  box-shadow:0 0 0 0 rgba(155,124,255,.6);animation:ys-cite 6s ease-in-out infinite both}
@keyframes ys-cite{0%,40%{opacity:0;transform:scale(.9);box-shadow:0 0 0 0 rgba(155,124,255,.6)}50%{opacity:1;transform:scale(1.04);box-shadow:0 0 0 2cqmin rgba(155,124,255,0)}
  58%,85%{opacity:1;transform:none}95%,100%{opacity:0}}
.ys-engines{position:absolute;right:3cqmin;bottom:3cqmin;display:flex;gap:1.6cqmin}
.ys-engines i{display:flex;align-items:center;justify-content:center;width:7.5cqmin;height:7.5cqmin;border-radius:28%;background:#F1ECFF;color:#6C3BFF}
.ys-engines svg{width:58%;height:58%}

/* VSL Marketing: a presenter video plays with captions; progress fills; a waveform moves */
.ys-player{display:flex;flex-direction:column;padding:2cqmin;gap:2cqmin}
.ys-screen{position:relative;flex:1;border-radius:2.2cqmin;overflow:hidden;background:linear-gradient(160deg,#B49DFF,#4E22E0)}
.ys-presenter{position:absolute;left:50%;bottom:0;width:30%;height:62%;translate:-50% 0;
  background:radial-gradient(circle at 50% 22%,rgba(255,255,255,.75) 0 16%,transparent 16.5%),radial-gradient(ellipse 50% 46% at 50% 100%,rgba(255,255,255,.55) 0 99%,transparent 100%)}
.ys-cap{position:absolute;left:50%;bottom:7%;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:1cqmin;width:70%}
.ys-cap i{display:block;height:2.2cqmin;border-radius:99px;background:rgba(255,255,255,.88);animation:ys-caption 4s ease-in-out infinite}
.ys-cap i:first-child{width:90%}.ys-cap i:last-child{width:60%;animation-delay:-2s}
@keyframes ys-caption{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.7)}}
.ys-progress{height:1.4cqmin;border-radius:99px;background:#ECE6FF;overflow:hidden}
.ys-progress i{display:block;height:100%;width:62%;border-radius:99px;background:linear-gradient(90deg,#9B7CFF,#6C3BFF);animation:ys-progress 8s linear infinite}
@keyframes ys-progress{from{width:0}to{width:100%}}
.ys-wave{display:flex;align-items:center;justify-content:center;gap:1.2cqmin}
.ys-wave i{width:1.4cqmin;height:100%;border-radius:99px;background:linear-gradient(to top,#9B7CFF,#6C3BFF);animation:ys-wave 1.1s ease-in-out infinite;animation-delay:var(--d)}
@keyframes ys-wave{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}

/* Performance Marketing: Meta and Google feed a live dashboard; the ROAS gauge sweeps up */
.ys-tile{display:flex;align-items:center;justify-content:center;width:14cqmin;height:14cqmin;border-radius:28%;
  background:linear-gradient(135deg,#9B7CFF,#6C3BFF);color:#fff;box-shadow:0 1.5cqmin 4cqmin rgba(108,59,255,.35)}
.ys-tile svg{width:52%;height:52%}
.ys-flow{position:absolute;left:calc(50% - 29cqmin);top:calc(50% + var(--y));width:16cqmin;border-top:1px dashed rgba(108,59,255,.4)}
.ys-flow::after{content:"";position:absolute;left:0;top:-1cqmin;width:2cqmin;height:2cqmin;border-radius:50%;background:#6C3BFF;
  box-shadow:0 0 1.6cqmin .4cqmin rgba(155,124,255,.8);animation:ys-flow 1.8s linear infinite;animation-delay:var(--d)}
@keyframes ys-flow{from{transform:translateX(0);opacity:0}20%,80%{opacity:1}to{transform:translateX(16cqmin);opacity:0}}
.ys-dash{display:flex;flex-direction:column;gap:2cqmin;padding:3.6cqmin}
.ys-dash-head{display:flex;justify-content:space-between;align-items:center;font-size:3.2cqmin;font-weight:700;color:#3B2A80}
.ys-live{display:flex;align-items:center;gap:1cqmin;font-style:normal;font-size:2.4cqmin;font-weight:600;color:#6C3BFF}
.ys-live::before{content:"";width:1.6cqmin;height:1.6cqmin;border-radius:50%;background:#6C3BFF;animation:ys-pulse 1.4s ease-in-out infinite}
.ys-gauge{height:26cqmin!important}
.ys-gauge path{fill:none;stroke-width:8;stroke-linecap:round}
.ys-g-bg{stroke:#ECE6FF}
.ys-g-fg{stroke:#6C3BFF;stroke-dasharray:100;stroke-dashoffset:22;animation:ys-gauge 6s ease-in-out infinite}
.ys-needle{stroke:#3B2A80;stroke-width:3;stroke-linecap:round;transform-origin:50px 50px;transform:rotate(48deg);animation:ys-needle 6s ease-in-out infinite}
.ys-gauge circle{fill:#3B2A80}
@keyframes ys-gauge{0%,8%{stroke-dashoffset:100}45%,85%{stroke-dashoffset:22}100%{stroke-dashoffset:100}}
@keyframes ys-needle{0%,8%{transform:rotate(-88deg)}45%,85%{transform:rotate(48deg)}100%{transform:rotate(-88deg)}}
.ys-kpis{flex:1;display:flex;align-items:flex-end;gap:2cqmin}

/* Brand Strategy: positioning map; your brand moves into open space; palette and type tiles float */
.ys-map{overflow:hidden}
.ys-ax{position:absolute;background:rgba(108,59,255,.25)}
.ys-ax-x{left:8%;right:8%;top:50%;height:1px}.ys-ax-y{top:10%;bottom:10%;left:50%;width:1px}
.ys-lbl{position:absolute;translate:-50% -50%;font-size:2.6cqmin;font-weight:600;color:#8B78C9;white-space:nowrap}
.ys-comp{position:absolute;width:4cqmin;height:4cqmin;margin:-2cqmin 0 0 -2cqmin;border-radius:50%;background:#CFC2F7;animation:ys-float 5s ease-in-out infinite;animation-delay:var(--d)}
.ys-me{position:absolute;left:50%;top:50%;width:5.6cqmin;height:5.6cqmin;margin:-2.8cqmin 0 0 -2.8cqmin;border-radius:50%;
  background:linear-gradient(135deg,#9B7CFF,#6C3BFF);box-shadow:0 0 0 1.4cqmin rgba(155,124,255,.25),0 0 4cqmin 1cqmin rgba(108,59,255,.45);
  transform:translate(15cqmin,-15cqmin);animation:ys-position 7s ease-in-out infinite}
@keyframes ys-position{0%,10%{transform:translate(0,0)}45%,85%{transform:translate(15cqmin,-15cqmin)}100%{transform:translate(0,0)}}
.ys-me .ys-chip{left:50%;top:-5cqmin;font-size:2.8cqmin}
.ys-swatches{display:flex;flex-direction:column;align-items:center;justify-content:space-between}
.ys-swatches i{width:8cqmin;height:8cqmin;border-radius:50%;border:.8cqmin solid #fff;box-shadow:0 1cqmin 3cqmin rgba(108,59,255,.25);animation:ys-float 4s ease-in-out infinite}
.ys-swatches i:nth-child(1){background:#6C3BFF}.ys-swatches i:nth-child(2){background:#B49DFF;animation-delay:.5s}.ys-swatches i:nth-child(3){background:#1D1440;animation-delay:1s}
.ys-type-tile{display:flex;align-items:center;justify-content:center;font-size:7cqmin;font-weight:700;color:#6C3BFF;animation:ys-float 5s ease-in-out infinite .3s}

@media (prefers-reduced-motion: reduce){.yard-scene *,.yard-scene *::before,.yard-scene *::after{animation:none!important}}

/* Home "Who we are" guarantee card: growth line drawn from day 0 to day 90, "+30%" lands at the end, the four channels
   behind it pop in around the chart (same 6s cycle as the chips) */
.ys-gcard{display:flex;flex-direction:column;padding:3.6cqmin 4cqmin}
.ys-ghead{display:flex;justify-content:space-between;align-items:center;font-size:3.2cqmin;font-weight:700;color:#3B2A80}
.ys-ghead i{font-style:normal;font-size:2.4cqmin;font-weight:600;color:#6C3BFF;background:#F1ECFF;padding:.8cqmin 2cqmin;border-radius:99px}
.ys-gline{flex:1;min-height:0;height:auto!important;margin-top:2cqmin;overflow:visible}
/* line + fill are wiped in left to right with clip-path, not drawn with a dash: under non-scaling-stroke the dash is in
   screen px, so a 100-unit dash split into pieces on any card wider than ~100px */
.ys-gline{animation:ys-greveal 6s ease-in-out infinite}
.ys-gline path{fill:url(#ys-gfill)}
.ys-gline polyline{fill:none;stroke:#6C3BFF;stroke-width:3px;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.ys-gaxis{display:flex;justify-content:space-between;margin-top:1.4cqmin;font-size:2.2cqmin;color:#8A7CC0}
.ys-gaxis i{font-style:normal}
.ys-gbadge{position:absolute;right:3cqmin;top:10cqmin;padding:1cqmin 2.2cqmin;border-radius:99px;font-size:3.6cqmin;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#9B7CFF,#6C3BFF);box-shadow:0 1cqmin 3cqmin rgba(108,59,255,.35);animation:ys-gbadge 6s ease-in-out infinite}
@keyframes ys-greveal{0%,10%{clip-path:polygon(-5% -20%,-5% -20%,-5% 120%,-5% 120%)}45%,85%{clip-path:polygon(-5% -20%,105% -20%,105% 120%,-5% 120%)}100%{clip-path:polygon(-5% -20%,-5% -20%,-5% 120%,-5% 120%)}}
@keyframes ys-gbadge{0%,40%{opacity:0;transform:scale(.8)}48%,85%{opacity:1;transform:none}95%,100%{opacity:0;transform:scale(.9)}}