/* Myrtle Commerce - shared service visuals (loaded after mc.css on service pages + the Services overview).
   .adash = Amazon dashboard, .studio = Brand & Creative studio, .dsv = Digital & Social chart.
   Hero size by default; inside a square .stage they sit in a .vz-fit box and visuals.js scales them to fit.
   Build-in animations start when the visual is revealed (.is-in, via data-reveal) after page load. */

/* ---------- HERO visual: Amazon account dashboard with "potential" curve ---------- */
.adash { position: relative; width: min(100%, 540px); justify-self: end; margin-block: 30px; }
.ad-rings { position: absolute; left: 62%; top: 8%; width: 0; height: 0; pointer-events: none; }
.ad-rings i { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px dashed rgba(255, 254, 253, .22); transform: translate(-50%, -50%); }
.ad-rings i:nth-child(1) { width: 380px; height: 380px; }
.ad-rings i:nth-child(2) { width: 560px; height: 560px; border-color: rgba(255, 254, 253, .14); }
.ad-rings i:nth-child(3) { width: 760px; height: 760px; border-color: rgba(255, 254, 253, .08); }
@media (prefers-reduced-motion: no-preference) { .ad-rings { animation: spin 80s linear infinite; } }
.ad-sun { position: absolute; width: 300px; aspect-ratio: 1; right: -12%; top: -10%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFB08F, var(--orange) 55%, #E5643A); box-shadow: 0 30px 80px -20px rgba(249, 120, 73, .55); }
.ad-sun::after { content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: .25; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
.ad-plate { position: relative; z-index: 1; padding: 12px; border-radius: 40px; background: rgba(255, 254, 253, .16); border: 1px solid rgba(255, 254, 253, .32); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 50px 90px -40px rgba(4, 20, 24, .7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.ad-card { display: grid; grid-template-columns: 148px 1fr; min-height: 400px; border-radius: 30px; overflow: hidden; background: var(--white); color: var(--ink); }
.ad-side { padding: 22px 14px 18px 18px; border-right: 1px solid var(--hair); background: #FBFCFC; }
.ad-logo img { width: 112px; }
.ad-side small { display: block; margin: 26px 0 10px 4px; font: 500 10px var(--body); letter-spacing: .14em; text-transform: uppercase; color: #7A868D; }
.ad-side ul { display: grid; gap: 4px; }
.ad-nav { position: relative; display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 12px; font: 500 12.5px var(--body); color: var(--slate); transition: background-color .5s var(--ease), color .5s; }
.ad-nav img { width: 18px; opacity: .7; transition: opacity .4s; }
.ad-nav.is-on { background: var(--aqua-soft); color: var(--teal); }
.ad-nav.is-on img { opacity: 1; }
.ad-nav.is-on::before { content: ""; position: absolute; left: -18px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--orange); }
.ad-main { display: flex; flex-direction: column; gap: 14px; padding: 20px 20px 18px; min-width: 0; }
.ad-top { display: flex; align-items: center; justify-content: space-between; }
.ad-top b { font: 400 19px var(--display); }
.ad-amz { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--mist); }
.ad-amz i, .ad-tile i { width: 22px; aspect-ratio: 1; background: var(--ink); -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; }
.ad-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ad-stat { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 16px; border: 1px solid var(--hair); }
.ad-stat > span:last-child { flex: 1; min-width: 0; display: grid; gap: 6px; }
.ad-si { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 11px; background: var(--soft); }
.ad-si img { width: 20px; }
.ad-stat small { font: 500 11px var(--body); letter-spacing: .04em; color: var(--slate); }
.ad-bars { display: flex; align-items: flex-end; gap: 3px; height: 26px; }
.ad-bars i { flex: 1; height: calc(var(--h) * 100%); border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, var(--teal), #57D6D5); transform-origin: bottom; transition: transform .9s var(--spring); transition-delay: calc(var(--i) * 60ms); }
.ad-bars i:last-child { background: linear-gradient(180deg, var(--orange), #FFB08F); }
.ad-spark { width: 100%; height: 26px; overflow: visible; }
.ad-spark path { fill: none; stroke: var(--teal); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.ad-chart { position: relative; flex: 1; min-height: 160px; padding: 12px 12px 6px; border-radius: 18px; background: linear-gradient(180deg, #F7FAFA, #FFFEFD); border: 1px solid var(--hair); }
.ad-chart svg { position: absolute; left: 12px; right: 12px; bottom: 8px; width: calc(100% - 24px); height: calc(100% - 44px); overflow: visible; }
.ad-legend { display: flex; gap: 14px; font: 500 11px var(--body); color: var(--slate); }
.ad-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ad-legend span::before { content: ""; width: 14px; height: 3px; border-radius: 3px; }
.lg-now::before { background: #B9C4CA; }
.lg-pot::before { background: linear-gradient(90deg, var(--teal), var(--orange)); }
.ad-grid { stroke: rgba(18, 26, 33, .06); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ad-now { fill: none; stroke: #B9C4CA; stroke-width: 2.4; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
.ad-pot { fill: none; stroke: url(#adPot); stroke-width: 3.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
.ad-area { fill: url(#adArea); }
.ad-dot { position: absolute; right: calc(12px + 4%); top: calc(32px + 4%); width: 14px; height: 14px; margin: -7px -7px 0 0; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 7px rgba(249, 120, 73, .22); }
@media (prefers-reduced-motion: no-preference) { .ad-dot::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid rgba(249, 120, 73, .5); animation: pulse 2.4s var(--ease) infinite; } }
.ad-flag { position: absolute; right: calc(12px + 4% + 14px); top: calc(32px + 4% - 34px); padding: 6px 10px; border-radius: 999px; background: var(--ink); color: var(--white); font: 500 11px var(--body); white-space: nowrap; }
.ad-tile { z-index: 2; }
.ad-tile > span { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--white); box-shadow: inset 0 1px 1px #fff, 0 22px 40px -18px rgba(4, 20, 24, .55); }
.ad-tile img { width: 30px; }
.ad-tile i { width: 30px; }
.ad-tile--a { left: -9%; top: 18%; }
.ad-tile--b { right: -6%; bottom: 10%; }
.ad-tile--b > span { width: 76px; height: 76px; border-radius: 24px; }
.ad-tile--b i { width: 38px; }
.ad-tile--c { left: 24%; bottom: -6%; }
@media (prefers-reduced-motion: no-preference) {
  .ad-tile > span { animation: csFloatA 6s ease-in-out infinite; }
  .ad-tile--b > span { animation-delay: -2s; } .ad-tile--c > span { animation-delay: -4s; }
  /* build-in after page load */
  .js .adash .ad-plate { opacity: 0; transform: translateY(50px) scale(.96); transition: opacity 1.2s var(--ease) .3s, transform 1.4s var(--ease) .3s; }
  .js.loaded .adash.is-in .ad-plate { opacity: 1; transform: none; }
  .js .adash .ad-sun { opacity: 0; transform: scale(.6); transition: opacity 1s var(--ease) .2s, transform 1.4s var(--spring) .2s; }
  .js.loaded .adash.is-in .ad-sun { opacity: 1; transform: none; }
  .js .adash .ad-nav { opacity: 0; transform: translateX(-10px); transition: opacity .6s var(--ease), transform .7s var(--ease), background-color .5s, color .5s; transition-delay: calc(.9s + var(--i) * 70ms), calc(.9s + var(--i) * 70ms), 0s, 0s; }
  .js.loaded .adash.is-in .ad-nav { opacity: 1; transform: none; }
  .js .adash .ad-bars i { transform: scaleY(0); }
  .js.loaded .adash.is-in .ad-bars i { transform: scaleY(1); transition-delay: calc(1.1s + var(--i) * 60ms); }
  .js .adash .ad-spark path { stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--ease) 1.2s; }
  .js.loaded .adash.is-in .ad-spark path { stroke-dashoffset: 0; }
  .js .adash .ad-now { stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease) 1.3s; }
  .js .adash .ad-pot { stroke-dashoffset: 1; transition: stroke-dashoffset 1.9s var(--ease) 1.6s; }
  .js.loaded .adash.is-in .ad-now, .js.loaded .adash.is-in .ad-pot { stroke-dashoffset: 0; }
  .js .adash .ad-area { opacity: 0; transition: opacity 1.2s var(--ease) 2.6s; }
  .js.loaded .adash.is-in .ad-area { opacity: 1; }
  .js .adash .ad-dot, .js .adash .ad-flag { opacity: 0; transform: scale(.4); transition: opacity .5s var(--ease) 3.3s, transform .8s var(--spring) 3.3s; }
  .js .adash .ad-flag { transform: translateY(8px); transition-delay: 3.5s; }
  .js.loaded .adash.is-in .ad-dot, .js.loaded .adash.is-in .ad-flag { opacity: 1; transform: none; }
  .js .adash .ad-tile > span { opacity: 0; scale: .6; transition: opacity .6s var(--ease), scale .9s var(--spring); }
  .js.loaded .adash.is-in .ad-tile > span { opacity: 1; scale: 1; }
  .js.loaded .adash.is-in .ad-tile--a > span { transition-delay: 1.4s; } .js.loaded .adash.is-in .ad-tile--b > span { transition-delay: 1.6s; } .js.loaded .adash.is-in .ad-tile--c > span { transition-delay: 1.8s; }
}
@keyframes csFloatA { 50% { transform: translateY(-8px); } }

/* ---------- HERO visual: creative-studio panel ---------- */
.studio { position: relative; width: min(100%, 500px); justify-self: end; margin-block: 24px; --accent: #0D636E; }
.cs-plate { padding: 14px; border-radius: 46px; background: rgba(255, 254, 253, .1); border: 1px solid rgba(255, 254, 253, .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 50px 90px -40px rgba(4, 20, 24, .75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.cs-panel { position: relative; overflow: hidden; padding: 24px; border-radius: 34px; background: linear-gradient(170deg, #142029 0%, #11252C 45%, #0B3E45 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.cs-panel::after { content: ""; position: absolute; left: -20%; right: -20%; bottom: -40%; height: 70%; background: radial-gradient(50% 50% at 50% 50%, rgba(182, 159, 250, .38), transparent 70%); pointer-events: none; }
.cs-panel > * { position: relative; z-index: 1; }
.cs-head { display: flex; align-items: center; gap: 12px; }
.cs-badge { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 254, 253, .08); border: 1px solid rgba(255, 254, 253, .12); }
.cs-badge img { width: 22px; }
.cs-head b { font: 400 19px var(--display); color: var(--white); }
.cs-dots { display: flex; gap: 5px; margin-left: auto; }
.cs-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 254, 253, .3); }
.cs-canvas { display: grid; grid-template-columns: 1fr 1fr 22px; gap: 12px; height: 168px; margin-top: 22px; }
.cs-tile { position: relative; overflow: hidden; border-radius: 18px; background: rgba(255, 254, 253, .08); }
.cs-tile--pattern { background: url("../patterns/Pattern-Colorful-6Color-Tile.svg") 0 0 / 122px 183px repeat, #18242C; }
.cs-tile--pattern::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, transparent 30%, rgba(17, 37, 44, .55)); }
.cs-tile--type { display: flex; flex-direction: column; justify-content: space-between; padding: 14px 16px; background: var(--accent); transition: background-color .8s var(--ease); }
.cs-tile--type b { font: 300 64px/1 var(--display); color: var(--ink-on, var(--white)); letter-spacing: -.02em; transition: color .6s; }
.cs-hex { font: 500 11px var(--body); letter-spacing: .1em; color: var(--ink-on, var(--white)); opacity: .8; transition: color .6s; }
.cs-tile--sliver { background: linear-gradient(180deg, rgba(255, 254, 253, .12), rgba(255, 254, 253, .04)); }
@media (prefers-reduced-motion: no-preference) {
  .cs-tile--sliver::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent, rgba(255, 254, 253, .18), transparent); transform: translateY(-100%); animation: csShimmer 2.8s var(--ease) infinite; }
}
@keyframes csShimmer { to { transform: translateY(100%); } }
.cs-tray { margin-top: 22px; padding: 20px 18px 18px; border-radius: 26px; background: rgba(255, 254, 253, .06); border: 1px solid rgba(255, 254, 253, .08); }
.cs-tools { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px 6px; justify-items: center; }
.cs-tool { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; transition: background-color .4s var(--ease), transform .6s var(--spring); }
.cs-tool img { width: 22px; opacity: .78; transition: opacity .3s; }
.cs-tool:hover { background: rgba(255, 254, 253, .1); transform: translateY(-2px); }
.cs-tool:hover img { opacity: 1; }
.cs-tool.is-on { background: radial-gradient(circle, rgba(249, 120, 73, .45), rgba(249, 120, 73, .12) 60%, transparent 72%); }
.cs-tool.is-on img { opacity: 1; }
.cs-swatches { display: flex; justify-content: space-between; gap: 6px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255, 254, 253, .08); }
.cs-sw { position: relative; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--c); cursor: pointer; transition: transform .5s var(--spring); }
.cs-sw::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--white); opacity: 0; transform: scale(.7); transition: opacity .35s var(--ease), transform .5s var(--spring); }
.cs-sw:hover { transform: scale(1.12); }
.cs-sw[aria-pressed="true"]::after { opacity: 1; transform: none; }

/* floating pills */
.cs-pill { z-index: 3; }
.cs-pill--a { right: -7%; top: 25%; }
.cs-pill--b { left: -14%; top: 61%; }
.cs-pill-in { display: inline-flex; align-items: center; gap: 14px; padding: 9px 22px 9px 9px; border-radius: 999px; background: rgba(255, 254, 253, .94); border: 1px solid rgba(255, 255, 255, .8); box-shadow: 0 24px 44px -20px rgba(4, 20, 24, .55), inset 0 1px 0 #fff; font: 500 16px var(--body); color: var(--ink); white-space: nowrap; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.cs-pi { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(140deg, var(--g1), var(--g2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.cs-pi img { width: 22px; }
@media (prefers-reduced-motion: no-preference) {
  .cs-pill-in { animation: csFloat 6s ease-in-out infinite; }
  .cs-pill--b .cs-pill-in { animation-delay: -3.5s; }
  /* build-in after page load */
  .js .studio .cs-plate { opacity: 0; transform: translateY(50px) scale(.96); transition: opacity 1.2s var(--ease) .3s, transform 1.4s var(--ease) .3s; }
  .js.loaded .studio.is-in .cs-plate { opacity: 1; transform: none; }
  .js .studio .cs-tile, .js .studio .cs-tool, .js .studio .cs-sw { opacity: 0; transform: translateY(10px) scale(.8); transition: opacity .6s var(--ease), transform .8s var(--spring), background-color .4s; }
  .js .studio .cs-tile { transition-delay: calc(.8s + var(--i, 0) * 100ms); }
  .js .studio .cs-tile:nth-child(2) { --i: 1; } .js .studio .cs-tile:nth-child(3) { --i: 2; }
  .js .studio .cs-tool { transition-delay: calc(1.1s + var(--i) * 35ms), calc(1.1s + var(--i) * 35ms), 0s; }
  .js .studio .cs-sw { transition-delay: calc(1.5s + var(--i) * 50ms), calc(1.5s + var(--i) * 50ms); }
  .js.loaded .studio.is-in .cs-tile, .js.loaded .studio.is-in .cs-tool, .js.loaded .studio.is-in .cs-sw { opacity: 1; transform: none; }
  .js.loaded .studio.is-in .cs-tool:hover { transform: translateY(-2px); transition-delay: 0s; }
  .js.loaded .studio.is-in .cs-sw:hover { transform: scale(1.12); transition-delay: 0s; }
  .js .studio .cs-pill-in { opacity: 0; }
  .js.loaded .studio.is-in .cs-pill--a .cs-pill-in { animation: pillInR 1s var(--spring) 1.3s both, csFloat 6s ease-in-out 2.3s infinite; }
  .js.loaded .studio.is-in .cs-pill--b .cs-pill-in { animation: pillInL 1s var(--spring) 1.5s both, csFloat 6s ease-in-out 2.5s infinite; }
}
@keyframes csFloat { 50% { transform: translateY(-8px); } }
@keyframes pillInR { from { opacity: 0; transform: translateX(40px) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes pillInL { from { opacity: 0; transform: translateX(-40px) scale(.85); } to { opacity: 1; transform: none; } }

/* ---------- HERO visual: platform bubbles + audience growth chart ---------- */
.dsv { position: relative; width: min(100%, 560px); aspect-ratio: 1 / .9; justify-self: end; }
.ds-orb { position: absolute; border-radius: 50%; pointer-events: none; }
.ds-orb--a { width: 62%; aspect-ratio: 1; left: -26%; bottom: -10%; background: radial-gradient(circle at 70% 30%, #FFB08F, var(--orange) 50%, #D8572F); opacity: .92; }
.ds-orb--b { width: 30%; aspect-ratio: 1; right: -12%; top: 10%; background: radial-gradient(circle at 30% 30%, #D6C8FF, var(--lavender) 55%, #8F73E8); opacity: .9; }
.ds-ghost { position: absolute; top: 52%; width: 28%; height: 36%; border-radius: 26px; background: rgba(255, 254, 253, .82); box-shadow: 0 24px 50px -30px rgba(4, 20, 24, .5); padding: 26px 20px; display: grid; align-content: start; gap: 10px; }
.ds-ghost--l { left: -10%; }
.ds-ghost--r { right: -10%; }
.ds-ghost i { display: block; height: 7px; border-radius: 6px; background: #E3E9EC; }
.ds-ghost--l i:nth-child(1) { width: 92%; } .ds-ghost--l i:nth-child(2) { width: 60%; } .ds-ghost--l i:nth-child(3) { width: 84%; } .ds-ghost--l i:nth-child(4) { width: 50%; }
.ds-ghost .dots { display: flex; gap: 6px; margin-bottom: 14px; }
.ds-ghost .dots b { width: 10px; height: 10px; border-radius: 50%; background: #D6DEE2; }
.ds-ghost--r i { width: 70%; } .ds-ghost--r i + i { width: 46%; }
.ds-bub { z-index: 2; left: var(--x); top: var(--y); }
.ds-bub > span { display: grid; place-items: center; width: calc(var(--s) * 1.7); aspect-ratio: 1; border-radius: 50%; background: rgba(255, 254, 253, .9); border: 1px solid rgba(255, 255, 255, .9); box-shadow: inset 0 1px 0 #fff, 0 20px 40px -22px rgba(4, 20, 24, .5); transform: translate(-50%, 0); }
.ds-bub i { width: calc(var(--s) * .62); aspect-ratio: 1; background: var(--ink); -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; }
.ds-plate { position: absolute; z-index: 3; left: 14%; right: 14%; top: 48%; padding: 10px; border-radius: 34px; background: rgba(255, 254, 253, .3); border: 1px solid rgba(255, 254, 253, .5); box-shadow: 0 0 0 1px rgba(255, 254, 253, .06), 0 40px 80px -40px rgba(4, 20, 24, .7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.ds-plate::before { content: ""; position: absolute; left: 20%; right: 20%; top: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(87, 214, 213, .9), transparent); }
.ds-card { border-radius: 26px; padding: 20px 20px 16px; background: #F6F8F9; }
.ds-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ds-top b { font: 400 18px var(--display); color: var(--ink); }
.ds-modes { display: flex; padding: 3px; border-radius: 999px; background: #E5ECEF; }
.ds-modes button { padding: 6px 11px; border: 0; border-radius: 999px; background: none; font: 500 11.5px var(--body); color: var(--slate); cursor: pointer; transition: background-color .4s var(--ease), color .4s; }
.ds-modes button.is-on { background: var(--teal); color: var(--white); }
.ds-bars { display: flex; align-items: flex-end; gap: 5px; height: 150px; margin-top: 16px; }
.ds-bars i { flex: 1; height: calc(var(--h, .2) * 100%); border-radius: 99px; background: #CFE3E5; transform-origin: bottom; transition: height .9s var(--spring), background-color .6s var(--ease); transition-delay: calc(var(--i) * 18ms); }
.ds-bars i.hi { background: linear-gradient(180deg, var(--teal), #2E9BA4); }
.ds-bars i.top { background: linear-gradient(180deg, var(--orange), #FFB08F); }
@media (prefers-reduced-motion: no-preference) {
  .ds-bub > span { animation: dsBob 6s ease-in-out infinite; animation-delay: calc(var(--k) * -1.1s); }
  .js .dsv .ds-bub > span { opacity: 0; scale: .5; transition: opacity .6s var(--ease), scale .9s var(--spring); transition-delay: calc(.9s + var(--k) * 110ms); }
  .js.loaded .dsv.is-in .ds-bub > span { opacity: 1; scale: 1; }
  .js .dsv .ds-plate { opacity: 0; transform: translateY(40px); transition: opacity 1.1s var(--ease) .4s, transform 1.3s var(--ease) .4s; }
  .js.loaded .dsv.is-in .ds-plate { opacity: 1; transform: none; }
  .js .dsv .ds-ghost { opacity: 0; transition: opacity 1s var(--ease) .7s, transform 1.2s var(--ease) .7s; }
  .js .dsv .ds-ghost--l { transform: translateX(-30px); } .js .dsv .ds-ghost--r { transform: translateX(30px); }
  .js.loaded .dsv.is-in .ds-ghost { opacity: 1; transform: none; }
  .js .dsv .ds-orb { opacity: 0; scale: .6; transition: opacity 1s var(--ease) .2s, scale 1.4s var(--spring) .2s; }
  .js.loaded .dsv.is-in .ds-orb--a { opacity: .92; scale: 1; } .js.loaded .dsv.is-in .ds-orb--b { opacity: .9; scale: 1; }
}
@keyframes dsBob { 50% { transform: translate(-50%, -9px); } }

/* ---------- Fit mode: a visual inside a square .stage (Services overview) ---------- */
.stage .vz-fit { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
/* absolute centring: grid centring stops working once the (unscaled) visual is wider than the square */
.vz-fit > .adash, .vz-fit > .studio, .vz-fit > .dsv { position: absolute; left: 50%; top: 50%; margin: 0; transform: translate(-50%, -50%) scale(var(--k, .6)); transform-origin: center; }
.vz-fit > .adash { width: 540px; }
.vz-fit > .studio { width: 500px; }
.vz-fit > .dsv { width: 560px; }
.stage--hero { --bg: radial-gradient(110% 90% at 85% 20%, #11727E 0%, var(--teal) 40%, var(--teal-night) 100%); }

/* ---------- Hero-size adjustments (only in the page hero; fit mode scales instead) ---------- */
@media (max-width: 1080px) {
  .svc-hero .adash { justify-self: center; }
  .svc-hero .studio { justify-self: center; margin-top: 8px; }
  .svc-hero .dsv { justify-self: center; }
}
@media (max-width: 767px) {
  .svc-hero .adash { width: min(100%, 380px); margin-block: 28px 8px; }
  .svc-hero .ad-plate { padding: 8px; border-radius: 30px; }
  .svc-hero .ad-card { grid-template-columns: 96px 1fr; min-height: 300px; border-radius: 23px; }
  .svc-hero .ad-side { padding: 14px 8px 12px 10px; }
  .svc-hero .ad-logo img { width: 74px; }
  .svc-hero .ad-side small { margin: 16px 0 6px 2px; font-size: 8px; }
  .svc-hero .ad-nav { gap: 6px; padding: 7px 6px; font-size: 10px; border-radius: 9px; }
  .svc-hero .ad-nav img { width: 14px; }
  .svc-hero .ad-nav.is-on::before { left: -10px; }
  .svc-hero .ad-main { padding: 14px 12px 12px; gap: 10px; }
  .svc-hero .ad-top b { font-size: 15px; }
  .svc-hero .ad-amz { width: 30px; height: 30px; border-radius: 9px; }
  .svc-hero .ad-amz i { width: 16px; }
  .svc-hero .ad-stats { grid-template-columns: 1fr; gap: 6px; }
  .svc-hero .ad-stat { padding: 8px; gap: 8px; border-radius: 12px; }
  .svc-hero .ad-si { width: 28px; height: 28px; border-radius: 9px; }
  .svc-hero .ad-si img { width: 16px; }
  .svc-hero .ad-bars, .svc-hero .ad-spark { height: 18px; }
  .svc-hero .ad-chart { min-height: 120px; border-radius: 14px; }
  .svc-hero .ad-legend { font-size: 9.5px; gap: 10px; }
  .svc-hero .ad-flag { font-size: 9.5px; padding: 4px 8px; }
  .svc-hero .ad-sun { width: 190px; right: -10%; top: -8%; }
  .svc-hero .ad-tile--b { right: -3%; bottom: 4%; }
  .svc-hero .ad-tile--a, .svc-hero .ad-tile--c, .svc-hero .ad-rings, .svc-hero .ad-legend { display: none; }
  .svc-hero .ad-chart svg { height: calc(100% - 24px); }
  .svc-hero .ad-flag { top: calc(32px + 4% - 30px); }
  .svc-hero .ad-tile > span { width: 48px; height: 48px; border-radius: 15px; }
  .svc-hero .ad-tile img, .svc-hero .ad-tile i { width: 22px; }
  .svc-hero .ad-tile--b > span { width: 56px; height: 56px; border-radius: 18px; }
  .svc-hero .ad-tile--b i { width: 28px; }
  .svc-hero .studio { width: min(100%, 360px); }
  .svc-hero .cs-plate { padding: 9px; border-radius: 34px; }
  .svc-hero .cs-panel { padding: 16px; border-radius: 26px; }
  .svc-hero .cs-badge { width: 38px; height: 38px; }
  .svc-hero .cs-head b { font-size: 16px; }
  .svc-hero .cs-canvas { height: 120px; gap: 8px; grid-template-columns: 1fr 1fr 14px; margin-top: 16px; }
  .svc-hero .cs-tile--type b { font-size: 44px; }
  .svc-hero .cs-tray { margin-top: 14px; padding: 14px 10px 12px; border-radius: 20px; }
  .svc-hero .cs-tools { gap: 6px 2px; }
  .svc-hero .cs-tool { width: 32px; height: 32px; }
  .svc-hero .cs-tool img { width: 18px; }
  .svc-hero .cs-swatches { margin-top: 14px; padding-top: 12px; }
  .svc-hero .cs-sw { width: 24px; height: 24px; }
  .svc-hero .cs-sw::after { inset: -4px; }
  .svc-hero .cs-pill-in { gap: 10px; padding: 6px 14px 6px 6px; font-size: 13px; }
  .svc-hero .cs-pi { width: 34px; height: 34px; }
  .svc-hero .cs-pi img { width: 17px; }
  .svc-hero .cs-pill--a { right: -4%; top: -4%; }
  .svc-hero .cs-pill--b { left: -5%; top: auto; bottom: 22%; }
  .svc-hero .dsv { width: min(100%, 380px); margin-top: 12px; }
  .svc-hero .ds-bub > span { width: calc(var(--s) * 1.02); }
  .svc-hero .ds-bub i { width: calc(var(--s) * .44); }
  .svc-hero .ds-plate { left: 4%; right: 4%; top: 46%; padding: 7px; border-radius: 26px; }
  .svc-hero .ds-card { padding: 14px 12px 12px; border-radius: 20px; }
  .svc-hero .ds-top b { font-size: 15px; }
  .svc-hero .ds-modes button { padding: 5px 8px; font-size: 10px; }
  .svc-hero .ds-bars { height: 104px; gap: 3px; margin-top: 12px; }
  .svc-hero .ds-ghost { display: none; }
  .svc-hero .ds-orb--a { width: 56%; left: -18%; bottom: -2%; }
}