:root{--ease:cubic-bezier(.22,.8,.24,1)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
@keyframes fadeIn{from{opacity:0}}
@keyframes stepIn{from{opacity:0;transform:translateX(18px)}}
@keyframes stepInBack{from{opacity:0;transform:translateX(-18px)}}
@keyframes scan{0%{top:-4%;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:104%;opacity:0}}
@keyframes shake{20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
@keyframes reveal{from{clip-path:inset(0 0 100% 0)}}
/* Header */
body header{transition:box-shadow .3s,background-color .3s}
body header.is-scrolled{box-shadow:0 10px 30px -16px rgba(11,28,48,.35)}
body header>.header-info-strip{max-height:40px;transition:max-height .35s var(--ease),opacity .25s}
body header.is-scrolled>.header-info-strip{max-height:0;opacity:0;overflow:hidden;border-bottom-width:0}
.scroll-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,#1d4ed8,#5b86ff);transform-origin:0 50%;transform:scaleX(0)}
body header nav a{position:relative;border-radius:8px;transition:color .2s,background-color .2s}
body header nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:2px;background:#1d4ed8;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
body header nav a:hover::after,body header nav a[aria-current]::after{transform:scaleX(1)}
body header nav a[aria-current]{color:#1d4ed8}
/* Type and shape */
body :is(h1,h2).uppercase{text-transform:none;letter-spacing:-.025em}
body h1.uppercase{font-size:clamp(30px,4.2vw,50px);line-height:1.1;font-weight:800}
body h2.uppercase{font-size:clamp(26px,3vw,36px);line-height:1.15}
body .border{border-radius:10px}
body :is(input,textarea).border,body label.border{border-radius:8px}
body span.border,body .inline-flex.border{border-radius:6px}
body .w-2.h-2{border-radius:50%}
body [role=tablist],body #faq-accordion-group{overflow:hidden}
/* Hero */
body main>section:first-of-type{position:relative;overflow:hidden}
body main>section:first-of-type::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(55% 70% at 88% 12%,rgba(29,78,216,.10),transparent 70%),linear-gradient(rgba(29,78,216,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(29,78,216,.055) 1px,transparent 1px);background-size:auto,44px 44px,44px 44px;-webkit-mask-image:radial-gradient(75% 90% at 80% 20%,#000,transparent);mask-image:radial-gradient(75% 90% at 80% 20%,#000,transparent)}
body main>section:first-of-type>.max-w-7xl{position:relative}
body main>section:first-of-type .lg\:col-span-7>*{animation:rise .8s var(--ease) backwards}
body main>section:first-of-type .lg\:col-span-7>:nth-child(2){animation-delay:.08s}
body main>section:first-of-type .lg\:col-span-7>:nth-child(3){animation-delay:.16s}
body main>section:first-of-type .lg\:col-span-7>:nth-child(4){animation-delay:.24s}
body main>section:first-of-type .lg\:col-span-7>:nth-child(5){animation-delay:.34s}
body main>section:first-of-type .lg\:col-span-5>div{animation:reveal 1s var(--ease) .15s backwards;box-shadow:0 30px 60px -34px rgba(29,78,216,.45)}
body main>section:first-of-type .lg\:col-span-5 .overflow-hidden{position:relative}
body main>section:first-of-type .lg\:col-span-5 .overflow-hidden img{animation:fadeIn 1.2s .3s backwards}
body main>section:first-of-type .lg\:col-span-5 .overflow-hidden::after{content:"";position:absolute;left:0;right:0;top:-4%;height:2px;background:#1d4ed8;box-shadow:0 0 18px 4px rgba(29,78,216,.45);animation:scan 1.8s ease-in-out .9s both;pointer-events:none}
body main>section:first-of-type .border-l-2{transition:border-color .3s,padding-left .3s var(--ease)}
body main>section:first-of-type .border-l-2:hover{padding-left:18px;border-color:#0037b0}
/* Buttons */
body :is(a,button).bg-primary-container:not([role=tab]){position:relative;overflow:hidden;border-radius:8px;transition:transform .2s var(--ease),box-shadow .25s,background-color .2s}
body :is(a,button).bg-primary-container:not([role=tab]):hover{background:#1a43c4;transform:translateY(-1px);box-shadow:0 10px 22px -10px rgba(29,78,216,.7)}
body :is(a,button).bg-primary-container:not([role=tab]):active{transform:scale(.97);box-shadow:none}
body :is(a,button).bg-primary-container:not([role=tab])::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s var(--ease)}
body :is(a,button).bg-primary-container:not([role=tab]):hover::after{transform:translateX(120%)}
body :is(a,button).bg-slate-100.border,body :is(a,button).bg-slate-200{border-radius:8px;transition:transform .2s var(--ease),border-color .2s,background-color .2s,color .2s}
body :is(a,button).bg-slate-100.border:hover{border-color:#1d4ed8;color:#1d4ed8;background:#eef3ff}
body :is(a,button).bg-slate-100.border:active,body :is(a,button).bg-slate-200:active{transform:scale(.97)}
body [role=tab]{transition:background-color .3s,color .3s}
body [role=tabpanel]:not(.hidden){animation:fadeIn .4s var(--ease)}
/* Table and cards */
body tbody tr td{transition:background-color .25s,box-shadow .25s}
body tbody tr:hover td{background:#f3f7ff}
body tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 #1d4ed8}
body #repair .grid>.bg-white.border{transition:border-color .3s,box-shadow .3s,transform .3s var(--ease)}
body #repair .grid>.bg-white.border:hover{border-color:#1d4ed8;transform:translateY(-3px);box-shadow:0 18px 32px -22px rgba(29,78,216,.5)}
body label:has(>input:is([type=radio],[type=checkbox]):checked){border-color:#1d4ed8;background:#eef3ff;box-shadow:0 0 0 3px rgba(29,78,216,.12)}
body label.border{transition:border-color .2s,background-color .2s,box-shadow .2s}
/* Forms */
body :is(input,textarea):focus{border-color:#1d4ed8!important;box-shadow:0 0 0 4px rgba(29,78,216,.12)!important;outline:none}
body :is(input,textarea){transition:border-color .2s,box-shadow .2s}
body .field-error-msg:not(.hidden),body #form-feedback-banner:not(.hidden){animation:rise .3s var(--ease)}
body input.border-red-600{animation:shake .4s}
body #form-feedback-banner{border-radius:8px}
/* FAQ */
body .faq-panel{overflow:hidden;transition:max-height .45s var(--ease),opacity .3s,padding .45s var(--ease)}
body .faq-panel.hidden{display:block;max-height:0;opacity:0;padding-top:0;padding-bottom:0;visibility:hidden;border-top-width:0;transition:max-height .45s var(--ease),opacity .2s,padding .45s var(--ease),visibility 0s .45s}
body #faq-accordion-group button[aria-expanded=true]{background:#f3f7ff}
body #faq-accordion-group button[aria-expanded=true] .material-symbols-outlined{color:#1d4ed8}
body .faq-item{transition:box-shadow .3s}
body .faq-item:has(button[aria-expanded=true]){box-shadow:inset 3px 0 0 #1d4ed8}
/* Footer */
body footer ul a{transition:color .2s,transform .25s var(--ease)}
body footer ul a:hover{transform:translateX(4px)}
/* Scroll reveal and section rule */
.js .reveal:not(.in){opacity:0}
.reveal.in{animation:rise .45s var(--ease) var(--d,0ms) backwards}
.sec-head{position:relative}
.sec-head::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:0;background:#1d4ed8;transition:width .9s var(--ease) .1s}
.sec-head.in::after{width:84px}
@media (prefers-reduced-motion:reduce){
  *,::before,::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js .reveal:not(.in){opacity:1}
}

.kk{width:100%;height:auto;display:block;max-width:520px;margin:0 auto}
.kk-part{transition:opacity .3s}
.kk[data-active] .kk-part:not(.on){opacity:.4}
.kk-hot{cursor:pointer;outline:none}
.kk-dot{transition:fill .2s}
.kk-hot:hover .kk-dot,.kk-hot:focus-visible .kk-dot,.kk-hot.on .kk-dot{fill:#0037b0}
.kk-hot:focus-visible .kk-ring{fill:rgba(29,78,216,.38)}
.kk-ring{transform-box:fill-box;transform-origin:center;animation:kkp 2.4s ease-out infinite}
@keyframes kkp{0%{transform:scale(.7);opacity:1}100%{transform:scale(1.55);opacity:0}}
.svc{display:flex;align-items:center;gap:12px}
.svc .ico{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:#eef3ff;color:#1d4ed8;font-size:20px;transition:background-color .25s,color .25s}
tr:hover .svc .ico{background:#1d4ed8;color:#fff}
body #repair .grid>.is-linked{border-color:#1d4ed8;transform:translateY(-3px);box-shadow:0 18px 32px -22px rgba(29,78,216,.5)}
body main>section:first-of-type{border-bottom-color:transparent}
body #services{position:relative}
body #services::before{content:"";position:absolute;left:0;right:0;top:-1px;height:8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='8'%3E%3Cpath d='M0 0h16L8 8z' fill='white'/%3E%3C/svg%3E") repeat-x}

.kk-hero{display:block;width:100%;height:auto}
@keyframes kkBob{50%{transform:translateY(-4px)}}
@keyframes kkPrint{0%{transform:translateY(150px)}50%,86%{transform:translateY(0)}100%{transform:translateY(0);opacity:0}}
@keyframes kkTile{0%,50%,100%{fill:#dbe6ff}10%,36%{fill:#ffb020}}
@keyframes kkTotal{0%{transform:scaleX(.3)}35%,100%{transform:scaleX(1)}}
@keyframes kkSway{50%{transform:rotate(3deg)}}
.kk-hero .bob{animation:kkBob 4s ease-in-out infinite}
.kk-hero .bob2{animation-delay:-2s}
.kk-hero .prt{animation:kkPrint 6s cubic-bezier(.22,.8,.24,1) infinite}
.kk-hero .t1,.kk-hero .t2,.kk-hero .t3{animation:kkTile 6s infinite}
.kk-hero .t2{animation-delay:1.4s}.kk-hero .t3{animation-delay:2.8s}
.kk-hero .tot{transform-box:fill-box;transform-origin:left;animation:kkTotal 6s infinite}
.kk-hero .sway{transform-box:fill-box;transform-origin:50% 100%;animation:kkSway 5s ease-in-out infinite}
body main>section:first-of-type .lg\:col-span-5 .overflow-hidden::after{display:none}

@keyframes kkWave{0%,60%,100%{opacity:.15}70%,86%{opacity:1}}
.kk-hero .w1,.kk-hero .w2{animation:kkWave 6s infinite;opacity:.15}.kk-hero .w2{animation-delay:.18s}
.kk-hot .hs{transform-box:fill-box;transform-origin:center}
.paused *{animation-play-state:paused!important}
.kk-hero .prt,.kk-hero .bob{will-change:transform}
@media (max-width:640px){.kk-hot .hs{transform:scale(1.3)}}
