/* JK Training: osioiden tyylit. Värit ja fontit tulevat theme.json:sta. */
:root{--jk-gold:var(--wp--preset--color--gold);--jk-line:var(--wp--preset--color--line);--jk-black:var(--wp--preset--color--black)}
body{overflow-x:clip}
.jk-main>*{margin-block-start:0}
.jk-header{padding:0 clamp(20px,4vw,40px);min-height:68px;background:var(--jk-black);border-bottom:1px solid var(--jk-line);max-width:none}
header.wp-block-template-part{position:sticky;top:0;z-index:20}
.admin-bar header.wp-block-template-part{top:32px}
.jk-logo img{display:block;height:54px;width:auto}
.jk-header .wp-block-navigation{font-family:var(--wp--preset--font-family--body);font-weight:500;color:var(--wp--preset--color--muted)}
.jk-header .wp-block-navigation a:hover{color:var(--wp--preset--color--foreground)}
.jk-header .wp-block-button__link{padding:13px 22px;font-size:1.05rem}
.wp-block-button__link{position:relative;overflow:hidden;transition:transform .2s,filter .2s}
.wp-block-button__link:hover{transform:translateY(-2px);filter:brightness(1.1)}
.wp-block-button.is-style-outline .wp-block-button__link{background:none;color:var(--wp--preset--color--foreground);box-shadow:inset 0 0 0 1px var(--jk-line);border:0}
.wp-block-button.is-style-outline .wp-block-button__link:hover{box-shadow:inset 0 0 0 1px var(--jk-gold)}
.jk-footer{max-width:none;padding:28px clamp(20px,4vw,40px);border-top:1px solid var(--jk-line);color:var(--wp--preset--color--muted)}
.jk-footer p{margin:0}
/* Hero */
.jk-hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;padding:120px 0 clamp(40px,7vw,80px);margin-block-start:0}
.jk-hero__img{position:absolute;inset:0 0 0 auto;width:min(62%,880px);height:100%;margin:0;z-index:-1}
.jk-hero__img img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;-webkit-mask-image:linear-gradient(to right,transparent,#000 45%);mask-image:linear-gradient(to right,transparent,#000 45%)}
.jk-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,var(--jk-black) 2%,transparent 38%)}
.jk-hero__in{width:100%;max-width:1180px;margin-inline:auto;padding-inline:clamp(20px,4vw,40px)}
.jk-hero .jk-hero__in>*{margin-inline:0!important}
.jk-mask{overflow:hidden;padding-bottom:.08em}
.jk-h1{font-size:clamp(2.6rem,8.5vw,7rem);font-weight:800;margin:0 0 clamp(24px,4vw,44px)}
.jk-rule{width:220px;max-width:100%;height:2px;border:0;background:var(--jk-gold);margin:0 0 26px;margin-inline:0}
.jk-lead{max-width:36rem;color:var(--wp--preset--color--muted);font-size:1.2rem}
@media(max-width:860px){.jk-hero__img{width:100%;opacity:.55}.jk-hero__img img{-webkit-mask-image:none;mask-image:none}.jk-hero::after{background:linear-gradient(to top,var(--jk-black) 6%,transparent 62%)}}
@media(prefers-reduced-motion:no-preference){
.jk-h1{animation:jk-up 1.1s .1s cubic-bezier(.2,.8,.2,1) both}
.jk-rule{animation:jk-line 1.4s .6s cubic-bezier(.7,0,.2,1) both;transform-origin:left}
.jk-lead,.jk-hero .wp-block-buttons{animation:jk-fade .9s 1s ease both}
}
@keyframes jk-up{from{transform:translateY(110%)}to{transform:none}}
@keyframes jk-line{from{transform:scaleX(0)}to{transform:none}}
@keyframes jk-fade{from{opacity:0}to{opacity:1}}
/* Elementorin globaalit tyylit voivat ylikirjoittaa teeman tyylit niin kauan kuin Elementor on asennettuna. Voi poistaa, kun Elementor poistetaan. */
body .wp-site-blocks h1,body .wp-site-blocks h2,body .wp-site-blocks h3,body .wp-site-blocks h4{font-family:var(--wp--preset--font-family--display);text-transform:uppercase;font-weight:700;line-height:.95;letter-spacing:normal}
body .wp-site-blocks .jk-h1{font-weight:800}
body .wp-site-blocks a{font-family:inherit;text-decoration:none}
body .wp-site-blocks .jk-footer a:hover,body .wp-site-blocks .jk-header a:hover{color:var(--wp--preset--color--gold)}
body .wp-site-blocks .wp-block-button .wp-block-button__link{font-family:var(--wp--preset--font-family--display);font-weight:700;letter-spacing:.07em;text-transform:uppercase}

/* Osiot */
.jk-section{padding:clamp(56px,8vw,104px) 0;border-top:1px solid var(--jk-line);margin-block-start:0}
.jk-section--alt{background:var(--wp--preset--color--surface)}
.jk-in{max-width:1180px;margin-inline:auto;padding-inline:clamp(20px,4vw,40px)}
.jk-in>h2,.jk-section h2{font-size:clamp(2.4rem,6vw,4.4rem);font-weight:700;margin:0 0 clamp(24px,4vw,40px)}
.jk-section p{color:var(--wp--preset--color--muted)}
.jk-section :is(strong){color:var(--wp--preset--color--foreground);font-weight:500}
.jk-link a{font-family:var(--wp--preset--font-family--display);font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--jk-gold)!important;text-decoration:none}
.jk-link a:hover{text-decoration:underline;text-underline-offset:5px}
.jk-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.jk-card img,.jk-ev__img img,.jk-about__img img{display:block;width:100%;height:auto}
.jk-card__img{margin:0 0 18px}.jk-card__img img{aspect-ratio:4/3;object-fit:cover;object-position:center 30%;box-shadow:0 0 0 1px var(--jk-line)}
.jk-card h3{font-size:clamp(1.8rem,3vw,2.4rem);margin:0 0 10px}.jk-card p{margin:0 0 14px}
.jk-ev{display:grid;grid-template-columns:.62fr 1.38fr;gap:clamp(28px,5vw,72px);align-items:start}
.jk-ev__img{position:sticky;top:96px;margin:0}.jk-ev__img img{box-shadow:0 0 0 1px var(--jk-line)}
.jk-ev__col{display:grid;gap:clamp(24px,3vw,40px);min-width:0}
.jk-phases{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,2vw,24px);align-items:end}
.jk-ph{--n:.4;display:flex;flex-direction:column;justify-content:flex-end;border-bottom:2px solid var(--jk-gold);padding-bottom:12px}
.jk-ph--2{--n:.65}.jk-ph--3{--n:1}.jk-ph--4{--n:.3}
.jk-ph::before{content:"";display:block;height:calc(var(--n)*220px);margin-bottom:14px;background:linear-gradient(to top,#a47a28,#ecd08a);transform-origin:bottom}
.jk-ph--4::before{background:none;box-shadow:inset 0 0 0 1px var(--jk-gold)}
.jk-ph h3{font-size:clamp(1.3rem,2.6vw,2rem);margin:0}.jk-ph p{margin:2px 0 0;color:var(--jk-gold);font-family:var(--wp--preset--font-family--display);font-weight:600;letter-spacing:.06em}
.jk-price{border:1px solid var(--jk-line);padding:clamp(22px,3vw,36px);background:var(--jk-black)}
.jk-price__n{font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:clamp(2.6rem,5vw,3.6rem);line-height:1;color:var(--jk-gold)!important;margin:0}
.jk-price ul{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:10px}.jk-price li{position:relative;padding-left:22px}
.jk-price li::before{content:"";position:absolute;left:0;top:.8em;width:10px;height:2px;background:var(--jk-gold)}
.jk-about{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,6vw,88px);align-items:stretch}
.jk-about__img{position:relative;margin:0;min-height:380px}.jk-about__img img{position:absolute;inset:0;height:100%;object-fit:cover;box-shadow:0 0 0 1px var(--jk-line)}
.jk-fact{padding:20px 0;border-bottom:1px solid var(--jk-line)}.jk-fact:first-of-type{border-top:1px solid var(--jk-line);margin-top:28px}
.jk-fact p{margin:0}.jk-fact__t{font-family:var(--wp--preset--font-family--display);font-weight:700;font-size:clamp(1.8rem,4vw,2.8rem);line-height:1.05;text-transform:uppercase;color:var(--wp--preset--color--foreground)!important}
.jk-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.jk-quote{border-left:2px solid var(--jk-gold);padding-left:24px}.jk-quote p{margin:0 0 14px}
.jk-cite{font-family:var(--wp--preset--font-family--display);font-weight:600;letter-spacing:.05em;color:var(--jk-gold)!important}
.jk-cta__h{font-size:clamp(3rem,10vw,8rem)!important;font-weight:800!important;max-width:11ch;margin-bottom:36px!important}
.jk-contact{margin-top:32px}.jk-contact a{color:var(--wp--preset--color--muted)}
@media(max-width:860px){.jk-cards,.jk-quotes,.jk-ev,.jk-about{grid-template-columns:1fr}.jk-ev__img{position:static;max-width:340px;margin-inline:auto}.jk-about__img{min-height:0;aspect-ratio:4/5}.jk-phases{grid-template-columns:repeat(2,1fr);row-gap:28px}.jk-quotes{gap:28px}}
@media(prefers-reduced-motion:no-preference){
.jk-js .jk-reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.jk-js .jk-reveal.is-in{opacity:1;transform:none}
.jk-js .jk-ph::before{transform:scaleY(0);transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.jk-js .jk-phases.is-in .jk-ph::before{transform:none}
.jk-card__img img{transition:transform .6s}.jk-card:hover .jk-card__img img{transform:scale(1.03)}.jk-card__img{overflow:hidden}
}

/* Palvelut – tankorullaus */
.jk-load{background:var(--wp--preset--color--surface)}
.jk-bar{display:block;width:100%;height:auto;margin:6px 0 22px}
.jk-step__img{margin:0}.jk-step__img img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center 30%;box-shadow:0 0 0 1px var(--jk-line)}
.jk-step__txt h3{font-size:clamp(2rem,4.5vw,3.6rem);margin:0 0 12px}.jk-step__txt p{max-width:34rem;margin:0 0 14px}
.jk-steps{display:grid;gap:44px}
.jk-step{display:grid;gap:14px}
.jk-tabs{display:none}
.jk-load.is-pinned{height:260vh;padding:0}
.jk-load.is-pinned .jk-load__stage{position:sticky;top:68px;height:calc(100vh - 68px);display:grid;grid-template-columns:1.1fr .9fr;grid-template-rows:auto 1fr;column-gap:clamp(32px,5vw,72px);align-content:center;padding-block:28px}
.admin-bar .jk-load.is-pinned .jk-load__stage{top:100px;height:calc(100vh - 100px)}
.jk-load.is-pinned .jk-load__head{grid-column:1;grid-row:1}
.jk-load.is-pinned .jk-steps{display:contents}
.jk-load.is-pinned .jk-step{grid-column:1/-1;grid-row:1/3;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;pointer-events:none}
.jk-load.is-pinned .jk-step__txt{grid-column:1;grid-row:2;align-self:start;opacity:0;transform:translateY(24px);transition:opacity .45s ease,transform .45s ease}
.jk-load.is-pinned .jk-step__img{grid-column:2;grid-row:1/3;align-self:center;opacity:0;transform:scale(1.06);transition:opacity .6s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.jk-load.is-pinned .jk-step__img img{aspect-ratio:4/5;max-height:calc(100vh - 160px)}
.jk-load.is-pinned .jk-step.is-on{pointer-events:auto}
.jk-load.is-pinned .jk-step.is-on .jk-step__txt,.jk-load.is-pinned .jk-step.is-on .jk-step__img{opacity:1;transform:none}
.jk-load.is-pinned .jk-bar{max-height:26vh}
.jk-load.is-pinned .jk-tabs{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0 0 22px}
.jk-tabs button{font:600 1.05rem var(--wp--preset--font-family--display);letter-spacing:.07em;text-transform:uppercase;background:none;color:var(--wp--preset--color--muted);border:0;border-bottom:2px solid var(--jk-line);padding:8px 0;cursor:pointer;transition:color .25s,border-color .25s}
.jk-tabs button:hover{color:var(--wp--preset--color--foreground)}.jk-tabs button.on{color:var(--wp--preset--color--foreground);border-color:var(--jk-gold)}
.jk-load.is-pinned .jk-p1,.jk-load.is-pinned .jk-p2{opacity:0}

/* 0.3.1: leveämpi sisältö isoilla näytöillä, isompi kuva tankorullauksessa, siistimpi tekstin vaihto */
.jk-in,.jk-hero__in{max-width:1320px}
.jk-load.is-pinned .jk-load__stage{grid-template-columns:1fr 1fr}
.jk-load.is-pinned .jk-step__img img{aspect-ratio:4/5;max-height:calc(100vh - 140px);width:auto;max-width:100%;margin-left:auto}
.jk-load.is-pinned .jk-step__txt{transition:opacity .2s ease,transform .2s ease}
.jk-load.is-pinned .jk-step.is-on .jk-step__txt{transition:opacity .45s ease .18s,transform .45s ease .18s}
.jk-js .jk-ph::before{transition-delay:calc(var(--i,0) * 120ms)}
.jk-ph--2{--i:1}.jk-ph--3{--i:2}.jk-ph--4{--i:3}

/* 0.3.2: mobiilikorjaukset */
@media(max-width:860px){
.jk-about__img{min-height:0;aspect-ratio:auto;width:100%;max-width:420px}
.jk-about__img img{position:static;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.jk-phases{grid-template-columns:repeat(4,1fr);gap:8px;row-gap:0}
.jk-ph::before{height:calc(var(--n)*110px);margin-bottom:10px}
.jk-ph h3{font-size:1rem}.jk-ph p{font-size:.8rem;letter-spacing:.02em}
}

/* Etävalmennussivu */
.jk-evhero{padding:clamp(48px,7vw,96px) 0;margin-block-start:0}
.jk-evhero__grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,5vw,72px);align-items:center}
.jk-evhero__img{margin:0;justify-self:end;width:100%;max-width:440px}.jk-evhero__img img{display:block;width:100%;height:auto;box-shadow:0 0 0 1px var(--jk-line)}
.jk-evhero .jk-h1{font-size:clamp(3rem,9vw,7.5rem)}
.jk-bens{list-style:none;padding:0;margin:0 0 30px;display:grid;grid-template-columns:1fr 1fr;gap:12px 28px;max-width:38rem}
.jk-bens li{position:relative;padding-left:22px}.jk-bens li::before{content:"";position:absolute;left:0;top:.8em;width:10px;height:2px;background:var(--jk-gold)}
.jk-note{color:var(--wp--preset--color--muted);font-size:.98rem;max-width:38rem;margin:0 0 8px}.jk-note a{color:var(--wp--preset--color--foreground);text-decoration:underline}
.jk-evhero .wp-block-buttons{margin-bottom:26px}
.jk-intro{max-width:46rem}
.jk-phases--full{margin-top:32px}.jk-ph__d{color:var(--wp--preset--color--muted)!important;font-family:var(--wp--preset--font-family--body)!important;font-weight:400!important;letter-spacing:0!important;font-size:1rem;margin-top:10px!important}
.jk-phases--full .jk-ph{border-bottom:0;justify-content:flex-start}
.jk-phases--full .jk-ph::before{border-bottom:2px solid var(--jk-gold);background-clip:padding-box}
.jk-phases--full{align-items:start}
.jk-phases--full .jk-ph::before{height:calc(var(--n)*220px);margin-top:calc((1 - var(--n))*220px)}
.jk-fit{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);margin:32px 0}
.jk-fit__i{border-top:2px solid var(--jk-gold);padding-top:18px}.jk-fit__i h3{font-size:1.9rem;margin:0 0 10px}.jk-fit__i p{margin:0}
.jk-faq{margin-top:28px;max-width:52rem}
.jk-faq__i{border-bottom:1px solid var(--jk-line)}.jk-faq__i:first-child{border-top:1px solid var(--jk-line)}
.jk-faq__i summary{cursor:pointer;list-style:none;padding:22px 48px 22px 0;position:relative;font-family:var(--wp--preset--font-family--display);font-weight:600;font-size:clamp(1.25rem,2.6vw,1.6rem);line-height:1.2;color:var(--wp--preset--color--foreground)}
.jk-faq__i summary::-webkit-details-marker{display:none}
.jk-faq__i summary::after{content:"+";position:absolute;right:6px;top:14px;font-size:2rem;color:var(--jk-gold);transition:transform .3s}
.jk-faq__i[open] summary::after{transform:rotate(45deg)}
.jk-faq__i>*:not(summary){max-width:46rem}.jk-faq__i>:last-child{margin-bottom:24px}
.jk-faq__i ol{color:var(--wp--preset--color--muted);padding-left:20px}
@media(max-width:860px){.jk-evhero__grid,.jk-fit{grid-template-columns:1fr}.jk-evhero__img{justify-self:center;max-width:340px}.jk-bens{grid-template-columns:1fr}
.jk-phases--full{grid-template-columns:1fr 1fr;row-gap:28px}.jk-phases--full .jk-ph::before{height:calc(var(--n)*110px);margin-top:calc((1 - var(--n))*110px)}.jk-phases--full .jk-ph h3{font-size:1.3rem}.jk-phases--full .jk-ph p{font-size:.95rem}}
@media(prefers-reduced-motion:no-preference){.jk-evhero .jk-lead,.jk-evhero .jk-bens,.jk-evhero .wp-block-buttons,.jk-evhero .jk-note{animation:jk-fade .9s 1s ease both}.jk-evhero__img{animation:jk-fade 1s .5s ease both}}

/* 0.4.1: ruudukoiden kohdat samalle tasolle (WordPress lisää muuten väliä 2. kohdasta alkaen), isompi hero-kuva ja UKK */
.jk-phases>*,.jk-fit>*,.jk-cards>*,.jk-quotes>*,.jk-ev>*,.jk-about>*,.jk-evhero__grid>*,.jk-steps>*,.jk-load__stage>*{margin-block-start:0!important}
.jk-evhero__grid{grid-template-columns:1.05fr .95fr}
.jk-evhero__img{max-width:600px}.jk-evhero__img img{max-height:82vh;width:auto;max-width:100%;margin-left:auto}
.jk-faq{max-width:60rem}
.jk-faq__i summary{font-size:clamp(1.4rem,2.4vw,1.9rem);padding:28px 56px 28px 0}
.jk-faq__i summary::after{top:20px;font-size:2.4rem}
.jk-faq__i>*:not(summary){font-size:1.1rem;line-height:1.7}
@media(max-width:860px){.jk-evhero__img{max-width:380px}.jk-evhero__img img{max-height:none;margin:0 auto}.jk-faq__i summary{font-size:1.3rem;padding:22px 44px 22px 0}}

/* 0.4.2: kultainen viiva piirtyy ensin, sitten palkit kasvavat hitaammin ja pehmeämmin */
.jk-ph{--i:0;border-bottom:0!important;background:linear-gradient(var(--jk-gold),var(--jk-gold)) left bottom/100% 2px no-repeat}
.jk-ph--2{--i:1}.jk-ph--3{--i:2}.jk-ph--4{--i:3}
.jk-phases--full .jk-ph{background-position:left 220px;padding-bottom:0}
.jk-phases--full .jk-ph::before{border-bottom:0;margin-bottom:16px}
@media(max-width:860px){.jk-phases--full .jk-ph{background-position:left 110px}}
@media(prefers-reduced-motion:no-preference){
.jk-js .jk-ph{background-size:0% 2px;transition:background-size .35s linear calc(var(--i)*.35s)}
.jk-js .jk-phases.is-in .jk-ph{background-size:100% 2px}
.jk-js .jk-ph::before{transform:scaleY(0);transition:transform 1.4s cubic-bezier(.16,1,.3,1) calc(1.3s + var(--i)*.22s)}
.jk-js .jk-phases.is-in .jk-ph::before{transform:none}
}