/* ============================================================
   kk.css — Kicker walks clients through the Online Services pages
   TEZ Law Firm (Tez Law P.C.) · tezlawfirm.com
   JJ, 2026-11-11: "animate the 4 sites for online services with kicker …
   use cartoon and kicker to help clients walk through the steps …
   focus on animation kicker, simplistic process and efficiency."
   Everything is scoped under .kk so the theme is untouched. Motion stops
   for visitors who ask for reduced motion.
   ============================================================ */
.kk{--o:#FF7B00;--ember:#A34C00;--ch:#2B2523;--ink:#1E1B1A;--stone:#5E5854;--trav:#E8E3DC;--marble:#FAF8F5}
.kk *{box-sizing:border-box}

/* ── Hero: words on the left, Kicker's scene on the right ── */
.kk-hero{background:var(--ch);color:var(--marble);margin:-40px -28px 0;padding:56px 32px 64px;border-bottom:4px solid var(--o);overflow:hidden;position:relative}
.kk-hero:before{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(255,123,0,.22),rgba(255,123,0,0) 70%);animation:kk-glow 6s ease-in-out infinite}
.kk-hero-in{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:center;position:relative}
.kk-hero-txt h1{margin-top:0}
.kk-hero-art{position:relative;animation:kk-rise .9s cubic-bezier(.2,.8,.2,1) both .15s}
.kk-hero-art img{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.45);border:3px solid rgba(255,123,0,.55);animation:kk-float 5s ease-in-out infinite}
.kk-bubble{position:absolute;left:-18px;top:-22px;max-width:78%;background:#fff;color:var(--ink);font:600 15px/1.35 Montserrat,-apple-system,Arial,sans-serif;padding:12px 16px;border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.3);transform-origin:20% 100%;animation:kk-pop .6s cubic-bezier(.2,1.4,.4,1) both 1s}
.kk-bubble:after{content:"";position:absolute;left:34px;bottom:-10px;border:10px solid transparent;border-top-color:#fff;border-bottom:0}
.kk-bubble b{color:var(--ember)}
.kk-caret{display:inline-block;width:2px;height:1em;background:var(--o);margin-left:2px;vertical-align:-2px;animation:kk-blink .8s step-end infinite}

/* ── Fast and simple strip ── */
.kk-fast{max-width:1080px;margin:-26px auto 36px;position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:0 4px}
.kk-chip{background:#fff;border:1px solid var(--trav);border-radius:14px;padding:16px 16px 14px;display:flex;gap:12px;align-items:center;box-shadow:0 8px 22px rgba(43,37,35,.10);opacity:0;transform:translateY(16px)}
.kk-chip.kk-in{animation:kk-up .6s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--d,0s)}
.kk-chip svg{flex:none;width:38px;height:38px;padding:8px;border-radius:50%;background:#FFF1E3;color:var(--ember)}
.kk-chip strong{display:block;font:700 14.5px/1.25 Montserrat,-apple-system,Arial,sans-serif;color:var(--ink)}
.kk-chip span{display:block;font-size:13px;line-height:1.35;color:var(--stone)}

/* ── Kicker's steps ── */
.kk-steps{margin:8px 0 40px}
.kk-steps-h{text-align:center;margin:0 0 6px}
.kk-steps-h h2{color:var(--ember);font-size:28px;margin:0 0 6px}
.kk-steps-h p{color:var(--stone);margin:0 auto 22px;max-width:600px}
.kk-path{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;padding-top:6px}
.kk-trail{position:absolute;left:12%;right:12%;top:150px;height:6px;border-radius:3px;background:repeating-linear-gradient(90deg,var(--o) 0 14px,transparent 14px 26px);opacity:.55;transform-origin:left;transform:scaleX(0);transition:transform 1.6s cubic-bezier(.4,0,.2,1) .3s}
.kk-path.kk-in .kk-trail{transform:scaleX(1)}
.kk-paw{position:absolute;top:136px;left:12%;width:30px;height:30px;opacity:0;color:var(--o);z-index:3;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.kk-path.kk-in .kk-paw{animation:kk-walk 6s ease-in-out infinite 1.9s}
.kk-step{position:relative;background:#fff;border:1px solid var(--trav);border-radius:18px;padding:0 16px 18px;text-align:center;opacity:0;transform:translateY(34px) scale(.97)}
.kk-step.kk-in{animation:kk-up .7s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--d,0s)}
.kk-step:hover{box-shadow:0 14px 30px rgba(43,37,35,.14);transform:translateY(-4px)}
.kk-pose{height:170px;display:flex;align-items:flex-end;justify-content:center;margin:-8px 0 6px}
.kk-pose img{max-height:165px;width:auto;filter:drop-shadow(0 8px 10px rgba(43,37,35,.18));transform-origin:50% 100%;animation:kk-bob 3.2s ease-in-out infinite;animation-delay:var(--b,0s)}
.kk-step:hover .kk-pose img{animation:kk-wiggle .6s ease-in-out}
.kk-num{position:absolute;top:12px;left:12px;width:30px;height:30px;border-radius:50%;text-align:center;z-index:2;background:var(--o);color:var(--ink);font:800 14px/30px Montserrat,-apple-system,Arial,sans-serif}
.kk-step h3{font:700 16px/1.3 Montserrat,-apple-system,Arial,sans-serif;color:var(--ink);margin:4px 0 6px}
.kk-step p{font-size:14px;line-height:1.5;color:var(--stone);margin:0}
.kk-say{display:inline-block;margin:0 0 8px;background:var(--marble);border:1px solid var(--trav);border-radius:12px;padding:3px 10px;font:600 12px Montserrat,-apple-system,Arial,sans-serif;color:var(--ember)}

/* ── Kicker at the "Get started" box ── */
.kk-cta{position:relative;overflow:visible;padding-right:190px!important}
.kk-cta-dog{position:absolute;right:14px;bottom:0;height:175px;width:auto;transform-origin:50% 100%;animation:kk-wave 2.6s ease-in-out infinite}
.kk-note{font-size:12px!important;color:#8A827C!important}

@keyframes kk-up{to{opacity:1;transform:none}}
@keyframes kk-rise{from{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:none}}
@keyframes kk-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes kk-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes kk-blink{50%{opacity:0}}
@keyframes kk-bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(-1.5deg)}}
@keyframes kk-wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}
@keyframes kk-wave{0%,100%{transform:rotate(0)}10%{transform:rotate(-4deg)}20%{transform:rotate(4deg)}30%{transform:rotate(-3deg)}40%{transform:rotate(0)}}
@keyframes kk-glow{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
@keyframes kk-walk{0%{left:12%;opacity:0}8%{opacity:1}45%{left:calc(88% - 30px);opacity:1}52%{opacity:0;left:calc(88% - 30px)}100%{opacity:0;left:calc(88% - 30px)}}

@media (max-width:900px){
  .kk-hero-in{grid-template-columns:1fr;gap:34px}
  .kk-hero-art{max-width:460px;margin:10px auto 0}
  .kk-bubble{left:6px}
  .kk-fast{grid-template-columns:1fr;margin-top:-20px}
  .kk-path{grid-template-columns:1fr 1fr}
  .kk-trail,.kk-paw{display:none}
}
@media (max-width:560px){
  .kk-hero{padding:40px 18px 52px;margin:-40px -16px 0}
  .kk-path{grid-template-columns:1fr}
  .kk-step{display:grid;grid-template-columns:110px 1fr;text-align:left;align-items:center;gap:10px;padding:12px 14px}
  .kk-pose{height:120px;margin:0}
  .kk-pose img{max-height:118px}
  .kk-num{top:8px;left:8px}
  .kk-cta{padding-right:24px!important;padding-bottom:150px!important}
  .kk-cta-dog{height:140px;right:50%;transform:translateX(50%);animation:none}
}
@media (prefers-reduced-motion:reduce){
  .kk *,.kk *:before,.kk-hero:before{animation:none!important;transition:none!important}
  .kk-step,.kk-chip{opacity:1!important;transform:none!important}
  .kk-trail{transform:scaleX(1)!important}
}