/* Home hero: service chips staggered around the lion circle */
.chip-1 { top: 2%; left: -6%; animation-duration: 6s; animation-delay: -1s; }
.chip-4 { top: 30%; right: -14%; animation-duration: 7s; animation-delay: -3s; }
.chip-3 { top: auto; bottom: 30%; left: -14%; animation-duration: 6.5s; animation-delay: -5s; }
.chip-5 { bottom: -2%; right: 0; animation-duration: 7.5s; animation-delay: -2s; }
@media (max-width: 1100px) { .chip-4 { right: -2%; } }
@media (max-width: 600px) {
  .chip-1 { left: -8%; }
  .chip-4 { top: 14%; right: -18%; }
  .chip-3 { left: -16%; }
  .chip-5 { right: -4%; }
}

/* Frosted-glass service chips */
.hero .chip {
  background: rgba(255, 255, 255, .12);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .5);
}

/* Savanna grass along the bottom of the hero */
.hero::after { content: ""; position: absolute; left: -3%; right: -3%; bottom: -2px; height: 130px; pointer-events: none; background: url("/assets/grass-front.svg") bottom center / auto 70% repeat-x, url("/assets/grass-back.svg") bottom center / auto 100% repeat-x; -webkit-mask-image: linear-gradient(to top, #000 45%, transparent); mask-image: linear-gradient(to top, #000 45%, transparent); transform-origin: 50% 100%; animation: sway 8s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: skewX(0deg); } 50% { transform: skewX(-4deg); } }
@media (prefers-reduced-motion: reduce) { .hero::after { animation: none; } }
@media (max-width: 600px) { .hero::after { height: 90px; } }
.hero .dot-blue { background: #9FA1FF; }

/* Grass leading into Elevate With Us */
.services { position: relative; }
.services::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 80px; pointer-events: none; background: url("/assets/grass-front.svg") bottom center / auto 70% repeat-x, url("/assets/grass-back.svg") bottom center / auto 100% repeat-x; -webkit-mask-image: linear-gradient(to top, #000 45%, transparent); mask-image: linear-gradient(to top, #000 45%, transparent); }

/* Client logo strip */
.clients { padding: clamp(44px, 5vw, 64px) 0 clamp(36px, 4vw, 52px); background: var(--white); }
.clients .container { text-align: center; }
.clients-eyebrow { margin-bottom: 22px; }
.logo-marquee { overflow: hidden; padding: 10px 0 24px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.logo-track { display: flex; width: max-content; animation: scroll 45s linear infinite; }
.logo-marquee:hover .logo-track { animation-play-state: paused; }
.logo-set { display: flex; gap: 20px; padding: 0 20px 0 0; margin: 0; list-style: none; }
.logo-tile { flex: none; width: 184px; height: 112px; display: grid; place-items: center; padding: 14px; background: var(--white); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 16px 34px -22px rgba(3, 8, 73, .35); }
.logo-tile img { width: auto; height: auto; max-width: 100%; max-height: 82px; }
@media (max-width: 600px) { .logo-tile { width: 148px; height: 90px; padding: 12px; } .logo-tile img { max-height: 60px; } }
@media (prefers-reduced-motion: reduce) {
  .logo-marquee { -webkit-mask-image: none; mask-image: none; }
  .logo-track { width: auto; animation: none; justify-content: center; }
  .logo-set { flex-wrap: wrap; justify-content: center; padding: 0 16px; }
  .logo-set[aria-hidden] { display: none; }
}

/* Mobile: keep the hero circle clear of the header (.container resets padding-top) */
@media (max-width: 900px) { .hero-inner { padding-top: 56px; } }
@media (max-width: 600px) { .hero-inner { padding-top: 44px; } }
.logo-tile-dark { background: #000; border-color: #000; }