/* vellier.co.uk: the looping animations (homepage hero, What Vellier
   replaces, How it works and the feature cards). Markup is in
   site/website/websiteAnims.ts. The build adds, at the end of this file, the
   keyframes it writes from code: the hero's twelve chips, the replaces
   lists and the u-* timing helpers (u-in-22 = fade up in at 22% of the loop).

   - .va is an animation root. website-anims.js adds .va-on while it is on
     screen and the tab is visible; otherwise everything in it is paused.
   - --s is the scale of a fixed-size scene, set by website-anims.js from the
     box width and --va-w (the scene's design width).
   - prefers-reduced-motion: every scene shows its finished frame (--still,
     90% of the loop), still. */

/* ─── Pausing and reduced motion ─────────────────────────────────────────── */
.js .va:not(.va-on) *, .js .va:not(.va-on) *::before, .js .va:not(.va-on) *::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .va *, .va *::before, .va *::after { animation-delay: calc(var(--still, 0s) * -1) !important; animation-play-state: paused !important; }
  .va .va-mark .l1, .va .va-mark .l2 { animation: none !important; }
  .spiral .hs-tag, .sw-done { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ─── Shared scene pieces ────────────────────────────────────────────────── */
.va { color: #0E1714; font-family: var(--display); line-height: 1.3; }
.va .a-art { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 12px; text-align: left; }
.va .a-panel { position: relative; background: #FFFFFF; border: 1px solid #D5DDD7; border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 1px 2px rgba(14,23,20,.04); }
.va .a-mono { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #5E6E66; }
.va .a-title { font-size: 16px; font-weight: 600; }
.va .a-between { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.va .a-col { display: flex; flex-direction: column; }
.va .a-grow { flex: 1 1 auto; min-width: 0; }
.va .a-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid #E1E7E3; border-radius: 10px; background: #FFFFFF; font-size: 13px; }
.va .a-row > .a-ico, .va .a-good .a-ico { color: #3F6E56; }
.va .a-row.dark { background: #0E1714; border-color: #0E1714; color: #FFFFFF; font-weight: 500; }
.va .a-row.dark > .a-ico { color: inherit; }
.va .a-small { font-size: 12px; color: #5E6E66; }
.va .a-small.sage { color: #3F6E56; font-weight: 500; }
.va .a-pill { display: inline-block; font-size: 12px; font-weight: 500; line-height: 1.4; color: #3F6E56; background: #EEF4F0; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.va .a-pill.warn { color: #6B3A0C; background: #FBEBD6; box-shadow: inset 0 0 0 1px #F0C894; }
.va .a-pill.dark { color: #FFFFFF; background: #3F6E56; }
.va .a-good { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: #3F6E56; }
.va .a-btn { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 13px; font-weight: 500; color: #FFFFFF; background: #0E1714; border-radius: 10px; padding: 0 16px; min-height: 40px; white-space: nowrap; }
.va .a-dot { width: 20px; height: 20px; border-radius: 999px; border: 1.5px solid #3F6E56; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: #FFFFFF; color: transparent; }
.va .a-photo { display: block; border-radius: 8px; background: repeating-linear-gradient(135deg, #E6ECE8 0 8px, #EEF4F0 8px 16px); flex-shrink: 0; }
.va .a-bubble { font-size: 13px; line-height: 1.4; padding: 9px 12px; max-width: 86%; }
.va .a-bubble.in { align-self: flex-start; background: #F3F5F0; border: 1px solid #E1E7E3; border-radius: 14px 14px 14px 4px; color: #0E1714; }
.va .a-bubble.out { align-self: flex-end; background: #3F6E56; color: #FFFFFF; border-radius: 14px 14px 4px 14px; }
.va .a-stack { display: inline-grid; }
.va .a-stack > * { grid-area: 1 / 1; }
.va .a-track { height: 6px; border-radius: 999px; background: #E6ECE8; overflow: hidden; flex-shrink: 0; }
.va .a-track > i { display: block; height: 100%; width: 100%; background: #3F6E56; border-radius: 999px; transform-origin: left center; }
.va .a-amount { font-size: 26px; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; }
.va .a-ico { flex-shrink: 0; }
.va b { color: inherit; font-weight: 600; }
.va .a-flychip { position: absolute; left: 24px; right: 24px; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: #FFFFFF; border: 1px solid #3F6E56; border-radius: 12px; box-shadow: 0 6px 16px rgba(14,23,20,.10); font-size: 13px; font-weight: 500; opacity: 0; }
.va .a-flychip .a-ico { color: #3F6E56; }
/* Two versions of a word, swapped every other loop (electrical, then gas) */
.va .v2a { animation: va-v2a calc(var(--dur) * 2) linear infinite; }
.va .v2b { opacity: 0; animation: va-v2b calc(var(--dur) * 2) linear infinite; }
@keyframes va-v2a { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes va-v2b { 0%, 49.9% { opacity: 0; } 50%, 100% { opacity: 1; } }

/* The wordmark */
.va-mark { display: inline-flex; align-items: baseline; white-space: nowrap; line-height: 1; font-weight: 500; letter-spacing: -0.02em; color: #0E1714; }
.va-mark .l1, .va-mark .l2 { display: inline-block; width: .114em; border-radius: 999px; vertical-align: -0.0125em; transform-origin: 50% 100%; animation: breathe 2.8s ease-in-out infinite; }
.va-mark .l1 { height: .7425em; background: #0E1714; margin-left: .11em; }
.va-mark .l2 { height: .5825em; background: #5E8C74; margin-left: .1em; margin-right: .085em; animation-delay: .7s; }

/* Buttons in the scenes' own design (real links) */
.hs-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 12px 20px; border-radius: 12px; border: 1px solid #C9D3CC; background: #FFFFFF; color: #0E1714; font: 500 15px/1.2 var(--display); text-decoration: none; white-space: nowrap; transition: border-color .15s, background .15s; }
.hs-btn:hover { border-color: #0E1714; color: #0E1714; }
.hs-btn.primary { background: #0E1714; border-color: #0E1714; color: #FFFFFF; }
.hs-btn.primary:hover { background: #22332C; color: #FFFFFF; }

/* ─── Homepage hero: features feed into the wordmark (plays once, 18s, then stays on the finished logo, headline and buttons) ─── */
.spiral { background: #F3F5F0; overflow: hidden; }
.spiral-box { --va-w: 1280; --s: 1; position: relative; width: 100%; max-width: 1400px; margin: 0 auto; aspect-ratio: 1280 / 720; }
@media (max-width: 1279px) { .spiral-box { --s: .85; } }
.spiral-artbox { position: absolute; inset: 0; overflow: hidden; }
.spiral-art, .spiral-copy { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; transform: scale(var(--s)); transform-origin: 0 0; }
.spiral-art { background: radial-gradient(800px 520px at 50% 40%, #FFFFFF, #F3F5F0 72%); overflow: hidden; line-height: normal; }
.spiral-copy { pointer-events: none; }
.hs-intro { position: absolute; left: 0; right: 0; top: 600px; margin: 0; text-align: center; font-family: var(--mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #3F6E56; opacity: 0; animation: hs-intro 18s ease-in-out 1 both; }
.hs-origin { position: absolute; left: 640px; top: 270px; width: 0; height: 0; }
.hs-chip { --cx: var(--x); --cy: var(--y); position: absolute; left: 0; top: 0; white-space: nowrap; font-size: var(--fs); font-weight: 500; line-height: normal; border-radius: 999px; padding: .5em 1em; opacity: 0; box-shadow: 0 10px 22px -14px rgba(14,23,20,.35); }
.hs-light { background: #FFFFFF; border: 1px solid #D5DDD7; color: #0E1714; }
.hs-dark { background: #0E1714; color: #F3F5F0; font-weight: 600; box-shadow: 0 12px 24px -14px rgba(14,23,20,.45); }
.hs-sage { background: #4A7A61; color: #FFFFFF; }
.hs-c4 { font-weight: 600; }
.hs-logo { position: absolute; left: 0; right: 0; top: 200px; margin: 0; display: flex; justify-content: center; align-items: baseline; font-weight: 500; font-size: 160px; line-height: 1; letter-spacing: -0.02em; white-space: nowrap; color: #0E1714; }
.hs-ve { opacity: 0; animation: hs-inL 18s ease-out 1 both; }
.hs-ier { opacity: 0; animation: hs-inR 18s ease-out 1 both; }
.hs-bar { position: relative; display: inline-block; width: .114em; box-sizing: border-box; border-radius: 999px; overflow: hidden; margin-bottom: -.0125em; }
.hs-b1 { height: .7425em; border: 3px solid #0E1714; margin-left: .11em; }
.hs-b2 { height: .5825em; border: 3px solid #5E8C74; margin-left: .1em; margin-right: .085em; }
.hs-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; animation: hs-fill 18s linear 1 both; }
.hs-b1 .hs-fill { background: #0E1714; }
.hs-b2 .hs-fill { background: #5E8C74; animation-delay: .4s; }
.hs-tag { position: absolute; left: 0; right: 0; top: 410px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; opacity: 0; animation: hs-tag 18s ease-out 1 both; pointer-events: auto; }
.spiral-copy:focus-within .hs-tag { animation: none; opacity: 1; transform: none; }
.hs-tag h1 { margin: 0; max-width: none; font-size: 40px; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; color: #0E1714; }
.hs-list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 900px; }
.hs-list li { margin: 0; font-size: 14px; line-height: 1.2; color: #2E3B35; background: #FFFFFF; border: 1px solid #D5DDD7; border-radius: 999px; padding: 7px 14px; }
.hs-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
@keyframes hs-fill { 0%, 40% { height: 0%; } 74%, 100% { height: 100%; } }
@keyframes hs-inL { 0%, 75% { opacity: 0; transform: translateX(24px); } 79%, 100% { opacity: 1; transform: translateX(0); } }
@keyframes hs-inR { 0%, 75% { opacity: 0; transform: translateX(-24px); } 79%, 100% { opacity: 1; transform: translateX(0); } }
@keyframes hs-tag { 0%, 80% { opacity: 0; transform: translateY(10px); } 84%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes hs-intro { 0%, 2% { opacity: 0; } 5%, 33% { opacity: 1; } 37%, 100% { opacity: 0; } }
/* Below 1000px the words come out of the stage and sit under it, always
   showing, and the stage becomes a 600×610 scene with the chips closer
   together and bigger, so they stay readable on a phone. */
@media (max-width: 999px) {
  .spiral-box { --va-w: 600; --s: .6; aspect-ratio: auto; max-width: 600px; }
  .spiral-artbox { position: relative; inset: auto; aspect-ratio: 600 / 610; }
  .spiral-art { width: 600px; height: 610px; background: radial-gradient(420px 400px at 50% 50%, #FFFFFF, #F3F5F0 72%); }
  .hs-origin { left: 300px; top: 300px; }
  .hs-chip { --cx: var(--px); --cy: var(--py); font-size: var(--pfs); }
  .hs-logo { top: 222px; }
  .hs-intro { top: 566px; font-size: 20px; }
  .spiral-copy { position: static; width: auto; height: auto; transform: none; pointer-events: auto; padding: 0 16px 56px; }
  .spiral .hs-tag { position: static; animation: none; opacity: 1; transform: none; gap: 20px; }
  .hs-tag h1 { font-size: clamp(30px, 7vw, 40px); }
}
@media (max-width: 480px) { .hs-actions { flex-direction: column; align-items: stretch; width: 100%; } .hs-actions .hs-btn { justify-content: center; } }

/* ─── Sections in the scenes' own look ───────────────────────────────────── */
.va-sec { padding: clamp(56px, 8vw, 96px) 0; color: #0E1714; }
.sw-sec { background: radial-gradient(1000px 560px at 50% 60%, #FFFFFF, #F3F5F0 72%); }
.is-sec { background: radial-gradient(1000px 520px at 50% 75%, #FFFFFF, #F3F5F0 70%); }
.va-head { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; max-width: 780px; margin: 0 auto; }
.va-eyebrow { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #3F6E56; }
.va-head h2 { margin: 0; font-size: clamp(32px, 4.2vw, 46px); line-height: 1.05; font-weight: 600; letter-spacing: -0.02em; color: #0E1714; }
.va-head p { margin: 0; font-size: 18px; line-height: 1.5; color: #44544C; max-width: 62ch; }
.va-colhead { margin: 0; height: 28px; display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: #5E6E66; }
.va-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }

/* ─── What Vellier replaces (14s; row keyframes added at build time) ─────── */
.sw-cols { display: flex; align-items: flex-start; justify-content: center; gap: 28px; margin-top: 28px; }
.sw-col { width: 400px; display: flex; flex-direction: column; gap: 6px; }
.sw-new { width: 460px; }
.sw-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sw-col li { margin: 0; min-height: 36px; display: flex; align-items: center; padding: 6px 14px; border-radius: 10px; font-size: 15px; line-height: 1.3; opacity: 0; }
.sw-l { position: relative; border: 1px solid #D5DDD7; background: #FFFFFF; color: #44544C; }
.sw-x { position: absolute; left: 10px; top: 50%; height: 2px; width: 0%; max-width: calc(100% - 20px); background: #8A4B12; }
.sw-r { gap: 10px; border: 1px solid #BFD3C7; background: #EEF4F0; font-weight: 500; color: #0E1714; }
.sw-r .a-ico { color: #3F6E56; }
.sw-mark { font-family: var(--display); font-size: 20px; text-transform: none; }
.sw-arrow { padding-top: 160px; }
.sw-done { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; margin-top: 24px; font-size: 15px; color: #44544C; opacity: 0; animation: sw-done 14s ease-out infinite; }
.sw-done:focus-within { animation: none; opacity: 1; }
@keyframes sw-done { 0%, 72% { opacity: 0; transform: translateY(6px); } 76%, 94% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }
@media (max-width: 939px) {
  .sw-cols { flex-direction: column; align-items: center; gap: 12px; }
  .sw-col, .sw-new { width: 100%; max-width: 460px; }
  .sw-arrow { padding: 0; align-self: center; transform: rotate(90deg); }
}

/* ─── How it works: site, office and client in step (12s; trades every 48s) */
.is-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.is-tab { font-size: 13px; font-weight: 500; border: 1px solid #D5DDD7; border-radius: 999px; padding: 6px 14px; background: #FFFFFF; color: #44544C; }
.is-t1 { animation: is-t1 48s linear infinite; } .is-t2 { animation: is-t2 48s linear infinite; } .is-t3 { animation: is-t3 48s linear infinite; } .is-t4 { animation: is-t4 48s linear infinite; }
.is-flow { display: flex; align-items: stretch; justify-content: center; margin-top: 24px; }
.is-panel { width: 330px; height: 340px; flex-shrink: 0; background: #FFFFFF; border: 1px solid #D5DDD7; border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 20px 40px -24px rgba(14,23,20,.25); }
.is-panel.is-phone { border-radius: 28px; }
.is-title { font-size: 17px; font-weight: 600; }
.is-strong { font-size: 14px; font-weight: 600; }
.va .is-report { flex-direction: column; align-items: flex-start; gap: 4px; border-color: #BFD3C7; background: #EEF4F0; }
.va .is-col { flex-direction: column; align-items: flex-start; gap: 4px; }
.is-col > span:last-child { font-size: 14px; }
.is-update { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid #D5DDD7; border-radius: 12px; }
.is-link { position: relative; width: 60px; flex-shrink: 0; }
.is-link::before { content: ""; position: absolute; left: 4px; right: 4px; top: 50%; border-top: 2px dashed #C9D3CC; }
.is-dot { position: absolute; top: calc(50% - 4px); left: 0; width: 10px; height: 10px; border-radius: 999px; background: #3F6E56; opacity: 0; }
.is-dot.amber { left: 52px; background: #C98A1B; }
.is-p1 { animation: is-p1 12s linear infinite; } .is-p2 { animation: is-p2 12s linear infinite; } .is-p3 { animation: is-p3 12s linear infinite; }
.is-v1 { animation: is-v1 48s linear infinite; } .is-v2 { opacity: 0; animation: is-v2 48s linear infinite; } .is-v3 { opacity: 0; animation: is-v3 48s linear infinite; } .is-v4 { opacity: 0; animation: is-v4 48s linear infinite; }
@keyframes is-p1 { 0%, 36% { left: 0; opacity: 0; } 37% { left: 0; opacity: 1; } 44% { left: 52px; opacity: 1; } 45%, 100% { left: 52px; opacity: 0; } }
@keyframes is-p2 { 0%, 44% { left: 0; opacity: 0; } 45% { left: 0; opacity: 1; } 52% { left: 52px; opacity: 1; } 53%, 100% { left: 52px; opacity: 0; } }
@keyframes is-p3 { 0%, 64% { left: 52px; opacity: 0; } 65% { left: 52px; opacity: 1; } 72% { left: 0; opacity: 1; } 73%, 100% { left: 0; opacity: 0; } }
@keyframes is-v1 { 0%, 24.9% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes is-v2 { 0%, 24.9% { opacity: 0; } 25%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes is-v3 { 0%, 49.9% { opacity: 0; } 50%, 74.9% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes is-v4 { 0%, 74.9% { opacity: 0; } 75%, 100% { opacity: 1; } }
@keyframes is-t1 { 0%, 24.9% { background: #0E1714; color: #F3F5F0; } 25%, 100% { background: #FFFFFF; color: #44544C; } }
@keyframes is-t2 { 0%, 24.9% { background: #FFFFFF; color: #44544C; } 25%, 49.9% { background: #0E1714; color: #F3F5F0; } 50%, 100% { background: #FFFFFF; color: #44544C; } }
@keyframes is-t3 { 0%, 49.9% { background: #FFFFFF; color: #44544C; } 50%, 74.9% { background: #0E1714; color: #F3F5F0; } 75%, 100% { background: #FFFFFF; color: #44544C; } }
@keyframes is-t4 { 0%, 74.9% { background: #FFFFFF; color: #44544C; } 75%, 100% { background: #0E1714; color: #F3F5F0; } }
@media (max-width: 1139px) {
  .is-flow { flex-direction: column; align-items: center; }
  .is-panel { width: 100%; max-width: 420px; height: auto; }
  .is-link { height: 44px; transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) { .is-dot { visibility: hidden; } }

/* ─── Feature cards (720×480: words left, a 342×400 scene right) ─────────── */
.fgroup { display: grid; gap: 20px; margin-top: clamp(48px, 7vw, 80px); }
.fgroup:first-of-type { margin-top: 0; }
.fgroup-head h3 { margin: 0 0 8px; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -0.025em; }
.fgroup-head p { margin: 0; color: var(--muted); max-width: 40ch; }
.fgroup-head .fcard-badge { margin-top: 14px; }
.fgroup-cards { display: grid; gap: 24px; min-width: 0; }
@media (min-width: 1180px) {
  .fgroup { grid-template-columns: minmax(0, 1fr) 720px; gap: 48px; align-items: start; }
  .fgroup-head { position: sticky; top: 100px; padding-top: 8px; }
}
.fgrid-more { margin: clamp(40px, 6vw, 64px) 0 0; }
.fcards-pair { display: grid; gap: 24px; }
@media (min-width: 1100px) { .fcards-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fcard { container-type: inline-size; min-width: 0; width: 100%; max-width: 720px; margin: 0 auto; }
.fcard-in { display: flex; align-items: center; gap: 40px; min-height: 480px; padding: 40px 44px; background: #F3F5F0; border: 1px solid #E1E7E3; border-radius: 20px; color: #0E1714; }
.fcard-text { width: 250px; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; }
.fcard-eyebrow { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #3F6E56; }
.fcard-text h3, .fcard-text h4 { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; color: #0E1714; }
.fcard-text p { margin: 0; font-size: 15px; line-height: 1.55; color: #44544C; }
.fcard-text .fcard-eyebrow { font-size: 11px; color: #3F6E56; }
.fcard-badge { align-self: flex-start; display: inline-block; margin: 0; font-size: 13px; font-weight: 500; line-height: 1.3; color: #6B3A0C; background: #FBEBD6; border: 1px solid #F0C894; border-radius: 999px; padding: 4px 10px; }
.fcard-text .fcard-badge { font-size: 13px; color: #6B3A0C; }
.fcard-art { --va-w: 342; --s: 1; position: relative; flex: 1 1 auto; min-width: 0; max-width: 342px; aspect-ratio: 342 / 400; }
.fcard-art > .va { position: absolute; left: 0; top: 0; width: 342px; height: 400px; transform: scale(var(--s)); transform-origin: 0 0; }
@container (max-width: 660px) {
  .fcard-in { flex-direction: column; align-items: stretch; gap: 24px; min-height: 0; padding: 28px 24px; }
  .fcard-text { width: auto; }
  .fcard-text h3, .fcard-text h4 { font-size: 24px; }
  .fcard-art { width: 100%; max-width: 400px; align-self: center; }
}
@container (max-width: 400px) { .fcard-in { padding: 24px 16px; } }

/* Proposals (approved design, 9s) */
.fa-proposals .pr-card { padding: 22px; gap: 13px; }
.fa-proposals .a-row { font-size: 14px; padding: 10px 12px; }
.fa-proposals .a-track > i.pr-bar { width: 0; animation: pr-bar 9s ease-in-out infinite; }
.pr-row1 { animation: pr-row1 9s ease-in-out infinite; } .pr-row2 { animation: pr-row2 9s ease-in-out infinite; } .pr-row3 { animation: pr-row3 9s ease-in-out infinite; }
.pr-dot1 { animation: pr-dot1 9s ease-in-out infinite; } .pr-dot2 { animation: pr-dot2 9s ease-in-out infinite; } .pr-dot3 { animation: pr-dot3 9s ease-in-out infinite; }
.pr-total { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: #F3F5F0; border-radius: 12px; }
.pr-price { animation: pr-price 9s ease-in-out infinite; }
.va .pr-lock { display: flex; align-items: center; gap: 6px; animation: pr-lock 9s ease-in-out infinite; }
.va .pr-sign { font-size: 14px; padding: 0 20px; min-height: 44px; animation: pr-sign 9s ease-in-out infinite; }
.pr-signed { opacity: 0; animation: pr-signed 9s ease-in-out infinite; }
@keyframes pr-row1 { 0%, 10% { background: #FFFFFF; } 14%, 92% { background: #EEF4F0; } 100% { background: #FFFFFF; } }
@keyframes pr-row2 { 0%, 23% { background: #FFFFFF; } 27%, 92% { background: #EEF4F0; } 100% { background: #FFFFFF; } }
@keyframes pr-row3 { 0%, 36% { background: #FFFFFF; } 40%, 92% { background: #EEF4F0; } 100% { background: #FFFFFF; } }
@keyframes pr-dot1 { 0%, 10% { background: #FFFFFF; color: transparent; } 14%, 92% { background: #3F6E56; color: #FFFFFF; } 100% { background: #FFFFFF; color: transparent; } }
@keyframes pr-dot2 { 0%, 23% { background: #FFFFFF; color: transparent; } 27%, 92% { background: #3F6E56; color: #FFFFFF; } 100% { background: #FFFFFF; color: transparent; } }
@keyframes pr-dot3 { 0%, 36% { background: #FFFFFF; color: transparent; } 40%, 92% { background: #3F6E56; color: #FFFFFF; } 100% { background: #FFFFFF; color: transparent; } }
@keyframes pr-bar { 0%, 10% { width: 0%; } 14%, 23% { width: 33%; } 27%, 36% { width: 66%; } 40%, 92% { width: 100%; } 100% { width: 0%; } }
@keyframes pr-price { 0%, 44% { filter: blur(7px); opacity: .55; } 52%, 92% { filter: blur(0); opacity: 1; } 100% { filter: blur(7px); opacity: .55; } }
@keyframes pr-lock { 0%, 44% { opacity: 1; } 50%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes pr-sign { 0%, 58% { box-shadow: 0 0 0 0 rgba(63,110,86,0); transform: scale(1); } 64% { box-shadow: 0 0 0 8px rgba(63,110,86,.18); transform: scale(1.03); } 70% { transform: scale(.97); } 74%, 92% { box-shadow: 0 0 0 0 rgba(63,110,86,0); transform: scale(1); } }
@keyframes pr-signed { 0%, 72% { opacity: 0; transform: translateY(6px); } 76%, 92% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }

/* Verified reviews (approved design, 9s) */
.fa-reviews .rv-card { padding: 18px 20px; }
.rv-stars { display: flex; gap: 4px; }
.rv-s1 { animation: rv-s1 9s ease-out infinite; } .rv-s2 { animation: rv-s2 9s ease-out infinite; } .rv-s3 { animation: rv-s3 9s ease-out infinite; } .rv-s4 { animation: rv-s4 9s ease-out infinite; } .rv-s5 { animation: rv-s5 9s ease-out infinite; }
.va .rv-quote { margin: 0; font-size: 15px; line-height: 1.5; opacity: 0; animation: rv-quote 9s ease-out infinite; }
.rv-consent { opacity: 0; animation: rv-consent 9s ease-out infinite; }
.rv-c1 { animation: rv-c1 9s ease-out infinite; } .rv-c2 { animation: rv-c2 9s ease-out infinite; } .rv-c3 { animation: rv-c3 9s ease-out infinite; }
.rv-k1 { opacity: 0; animation: rv-k1 9s ease-out infinite; } .rv-k2 { opacity: 0; animation: rv-k2 9s ease-out infinite; } .rv-k3 { opacity: 0; animation: rv-k3 9s ease-out infinite; }
@keyframes rv-s1 { 0%, 4% { opacity: .18; transform: scale(.8); } 7%, 92% { opacity: 1; transform: scale(1); } 100% { opacity: .18; } }
@keyframes rv-s2 { 0%, 7% { opacity: .18; transform: scale(.8); } 10%, 92% { opacity: 1; transform: scale(1); } 100% { opacity: .18; } }
@keyframes rv-s3 { 0%, 10% { opacity: .18; transform: scale(.8); } 13%, 92% { opacity: 1; transform: scale(1); } 100% { opacity: .18; } }
@keyframes rv-s4 { 0%, 13% { opacity: .18; transform: scale(.8); } 16%, 92% { opacity: 1; transform: scale(1); } 100% { opacity: .18; } }
@keyframes rv-s5 { 0%, 16% { opacity: .18; transform: scale(.8); } 19%, 92% { opacity: 1; transform: scale(1); } 100% { opacity: .18; } }
@keyframes rv-quote { 0%, 20% { opacity: 0; transform: translateY(4px); } 25%, 92% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }
@keyframes rv-consent { 0%, 32% { opacity: 0; } 36%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rv-c1 { 0%, 44% { background: #FFFFFF; border-color: #E1E7E3; } 48%, 92% { background: #EEF4F0; border-color: #BFD3C7; } 100% { background: #FFFFFF; border-color: #E1E7E3; } }
@keyframes rv-c2 { 0%, 54% { background: #FFFFFF; border-color: #E1E7E3; } 58%, 92% { background: #EEF4F0; border-color: #BFD3C7; } 100% { background: #FFFFFF; border-color: #E1E7E3; } }
@keyframes rv-c3 { 0%, 64% { background: #FFFFFF; border-color: #E1E7E3; } 68%, 92% { background: #EEF4F0; border-color: #BFD3C7; } 100% { background: #FFFFFF; border-color: #E1E7E3; } }
@keyframes rv-k1 { 0%, 44% { opacity: 0; } 48%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rv-k2 { 0%, 54% { opacity: 0; } 58%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rv-k3 { 0%, 64% { opacity: 0; } 68%, 92% { opacity: 1; } 100% { opacity: 0; } }

/* Trade network: pass it on (approved design, 9s) */
.va .pi-art { display: block; height: 400px; }
.va .pi-top, .va .pi-bottom { position: absolute; left: 0; right: 0; padding: 18px 20px; }
.pi-top { top: 0; }
.pi-bottom { top: 236px; }
.pi-earn { font-size: 13px; font-weight: 600; color: #FFFFFF; background: #3F6E56; border-radius: 999px; padding: 5px 12px; opacity: 0; animation: pi-earn 9s ease-out infinite; }
.va .pi-press { min-height: 44px; padding: 0 16px; animation: pi-press 9s ease-in-out infinite; }
.pi-chip { position: absolute; left: 24px; right: 24px; top: 150px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #FFFFFF; border: 1px solid #3F6E56; border-radius: 12px; box-shadow: 0 6px 16px rgba(14,23,20,.10); font-size: 13px; font-weight: 500; opacity: 0; animation: pi-chip 9s ease-in-out infinite; }
.pi-chip .a-ico { color: #3F6E56; }
.pi-taken { opacity: 0; animation: pi-taken 9s ease-in-out infinite; }
.pi-tag { opacity: 0; animation: pi-tag 9s ease-in-out infinite; }
.pi-paid { opacity: 0; animation: pi-paid 9s ease-in-out infinite; }
@keyframes pi-press { 0%, 9% { transform: scale(1); } 12% { transform: scale(.94); } 15%, 100% { transform: scale(1); } }
@keyframes pi-chip { 0%, 12% { opacity: 0; transform: translateY(0); } 16% { opacity: 1; transform: translateY(0); } 34% { opacity: 1; transform: translateY(118px); } 38%, 100% { opacity: 0; transform: translateY(118px); } }
@keyframes pi-taken { 0%, 36% { opacity: 0; } 40%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pi-tag { 0%, 42% { opacity: 0; transform: translateY(4px); } 46%, 92% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }
@keyframes pi-paid { 0%, 58% { opacity: 0; } 62%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pi-earn { 0%, 70% { opacity: 0; transform: scale(.85); } 75% { opacity: 1; transform: scale(1.06); } 78%, 92% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }

/* Missed calls */
.mc-ico { width: 36px; height: 36px; border-radius: 999px; background: #EEF4F0; color: #3F6E56; display: flex; align-items: center; justify-content: center; flex-shrink: 0; animation: mc-buzz var(--dur) ease-in-out infinite; }
.va .mc-cal { padding: 12px 16px; }
.mc-date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 46px; height: 46px; flex-shrink: 0; border-radius: 10px; background: #0E1714; color: #F3F5F0; font-size: 12px; line-height: 1.15; }
.mc-date b { font-size: 14px; }
@keyframes mc-buzz { 0%, 1% { transform: rotate(0); } 2% { transform: rotate(-12deg); } 3% { transform: rotate(12deg); } 4% { transform: rotate(-12deg); } 5% { transform: rotate(12deg); } 6% { transform: rotate(-10deg); } 7% { transform: rotate(10deg); } 8% { transform: rotate(-6deg); } 9%, 100% { transform: rotate(0); } }

/* Team planner */
.tp-row { display: flex; align-items: center; gap: 10px; height: 34px; }
.tp-name { width: 38px; flex-shrink: 0; font-size: 13px; font-weight: 600; }
.tp-track { position: relative; flex: 1 1 auto; height: 100%; display: flex; align-items: center; border-radius: 8px; background: repeating-linear-gradient(90deg, #EEF1EE 0 1px, transparent 1px 25%); }
.tp-job { display: flex; align-items: center; height: 28px; padding: 0 8px; border-radius: 7px; background: #F3F5F0; border: 1px solid #E1E7E3; font-size: 11.5px; white-space: nowrap; overflow: hidden; color: #44544C; }
.tp-job.sage { background: #EEF4F0; border-color: #BFD3C7; color: #0E1714; font-weight: 500; }
.va .tp-way { position: absolute; right: 0; top: 50%; margin-top: -11px; box-shadow: 0 4px 10px -4px rgba(14,23,20,.3); }

/* Daily reports */
.dr-update { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid #BFD3C7; background: #EEF4F0; border-radius: 12px; }

/* Certificates */
.va .ce-sign { padding: 4px 12px; }
.ce-sig path { stroke-dasharray: 240; stroke-dashoffset: 240; animation: ce-sig var(--dur) ease-in-out infinite; }
@keyframes ce-sig { 0%, 40% { stroke-dashoffset: 240; } 52%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 240; } }

/* Subcontractors */
.su-row { animation: su-row var(--dur) ease-in-out infinite; }
.su-warn { opacity: 0; animation: su-warn var(--dur) ease-out infinite; }
@keyframes su-row { 0%, 10% { background: #FFFFFF; border-color: #E1E7E3; } 14%, 68% { background: #FFF8EE; border-color: #F0C894; } 72%, 92% { background: #EEF4F0; border-color: #BFD3C7; } 100% { background: #FFFFFF; border-color: #E1E7E3; } }
@keyframes su-warn { 0%, 10% { opacity: 0; } 13%, 70% { opacity: 1; } 73%, 100% { opacity: 0; } }

/* Get paid */
.va .gp-phone { background: #0E1714; border-color: #0E1714; color: #F3F5F0; }
.gp-tap { position: relative; width: 64px; height: 64px; flex-shrink: 0; border-radius: 999px; background: #26332E; display: flex; align-items: center; justify-content: center; }
.gp-w { position: absolute; inset: 0; border-radius: 999px; border: 2px solid #8FB8A2; opacity: 0; }
.gp-w1 { animation: gp-w1 var(--dur) ease-out infinite; }
.gp-w2 { animation: gp-w2 var(--dur) ease-out infinite; }
.gp-ok { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #0E1714; background: #8FB8A2; border-radius: 999px; padding: 5px 12px; }
@keyframes gp-w1 { 0%, 6% { opacity: 0; transform: scale(.8); } 10% { opacity: .9; } 24%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes gp-w2 { 0%, 12% { opacity: 0; transform: scale(.8); } 16% { opacity: .9; } 30%, 100% { opacity: 0; transform: scale(1.5); } }

/* Timesheets, and the figure rows used by the spec and the deal */
.va .ts-btn { align-self: center; min-height: 36px; padding: 0 14px; }
.ts-day { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; padding: 5px 2px; border-bottom: 1px solid #EEF1EE; }
.ts-file { display: flex; align-items: center; gap: 10px; background: #0E1714; color: #F3F5F0; border-radius: 12px; padding: 10px 14px; font-size: 13px; }
.ts-file .a-ico { color: #8FB8A2; }

/* Home record */
.hr-sw { width: 34px; height: 34px; flex-shrink: 0; border-radius: 999px; border: 1px solid #D5DDD7; }
.hr-ic { width: 34px; height: 34px; flex-shrink: 0; border-radius: 8px; background: #EEF4F0; color: #3F6E56; display: flex; align-items: center; justify-content: center; }

/* Moodboard */
.mb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mb-tile { position: relative; display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 500; }
.mb-pic { display: block; height: 50px; border-radius: 8px; border: 1px solid #E1E7E3; }
.mb-ok { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 999px; background: #3F6E56; color: #FFFFFF; display: flex; align-items: center; justify-content: center; }

/* Deal figures */
.va .dl-profit { border-bottom: 0; border-top: 1px solid #D5DDD7; margin-top: 2px; padding-top: 7px; font-weight: 600; color: #3F6E56; }
.dl-line { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.fa-team-planner .tp-row { height: 30px; }
.fa-team-planner .tp-job { height: 26px; }
.fa-daily-reports .a-row { padding: 8px 12px; }
.fa-moodboard .mb-pic { height: 40px; }
.fa-moodboard .ts-day, .fa-deal-budget .ts-day { padding: 3px 2px; }
.fa-deal-budget .dl-line { gap: 3px; }
.fa-deal-budget .a-panel { gap: 6px; }
.fa-daily-reports .a-panel, .fa-subcontractors .a-panel, .fa-moodboard .a-panel, .fa-deal-budget .a-panel { padding: 13px 16px; }
.fa-moodboard .a-art, .fa-deal-budget .a-art { gap: 7px !important; }
.pr-total .a-col .a-small { white-space: nowrap; }
.va .pr-lock { max-width: 150px; text-align: right; }

/* ─── Written by the build (site/website/websiteAnims.ts) ─── */
@keyframes hs-c0{0%,2%{opacity:0;transform:translate(calc(-50% + var(--cx)),calc(-50% + var(--cy))) scale(0)}3.2%{opacity:1;transform:translate(calc(-50% + var(--cx)),calc(-50% + var(--cy))) scale(1.15)}4%,36%{opacity:1;transform:translate(calc(-50% + var(--cx)),calc(-50% + var(--cy))) scale(1)}40%{opacity:1}41%,100%{opacity:0;transform:translate(-50%,-50%) scale(.2)}}
.hs-c0{animation:hs-c0 18s ease-in-out 1 both}
@keyframes hs-c1{0%,4.5%{opacity:0;transform:translate(calc(-50% + var(--cx)),calc(-50% + var(--cy))) scale(0)}5.7%{opacity:1;transform:translate(calc(-50% + var(--cx)),calc(-50% + var(--cy))) scale(1.15)}6.5%,39%{opacity:1;transform:translate(calc(-50% + var(--cx)),calc(-50% + var(--cy))) scale(1)}43%{opacity:1}44%,100%{opacity:0;transform:translate(-50%,-50%) scale(.2)}}
.hs-c1{animation:hs-c1 18s ease-in-out 1 both}
@keyframes hs-c2{0%,7%{opacity:0;transform:translate(calc(-50% + var(--cx)),calc(-50% + var(--cy))) scale(0)}8.2%{opacity:1;transform:translate(calc(-50% + var(--cx)),calc(-50% + var(--cy))) scale(1.15)}9%,42%{opacity:1;transform:translate(calc(-50% + var(--cx)),calc(-50% + var(--cy))) scale(1)}46%{opacity:1}47%,100%{opacity:0;transform:translate(-50%,-50%) scale(.2)}}
.hs-c2{animation:hs-c2 18s ease-in-out 1 both}
@keyframes hs-c3{0%,9.5%{opacity:0;transform:translate(calc(-50% + var(--cx)),calc(-50% + var(--cy))) scale(0)}10.7%{opacity:1;transform:translate(calc(-50% + var(--cx)),calc(-50% + var(--cy))) scale(1.15)}11.5%,45%{opacity:1;transform:translate(calc(-50% + var(--cx)),calc(-50% + var(--cy))) scale(1)}49%{opacity:1}50%,100%{opacity:0;transform:translate(-50%,-50%) scale(.2)}}
.hs-c3{animation:hs-c3 18s ease-in-out 1 both}
@keyframes hs-c4{0%,12%{opacity:0;transform:translate(calc(-50% + var(--cx)),calc(-50% + var(--cy))) scale(0)}13.2%{opacity:1;transform:translate(calc(-50% + var(--cx)),calc(-50% + var(--cy))) scale(1.15)}14%,48%{opacity:1;transform:translate(calc(-50% + var(--cx)),calc(-50% + var(--cy))) scale(1)}52%{opacity:1}53%,100%{opacity:0;transform:translate(-50%,-50%) scale(.2)}}
.hs-c4{animation:hs-c4 18s ease-in-out 1 both}
@keyframes hs-c5{0%,14.5%{opacity:0;transform:translate(calc(-50% + var(--cx)),calc(-50% + var(--cy))) scale(0)}15.7%{opacity:1;transform:translate(calc(-50% + var(--cx)),calc(-50% + var(--cy))) scale(1.15)}16.5%,51%{opacity:1;transform:translate(calc(-50% + var(--cx)),calc(-50% + var(--cy))) scale(1)}55%{opacity:1}56%,100%{opacity:0;transform:translate(-50%,-50%) scale(.2)}}
.hs-c5{animation:hs-c5 18s ease-in-out 1 both}
@keyframes hs-c6{0%,17%{opacity:0;transform:translate(calc(-50% + var(--cx)),calc(-50% + var(--cy))) scale(0)}18.2%{opacity:1;transform:translate(calc(-50% + var(--cx)),calc(-50% + var(--cy))) scale(1.15)}19%,54%{opacity:1;transform:translate(calc(-50% + var(--cx)),calc(-50% + var(--cy))) scale(1)}58%{opacity:1}59%,100%{opacity:0;transform:translate(-50%,-50%) scale(.2)}}
.hs-c6{animation:hs-c6 18s ease-in-out 1 both}
@keyframes hs-c7{0%,19.5%{opacity:0;transform:translate(calc(-50% + var(--cx)),calc(-50% + var(--cy))) scale(0)}20.7%{opacity:1;transform:translate(calc(-50% + var(--cx)),calc(-50% + var(--cy))) scale(1.15)}21.5%,57%{opacity:1;transform:translate(calc(-50% + var(--cx)),calc(-50% + var(--cy))) scale(1)}61%{opacity:1}62%,100%{opacity:0;transform:translate(-50%,-50%) scale(.2)}}
.hs-c7{animation:hs-c7 18s ease-in-out 1 both}
@keyframes hs-c8{0%,22%{opacity:0;transform:translate(calc(-50% + var(--cx)),calc(-50% + var(--cy))) scale(0)}23.2%{opacity:1;transform:translate(calc(-50% + var(--cx)),calc(-50% + var(--cy))) scale(1.15)}24%,60%{opacity:1;transform:translate(calc(-50% + var(--cx)),calc(-50% + var(--cy))) scale(1)}64%{opacity:1}65%,100%{opacity:0;transform:translate(-50%,-50%) scale(.2)}}
.hs-c8{animation:hs-c8 18s ease-in-out 1 both}
@keyframes hs-c9{0%,24.5%{opacity:0;transform:translate(calc(-50% + var(--cx)),calc(-50% + var(--cy))) scale(0)}25.7%{opacity:1;transform:translate(calc(-50% + var(--cx)),calc(-50% + var(--cy))) scale(1.15)}26.5%,63%{opacity:1;transform:translate(calc(-50% + var(--cx)),calc(-50% + var(--cy))) scale(1)}67%{opacity:1}68%,100%{opacity:0;transform:translate(-50%,-50%) scale(.2)}}
.hs-c9{animation:hs-c9 18s ease-in-out 1 both}
@keyframes hs-c10{0%,27%{opacity:0;transform:translate(calc(-50% + var(--cx)),calc(-50% + var(--cy))) scale(0)}28.2%{opacity:1;transform:translate(calc(-50% + var(--cx)),calc(-50% + var(--cy))) scale(1.15)}29%,66%{opacity:1;transform:translate(calc(-50% + var(--cx)),calc(-50% + var(--cy))) scale(1)}70%{opacity:1}71%,100%{opacity:0;transform:translate(-50%,-50%) scale(.2)}}
.hs-c10{animation:hs-c10 18s ease-in-out 1 both}
@keyframes hs-c11{0%,29.5%{opacity:0;transform:translate(calc(-50% + var(--cx)),calc(-50% + var(--cy))) scale(0)}30.7%{opacity:1;transform:translate(calc(-50% + var(--cx)),calc(-50% + var(--cy))) scale(1.15)}31.5%,69%{opacity:1;transform:translate(calc(-50% + var(--cx)),calc(-50% + var(--cy))) scale(1)}73%{opacity:1}74%,100%{opacity:0;transform:translate(-50%,-50%) scale(.2)}}
.hs-c11{animation:hs-c11 18s ease-in-out 1 both}
@keyframes sw-l0{0%,3%{opacity:0;transform:translateX(-12px)}5%,6%{opacity:1;transform:none;color:#44544C;background:#FFFFFF}8%,94%{opacity:1;transform:none;color:#5E6E66;background:#F7F9F6}100%{opacity:0}}
@keyframes sw-x0{0%,6%{width:0%}8%,94%{width:100%}100%{width:0%}}
@keyframes sw-r0{0%,7%{opacity:0;transform:translateX(-18px)}10%,94%{opacity:1;transform:none}100%{opacity:0}}
.sw-l0{animation:sw-l0 14s ease-out infinite}.sw-x0{animation:sw-x0 14s ease-out infinite}.sw-r0{animation:sw-r0 14s ease-out infinite}
@keyframes sw-l1{0%,11.5%{opacity:0;transform:translateX(-12px)}13.5%,14.5%{opacity:1;transform:none;color:#44544C;background:#FFFFFF}16.5%,94%{opacity:1;transform:none;color:#5E6E66;background:#F7F9F6}100%{opacity:0}}
@keyframes sw-x1{0%,14.5%{width:0%}16.5%,94%{width:100%}100%{width:0%}}
@keyframes sw-r1{0%,15.5%{opacity:0;transform:translateX(-18px)}18.5%,94%{opacity:1;transform:none}100%{opacity:0}}
.sw-l1{animation:sw-l1 14s ease-out infinite}.sw-x1{animation:sw-x1 14s ease-out infinite}.sw-r1{animation:sw-r1 14s ease-out infinite}
@keyframes sw-l2{0%,20%{opacity:0;transform:translateX(-12px)}22%,23%{opacity:1;transform:none;color:#44544C;background:#FFFFFF}25%,94%{opacity:1;transform:none;color:#5E6E66;background:#F7F9F6}100%{opacity:0}}
@keyframes sw-x2{0%,23%{width:0%}25%,94%{width:100%}100%{width:0%}}
@keyframes sw-r2{0%,24%{opacity:0;transform:translateX(-18px)}27%,94%{opacity:1;transform:none}100%{opacity:0}}
.sw-l2{animation:sw-l2 14s ease-out infinite}.sw-x2{animation:sw-x2 14s ease-out infinite}.sw-r2{animation:sw-r2 14s ease-out infinite}
@keyframes sw-l3{0%,28.5%{opacity:0;transform:translateX(-12px)}30.5%,31.5%{opacity:1;transform:none;color:#44544C;background:#FFFFFF}33.5%,94%{opacity:1;transform:none;color:#5E6E66;background:#F7F9F6}100%{opacity:0}}
@keyframes sw-x3{0%,31.5%{width:0%}33.5%,94%{width:100%}100%{width:0%}}
@keyframes sw-r3{0%,32.5%{opacity:0;transform:translateX(-18px)}35.5%,94%{opacity:1;transform:none}100%{opacity:0}}
.sw-l3{animation:sw-l3 14s ease-out infinite}.sw-x3{animation:sw-x3 14s ease-out infinite}.sw-r3{animation:sw-r3 14s ease-out infinite}
@keyframes sw-l4{0%,37%{opacity:0;transform:translateX(-12px)}39%,40%{opacity:1;transform:none;color:#44544C;background:#FFFFFF}42%,94%{opacity:1;transform:none;color:#5E6E66;background:#F7F9F6}100%{opacity:0}}
@keyframes sw-x4{0%,40%{width:0%}42%,94%{width:100%}100%{width:0%}}
@keyframes sw-r4{0%,41%{opacity:0;transform:translateX(-18px)}44%,94%{opacity:1;transform:none}100%{opacity:0}}
.sw-l4{animation:sw-l4 14s ease-out infinite}.sw-x4{animation:sw-x4 14s ease-out infinite}.sw-r4{animation:sw-r4 14s ease-out infinite}
@keyframes sw-l5{0%,45.5%{opacity:0;transform:translateX(-12px)}47.5%,48.5%{opacity:1;transform:none;color:#44544C;background:#FFFFFF}50.5%,94%{opacity:1;transform:none;color:#5E6E66;background:#F7F9F6}100%{opacity:0}}
@keyframes sw-x5{0%,48.5%{width:0%}50.5%,94%{width:100%}100%{width:0%}}
@keyframes sw-r5{0%,49.5%{opacity:0;transform:translateX(-18px)}52.5%,94%{opacity:1;transform:none}100%{opacity:0}}
.sw-l5{animation:sw-l5 14s ease-out infinite}.sw-x5{animation:sw-x5 14s ease-out infinite}.sw-r5{animation:sw-r5 14s ease-out infinite}
@keyframes sw-l6{0%,54%{opacity:0;transform:translateX(-12px)}56%,57%{opacity:1;transform:none;color:#44544C;background:#FFFFFF}59%,94%{opacity:1;transform:none;color:#5E6E66;background:#F7F9F6}100%{opacity:0}}
@keyframes sw-x6{0%,57%{width:0%}59%,94%{width:100%}100%{width:0%}}
@keyframes sw-r6{0%,58%{opacity:0;transform:translateX(-18px)}61%,94%{opacity:1;transform:none}100%{opacity:0}}
.sw-l6{animation:sw-l6 14s ease-out infinite}.sw-x6{animation:sw-x6 14s ease-out infinite}.sw-r6{animation:sw-r6 14s ease-out infinite}
@keyframes sw-l7{0%,62.5%{opacity:0;transform:translateX(-12px)}64.5%,65.5%{opacity:1;transform:none;color:#44544C;background:#FFFFFF}67.5%,94%{opacity:1;transform:none;color:#5E6E66;background:#F7F9F6}100%{opacity:0}}
@keyframes sw-x7{0%,65.5%{width:0%}67.5%,94%{width:100%}100%{width:0%}}
@keyframes sw-r7{0%,66.5%{opacity:0;transform:translateX(-18px)}69.5%,94%{opacity:1;transform:none}100%{opacity:0}}
.sw-l7{animation:sw-l7 14s ease-out infinite}.sw-x7{animation:sw-x7 14s ease-out infinite}.sw-r7{animation:sw-r7 14s ease-out infinite}
@keyframes u-drop-8{0%,8%{opacity:0;transform:translateY(-22px)}13%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.va .u-drop-8{animation:u-drop-8 var(--dur) ease-out infinite}
@keyframes u-fly-28{0%,28%{opacity:0;transform:translateY(0)}31%{opacity:1;transform:translateY(0)}42%{opacity:1;transform:translateY(var(--fy,90px))}45%,100%{opacity:0;transform:translateY(var(--fy,90px))}}
.va .u-fly-28{animation:u-fly-28 var(--dur) ease-in-out infinite}
@keyframes u-fly-30{0%,30%{opacity:0;transform:translateY(0)}33%{opacity:1;transform:translateY(0)}44%{opacity:1;transform:translateY(var(--fy,90px))}47%,100%{opacity:0;transform:translateY(var(--fy,90px))}}
.va .u-fly-30{animation:u-fly-30 var(--dur) ease-in-out infinite}
@keyframes u-grow-44{0%,44%{transform:scaleX(0)}54%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.va .u-grow-44{animation:u-grow-44 var(--dur) ease-in-out infinite}
@keyframes u-grow-48{0%,48%{transform:scaleX(0)}58%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.va .u-grow-48{animation:u-grow-48 var(--dur) ease-in-out infinite}
@keyframes u-grow-52{0%,52%{transform:scaleX(0)}62%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.va .u-grow-52{animation:u-grow-52 var(--dur) ease-in-out infinite}
@keyframes u-grow-60{0%,60%{transform:scaleX(0)}70%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.va .u-grow-60{animation:u-grow-60 var(--dur) ease-in-out infinite}
@keyframes u-hl-10{0%,10%{background:#FFFFFF;border-color:#E1E7E3}14%,92%{background:#EEF4F0;border-color:#BFD3C7}100%{background:#FFFFFF;border-color:#E1E7E3}}
.va .u-hl-10{animation:u-hl-10 var(--dur) ease-in-out infinite}
@keyframes u-hl-20{0%,20%{background:#FFFFFF;border-color:#E1E7E3}24%,92%{background:#EEF4F0;border-color:#BFD3C7}100%{background:#FFFFFF;border-color:#E1E7E3}}
.va .u-hl-20{animation:u-hl-20 var(--dur) ease-in-out infinite}
@keyframes u-hl-30{0%,30%{background:#FFFFFF;border-color:#E1E7E3}34%,92%{background:#EEF4F0;border-color:#BFD3C7}100%{background:#FFFFFF;border-color:#E1E7E3}}
.va .u-hl-30{animation:u-hl-30 var(--dur) ease-in-out infinite}
@keyframes u-hl-48{0%,48%{background:#FFFFFF;border-color:#E1E7E3}52%,92%{background:#EEF4F0;border-color:#BFD3C7}100%{background:#FFFFFF;border-color:#E1E7E3}}
.va .u-hl-48{animation:u-hl-48 var(--dur) ease-in-out infinite}
@keyframes u-hl-60{0%,60%{background:#FFFFFF;border-color:#E1E7E3}64%,92%{background:#EEF4F0;border-color:#BFD3C7}100%{background:#FFFFFF;border-color:#E1E7E3}}
.va .u-hl-60{animation:u-hl-60 var(--dur) ease-in-out infinite}
@keyframes u-in-4{0%,4%{opacity:0;transform:translateY(6px)}7%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.va .u-in-4{animation:u-in-4 var(--dur) ease-out infinite}
@keyframes u-in-6{0%,6%{opacity:0;transform:translateY(6px)}9%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.va .u-in-6{animation:u-in-6 var(--dur) ease-out infinite}
@keyframes u-in-8{0%,8%{opacity:0;transform:translateY(6px)}11%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.va .u-in-8{animation:u-in-8 var(--dur) ease-out infinite}
@keyframes u-in-10{0%,10%{opacity:0;transform:translateY(6px)}13%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.va .u-in-10{animation:u-in-10 var(--dur) ease-out infinite}
@keyframes u-in-12{0%,12%{opacity:0;transform:translateY(6px)}15%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.va .u-in-12{animation:u-in-12 var(--dur) ease-out infinite}
@keyframes u-in-14{0%,14%{opacity:0;transform:translateY(6px)}17%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.va .u-in-14{animation:u-in-14 var(--dur) ease-out infinite}
@keyframes u-in-16{0%,16%{opacity:0;transform:translateY(6px)}19%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.va .u-in-16{animation:u-in-16 var(--dur) ease-out infinite}
@keyframes u-in-20{0%,20%{opacity:0;transform:translateY(6px)}23%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.va .u-in-20{animation:u-in-20 var(--dur) ease-out infinite}
@keyframes u-in-22{0%,22%{opacity:0;transform:translateY(6px)}25%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.va .u-in-22{animation:u-in-22 var(--dur) ease-out infinite}
@keyframes u-in-26{0%,26%{opacity:0;transform:translateY(6px)}29%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.va .u-in-26{animation:u-in-26 var(--dur) ease-out infinite}
@keyframes u-in-32{0%,32%{opacity:0;transform:translateY(6px)}35%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.va .u-in-32{animation:u-in-32 var(--dur) ease-out infinite}
@keyframes u-in-34{0%,34%{opacity:0;transform:translateY(6px)}37%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.va .u-in-34{animation:u-in-34 var(--dur) ease-out infinite}
@keyframes u-in-38{0%,38%{opacity:0;transform:translateY(6px)}41%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.va .u-in-38{animation:u-in-38 var(--dur) ease-out infinite}
@keyframes u-in-42{0%,42%{opacity:0;transform:translateY(6px)}45%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.va .u-in-42{animation:u-in-42 var(--dur) ease-out infinite}
@keyframes u-in-44{0%,44%{opacity:0;transform:translateY(6px)}47%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.va .u-in-44{animation:u-in-44 var(--dur) ease-out infinite}
@keyframes u-in-46{0%,46%{opacity:0;transform:translateY(6px)}49%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.va .u-in-46{animation:u-in-46 var(--dur) ease-out infinite}
@keyframes u-in-48{0%,48%{opacity:0;transform:translateY(6px)}51%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.va .u-in-48{animation:u-in-48 var(--dur) ease-out infinite}
@keyframes u-in-50{0%,50%{opacity:0;transform:translateY(6px)}53%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.va .u-in-50{animation:u-in-50 var(--dur) ease-out infinite}
@keyframes u-in-52{0%,52%{opacity:0;transform:translateY(6px)}55%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.va .u-in-52{animation:u-in-52 var(--dur) ease-out infinite}
@keyframes u-in-54{0%,54%{opacity:0;transform:translateY(6px)}57%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.va .u-in-54{animation:u-in-54 var(--dur) ease-out infinite}
@keyframes u-in-56{0%,56%{opacity:0;transform:translateY(6px)}59%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.va .u-in-56{animation:u-in-56 var(--dur) ease-out infinite}
@keyframes u-in-58{0%,58%{opacity:0;transform:translateY(6px)}61%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.va .u-in-58{animation:u-in-58 var(--dur) ease-out infinite}
@keyframes u-in-60{0%,60%{opacity:0;transform:translateY(6px)}63%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.va .u-in-60{animation:u-in-60 var(--dur) ease-out infinite}
@keyframes u-in-62{0%,62%{opacity:0;transform:translateY(6px)}65%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.va .u-in-62{animation:u-in-62 var(--dur) ease-out infinite}
@keyframes u-in-66{0%,66%{opacity:0;transform:translateY(6px)}69%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.va .u-in-66{animation:u-in-66 var(--dur) ease-out infinite}
@keyframes u-in-68{0%,68%{opacity:0;transform:translateY(6px)}71%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.va .u-in-68{animation:u-in-68 var(--dur) ease-out infinite}
@keyframes u-in-70{0%,70%{opacity:0;transform:translateY(6px)}73%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.va .u-in-70{animation:u-in-70 var(--dur) ease-out infinite}
@keyframes u-in-72{0%,72%{opacity:0;transform:translateY(6px)}75%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.va .u-in-72{animation:u-in-72 var(--dur) ease-out infinite}
@keyframes u-out-8{0%,8%{opacity:1}11%,94%{opacity:0}100%{opacity:1}}
.va .u-out-8{animation:u-out-8 var(--dur) ease-out infinite}
@keyframes u-out-10{0%,10%{opacity:1}13%,94%{opacity:0}100%{opacity:1}}
.va .u-out-10{animation:u-out-10 var(--dur) ease-out infinite}
@keyframes u-out-14{0%,14%{opacity:1}17%,94%{opacity:0}100%{opacity:1}}
.va .u-out-14{animation:u-out-14 var(--dur) ease-out infinite}
@keyframes u-out-36{0%,36%{opacity:1}39%,94%{opacity:0}100%{opacity:1}}
.va .u-out-36{animation:u-out-36 var(--dur) ease-out infinite}
@keyframes u-pop-4{0%,4%{opacity:0;transform:scale(.85)}7%{opacity:1;transform:scale(1.06)}9%,92%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
.va .u-pop-4{animation:u-pop-4 var(--dur) ease-out infinite}
@keyframes u-pop-8{0%,8%{opacity:0;transform:scale(.85)}11%{opacity:1;transform:scale(1.06)}13%,92%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
.va .u-pop-8{animation:u-pop-8 var(--dur) ease-out infinite}
@keyframes u-pop-12{0%,12%{opacity:0;transform:scale(.85)}15%{opacity:1;transform:scale(1.06)}17%,92%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
.va .u-pop-12{animation:u-pop-12 var(--dur) ease-out infinite}
@keyframes u-pop-14{0%,14%{opacity:0;transform:scale(.85)}17%{opacity:1;transform:scale(1.06)}19%,92%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
.va .u-pop-14{animation:u-pop-14 var(--dur) ease-out infinite}
@keyframes u-pop-16{0%,16%{opacity:0;transform:scale(.85)}19%{opacity:1;transform:scale(1.06)}21%,92%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
.va .u-pop-16{animation:u-pop-16 var(--dur) ease-out infinite}
@keyframes u-pop-22{0%,22%{opacity:0;transform:scale(.85)}25%{opacity:1;transform:scale(1.06)}27%,92%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
.va .u-pop-22{animation:u-pop-22 var(--dur) ease-out infinite}
@keyframes u-pop-24{0%,24%{opacity:0;transform:scale(.85)}27%{opacity:1;transform:scale(1.06)}29%,92%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
.va .u-pop-24{animation:u-pop-24 var(--dur) ease-out infinite}
@keyframes u-pop-28{0%,28%{opacity:0;transform:scale(.85)}31%{opacity:1;transform:scale(1.06)}33%,92%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
.va .u-pop-28{animation:u-pop-28 var(--dur) ease-out infinite}
@keyframes u-pop-30{0%,30%{opacity:0;transform:scale(.85)}33%{opacity:1;transform:scale(1.06)}35%,92%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
.va .u-pop-30{animation:u-pop-30 var(--dur) ease-out infinite}
@keyframes u-pop-32{0%,32%{opacity:0;transform:scale(.85)}35%{opacity:1;transform:scale(1.06)}37%,92%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
.va .u-pop-32{animation:u-pop-32 var(--dur) ease-out infinite}
@keyframes u-pop-36{0%,36%{opacity:0;transform:scale(.85)}39%{opacity:1;transform:scale(1.06)}41%,92%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
.va .u-pop-36{animation:u-pop-36 var(--dur) ease-out infinite}
@keyframes u-pop-46{0%,46%{opacity:0;transform:scale(.85)}49%{opacity:1;transform:scale(1.06)}51%,92%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
.va .u-pop-46{animation:u-pop-46 var(--dur) ease-out infinite}
@keyframes u-pop-58{0%,58%{opacity:0;transform:scale(.85)}61%{opacity:1;transform:scale(1.06)}63%,92%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
.va .u-pop-58{animation:u-pop-58 var(--dur) ease-out infinite}
@keyframes u-pop-64{0%,64%{opacity:0;transform:scale(.85)}67%{opacity:1;transform:scale(1.06)}69%,92%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
.va .u-pop-64{animation:u-pop-64 var(--dur) ease-out infinite}
@keyframes u-pop-70{0%,70%{opacity:0;transform:scale(.85)}73%{opacity:1;transform:scale(1.06)}75%,92%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
.va .u-pop-70{animation:u-pop-70 var(--dur) ease-out infinite}
@keyframes u-press-6{0%,6%{transform:scale(1)}8%{transform:scale(.94)}10%,100%{transform:scale(1)}}
.va .u-press-6{animation:u-press-6 var(--dur) ease-in-out infinite}
@keyframes u-press-24{0%,24%{transform:scale(1)}26%{transform:scale(.94)}28%,100%{transform:scale(1)}}
.va .u-press-24{animation:u-press-24 var(--dur) ease-in-out infinite}
@keyframes u-slide-6{0%,6%{opacity:0;transform:translateX(-14px)}9%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.va .u-slide-6{animation:u-slide-6 var(--dur) ease-out infinite}
@keyframes u-slide-14{0%,14%{opacity:0;transform:translateX(-14px)}17%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.va .u-slide-14{animation:u-slide-14 var(--dur) ease-out infinite}
@keyframes u-slide-22{0%,22%{opacity:0;transform:translateX(-14px)}25%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.va .u-slide-22{animation:u-slide-22 var(--dur) ease-out infinite}
@keyframes u-slide-30{0%,30%{opacity:0;transform:translateX(-14px)}33%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.va .u-slide-30{animation:u-slide-30 var(--dur) ease-out infinite}
@keyframes u-slide-38{0%,38%{opacity:0;transform:translateX(-14px)}41%,92%{opacity:1;transform:none}100%{opacity:0;transform:none}}
.va .u-slide-38{animation:u-slide-38 var(--dur) ease-out infinite}
@keyframes u-tk-10{0%,10%{background:#FFFFFF;color:transparent}14%,92%{background:#3F6E56;color:#FFFFFF}100%{background:#FFFFFF;color:transparent}}
.va .u-tk-10{animation:u-tk-10 var(--dur) ease-in-out infinite}
@keyframes u-tk-20{0%,20%{background:#FFFFFF;color:transparent}24%,92%{background:#3F6E56;color:#FFFFFF}100%{background:#FFFFFF;color:transparent}}
.va .u-tk-20{animation:u-tk-20 var(--dur) ease-in-out infinite}
@keyframes u-tk-30{0%,30%{background:#FFFFFF;color:transparent}34%,92%{background:#3F6E56;color:#FFFFFF}100%{background:#FFFFFF;color:transparent}}
.va .u-tk-30{animation:u-tk-30 var(--dur) ease-in-out infinite}