/*
Theme Name: Säästökumppanit Oy
Template: silta-studio
Silta-API: 1
Description: Säästökumppanit Oy. Koodattu Silta Studiolla.
Version: 0.1.0
*/

:root{--bg:#F5F7FE;--ink:#0F1836;--mut:#4A5578;--b:#3D5AFE;--l:#A28CFF;--t:#22C3B2;--w:#fff;--line:#E2E7F7;--g:linear-gradient(120deg,#3D5AFE,#A28CFF 55%,#22C3B2);--r:26px}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:"DM Sans",system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;font-size:1.0625rem;overflow-x:hidden}
main{display:block;overflow-x:clip}
h1,h2,h3,h4,p,ul,ol,figure{margin:0;padding:0}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
h1,h2,h3,.logo{font-family:"Plus Jakarta Sans",sans-serif;line-height:1.12;letter-spacing:-.02em;hyphens:manual;overflow-wrap:break-word;text-wrap:balance}
h1{font-size:clamp(2rem,5.4vw,4rem);font-weight:800}
h2{font-size:clamp(1.65rem,4vw,2.8rem);font-weight:800}
h3{font-size:clamp(1.12rem,2vw,1.4rem);font-weight:700}
.wrap{width:min(1200px,100% - 2.5rem);margin-inline:auto}
.grad{background:var(--g);-webkit-background-clip:text;background-clip:text;color:transparent}
.kick{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--b);margin-bottom:.9rem}
.kick::before{content:"";width:22px;height:4px;border-radius:4px;background:var(--g)}
.kick.lt{color:#A9B6FF}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:.95rem 1.5rem;border-radius:999px;text-decoration:none;border:0;cursor:pointer;font:700 1rem/1.2 "DM Sans",sans-serif;transition:transform .2s,box-shadow .2s,background .2s}
.btn svg{width:18px;height:18px;flex:none}
.btn-p,.btn.btn-primary{background:var(--ink);color:#fff;box-shadow:0 10px 30px -10px rgba(61,90,254,.6)}
.btn-p:hover,.btn.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 36px -12px rgba(61,90,254,.8)}
.btn-s{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn-s:hover{border-color:var(--b)}
.btn-w{background:#fff;color:var(--ink)}
.btn-w:hover{transform:translateY(-2px)}
.btn-o{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35)}
.btn-o:hover{background:rgba(255,255,255,.1)}
a:focus-visible,button:focus-visible{outline:3px solid var(--b);outline-offset:3px}

/* header */
.site-head{position:sticky;top:0;z-index:50;padding-top:14px}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(226,231,247,.9);border-radius:999px;padding:.55rem .6rem .55rem 1.3rem;box-shadow:0 12px 40px -20px rgba(15,24,54,.35)}
.logo{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.1rem;text-decoration:none;color:var(--ink)}
.logo i{width:30px;height:30px;border-radius:10px;background:var(--g);display:grid;place-items:center;color:#fff;font-style:normal;font-size:.95rem;flex:none}
.nav ul{display:flex;list-style:none;gap:.2rem;margin:0;padding:0}
.nav ul a{display:block;text-decoration:none;font-weight:500;padding:.5rem .8rem;border-radius:999px;color:var(--mut);font-size:.98rem;white-space:nowrap}
.nav ul a:hover{background:var(--bg);color:var(--ink)}
.nav ul a.on{background:var(--bg);color:var(--ink);font-weight:700}
.nav .btn{padding:.7rem 1.2rem;white-space:nowrap}
.burger{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;padding:0}
.burger span{display:block;width:18px;height:2px;background:var(--ink);margin:4px auto;border-radius:2px;transition:transform .2s,opacity .2s}
.nav.open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav.open .burger span:nth-child(2){opacity:0}
.nav.open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* hero */
.hero{position:relative;padding:4.5rem 0 4rem;isolation:isolate}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.45;z-index:-1;pointer-events:none}
.b-lav{width:420px;height:420px;background:#A28CFF;top:-60px;right:8%}
.b-tq{width:360px;height:360px;background:#22C3B2;bottom:-40px;left:-80px}
.hero-g{display:grid;grid-template-columns:1fr 1.05fr;gap:3rem;align-items:center}
.hero .lead{font-size:1.2rem;color:var(--mut);margin:1.3rem 0 2rem;max-width:34rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem}
.chips span{background:#fff;border:1px solid var(--line);padding:.35rem .8rem;border-radius:999px;font-size:.88rem;color:var(--mut)}
.tiles{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:92px;gap:14px}
.tile{border-radius:var(--r);padding:1.2rem;position:relative;overflow:hidden;background:#fff;border:1px solid var(--line)}
.t-img{grid-column:1/5;grid-row:1/4;padding:0;border:0}
.t-img img{width:100%;height:100%;object-fit:cover}
.t-img .tag{position:absolute;left:14px;right:14px;bottom:14px;width:fit-content;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:.55rem .9rem;border-radius:16px;font-weight:700;font-size:.9rem;line-height:1.3}
.t-fact{grid-column:5/7;grid-row:1/3;background:var(--ink);color:#fff;border:0;display:flex;flex-direction:column;justify-content:space-between}
.t-fact b{font-family:"Plus Jakarta Sans";font-size:1.45rem;line-height:1.1}
.t-fact small{opacity:.7}
.t-svc{grid-column:5/7;grid-row:3/5;background:linear-gradient(160deg,#EEF0FF,#E6FBF8)}
.t-svc h3{font-size:1.05rem;margin:.5rem 0 .3rem}
.t-cmp{grid-column:1/5;grid-row:4/5;display:flex;align-items:center;gap:1rem}
.bars{flex:1;display:grid;gap:6px}
.bars i{display:block;height:9px;border-radius:9px;background:var(--line);position:relative;overflow:hidden}
.bars i::after{content:"";position:absolute;inset:0;width:var(--w);background:var(--g);border-radius:9px;animation:sk-grow 2.4s ease both}
@keyframes sk-grow{from{width:0}}
.small{font-size:.85rem;color:var(--mut);line-height:1.4}
.small b{color:var(--ink)}
.ico{width:38px;height:38px;border-radius:12px;background:#fff;display:grid;place-items:center;color:var(--b)}
.ico svg{width:20px;height:20px}
.hero-sub h1,.hero-contact h1{font-size:clamp(1.9rem,4.2vw,3.3rem)}
.sub-img{border-radius:var(--r);overflow:hidden;aspect-ratio:5/4;box-shadow:0 30px 60px -30px rgba(15,24,54,.4)}
.sub-img img{width:100%;height:100%;object-fit:cover}

/* osiot */
main section{padding:5rem 0}
main .hero{padding:4.5rem 0 4rem}
.head{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin-bottom:2.5rem;flex-wrap:wrap}
.head>div{max-width:40rem}
.head p{max-width:30rem;color:var(--mut)}
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.8rem;display:flex;flex-direction:column;gap:.7rem;transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -24px rgba(15,24,54,.35)}
.card p{color:var(--mut)}
.c-big{grid-column:span 7;grid-row:span 2;background:var(--ink);color:#fff;border:0;justify-content:space-between}
.c-big p{color:#C6CCE6}
.c-big h3{font-size:clamp(1.4rem,2.6vw,2rem)}
.ill{border-radius:20px;background:rgba(255,255,255,.06);padding:1.2rem;display:grid;gap:.7rem}
.row{display:flex;align-items:center;gap:.8rem;background:rgba(255,255,255,.07);border-radius:14px;padding:.7rem .9rem;font-size:.95rem}
.row em{font-style:normal;margin-left:auto;font-size:.8rem;padding:.2rem .6rem;border-radius:999px;background:rgba(34,195,178,.2);color:#7CE9DC;white-space:nowrap}
.dot{width:10px;height:10px;border-radius:50%;background:var(--g);flex:none}
.c-5{grid-column:span 5}.c-4{grid-column:span 4}.c-6{grid-column:span 6}.c-8{grid-column:span 8}.c-3{grid-column:span 3}.c-7{grid-column:span 7}.c-12{grid-column:span 12}
.lav{background:#EFECFF;border-color:#E1DBFF}.tq{background:#E3F8F5;border-color:#CDF0EB}.bl{background:#E8ECFF;border-color:#D7DEFF}
.card.dark{background:var(--ink);color:#fff;border:0}.card.dark p{color:#C6CCE6}
.c-photo{padding:0;overflow:hidden;min-height:260px;position:relative}
.c-photo img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.num{font-family:"Plus Jakarta Sans";font-weight:800;font-size:.85rem;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--g);color:#fff;flex:none}
.steps{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.steps .card{padding:1.5rem}
.bento>.c-photo.c-6{min-height:340px}
.more{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;text-decoration:none;color:var(--b);margin-top:auto;padding-top:.4rem}
.more svg{width:16px;height:16px;transition:transform .2s}
.card:hover .more svg{transform:translateX(4px)}
.c-big .more{color:#7CE9DC}

/* valkoinen paneeli */
.panel{background:#fff;border-radius:40px}

/* kenelle */
.who{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.who div{border-radius:22px;padding:1.4rem;background:var(--bg);border:1px solid var(--line);font-weight:700;font-family:"Plus Jakarta Sans";display:flex;flex-direction:column;gap:.5rem;min-height:130px;justify-content:space-between;font-size:1.08rem}
.who div span{font-family:"DM Sans";font-weight:400;font-size:.92rem;color:var(--mut)}
.who div:nth-child(1){grid-column:span 2;background:var(--g);color:#fff;border:0}
.who div:nth-child(1) span{color:rgba(255,255,255,.9)}
.who div:nth-child(4){background:#EFECFF}.who div:nth-child(6){background:#E3F8F5}

/* koko */
.sizes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.size{text-decoration:none;color:inherit}
.size .tagl{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--b)}

/* teksti + lista */
.split{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.prose p{color:var(--mut);margin-bottom:1rem}
.prose p:last-child{margin-bottom:0}
.prose h2{margin-bottom:1.2rem;font-size:clamp(1.5rem,3vw,2.2rem)}
html{scroll-padding-top:110px}
@media (min-width:981px){.contact .info{position:sticky;top:110px}}
.ticks{list-style:none;display:grid;gap:.7rem}
.ticks li{display:flex;gap:.8rem;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:18px;padding:1rem 1.2rem}
.ticks li svg{width:22px;height:22px;flex:none;color:var(--t);margin-top:.1rem}
.ticks li b{display:block;font-family:"Plus Jakarta Sans"}
.ticks li span{color:var(--mut);font-size:.96rem}

/* alue */
.area{display:grid;grid-template-columns:1.1fr 1fr;gap:16px}
.map{background:var(--ink);color:#fff;border-radius:var(--r);padding:2.2rem;position:relative;overflow:hidden;isolation:isolate}
.map .blob{width:300px;height:300px;background:#3D5AFE;opacity:.5;right:-80px;top:-80px;z-index:-1}
.map p{color:#C6CCE6;margin-top:1rem}
.map .btn{margin-top:1.6rem}
.cities{display:flex;flex-wrap:wrap;gap:.6rem;align-content:start}
.cities span{background:#fff;border:1px solid var(--line);border-radius:16px;padding:.8rem 1.1rem;font-weight:700;font-family:"Plus Jakarta Sans"}
.cities span.hq{background:var(--g);color:#fff;border:0}
.cities span.all{background:#EFECFF}

/* UKK */
.faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:3rem;align-items:start}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:20px;margin-bottom:.8rem;overflow:hidden}
.faq-item summary{cursor:pointer;list-style:none;padding:1.15rem 3.2rem 1.15rem 1.4rem;font-family:"Plus Jakarta Sans";font-weight:700;position:relative}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary svg{position:absolute;right:1.2rem;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--b);transition:transform .2s}
.faq-item[open] summary svg{transform:translateY(-50%) rotate(45deg)}
.faq-a{padding:0 1.4rem 1.2rem;color:var(--mut)}

/* CTA-nauha */
.cta-band{position:relative;overflow:hidden;isolation:isolate;background:var(--ink);color:#fff;border-radius:32px;padding:2.6rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.cta-band .b1{width:360px;height:360px;background:#A28CFF;opacity:.45;right:-60px;top:-120px}
.cta-band::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--g)}
.cta-band-in{max-width:36rem}
.cta-band p{color:#C6CCE6;margin-top:.7rem}
main .cta-band-wrap{padding:2rem 0}

/* yhteys */
.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:16px;align-items:start}
.info{display:grid;gap:14px}
.info a,.info div{background:#fff;border:1px solid var(--line);border-radius:22px;padding:1.3rem 1.5rem;text-decoration:none;display:block}
.info a:hover{border-color:var(--b)}
.info small{display:block;color:var(--mut);font-size:.85rem}
.info b{font-family:"Plus Jakarta Sans";font-size:1.15rem;overflow-wrap:anywhere}
.info .info-g{background:var(--g);color:#fff;border:0}
.info .info-g small{color:rgba(255,255,255,.88)}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:2rem}
.contact-form{display:grid;gap:1rem}
.contact-form .field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.contact-form .field{display:grid;gap:.35rem}
.contact-form label{font-weight:500;font-size:.92rem}
.contact-form input:not([type=checkbox]):not([type=radio]),.contact-form select,.contact-form textarea{font:inherit;padding:.85rem 1rem;border:1px solid var(--line);border-radius:14px;background:var(--bg);color:var(--ink);width:100%}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:2px solid var(--b);outline-offset:1px}
.contact-form textarea{min-height:140px;resize:vertical}
.contact-form .btn{justify-self:start}
.form-privacy{font-size:.85rem;color:var(--mut)}
.form-privacy a{color:var(--b)}
.form-notice{padding:1rem 1.2rem;border-radius:14px;font-weight:500}
.form-notice.ok{background:#E3F8F5;color:#0B5E55}
.form-notice.err{background:#FFECEC;color:#8A1F1F}

/* yhteystiedot-sivu */
.hero-contact .info{grid-template-columns:1fr 1fr}
.hero-contact .info .info-note{grid-column:1/-1}
.info-note p{color:var(--mut);font-size:.95rem;margin-top:.5rem}
.oma-kuva{margin:1.6rem 0 0;border-radius:22px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 30px 60px -30px rgba(15,24,54,.4)}
.oma-kuva img{width:100%;height:100%;object-fit:cover;display:block}
.hero-contact .info .info-kuva{grid-column:1/-1;margin:0}
.lead-p{font-size:1.1rem}
.form-h{font-size:clamp(1.3rem,2.4vw,1.7rem);margin-bottom:.4rem}
.form-p{color:var(--mut);margin-bottom:1.3rem}

/* footer */
.site-foot{background:var(--ink);color:#C6CCE6;padding:4rem 0 2rem;margin-top:3rem;border-radius:36px 36px 0 0}
.fg{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem}
.site-foot h3{color:#fff;font-size:1rem;margin-bottom:.8rem}
.site-foot ul{list-style:none;display:grid;gap:.4rem}
.site-foot a{text-decoration:none}
.site-foot a:hover{color:#fff}
.f-lead{margin-top:1rem;max-width:22rem}
.f-btn{margin-top:1.4rem;padding:.75rem 1.2rem}
.logo.w{color:#fff}
.fb{border-top:1px solid rgba(255,255,255,.1);margin-top:3rem;padding-top:1.5rem;font-size:.85rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.f-sc{display:flex;gap:.6rem;flex-wrap:wrap}
.f-sc a,.f-sc button{font:inherit;color:#C6CCE6;background:transparent;border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:.35rem .9rem;cursor:pointer;text-decoration:none}

@media (max-width:1180px){
.nav ul a{padding:.5rem .55rem;font-size:.93rem}
}
@media (max-width:1080px){
.nav>ul,.nav>.nav-cta{display:none}
.burger{display:block;order:2}
.nav>ul{order:3}.nav>.nav-cta{order:4}
.nav.open{flex-wrap:wrap;border-radius:26px}
.nav.open>ul{display:grid;width:100%;padding:.5rem 0 .2rem}
.nav.open>ul a{font-size:1.05rem;padding:.75rem 1rem}
.nav.open>.nav-cta{display:inline-flex;width:100%;margin-bottom:.3rem}
}
@media (max-width:980px){
.hero-g,.area,.contact,.split,.faq-wrap{grid-template-columns:1fr}
.c-big,.c-5,.c-4,.c-6,.c-8,.c-3,.c-7{grid-column:span 6}
.c-12{grid-column:span 12}
.who{grid-template-columns:repeat(2,1fr)}
.sizes{grid-template-columns:1fr}
.fg{grid-template-columns:1fr 1fr}
.split,.faq-wrap{gap:2rem}
}
@media (max-width:640px){
main section{padding:3.5rem 0}
main .hero{padding:2.2rem 0 3rem}
.hero .lead{font-size:1.08rem}
.tiles{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto}
.t-img{grid-column:1/3;grid-row:auto;height:230px}
.t-fact,.t-svc{grid-column:span 1;grid-row:auto;min-height:180px}
.t-fact b{font-size:1.15rem}
.t-cmp{grid-column:1/3;grid-row:auto}
.bento,.steps{grid-template-columns:1fr}
.bento>*{grid-column:1/-1!important}
.who{grid-template-columns:1fr}.who div:nth-child(1){grid-column:auto}
.who div{min-height:0}
.form-card{padding:1.3rem}
.contact-form .field-row{grid-template-columns:1fr}
.hero-contact .info{grid-template-columns:1fr}
.fg{grid-template-columns:1fr}
.cta-band{padding:2rem 1.5rem}
.cta-row .btn{flex:1 1 100%}
.card{padding:1.5rem}
.map{padding:1.8rem}
.panel{border-radius:28px}
}
@media (prefers-reduced-motion:reduce){.bars i::after{animation:none}.card,.btn{transition:none}}