/* KLIMAFRESH · AIR MOTION DESIGN SYSTEM · 2026-10 · v1.0 */
:root {--kf-night:#0b2237;--kf-blue:#1f78df;--kf-teal:#00ad91;--kf-mist:#effaff;--kf-ease:cubic-bezier(.22,1,.36,1)}
html{scroll-padding-top:98px}
body{overflow-x:clip}
#kf-scroll-progress{position:fixed;z-index:100;inset:0 auto auto 0;width:0;height:3px;pointer-events:none;background:linear-gradient(90deg,#1a88f6,#34d8ce,#42c7a4);box-shadow:0 1px 10px #0aa7bb55;transform-origin:left center}
.site-header{transition:box-shadow .35s var(--kf-ease),background .35s var(--kf-ease)}
.site-header.kf-scrolled{box-shadow:0 13px 40px rgba(7,35,55,.09);background:rgba(255,255,255,.89)}
.nav a{position:relative}
.nav a:after{content:"";position:absolute;left:0;right:100%;height:2px;bottom:-9px;background:linear-gradient(90deg,var(--kf-blue),var(--kf-teal));border-radius:8px;transition:right .35s var(--kf-ease)}
.nav a:hover:after,.nav a.active:after{right:0}
.hero,.page-hero{isolation:isolate}
.hero{background:radial-gradient(ellipse 55% 70% at 86% 16%,rgba(129,209,255,.24),transparent 72%),radial-gradient(ellipse 47% 68% at 0% 100%,rgba(66,215,193,.13),transparent 72%),linear-gradient(165deg,#fff,#f5faff)}
.hero:after,.page-hero:after{content:"";position:absolute;pointer-events:none;z-index:-1;top:3%;right:2%;width:min(43vw,510px);aspect-ratio:1;border:1px solid rgba(124,183,229,.16);border-radius:50%;box-shadow:0 0 0 52px rgba(125,206,241,.035),0 0 0 104px rgba(125,206,241,.021);transform:rotate(-14deg)}
.hero h1,.page-hero h1{letter-spacing:-.062em;font-weight:850}
.hero .desc{font-size:clamp(16px,1.5vw,18px)}
.hero-photo{filter:saturate(1.025) contrast(1.025);box-shadow:0 32px 90px rgba(7,43,78,.16),0 2px 2px rgba(255,255,255,.8) inset;transition:transform .65s var(--kf-ease),box-shadow .65s var(--kf-ease);transform:perspective(1300px) rotateY(-2deg)}
.hero-visual:hover .hero-photo{box-shadow:0 42px 100px rgba(7,43,78,.19),0 2px 2px rgba(255,255,255,.8) inset}
.hero-visual{transform-style:preserve-3d;--kf-par-x:0px;--kf-par-y:0px}
.hero-visual .float-card.one{transform:translate3d(var(--kf-par-x),var(--kf-par-y),25px)}
.hero-visual .float-card.two{transform:translate3d(calc(var(--kf-par-x) * -.65),calc(var(--kf-par-y) * -.65),30px)}
.hero-visual .visual-orb{animation:kf-breathe 7s ease-in-out infinite alternate}
@keyframes kf-breathe{from{opacity:.25;transform:scale(.92)}to{opacity:.46;transform:scale(1.12)}}
.btn{position:relative;isolation:isolate;overflow:hidden;transition:transform .3s var(--kf-ease),box-shadow .3s var(--kf-ease),background .3s var(--kf-ease);box-shadow:0 15px 35px rgba(0,168,139,.16)}
.btn:before{content:"";position:absolute;inset:-140% auto -140% -60%;width:30%;transform:rotate(19deg);background:linear-gradient(90deg,transparent,#ffffff4e,transparent);transition:left .75s var(--kf-ease);pointer-events:none;z-index:-1}
.btn:hover:before{left:140%}
.btn:hover{transform:translateY(-3px);box-shadow:0 20px 40px rgba(0,168,139,.25)}
.btn:active{transform:translateY(-1px) scale(.985)}
.section-head h2{max-width:780px;text-wrap:balance}
.section{scroll-margin-top:84px}
.section-head .eyebrow,.page-hero .eyebrow{color:#167ba6}
.service-card,.project-card,.proof-card,.price-card,.detailed-service,.tile,.step{transition:transform .46s var(--kf-ease),box-shadow .46s var(--kf-ease),border-color .35s ease}
.service-card,.project-card{box-shadow:0 11px 28px rgba(13,48,77,.055)}
.service-card:hover,.project-card:hover,.proof-card:hover,.price-card:hover,.tile:hover{border-color:#cae5ef;box-shadow:0 26px 65px rgba(11,51,85,.13)}
.service-card>img,.project-card img{transition:transform .8s var(--kf-ease),filter .6s ease}
.service-card:hover>img{transform:scale(1.085)}
.project-card:hover img{transform:scale(1.08)}
.service-card .service-ico,.icon-bubble,.arrow-icon{transition:transform .45s var(--kf-ease),box-shadow .45s var(--kf-ease)}
.service-card:hover .service-ico,.project-card:hover .arrow-icon{transform:translateY(-3px) rotate(-4deg)}
.proof-card:hover>svg{transform:translateY(-3px)}
.proof-card>svg{transition:transform .3s ease}
.brand-strip{background:linear-gradient(115deg,#f4faff,#f8fffc);border-color:#e5eff5}
.brand-names b{filter:saturate(.7);transition:transform .35s var(--kf-ease),filter .35s}
.brand-names b:hover{filter:saturate(1.2);transform:translateY(-3px)}
.big-cta{isolation:isolate;background:radial-gradient(circle at 92% 6%,rgba(44,226,192,.25),transparent 32%),radial-gradient(circle at 55% 135%,rgba(65,178,239,.29),transparent 40%),linear-gradient(116deg,#0b4a7e,#062a48)}
.big-cta:before{content:"";position:absolute;z-index:-1;top:-35%;right:15%;width:280px;height:280px;border-radius:50%;filter:blur(28px);background:radial-gradient(circle,#57ffe63c,transparent 68%);animation:kf-breathe 7s ease-in-out infinite alternate}
/* Progressive enhancement: only animate if JS intersection observer is running */
.kf-motion-ready .kf-appear{opacity:0;transform:translate3d(0,22px,0);filter:blur(5px);transition:opacity .75s var(--kf-ease),transform .8s var(--kf-ease),filter .7s ease;transition-delay:var(--kf-delay,0ms)}
.kf-motion-ready .kf-appear.kf-show{opacity:1;transform:none;filter:none}
.kf-tilt{--kf-tiltx:0deg;--kf-tilty:0deg;transform:perspective(1100px) rotateX(var(--kf-tiltx)) rotateY(var(--kf-tilty)) translateY(var(--kf-lift,0px))!important;transition:transform .3s var(--kf-ease),box-shadow .4s ease}
.kf-tilt:hover{--kf-lift:-6px}
.kf-tilt::before{content:"";pointer-events:none;position:absolute;inset:0;z-index:2;opacity:0;background:radial-gradient(390px circle at var(--kf-mx,50%) var(--kf-my,50%),rgba(255,255,255,.20),transparent 70%);transition:opacity .3s}
.kf-tilt:hover:before{opacity:1}
/* Immersive interactive product story */
.kf-story-section{padding:54px 0 104px;background:#fff}
.kf-story{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);min-height:510px;gap:28px;align-items:center;border-radius:36px;padding:clamp(30px,5.3vw,76px);background:linear-gradient(135deg,#f6fbff,#edf9ff 48%,#e6f8f2);border:1px solid #e4eff5;box-shadow:0 28px 68px rgba(23,78,117,.075);--mood1:#5fcaff;--mood2:#6becd6}
.kf-story[data-mode="warm"]{--mood1:#ffc391;--mood2:#ffe7a3}
.kf-story[data-mode="pure"]{--mood1:#77d6c0;--mood2:#b9ebcc}
.kf-story:before{content:"";position:absolute;z-index:-1;inset:-35% -23% auto auto;width:640px;aspect-ratio:1;background:radial-gradient(circle,var(--mood1) 0%,transparent 67%);opacity:.20;filter:blur(12px);transition:background .55s ease}
.kf-story-eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:850;color:#32849a;margin:0 0 17px}
.kf-story h2{font-size:clamp(36px,4vw,55px);letter-spacing:-.06em;line-height:1.06;margin:0 0 19px;color:#102943;text-wrap:balance}
.kf-story h2 em{font-style:normal;color:#2388cb}
.kf-story-copy{font-size:15px;line-height:1.78;color:#5e7286;max-width:430px;min-height:82px;margin:0 0 21px}
.kf-story-tabs{display:flex;gap:7px;flex-wrap:wrap;padding:5px;max-width:max-content;border:1px solid rgba(167,202,221,.5);border-radius:17px;background:rgba(255,255,255,.58);box-shadow:0 8px 22px #2e64800a}
.kf-story-tabs button{border:0;border-radius:12px;background:transparent;color:#60758a;font-weight:780;font-size:12px;padding:12px 14px;transition:background .3s,box-shadow .3s,color .3s}
.kf-story-tabs button[aria-selected="true"]{background:#fff;color:#176fa9;box-shadow:0 4px 12px #2e648021}
.kf-story-caption{display:block;margin-top:15px;color:#79919e;font-size:11px}
.kf-story-art{position:relative;min-height:350px;display:grid;place-items:center;perspective:1000px;isolation:isolate}
.kf-story-art:before{content:"";position:absolute;z-index:-2;width:75%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--mood1),transparent 67%);opacity:.48;filter:blur(38px);animation:kf-breathe 6s ease-in-out infinite alternate}
.kf-ring{position:absolute;z-index:-1;border:1px solid rgba(93,168,198,.16);border-radius:50%;width:76%;aspect-ratio:1;box-shadow:0 0 0 27px rgba(76,178,214,.048),0 0 0 58px rgba(76,178,214,.028);transform:rotateX(64deg) rotateZ(-25deg)}
.kf-ac{position:relative;width:min(92%,410px);height:130px;border-radius:24px 24px 26px 26px;transform:rotateY(-11deg) rotateX(4deg);background:linear-gradient(168deg,#fff 0%,#f9fdff 48%,#d5e7f3 100%);box-shadow:18px 30px 46px rgba(28,70,108,.18),2px 4px 8px rgba(28,70,108,.08),inset 0 2px 2px #fff;animation:kf-float-ac 6s ease-in-out infinite alternate}
.kf-ac:before{content:"";position:absolute;inset:18px 25px auto auto;width:8px;height:8px;border-radius:50%;background:var(--mood1);box-shadow:0 0 13px var(--mood1);transition:background .4s}
.kf-ac:after{content:"";position:absolute;left:12px;right:12px;bottom:16px;height:17px;border-radius:2px 2px 17px 17px;background:linear-gradient(180deg,#b9d0dc,#e6f4fa);box-shadow:inset 0 4px 8px rgba(14,46,75,.11)}
.kf-ac-logo{position:absolute;left:25px;top:27px;font-size:13px;letter-spacing:-.03em;font-weight:850;color:#67869d}
.kf-flow{position:absolute;z-index:-1;width:60%;height:150px;left:20%;top:51%;display:flex;justify-content:space-around;filter:blur(.2px)}
.kf-flow span{height:110%;width:15%;border-radius:100% 0 100% 0;border-left:2px solid var(--mood1);transform:rotate(7deg);opacity:.4;animation:kf-air 3s ease-in-out infinite alternate;transition:border-color .5s}
.kf-flow span:nth-child(2){animation-delay:-.6s;transform:rotate(-6deg)}
.kf-flow span:nth-child(3){animation-delay:-1.3s;transform:rotate(12deg)}
.kf-flow span:nth-child(4){animation-delay:-1.8s;transform:rotate(-9deg)}
.kf-story-info{position:absolute;bottom:13px;right:3%;display:flex;align-items:center;gap:10px;padding:13px 16px;background:#ffffffbd;border:1px solid #ffffffdb;backdrop-filter:blur(18px);border-radius:16px;box-shadow:0 12px 28px #1e648522;color:#2b6b8f;font-size:12px;font-weight:750;transition:transform .4s}
.kf-story-info:before{content:"";width:9px;height:9px;background:var(--mood1);border-radius:50%;box-shadow:0 0 0 5px #eafaff}
@keyframes kf-float-ac{to{transform:rotateY(-8deg) rotateX(3deg) translateY(-11px)}}
@keyframes kf-air{to{height:78%;opacity:.8;transform:translateY(20px) rotate(0deg)}}
/* Three-step conversion path */
.kf-journey{padding:64px 0 98px;background:linear-gradient(180deg,#fff,#f7fcff)}
.kf-journey .kf-journey-intro{text-align:center;max-width:690px;margin:0 auto 34px}
.kf-journey h2{font-size:clamp(30px,3.3vw,47px);letter-spacing:-.048em;margin:8px 0 13px;line-height:1.11}
.kf-journey-intro p{color:#678092;line-height:1.65;margin:0}
.kf-journey-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.kf-journey-card{position:relative;background:#fff;border:1px solid #e6f0f6;border-radius:27px;padding:32px;box-shadow:0 16px 42px rgba(13,57,85,.045);transition:transform .4s var(--kf-ease),box-shadow .4s var(--kf-ease)}
.kf-journey-card:hover{transform:translateY(-6px);box-shadow:0 24px 55px rgba(13,57,85,.11)}
.kf-journey-no{display:grid;place-items:center;width:49px;height:49px;border-radius:17px;font-size:16px;font-weight:850;color:#267dcb;background:linear-gradient(135deg,#e7f5ff,#eafaf8);margin-bottom:21px}
.kf-journey-card h3{font-size:19px;letter-spacing:-.5px;margin:0 0 9px}
.kf-journey-card p{font-size:13px;color:#698296;line-height:1.7;margin:0}
/* Form: helpful completeness meter, no blocking extra steps */
.kf-form-progress{padding:17px 18px;margin:12px 0 23px;border:1px solid #e0edf4;border-radius:17px;background:linear-gradient(130deg,#f5fbff,#f5fffc)}
.kf-form-progress-head{display:flex;justify-content:space-between;gap:12px;font-size:12px;font-weight:750;color:#4f748e;margin-bottom:11px}
.kf-progress-track{height:7px;border-radius:99px;overflow:hidden;background:#e1eff2}
.kf-progress-fill{height:100%;width:0%;border-radius:inherit;background:linear-gradient(90deg,#2087ee,#0fbaa2);transition:width .3s var(--kf-ease)}
.kf-form-progress[data-complete="true"] .kf-form-progress-head{color:#148d74}
.kf-service-quick{display:flex;flex-wrap:wrap;gap:9px;margin:4px 0 18px}
.kf-service-quick button{border:1px solid #d9e8f2;background:#fff;padding:10px 14px;border-radius:12px;color:#587588;font-size:12px;font-weight:750;transition:all .24s ease;min-height:43px}
.kf-service-quick button:hover{border-color:#79bed5;color:#176a91;transform:translateY(-2px)}
.kf-service-quick button[aria-pressed="true"]{border-color:#9ed6d1;color:#087c6c;background:#ebfaf5;box-shadow:0 3px 12px rgba(6,166,136,.08)}
.form-field:focus-within label{color:#168b9b}
.form-message:not([hidden]){animation:kf-rise .45s var(--kf-ease)}
@keyframes kf-rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
/* Mobile bottom action bar & return-to-top */
.kf-floating-actions{display:none}
.kf-to-top{position:fixed;bottom:27px;right:26px;z-index:35;border:1px solid #dfecf3;border-radius:50%;width:48px;height:48px;background:#ffffffd9;color:#1a648f;box-shadow:0 13px 34px rgba(13,58,88,.13);backdrop-filter:blur(14px);opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .3s,transform .3s;display:grid;place-items:center;font-size:20px}
.kf-to-top.kf-visible{opacity:1;pointer-events:auto;transform:translateY(0)}
.kf-to-top:hover{background:#effbff}
@media(max-width:1120px){.kf-story{grid-template-columns:1fr 1fr;gap:8px}.kf-story-art{min-height:280px}.kf-ac{height:105px}.kf-story-info{bottom:0}.hero h1{letter-spacing:-.05em}}
@media(max-width:800px){.kf-story{grid-template-columns:1fr;padding:34px 26px;gap:12px}.kf-story h2{font-size:clamp(34px,7vw,48px)}.kf-story-art{min-height:300px}.kf-journey-grid{grid-template-columns:1fr}.kf-journey-card{padding:23px 24px}.kf-story-section{padding-bottom:72px}.kf-journey{padding:45px 0 72px}}
@media(max-width:760px){.kf-to-top{bottom:91px;right:16px;width:43px;height:43px}.kf-floating-actions{position:fixed;z-index:48;bottom:0;left:0;right:0;display:flex;gap:10px;padding:10px max(16px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.92);border-top:1px solid #e0edf4;box-shadow:0 -10px 35px rgba(10,40,67,.07);backdrop-filter:blur(18px);transform:translateY(110%);transition:transform .4s var(--kf-ease)}.kf-floating-actions.kf-visible{transform:translateY(0)}.kf-floating-actions .btn{flex:1;font-size:13px;min-height:48px;padding:10px 15px;box-shadow:none}.kf-floating-actions .kf-call{display:grid;place-items:center;width:52px;border:1px solid #d9e9f1;border-radius:14px;color:#1886c6;font-weight:800;background:#fff;font-size:22px}.site-header .nav a:after{display:none}.kf-story-tabs button{padding:11px 12px}}
@media(max-width:460px){.kf-story{padding:28px 20px;border-radius:26px}.kf-story h2{font-size:36px}.kf-story-art{min-height:265px}.kf-ac{height:98px}.kf-story-info{right:0;bottom:0}.kf-journey .kf-journey-intro{text-align:left}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}.kf-motion-ready .kf-appear{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}.hero-visual .visual-orb,.kf-story-art:before,.kf-ac,.kf-flow span,.big-cta:before{animation:none!important}.kf-tilt,.hero-photo,.service-card,.project-card,.btn,.kf-journey-card{transform:none!important;transition:none!important}.kf-floating-actions{transition:none!important}}