/* Find Work / Find Staff extras: gentle motion and colour. Loaded only by those two pages; style.css is not changed.
   To switch it off, remove the find-lively link and script tags and the "lv-stats" block from the pages. */

/* ---- scroll reveal (classes are added by services-lively.js) ---- */
.lv { opacity: 0; transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--lv-d, 0s); }
.lv-up { transform: translateY(28px); }
.lv-left { transform: translateX(-40px); }
.lv-right { transform: translateX(40px); }
.lv-zoom { transform: scale(.93); }
.lv.lv-in { opacity: 1; transform: none; }

/* ---- hero ---- */
.blog-hero { isolation: isolate; }
.blog-hero-text, .blog-hero-media { position: relative; z-index: 1; }
.blog-hero-media img { animation: lvSettle 1.8s cubic-bezier(.2, .7, .2, 1) both; transition: scale .6s ease; }
.blog-hero-media:hover img { scale: 1.04; }
@keyframes lvSettle { from { transform: scale(1.12); } to { transform: scale(1); } }
.blog-hero-text > * { animation: lvRise .8s cubic-bezier(.2, .7, .2, 1) both; }
.blog-hero-text > :nth-child(2) { animation-delay: .12s; } .blog-hero-text > :nth-child(3) { animation-delay: .24s; } .blog-hero-text > :nth-child(4) { animation-delay: .36s; }
@keyframes lvRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.lv-hblob { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; filter: blur(40px); animation: lvDrift 14s ease-in-out infinite; }
.lv-hblob-a { width: 300px; height: 300px; top: -90px; right: 18%; background: radial-gradient(circle, rgba(41, 171, 226, .38), rgba(41, 171, 226, 0) 70%); }
.lv-hblob-b { width: 260px; height: 260px; bottom: -90px; left: 6%; background: radial-gradient(circle, rgba(255, 90, 43, .26), rgba(255, 90, 43, 0) 70%); animation-delay: -6s; }

/* ---- buttons ---- */
.blog-hero-cta { transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.blog-hero-cta::after { content: "\2192"; display: inline-block; margin-left: 8px; transition: transform .25s ease; }
.blog-hero-cta:hover::after { transform: translateX(6px); }
.purpose-section .blog-hero-cta { animation: lvPulse 2.8s ease-in-out infinite; }
@keyframes lvPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(59, 20, 120, 0); } 50% { box-shadow: 0 0 0 9px rgba(59, 20, 120, .12); } }

@keyframes lvDrift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-22px, 18px) scale(1.08); } }

/* ---- stats band ---- */
/* the banner sits right under the page hero: close the extra space the hero section leaves below itself and keep an even gap above and below the tiles */
.blog-section:has(+ .lv-stats) { padding-bottom: 0; }
.blog-section:has(+ .lv-stats) .blog-hero { margin-bottom: 0; }
.lv-stats { background: #fff; padding: 40px 0 64px; }
.lv-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lv-stat { position: relative; display: flex; align-items: center; gap: 16px; padding: 20px 24px; border-radius: 20px; background: var(--bg-light, #E9F1FC); transition: translate .3s ease, box-shadow .3s ease; }
.lv-stat:hover { translate: 0 -5px; box-shadow: 0 16px 30px -12px rgba(59, 20, 120, .28); }
.lv-stat-num { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 2.7vw, 2.2rem); line-height: 1; color: var(--dark-purple, #3b1478); white-space: nowrap; }
.lv-stat-num i { font-style: normal; color: var(--coral, #FF5A2B); }
.lv-stat-label { min-width: 0; font-weight: 600; font-size: .92rem; line-height: 1.35; color: var(--ink, #0F1B1A); }
.lv-stat-label small { display: block; font-weight: 500; color: var(--gray-600, #5b6472); margin-top: 2px; }
.lv-stat:has(.lv-live) { padding-right: 38px; }
.lv-live { position: absolute; top: 50%; right: 16px; margin-top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--mint, #22C57A); }
.lv-live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--mint, #22C57A); animation: lvPing 2s ease-out infinite; }
@keyframes lvPing { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3.2); opacity: 0; } }
@media (max-width: 800px) { .lv-stats-row { grid-template-columns: 1fr; } }

/* ---- solutions section ---- */
.solutions { position: relative; overflow: hidden; }
.solutions > .container { position: relative; z-index: 1; }
.lv-blob { position: absolute; z-index: 0; width: 300px; height: 300px; border-radius: 50%; pointer-events: none; filter: blur(36px); opacity: .55; animation: lvDrift 15s ease-in-out infinite; }
.lv-blob-a { top: 6%; right: 3%; background: radial-gradient(circle, rgba(41, 171, 226, .30), rgba(41, 171, 226, 0) 70%); }
.lv-blob-b { bottom: 6%; left: 2%; background: radial-gradient(circle, rgba(255, 90, 43, .18), rgba(255, 90, 43, 0) 70%); animation-delay: -5s; }
.solution-card { transition-property: opacity, transform, box-shadow, background, translate; }
.solution-card:hover { translate: 0 -6px; }
.solution-tag { transition: transform .25s ease; display: inline-block; }
.solution-card:hover .solution-tag { transform: scale(1.06); }
.text-link .arrow { display: inline-block; transition: transform .25s ease; }
.text-link:hover .arrow { transform: translateX(6px); }
.section-head h2::after { content: ""; display: block; width: 0; height: 4px; margin: 12px auto 0; border-radius: 4px; background: linear-gradient(90deg, var(--coral, #FF5A2B), var(--yellow, #ffc107)); transition: width .8s cubic-bezier(.2, .7, .2, 1) .35s; }
.section-head.lv-in h2::after { width: 60px; }

@media (prefers-reduced-motion: reduce) {
  .lv { opacity: 1; transform: none; transition: none; }
  .blog-hero-media img, .blog-hero-text > *, .lv-hblob, .lv-blob, .lv-live::after { animation: none; }
  .section-head h2::after { width: 60px; transition: none; }
}