/* Kerala hub + district pages. Each page sets --k-deep / --k-accent / --k-wash / --k-tone (data/districts.php). */
.kerala-page{--ml:"Noto Sans Malayalam","Nirmala UI","Kartika","Manjari","Meera",sans-serif}
[lang="ml"]{font-family:var(--ml)}
.kerala-page .nw{white-space:nowrap}
.kline,.kh-stops,.kh-band ul{list-style:none;margin:0;padding:0}

/* ---------- hero ---------- */
.kd-hero{position:relative;isolation:isolate;overflow:clip;color:#fff;padding:clamp(118px,15vh,160px) 0 clamp(3rem,6vw,5rem);
  background:radial-gradient(70% 60% at 88% 12%,color-mix(in srgb,var(--k-accent) 16%,transparent),transparent 70%),var(--k-deep)}
.kd-hero .crumbs{color:rgba(255,255,255,.66);margin-bottom:1.4rem}
.kd-hero .crumbs a{color:#fff}
.kd-hero h1{font-size:clamp(2.1rem,4.4vw,3.9rem);line-height:1.04;letter-spacing:-.035em;max-width:19ch;margin:0 0 .45em}
.kd-ml{margin:0 0 .25em;font-weight:700;line-height:1.15;color:var(--k-accent);font-size:clamp(1.6rem,3vw,2.5rem)}
.kd-lead{font-size:clamp(1.06rem,1.4vw,1.24rem);line-height:1.55;color:rgba(255,255,255,.8);max-width:44ch;margin:0}
.kd-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.8rem}
.kd-btn{--bg:var(--k-accent);--fg:var(--k-deep);--bd:var(--k-accent);--hover:#fff}
.kd-hero__art{margin:0}
.kd-art{display:block;width:100%;height:auto}

/* split: text left, illustration right */
.kd-hero--split .kd-hero__grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(24px,4vw,64px);align-items:center}

/* banner: giant Malayalam name behind, illustration as a wide band below */
.kd-hero--banner .kd-hero__text{position:relative;max-width:820px}
.kd-hero--banner .kd-ml{position:absolute;right:calc(-1 * min(40vw,520px));top:-.15em;z-index:-1;margin:0;white-space:nowrap;
  font-size:clamp(4.5rem,15vw,13rem);color:color-mix(in srgb,var(--k-accent) 24%,transparent)}
.kd-hero--banner h1{font-size:clamp(2.3rem,5vw,4.4rem)}
.kd-hero--banner .kd-hero__art{margin-top:clamp(2rem,4vw,3.2rem);height:clamp(220px,28vw,380px);border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
.kd-hero--banner .kd-art{height:100%}

/* tower: illustration fills the right side and fades under the text; outlined Malayalam name */
.kd-hero--tower{padding-bottom:clamp(4rem,8vw,6.5rem)}
.kd-hero--tower .kd-hero__text{max-width:640px}
.kd-hero--tower .kd-ml{font-size:clamp(3rem,7.6vw,6.6rem);line-height:1.05;color:transparent;-webkit-text-stroke:1.5px var(--k-accent);margin-bottom:.15em}
.kd-hero--tower .kd-hero__art{position:absolute;inset:0 0 0 42%;z-index:-1;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 38%);mask-image:linear-gradient(90deg,transparent,#000 38%)}
.kd-hero--tower .kd-art{height:100%}

/* illustration vocabulary (stroke classes before fill classes: fill classes win when combined) */
.kd-art .s1,.kd-art .s2,.kd-art .s3{fill:none;stroke-linecap:round;stroke-linejoin:round}
.kd-art .s1{stroke:var(--k-accent);stroke-width:2.5}
.kd-art .s2{stroke:rgba(255,255,255,.6);stroke-width:1.6}
.kd-art .s3{stroke:rgba(255,255,255,.22);stroke-width:1.2}
.kd-art .thick{stroke-width:4}
.kd-art .trunk{stroke-width:7}
.kd-art .f1{fill:var(--k-accent)}
.kd-art .f2{fill:rgba(255,255,255,.92)}
.kd-art .f3{fill:color-mix(in srgb,var(--k-accent) 30%,transparent)}
.kd-art .f4{fill:rgba(255,255,255,.07)}
.kd-art .fd{fill:var(--k-deep)}
.kd-art .glyph{font-family:var(--ml);font-size:210px;font-weight:700;fill:none;stroke:var(--k-accent);stroke-width:2.5}

/* the page's one motion moment: the illustration draws itself in */
@media (prefers-reduced-motion:no-preference){
  .kd-art .dr{stroke-dasharray:1;stroke-dashoffset:1;animation:kdraw 1.9s var(--ease) .2s forwards}
  .kd-art .wv{animation:kfade .6s ease calc(.3s + var(--d,0s)) both}
  @keyframes kdraw{to{stroke-dashoffset:0}}
  @keyframes kfade{from{opacity:0}}
}

/* ---------- story ---------- */
.kd-story{background:var(--k-wash);padding-block:clamp(4rem,8vw,7rem)}
.kd-story__grid{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(32px,6vw,96px);align-items:start}
.kd-story--flip .kd-story__grid{grid-template-columns:1fr 1.55fr}
.kd-story--flip .kd-facts{order:-1}
.kd-story h2,.kd-services h2,.kd-faq h2,.kh-list h2{font-size:clamp(1.8rem,3.4vw,2.8rem);letter-spacing:-.03em;max-width:22ch}
.kd-story__text p{max-width:62ch;color:#3a3840}
.kd-story__text .kd-first{font-size:clamp(1.14rem,1.6vw,1.34rem);line-height:1.6;color:var(--ink)}
.kd-facts{background:#fff;border-radius:var(--r);padding:clamp(20px,3vw,32px);border-top:4px solid var(--k-tone)}
.kd-facts dl{margin:0}
.kd-facts dl>div{padding:14px 0;border-bottom:1px solid var(--line)}
.kd-facts dl>div:last-child{border-bottom:0;padding-bottom:0}
.kd-facts dl>div:first-child{padding-top:0}
.kd-facts dt{font:600 .86rem/1.3 var(--f-body);color:var(--k-tone);margin-bottom:6px}
.kd-facts dd{margin:0;font-size:.98rem;line-height:1.55}
.kd-chips{display:flex;flex-wrap:wrap;gap:6px}
.kd-chips li{padding:.3em .8em;border-radius:999px;background:var(--k-wash);font-size:.9rem;font-weight:500}

/* ---------- services ---------- */
.kd-services{padding-block:clamp(4rem,8vw,7rem)}
.kd-svc a{text-decoration:none;color:inherit;display:block}
.kd-svc__name{display:block;font:600 clamp(1.2rem,1.9vw,1.5rem)/1.2 var(--f-display);letter-spacing:-.015em;transition:color .25s}
.kd-svc__why{display:block;color:var(--muted);margin-top:.35em}
.kd-svc__go{display:inline-block;margin-top:.7em;font-weight:600;font-size:.92rem;color:var(--k-tone);border-bottom:1.5px solid currentColor}
.kd-svc a:hover .kd-svc__name,.kd-svc a:focus-visible .kd-svc__name{color:var(--k-tone)}
/* rows: a ruled list */
.kd-services--rows .kd-svc{margin-top:2rem;border-bottom:1px solid var(--line)}
.kd-services--rows .kd-svc li{border-top:1px solid var(--line)}
.kd-services--rows .kd-svc a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto;gap:24px;align-items:baseline;padding:1.5rem .5rem;transition:background .25s}
.kd-services--rows .kd-svc a:hover{background:var(--k-wash)}
.kd-services--rows .kd-svc__why,.kd-services--rows .kd-svc__go{margin-top:0}
/* quad: two by two, tone rule on top */
.kd-services--quad .kd-svc{margin-top:2rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,56px) clamp(24px,5vw,72px)}
.kd-services--quad .kd-svc a{border-top:3px solid var(--k-tone);padding-top:1.1rem}

/* ---------- north-to-south line ---------- */
.kd-map{background:var(--k-deep);color:#fff;padding-block:clamp(4rem,8vw,6.5rem)}
.kd-map__head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 48px;align-items:end}
.kd-map h2{font-size:clamp(1.8rem,3.4vw,2.8rem);letter-spacing:-.03em;margin:0}
.kd-map__head p{max-width:46ch;margin:0;color:rgba(255,255,255,.75)}
.kline{position:relative;display:grid;grid-template-columns:repeat(14,minmax(0,1fr));margin-top:2rem}
.kline::before{content:"";position:absolute;left:3.5%;right:3.5%;top:50%;height:3px;margin-top:-1.5px;border-radius:3px;background:rgba(255,255,255,.22)}
.kline__stop{position:relative;height:210px}
.kline__stop a{color:#fff;text-decoration:none}
.kline__dot{position:absolute;left:50%;top:50%;width:16px;height:16px;translate:-50% -50%;border-radius:50%;background:var(--k-deep);border:3px solid var(--c);transition:transform .25s var(--ease)}
.kline__stop.is-home .kline__dot{border-radius:4px}
.kline__stop.is-here .kline__dot{width:28px;height:28px;background:var(--c);box-shadow:0 0 0 7px color-mix(in srgb,var(--c) 28%,transparent)}
.kline__stop a:hover .kline__dot,.kline__stop a:focus-visible .kline__dot{transform:scale(1.35)}
.kline__name,.kline__ml,.kline__note{position:absolute;left:50%;translate:-50% 0;width:150px;text-align:center}
.kline__stop:nth-child(odd) .kline__name{bottom:calc(50% + 46px)}
.kline__stop:nth-child(odd) .kline__ml{bottom:calc(50% + 24px)}
.kline__stop:nth-child(odd) .kline__note{bottom:calc(50% + 70px)}
.kline__stop:nth-child(even) .kline__name{top:calc(50% + 24px)}
.kline__stop:nth-child(even) .kline__ml{top:calc(50% + 46px)}
.kline__stop:nth-child(even) .kline__note{top:calc(50% + 70px)}
.kline__name{font-weight:600;font-size:.92rem;line-height:1.2}
.kline__ml{font-size:.78rem;opacity:.65}
.kline__note{font-size:.74rem;font-weight:600;color:var(--k-accent)}
.kline__stop.is-here .kline__name{color:var(--k-accent)}
.kline__stop a:hover .kline__name{text-decoration:underline}
.kd-next{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:1.5rem 0 0}
.kd-next a{color:#fff;text-decoration:none;padding:.65em 1.2em;border:1px solid rgba(255,255,255,.25);border-radius:999px;font-weight:500;transition:background .25s,color .25s}
.kd-next a:hover,.kd-next a:focus-visible{background:#fff;color:var(--k-deep)}

/* ---------- FAQ ---------- */
.kd-faq{padding-block:clamp(4rem,8vw,7rem)}
.kd-faq .faq{margin-top:1.5rem}
.kh-faq{padding-top:0}
.kd-faq .faq summary:hover{color:var(--k-tone)}
.kd-faq .faq details[open]{background:linear-gradient(90deg,color-mix(in srgb,var(--k-accent) 16%,transparent),transparent)}

/* ---------- hub ---------- */
.kh{--k-deep:#0c2621;--k-accent:#f6921e;--k-wash:#eef5f2;--k-tone:#a85500}
.kh-hero{background:var(--k-deep);color:#fff;padding:clamp(118px,15vh,160px) 0 0}
.kh-hero .crumbs{color:rgba(255,255,255,.66)}
.kh-hero .crumbs a{color:#fff}
.kh-hero h1{font-size:clamp(2.3rem,5.4vw,4.8rem);line-height:1.02;letter-spacing:-.04em;max-width:17ch}
.kh-lead{font-size:clamp(1.06rem,1.4vw,1.25rem);line-height:1.6;color:rgba(255,255,255,.8);max-width:62ch}
.kh-band{margin-top:clamp(2.5rem,5vw,4rem)}
.kh-band ul{display:grid;grid-template-columns:repeat(14,minmax(0,1fr))}
.kh-band li{background:var(--k-deep);border-left:1px solid rgba(255,255,255,.08)}
.kh-band a{display:flex;flex-direction:column;justify-content:space-between;align-items:center;height:clamp(240px,30vw,380px);padding:18px 0 22px;color:#fff;text-decoration:none;transition:background .3s var(--ease),color .3s var(--ease)}
.kh-band__ml{font-size:clamp(1.6rem,2.6vw,2.6rem);font-weight:700;color:var(--k-accent);line-height:1;transition:color .3s}
.kh-band__name{writing-mode:vertical-rl;rotate:180deg;white-space:nowrap;font:600 clamp(.82rem,1.1vw,1rem)/1 var(--f-body);letter-spacing:.02em}
.kh-band a:hover,.kh-band a:focus-visible{background:var(--k-accent);color:var(--k-deep)}
.kh-band a:hover .kh-band__ml,.kh-band a:focus-visible .kh-band__ml{color:var(--k-deep)}
.kh-list{padding-block:clamp(4rem,8vw,7rem)}
.kh-sub{color:var(--muted);max-width:60ch}
.kh-stops{position:relative;margin-top:2.5rem}
.kh-stops::before{content:"";position:absolute;left:11px;top:14px;bottom:14px;width:3px;border-radius:3px;background:var(--line)}
.kh-stops a{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr) minmax(0,1.4fr);gap:8px 28px;align-items:baseline;padding:1.2rem .5rem 1.2rem 0;text-decoration:none;color:inherit;border-bottom:1px solid var(--line);transition:background .25s}
.kh-stops a:hover,.kh-stops a:focus-visible{background:var(--k-wash)}
.kh-stops__dot{width:16px;height:16px;margin-left:4px;border-radius:50%;background:var(--k-accent);box-shadow:0 0 0 4px var(--k-deep);align-self:center}
.kh-stops li.is-home .kh-stops__dot{border-radius:4px}
.kh-stops__name{font:600 clamp(1.15rem,1.7vw,1.4rem)/1.2 var(--f-display);letter-spacing:-.015em}
.kh-stops__name em{font:600 .78rem/1 var(--f-body);font-style:normal;padding:.35em .7em;border-radius:999px;background:var(--k-deep);color:#fff;vertical-align:middle;margin-left:.4em}
.kh-stops__ml{grid-column:2;font-size:.9rem;color:var(--muted)}
.kh-stops__sum{grid-column:3;grid-row:1 / span 2;color:#3a3840}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .kline{grid-template-columns:repeat(7,minmax(0,1fr));row-gap:12px}
  .kline::before{display:none}
  .kline__stop{height:150px}
  .kh-band ul{grid-template-columns:repeat(7,minmax(0,1fr))}
  .kh-band a{height:200px}
}
@media (max-width:900px){
  .kd-hero--split .kd-hero__grid{grid-template-columns:1fr}
  .kd-hero--split .kd-hero__art{max-width:520px}
  .kd-hero--banner .kd-ml{position:static;font-size:clamp(3rem,16vw,6rem);margin-bottom:.1em}
  .kd-hero--tower .kd-hero__art{position:static;height:230px;margin-top:2rem;-webkit-mask-image:none;mask-image:none}
  .kd-story__grid,.kd-story--flip .kd-story__grid{grid-template-columns:1fr}
  .kd-story--flip .kd-facts{order:0}
  .kd-services--rows .kd-svc a{grid-template-columns:1fr;gap:6px}
  .kd-services--rows .kd-svc__go{justify-self:start;margin-top:.4em}
  .kd-services--quad .kd-svc{grid-template-columns:1fr}
  .kh-stops a{grid-template-columns:24px minmax(0,1fr)}
  .kh-stops__sum{grid-column:2;grid-row:auto}
}
@media (max-width:760px){
  /* line map becomes a vertical line */
  .kline{display:block;margin-top:1.5rem}
  .kline::before{display:block;left:13px;right:auto;top:10px;bottom:10px;width:3px;height:auto;margin:0}
  .kline__stop{height:auto}
  .kline__stop a{display:grid;grid-template-columns:30px auto 1fr;gap:4px 12px;align-items:center;padding:9px 0}
  .kline__dot,.kline__stop.is-here .kline__dot{position:relative;left:auto;top:auto;translate:none;justify-self:center}
  .kline__name,.kline__ml,.kline__note{position:static!important;translate:none;width:auto;text-align:left}
  .kline__ml{grid-column:3}
  .kline__note{grid-column:2 / span 2}
  .kh-band ul{grid-template-columns:repeat(4,minmax(0,1fr))}
  .kh-band a{height:150px}
  .kd-cta .btn{width:100%}
}

/* =====================================================================
   Motion layer (assets/js/kerala.js). Hidden states apply only when motion is allowed;
   hero items hide early (.js), below-fold items once the script is running (.km-ready).
   If the script never runs, a CSS failsafe reveals the hero after 2.5s.
   ===================================================================== */
.kw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.kw>span{display:inline-block;transform-origin:0 100%}
@media (prefers-reduced-motion:no-preference){
  .js .kd-hero [data-m]:not([data-m="words"]),.js .kh-hero [data-m]:not([data-m="words"]):not([data-m="band"]),
  .js [data-m="band"]>li{opacity:0}
  .js [data-m="words"] .kw>span{transform:translateY(110%)}
  html.js:not(.km-ready) .kd-hero [data-m],html.js:not(.km-ready) .kh-hero [data-m],
  html.js:not(.km-ready) [data-m="band"]>li,html.js:not(.km-ready) [data-m] .kw>span{animation:kshow .01s 2.5s forwards}
  .km-ready:not(.km-static) [data-m="pain"],.km-ready:not(.km-static) .kpain__fix,
  .km-ready:not(.km-static) [data-m="stagger"]>*,.km-ready:not(.km-static) [data-m="plan"] li{opacity:0}
  .km-ready [data-m="kline"]:not(.go) .kline::before{transform:scaleX(0)}
  .km-ready [data-m="kline"]:not(.go) .kline__stop{opacity:0;translate:0 14px}
}
@keyframes kshow{to{opacity:1;transform:none}}

/* ---------- customer pain ---------- */
.kpain{position:relative;overflow:clip;background:var(--k-deep);color:#fff;padding-block:clamp(4.5rem,9vw,8rem)}
.kh .kpain{background:#0c2621}
.kpain__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:14px 48px}
.kpain h2{font-size:clamp(2.3rem,5.4vw,4.6rem);line-height:1;letter-spacing:-.045em;margin:0;max-width:14ch}
.kpain__head p{max-width:42ch;margin:0;color:rgba(255,255,255,.72)}
.kpain__list{margin-top:clamp(2.5rem,5vw,4rem)}
.kpain__item{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(18px,4vw,72px);align-items:start;padding-block:clamp(1.7rem,3.2vw,2.6rem);border-top:1px solid rgba(255,255,255,.14)}
.kpain__item:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.kpain__q{margin:0;font:600 clamp(1.35rem,2.5vw,2.05rem)/1.28 var(--f-display);letter-spacing:-.022em;max-width:30ch}
.kpain__q span{background:linear-gradient(var(--k-accent),var(--k-accent)) no-repeat 0 56%/0% .085em;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-size .95s cubic-bezier(.65,0,.35,1),color .7s ease .55s}
.kpain__item.struck .kpain__q span{background-size:100% .085em;color:rgba(255,255,255,.5)}
.kpain__fix{border-left:3px solid var(--k-accent);padding:.15rem 0 .15rem 1.1rem}
.kpain__label{margin:0 0 .35rem;font-weight:600;font-size:.9rem;color:var(--k-accent)}
.kpain__fix p:last-child{margin:0;font-size:1.06rem;line-height:1.6;color:rgba(255,255,255,.9)}

/* ---------- strategy / plan ---------- */
.kplan{background:var(--k-wash);padding-block:clamp(4.5rem,9vw,8rem)}
.kplan__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:14px 48px}
.kplan h2{font-size:clamp(2rem,4.2vw,3.4rem);letter-spacing:-.04em;line-height:1.02;margin:0;max-width:16ch}
.kplan__head p{max-width:46ch;margin:0;color:#45434b}
.kplan__track{position:relative;margin-top:clamp(2.5rem,5vw,4rem);--p:0}
.kplan__bar{position:absolute;left:11px;right:0;top:9px;height:4px;border-radius:4px;background:color-mix(in srgb,var(--k-tone) 16%,transparent)}
.kplan__bar i{position:absolute;inset:0;border-radius:inherit;background:var(--k-tone);transform:scaleX(var(--p));transform-origin:0 50%}
.kplan__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px)}
.kplan__steps li{position:relative;padding-top:48px}
.kplan__dot{position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;background:var(--k-wash);border:4px solid color-mix(in srgb,var(--k-tone) 30%,transparent);
  transition:background .4s,border-color .4s,transform .6s cubic-bezier(.34,1.56,.64,1)}
.kplan__steps li.lit .kplan__dot{background:var(--k-tone);border-color:var(--k-tone);transform:scale(1.2)}
.kplan__when{margin:0 0 .5rem;font-weight:600;font-size:.92rem;color:var(--k-tone)}
.kplan__n{font:700 1rem/1 var(--f-display);margin-right:.25em}
.kplan__steps h3{font-size:clamp(1.3rem,2vw,1.65rem);letter-spacing:-.02em;margin:0 0 .4em}
.kplan__steps p:last-child{margin:0;max-width:36ch;color:#3a3840}
.kplan__steps h3,.kplan__steps p{transition:opacity .5s}
.km-ready:not(.km-static) .kplan__steps li:not(.lit) h3,.km-ready:not(.km-static) .kplan__steps li:not(.lit) p{opacity:.42}

/* ---------- line map: draws north to south, stops arrive in order ---------- */
.kline::before{transition:transform 1.8s cubic-bezier(.65,0,.35,1);transform-origin:0 50%}
.kline__stop{transition:opacity .5s ease,translate .7s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(var(--i,0) * 95ms + 150ms)}
.kline__stop.is-here .kline__dot::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid var(--c);opacity:0}
@media (prefers-reduced-motion:no-preference){
  .go .kline__stop.is-here .kline__dot::after{animation:kring 2.6s ease-out 1.8s infinite}
}
@keyframes kring{0%{transform:scale(.55);opacity:.9}100%{transform:scale(1.9);opacity:0}}

/* ---------- hub band: columns rise in, the hovered district opens up ---------- */
.kh-band a{position:relative;overflow:hidden}
.kh-band__sum{display:none}
@media (min-width:1101px){
  .kh-band ul{display:flex}
  .kh-band li{flex:1 1 0;min-width:0;transition:flex-grow .75s cubic-bezier(.34,1.25,.64,1)}
  .kh-band li:hover,.kh-band li:focus-within{flex-grow:3.4}
  .kh-band__sum{display:block;position:absolute;left:18px;bottom:22px;width:220px;font-size:.93rem;line-height:1.45;font-weight:500;opacity:0;transform:translateY(12px);transition:opacity .25s,transform .5s cubic-bezier(.34,1.56,.64,1);pointer-events:none}
  .kh-band li:hover .kh-band__sum,.kh-band li:focus-within .kh-band__sum{opacity:1;transform:none;transition-delay:.22s}
  .kh-band__name{transition:opacity .2s}
  .kh-band li:hover .kh-band__name,.kh-band li:focus-within .kh-band__name{opacity:0}
}

/* ---------- ambient motion graphics in each illustration ---------- */
@media (prefers-reduced-motion:no-preference){
  .kd-art .wave{animation:kdraw 1.9s var(--ease) .2s forwards,kwave var(--dur,6s) linear 2.1s infinite}
  .kd-art .shimmer{animation:kdraw 1.9s var(--ease) .2s forwards,kshim 2.6s ease-in-out calc(2.1s + var(--d,0s)) infinite alternate}
  .kd-art .sun{transform-box:fill-box;transform-origin:center;animation:ksun 7s ease-in-out infinite}
  .kd-art .bob{transform-box:view-box;animation:kbob 5.5s ease-in-out var(--d,0s) infinite}
  .kd-art .swing{transform-box:view-box;animation:kswing 4.4s ease-in-out var(--d,0s) infinite alternate}
  .kd-art .sway{transform-box:view-box;animation:ksway 5.2s ease-in-out var(--d,0s) infinite alternate}
  .kd-art .dip{transform-box:view-box;animation:kdip 9s ease-in-out var(--d,0s) infinite}
  .kd-art .wind{transform-box:view-box;animation:kwind 3.8s ease-in-out var(--d,0s) infinite alternate}
  .kd-art .flag{transform-box:view-box;animation:kflag 1.3s ease-in-out infinite alternate}
  .kd-art .shuttle{animation:kshuttle 3.6s cubic-bezier(.65,0,.35,1) 1.4s infinite alternate}
  .kd-art .tw{animation:ktw 3.4s ease-in-out var(--d,0s) infinite}
  .kd-art .mist{opacity:.08;animation:kmist 16s ease-in-out var(--d,0s) infinite alternate}
  .kd-art .drift{animation:kdrift 13s ease-in-out var(--d,0s) infinite alternate}
  .kd-art .glide{animation:kglide 9s ease-in-out infinite alternate}
  .kd-art .drip{transform-box:fill-box;animation:kdrip 2.4s ease-in var(--d,0s) infinite}
  .kd-art .beam{animation:kbeam 4.2s ease-in-out var(--d,0s) infinite}
  .kd-art .lamp{animation:kbeam 4.2s ease-in-out infinite}
  .kd-art .blink{animation:kblink 1.1s steps(2,start) infinite}
  .off .kd-art *{animation-play-state:paused!important}
}
.kd-art .mist{opacity:.08}
@keyframes kwave{to{transform:translateX(calc(var(--wl) * -1))}}
@keyframes kshim{from{opacity:.35}to{opacity:1}}
@keyframes ksun{50%{transform:scale(1.07)}}
@keyframes kbob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(-1.4deg)}}
@keyframes kswing{from{transform:rotate(-2.4deg)}to{transform:rotate(2.4deg)}}
@keyframes ksway{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@keyframes kdip{0%,100%{transform:rotate(0)}40%,58%{transform:rotate(-7deg)}}
@keyframes kwind{from{transform:skewX(-5deg)}to{transform:skewX(5deg)}}
@keyframes kflag{from{transform:scaleX(1) skewY(0)}to{transform:scaleX(.78) skewY(7deg)}}
@keyframes kshuttle{to{transform:translateX(464px)}}
@keyframes ktw{0%,100%{opacity:1}50%{opacity:.15}}
@keyframes kmist{from{transform:translateX(-50px)}to{transform:translateX(70px)}}
@keyframes kdrift{from{transform:translateX(calc(var(--dx,10px) * -1))}to{transform:translateX(var(--dx,10px))}}
@keyframes kglide{from{transform:translate(0,0)}to{transform:translate(36px,-10px)}}
@keyframes kdrip{0%{transform:translateY(-6px);opacity:0}20%{opacity:1}85%{transform:translateY(9px);opacity:1}100%{transform:translateY(11px);opacity:0}}
@keyframes kbeam{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes kblink{to{visibility:hidden}}

@media (max-width:900px){
  .kpain__item{grid-template-columns:1fr}
  .kplan__steps{grid-template-columns:1fr;gap:2rem}
  .kplan__steps li{padding:0 0 0 48px}
  .kplan__bar{left:9px;right:auto;top:4px;bottom:4px;width:4px;height:auto}
  .kplan__bar i{transform:scaleY(var(--p));transform-origin:50% 0}
  .kplan__dot{top:0}
}
@media (max-width:760px){
  .kline::before{transform-origin:50% 0}
  .km-ready [data-m="kline"]:not(.go) .kline::before{transform:scaleY(0)}
}