/* Knockout Business Solutions: global styles.
   Brand: Ivory #FAF8F4, Denim #3B6EA8, Sage #8CA68F, Sand #E0B37E, Slate #2F3A44.
   Headings: Source Serif 4. Body: Inter. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
img,svg{max-width:100%}
[hidden]{display:none !important}
.visually-hidden{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body{margin:0;background:#FAF8F4;color:#2F3A44;font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
a{color:#3B6EA8}a:hover{color:#2C5687}
h1,h2,h3{text-wrap:balance}
section[id]{scroll-margin-top:88px}
p{text-wrap:pretty}
:focus-visible{outline:3px solid #E0B37E;outline-offset:3px;border-radius:8px}

.btn{transition:background .2s ease,transform .2s ease,box-shadow .2s ease}
.btn:hover{background:#2C5687 !important;color:#FFFFFF !important;transform:translateY(-2px);box-shadow:0 12px 24px -14px rgba(44,86,135,.9)}
.btn-ivory{transition:background .2s ease,transform .2s ease}
.btn-ivory:hover{background:#FFFFFF !important;color:#2C5687 !important;transform:translateY(-2px)}
.navlink{position:relative;text-decoration:none;color:#2F3A44}
.navlink::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:#E0B37E;transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.navlink:hover{color:#2F3A44}
.navlink:hover::after{transform:scaleX(1)}

/* Hero: a boxing gator works the TO-DO bag. Each jab (every 3s, at 1.7s) stamps the task on the bag DONE, then the next task shows */
.task{opacity:0;animation:task 15s infinite both;animation-delay:var(--d)}
@keyframes task{0%{opacity:0}1.3%{opacity:1}18.7%{opacity:1}20%,100%{opacity:0}}
.stamp{transform-box:fill-box;transform-origin:50% 50%;animation:stamp 15s infinite both;animation-delay:var(--d)}
@keyframes stamp{0%,11.2%{opacity:0;transform:scale(1.8)}11.4%{opacity:1;transform:scale(1.6)}12%{opacity:1;transform:scale(.92)}12.6%,100%{opacity:1;transform:scale(1)}}
.bagshadow{transform-box:fill-box;transform-origin:50% 50%;animation:bagshadow 3s ease-out infinite}
@keyframes bagshadow{0%,56%{transform:translateX(0)}64%{transform:translateX(-12px)}74%{transform:translateX(5px)}84%,100%{transform:translateX(0)}}
.gbob{animation:bob 1.5s ease-in-out infinite}
.rig .g{position:absolute;inset:0}
.g-all{transform-origin:60% 99%;animation:leanin 3s cubic-bezier(.3,0,.2,1) infinite}
@keyframes leanin{0%,46%,76%,100%{transform:rotate(0)}52%{transform:rotate(-1deg)}57%,61%{transform:rotate(1.5deg)}}
.g-far{transform-origin:59.62% 43.21%;animation:farjab 3s cubic-bezier(.3,0,.2,1) infinite}
@keyframes farjab{0%,46%,74%,100%{transform:translate(0,0) rotate(0)}52%{transform:translate(-2.5%,.5%) rotate(4deg)}57%,61%{transform:translate(5.5%,-.8%) rotate(-5deg)}}
.g-near{transform-origin:45.19% 46.30%;animation:nearguard 3s ease-in-out infinite}
@keyframes nearguard{0%,46%,78%,100%{transform:rotate(0)}57%,61%{transform:rotate(-6deg)}}
.g-fore{transform-origin:52.40% 60.49%;animation:foreguard 3s ease-in-out infinite}
@keyframes foreguard{0%,46%,78%,100%{transform:rotate(0)}57%,61%{transform:rotate(-5deg)}}
.g-tail{transform-origin:46.15% 59.88%;animation:swish 1.5s ease-in-out infinite}
@keyframes swish{0%,100%{transform:rotate(0)}50%{transform:rotate(4deg)}}
.glint{background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.85) 50%,transparent 58%) no-repeat;background-size:300% 100%;background-position:110% 0;-webkit-mask-image:url(../images/gx-lens.png);mask-image:url(../images/gx-lens.png);-webkit-mask-size:100% 100%;mask-size:100% 100%;animation:glint 6s ease-in-out infinite}
@keyframes glint{0%,72%{background-position:110% 0}88%,100%{background-position:-10% 0}}
.bob{animation:bob 1.5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.arm{transform-box:view-box;transform-origin:298px 228px;animation:arm 3s cubic-bezier(.3,0,.2,1) infinite}
@keyframes arm{0%,50%,70%,100%{transform:scaleX(1)}57%,61%{transform:scaleX(1.95)}}
.glove{animation:glove 3s cubic-bezier(.3,0,.2,1) infinite}
@keyframes glove{0%,50%,70%,100%{transform:translateX(0)}57%,61%{transform:translateX(-72px)}}
.guard{animation:guard 3s ease-in-out infinite}
@keyframes guard{0%,50%,72%,100%{transform:translate(0,0)}58%{transform:translate(4px,-4px)}}
.bag{transform-box:view-box;transform-origin:84px 0px;animation:bag 3s ease-out infinite}
@keyframes bag{0%,57%{transform:rotate(0)}64%{transform:rotate(11deg)}74%{transform:rotate(-5deg)}84%{transform:rotate(2deg)}94%,100%{transform:rotate(0)}}
.pow{transform-box:fill-box;transform-origin:50% 50%;opacity:0;animation:pow 3s ease-out infinite}
@keyframes pow{0%,56%{opacity:0;transform:scale(.3) rotate(0)}58.5%{opacity:1;transform:scale(1.1) rotate(12deg)}67%,100%{opacity:0;transform:scale(.8) rotate(20deg)}}
.blink{transform-box:fill-box;transform-origin:50% 50%;animation:blink 4.6s infinite}
@keyframes blink{0%,90%,100%{transform:scaleY(1)}94%{transform:scaleY(.1)}}
.tail{transform-box:view-box;transform-origin:344px 330px;animation:tail 1.5s ease-in-out infinite}
@keyframes tail{0%,100%{transform:rotate(0)}50%{transform:rotate(-6deg)}}
.twinkle{transform-box:fill-box;transform-origin:50% 50%;animation:twinkle 2.4s ease-in-out infinite;animation-delay:var(--t)}
@keyframes twinkle{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.6)}}

/* Sound familiar: the owner at the desk after hours */
.clockhand{transform-box:view-box;transform-origin:404px 66px;animation:spin 6s linear infinite}
.clockhour{transform-box:view-box;transform-origin:404px 66px;animation:spin 72s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.sigh{animation:sigh 4.5s ease-in-out infinite}
.dlids{opacity:0;animation:dblink 5s steps(1,end) infinite}
@keyframes dblink{0%,91%{opacity:0}92%,95%{opacity:1}96%,100%{opacity:0}}
@keyframes sigh{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.steam{animation:steam 3.2s ease-out infinite}
.steam.two{animation-delay:1.6s}
@keyframes steam{0%{opacity:0;transform:translateY(6px)}30%{opacity:.8}100%{opacity:0;transform:translateY(-16px)}}
.wobble{transform-box:fill-box;transform-origin:50% 100%;animation:wobble 5s ease-in-out infinite}
@keyframes wobble{0%,50%,100%{transform:rotate(0)}58%{transform:rotate(1.6deg)}66%{transform:rotate(-1deg)}74%{transform:rotate(0)}}

/* Website Refresh: a local search where your shop rises to the top */
.typed{animation:type 11s infinite;animation-delay:-6s}
@keyframes type{0%{clip-path:inset(0 100% 0 0);opacity:1;animation-timing-function:steps(23,end)}22%{clip-path:inset(0 0 0 0);opacity:1}92%{clip-path:inset(0 0 0 0);opacity:1}98%,100%{clip-path:inset(0 0 0 0);opacity:0}}
.results{animation:res 11s infinite;animation-delay:-6s}
@keyframes res{0%,24%{opacity:0}30%,92%{opacity:1}98%,100%{opacity:0}}
.row{position:absolute;left:0;right:0;top:0;height:76px;box-sizing:border-box;display:flex;align-items:center;gap:14px;padding:0 16px;border-radius:14px;border:1.5px solid #EFEAE1;background:#FFFFFF}
.r-you{transform:translateY(0);background:#F3E3CC;border-color:#E0B37E;z-index:2;animation:you 11s cubic-bezier(.5,0,.2,1) infinite,youglow 11s infinite;animation-delay:-6s,-6s}
.r-a{transform:translateY(86px);animation:ra 11s cubic-bezier(.5,0,.2,1) infinite;animation-delay:-6s}
.r-b{transform:translateY(172px);animation:rb 11s cubic-bezier(.5,0,.2,1) infinite;animation-delay:-6s}
@keyframes you{0%,40%{transform:translateY(172px)}52%,100%{transform:translateY(0)}}
@keyframes ra{0%,40%{transform:translateY(0)}52%,100%{transform:translateY(86px)}}
@keyframes rb{0%,40%{transform:translateY(86px)}52%,100%{transform:translateY(172px)}}
@keyframes youglow{0%,48%{background:#FFFFFF;border-color:#EFEAE1}58%,100%{background:#F3E3CC;border-color:#E0B37E}}

/* Services tabs */
.tab{display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border-radius:999px;border:1.5px solid #E3DDD2;background:#FFFFFF;cursor:pointer;font:500 16px/1.2 'Inter',system-ui,sans-serif;color:#2F3A44;transition:border-color .2s,background .2s,color .2s,transform .2s;min-height:48px}
.tab:hover{border-color:#E0B37E;transform:translateY(-1px)}
.tab.on{background:#2F3A44;color:#FAF8F4;border-color:#2F3A44}
.tab .ic{width:36px;height:36px;border-radius:50%;background:#F3E3CC;display:grid;place-items:center;flex:none;transition:background .2s}
.tab.on .ic{background:#E0B37E}
.panel{animation:panelin .4s cubic-bezier(.2,.8,.2,1) both}
@keyframes panelin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.btn-outline{transition:background .2s ease,color .2s ease,transform .2s ease}
.btn-outline:hover{background:#2F3A44 !important;color:#FAF8F4 !important;transform:translateY(-2px)}
.inv-over{opacity:0}
.inv-over.i1{animation:o1 9s infinite}.inv-paid.i1{animation:p1 9s infinite}
.inv-over.i2{animation:o2 9s infinite}.inv-paid.i2{animation:p2 9s infinite}
.inv-over.i3{animation:o3 9s infinite}.inv-paid.i3{animation:p3 9s infinite}
@keyframes o1{0%,18%{opacity:1}21%,95%{opacity:0}100%{opacity:1}}
@keyframes p1{0%,18%{opacity:0;transform:scale(.8)}21%{opacity:1;transform:scale(1.08)}24%,92%{opacity:1;transform:none}95%,100%{opacity:0}}
@keyframes o2{0%,38%{opacity:1}41%,95%{opacity:0}100%{opacity:1}}
@keyframes p2{0%,38%{opacity:0;transform:scale(.8)}41%{opacity:1;transform:scale(1.08)}44%,92%{opacity:1;transform:none}95%,100%{opacity:0}}
@keyframes o3{0%,58%{opacity:1}61%,95%{opacity:0}100%{opacity:1}}
@keyframes p3{0%,58%{opacity:0;transform:scale(.8)}61%{opacity:1;transform:scale(1.08)}64%,92%{opacity:1;transform:none}95%,100%{opacity:0}}
.pulse{animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.field{width:100%;box-sizing:border-box;border:1.5px solid #DCD5C9;border-radius:12px;padding:13px 14px;font:16px/1.4 'Inter',system-ui,sans-serif;color:#2F3A44;background:#FFFFFF;min-height:48px;transition:border-color .15s,box-shadow .15s}
.select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232F3A44' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.field:focus{outline:none;border-color:#3B6EA8;box-shadow:0 0 0 3px rgba(59,110,168,.22)}
.pick{position:relative;display:inline-flex;cursor:pointer}
.pick input{position:absolute;opacity:0;width:1px;height:1px}
.pick span{display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box;padding:10px 16px;border-radius:999px;border:1.5px solid #DCD5C9;font:500 15px/1.2 'Inter',system-ui,sans-serif;color:#2F3A44;background:#FFFFFF;transition:background .15s,border-color .15s,color .15s}
.pick:hover span{border-color:#E0B37E}
.pick input:checked + span{background:#2F3A44;border-color:#2F3A44;color:#FAF8F4}
.pick input:focus-visible + span{outline:3px solid #E0B37E;outline-offset:2px}

.navlinks{display:flex;flex-wrap:wrap;align-items:center;gap:12px 30px;font-size:15.5px;font-weight:500}
.menu-btn{display:none;width:44px;height:44px;border-radius:12px;border:1.5px solid rgba(47,58,68,.3);background:transparent;cursor:pointer;align-items:center;justify-content:center;padding:0}
.menu-btn:hover{background:rgba(47,58,68,.06)}
@media (max-width: 820px){
.menu-btn{display:inline-flex}
.navlinks{display:none;order:3;width:100%;flex-direction:column;align-items:stretch;gap:0;padding-top:6px;border-top:1px solid rgba(47,58,68,.15)}
.navlinks.open{display:flex}
.navlinks a{padding-block:14px;font-size:17px}
.navlinks a::after{display:none}
.site-logo{height:54px !important}
.site-header{padding-inline:16px !important}
.site-nav{column-gap:10px !important}
}
@media (max-width: 640px){
section:not(#top):not(#about){padding-block:72px !important}
#top{padding-block:28px 64px !important}
#about{padding-block:0 72px !important}
.hero-ctas a{flex:1 1 100%;justify-content:center}
.hdr-cta{padding:10px 14px !important;font-size:14px !important}
.row{padding:0 12px;gap:10px}
.inv-ic{display:none !important}
.inv-status{width:76px !important}
.inv-amt{display:none}
}
@media (max-width: 400px){
.dir-pill{display:none}
}
@media (max-width: 360px){
.hdr-cta{display:none !important}
}
.nav-mobile{display:none}
@media (max-width: 820px){
.nav-mobile{display:block}
}

@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation:none !important;transition:none !important}
}