/*
 * Talopartners – lisäosan tyylit.
 * Nämä ladataan teeman jälkeen, joten ne voivat korjata ja täydentää teemaa
 * ilman että teemaa tarvitsee asentaa uudelleen.
 */

/* ==========================================================================
   1. Pudotusvalikot – myös silloin kun teema on vanhempi versio
   ========================================================================== */
.tp-nav ul{list-style:none;margin:0;padding:0}
.tp-nav li{position:relative}

.tp-nav .menu-item-has-children>a::after,
.tp-nav .page_item_has_children>a::after{
  content:"";display:inline-block;width:0;height:0;margin-left:7px;vertical-align:middle;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:4px solid currentColor;opacity:.7;transition:.16s}
.tp-nav .menu-item-has-children:hover>a::after,
.tp-nav .page_item_has_children:hover>a::after{transform:rotate(180deg)}

.tp-nav .sub-menu,
.tp-nav .children{
  display:none;position:absolute;top:calc(100% + 6px);left:0;min-width:250px;z-index:300;
  background:linear-gradient(180deg,#101823,#0B1017);
  border:1px solid #2A3646;border-radius:11px;padding:8px;flex-direction:column;gap:1px;
  box-shadow:0 24px 56px rgba(0,0,0,.7),0 0 0 1px rgba(63,160,255,.06);
  list-style:none;margin:0}
.tp-nav li:hover>.sub-menu,.tp-nav li:focus-within>.sub-menu,
.tp-nav li:hover>.children,.tp-nav li:focus-within>.children{display:flex}
/* näkymätön silta, ettei valikko katoa hiiren liikkuessa alaspäin */
.tp-nav .menu-item-has-children::after,
.tp-nav .page_item_has_children::after{content:"";position:absolute;left:0;right:0;top:100%;height:8px}
.tp-nav .sub-menu a,.tp-nav .children a{
  white-space:normal;padding:10px 13px;border-radius:7px;font-weight:600;color:#C2CCD8;display:block}
.tp-nav .sub-menu a:hover,.tp-nav .children a:hover{background:rgba(27,114,232,.16);color:#fff}
.tp-nav .sub-menu .current-menu-item>a,.tp-nav .children .current_page_item>a{
  background:rgba(27,114,232,.22);color:#fff;box-shadow:none}

@media(max-width:1180px){
  .tp-bar{gap:16px}
  .tp-nav>ul>li>a{padding:9px 10px;font-size:14px}
}
@media(max-width:820px){
  .tp-nav .sub-menu,.tp-nav .children{
    position:static;display:flex;border:0;box-shadow:none;padding:0 0 6px 16px;background:none;min-width:0}
  .tp-nav .sub-menu a,.tp-nav .children a{padding:9px 12px;font-size:13.6px}
  .tp-nav .menu-item-has-children>a::after,.tp-nav .page_item_has_children>a::after{float:right;margin-top:8px}
  .tp-nav .menu-item-has-children::after,.tp-nav .page_item_has_children::after{display:none}
}

/* ==========================================================================
   2. Hinta-arviolaskuri
   ========================================================================== */
.tpl{--l-line:#1E2836;--l-line2:#2A3646;--l-panel:#0F151E;--l-blue:#1B72E8;--l-blue2:#3FA0FF;
  --l-txt:#EAEFF5;--l-mut:#8D9AAB;--l-warn:#E0A63C;
  background:linear-gradient(168deg,var(--l-panel),#0A0F16);border:1px solid var(--l-line2);
  border-radius:15px;padding:30px;margin:26px 0;position:relative;overflow:hidden}
.tpl::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 80% 0%,rgba(27,114,232,.13),transparent 70%)}
.tpl>*{position:relative;z-index:2}

.tpl-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap;
  padding-bottom:18px;border-bottom:1px solid var(--l-line);margin-bottom:22px}
.tpl-head h3{margin:0 0 4px;font-size:21px;letter-spacing:-.5px;color:#fff}
.tpl-head p{margin:0;font-size:14px;color:var(--l-mut)}
.tpl-step{font-size:11px;letter-spacing:1.6px;font-weight:800;color:var(--l-blue2);
  border:1px solid rgba(63,160,255,.35);padding:5px 11px;border-radius:20px;white-space:nowrap}

.tpl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.tpl-f{display:flex;flex-direction:column}
.tpl-f.full{grid-column:1/-1}
.tpl .tpl-f>label,.tpl .tpl-out>label{display:block;font-size:11.6px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--l-mut);margin-bottom:7px}
.tpl select,.tpl input[type=number],.tpl input[type=text],.tpl input[type=email],.tpl input[type=tel]{
  width:100%;background:#080C12;border:1px solid var(--l-line2);border-radius:8px;padding:12px 14px;
  color:var(--l-txt);font-family:inherit;font-size:15px;transition:.15s;-webkit-appearance:none;appearance:none}
.tpl select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%238D9AAB' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.tpl select:focus,.tpl input:focus{outline:0;border-color:var(--l-blue);box-shadow:0 0 0 3px rgba(27,114,232,.16)}

.tpl-chips{display:flex;gap:8px;flex-wrap:wrap}
.tpl-chip{display:inline-flex!important;align-items:center;gap:8px;text-transform:none!important;
  letter-spacing:normal!important;font-weight:500!important;margin-bottom:0!important;border:1px solid var(--l-line2);border-radius:8px;
  padding:10px 14px;cursor:pointer;font-size:14px;color:#C3CDD9;transition:.15s;background:#080C12;user-select:none}
.tpl-chip:hover{border-color:var(--l-blue)}
.tpl-chip input{margin:0;width:16px;height:16px;accent-color:var(--l-blue)}
.tpl-chip.on{border-color:var(--l-blue);background:rgba(27,114,232,.12);color:#fff}

.tpl-out{margin-top:24px;padding-top:22px;border-top:1px solid var(--l-line)}
.tpl-range{font-size:clamp(26px,4vw,40px);font-weight:800;letter-spacing:-1.4px;color:#fff;line-height:1.1;
  margin:4px 0 6px}
.tpl-range small{display:block;font-size:13px;font-weight:600;letter-spacing:.4px;color:var(--l-mut);
  margin-top:8px}
.tpl-bars{margin:20px 0 0}
.tpl-bar{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid rgba(30,40,54,.7);
  font-size:14px}
.tpl-bar:last-child{border-bottom:0}
.tpl-bar .n{flex:1;color:#C3CDD9}
.tpl-bar .v{font-variant-numeric:tabular-nums;font-weight:700;color:#fff;white-space:nowrap}
.tpl-bar .t{width:90px;height:6px;border-radius:3px;background:#141C27;overflow:hidden;flex:none}
.tpl-bar .t i{display:block;height:100%;background:linear-gradient(90deg,var(--l-blue2),var(--l-blue))}

.tpl-note{font-size:13px;color:var(--l-mut);margin-top:18px;line-height:1.6}
.tpl-warn{border-left:3px solid var(--l-warn);background:rgba(224,166,60,.08);padding:14px 18px;
  border-radius:0 9px 9px 0;font-size:13.6px;color:#F0CF8E;margin-top:18px}

.tpl-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 28px;
  border-radius:9px;font-weight:700;font-size:15.5px;cursor:pointer;border:0;font-family:inherit;
  background:linear-gradient(180deg,var(--l-blue2),var(--l-blue));color:#fff;transition:.18s;
  box-shadow:0 8px 26px rgba(27,114,232,.42)}
.tpl-btn:hover{transform:translateY(-2px)}
.tpl-btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}
.tpl-btn.ghost{background:transparent;border:1px solid var(--l-line2);color:var(--l-txt);box-shadow:none}
.tpl-btn.ghost:hover{border-color:var(--l-blue);color:var(--l-blue2)}

.tpl-gate{margin-top:22px;padding:22px;border:1px solid var(--l-line2);border-radius:12px;
  background:rgba(8,12,18,.6)}
.tpl-gate h4{margin:0 0 6px;font-size:16.5px;color:#fff}
.tpl-gate p.lead{margin:0 0 16px;font-size:14px;color:var(--l-mut)}
.tpl-consent{display:flex!important;gap:11px;align-items:flex-start;font-size:13.4px;
  color:var(--l-mut);margin:14px 0 18px;text-transform:none!important;letter-spacing:normal!important;
  font-weight:400!important}
.tpl-consent input{width:17px;height:17px;flex:none;margin-top:2px;accent-color:var(--l-blue)}
.tpl-msg{margin-top:14px;font-size:14px;padding:12px 16px;border-radius:8px;display:none}
.tpl-msg.ok{display:block;background:rgba(51,192,138,.12);color:#8FE3C0;border:1px solid rgba(51,192,138,.3)}
.tpl-msg.err{display:block;background:rgba(226,86,76,.12);color:#F2A9A3;border:1px solid rgba(226,86,76,.3)}
.tp-hide{display:none!important}

@media(max-width:640px){
  .tpl{padding:22px 18px}
  .tpl-grid{grid-template-columns:1fr}
}

/* ==========================================================================
   3. Hero-tausta: video tai piirretty animaatio
   ========================================================================== */
.tp-hero{position:relative;isolation:isolate}
.tp-herobg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  pointer-events:none;border:0;display:block}
/* Tumma peite vain videolle – animaatio on jo hillitty eikä kestä peitettä. */
.tp-hero-video::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(6,9,14,.93) 0%,rgba(6,9,14,.78) 42%,rgba(6,9,14,.52) 100%)}
/* Animaatiotilassa vain kevyt tummennus tekstin takana, oikea laita jää kirkkaaksi. */
.tp-hero-anim::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(6,9,14,.72) 0%,rgba(6,9,14,.30) 40%,rgba(6,9,14,0) 72%)}
.tp-hero-media>*:not(.tp-herobg){position:relative;z-index:2}
.tp-hero-kuva{background-size:cover;background-position:center}
@media(prefers-reduced-motion:reduce){
  video.tp-herobg{display:none}
}

/* ==========================================================================
   4. Tarjouspyyntölomake
   ========================================================================== */
.tpf textarea{width:100%;background:#080C12;border:1px solid var(--l-line2);border-radius:8px;
  padding:12px 14px;color:var(--l-txt);font-family:inherit;font-size:15px;resize:vertical;min-width:0}
.tpf textarea:focus{outline:0;border-color:var(--l-blue);box-shadow:0 0 0 3px rgba(27,114,232,.16)}
.tpf input[type=file]{width:100%;background:#080C12;border:1px dashed var(--l-line2);border-radius:8px;
  padding:14px;color:var(--l-mut);font-family:inherit;font-size:14px;cursor:pointer}
.tpf input[type=file]::file-selector-button{background:#141C27;border:1px solid var(--l-line2);
  color:var(--l-txt);border-radius:6px;padding:8px 14px;margin-right:12px;cursor:pointer;font-family:inherit}
.tpf input[type=file]:hover{border-color:var(--l-blue)}

/* ==========================================================================
   5. Lohkojen esiintulo vierittäessä
   ========================================================================== */
.tp-esiin{opacity:0;transform:translateY(26px);
  transition:opacity .62s cubic-bezier(.22,.61,.36,1),transform .62s cubic-bezier(.22,.61,.36,1)}
.tp-esiin.tp-nakyy{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .tp-esiin{opacity:1!important;transform:none!important;transition:none}
}

/* ==========================================================================
   6. Pehmeä kohdistus (scroll snap)
   ========================================================================== */
html.tp-snap-paalla{scroll-snap-type:y proximity;scroll-padding-top:72px}
html.tp-snap-paalla body{scroll-snap-type:none}
.tp-snap{scroll-snap-align:start;scroll-snap-stop:normal}
@media(max-width:900px){
  html.tp-snap-paalla{scroll-snap-type:none}
}

/* ==========================================================================
   7. Kaavio: viisi sopimusta vastaan yksi
   ========================================================================== */
.tp-kaavio{margin:34px 0 8px;background:linear-gradient(168deg,var(--tp-panel,#0F151E),#0A0F16);
  border:1px solid var(--tp-line,#1E2836);border-radius:14px;padding:30px 26px 22px;overflow:hidden}
.tp-kaavio svg{width:100%;height:auto;display:block}
.tp-kaavio .k-otsikko{font:800 11.5px/1 -apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  letter-spacing:2.2px;text-transform:uppercase}
.tp-kaavio .k-vasen{fill:#7C8899}
.tp-kaavio .k-oikea{fill:#3FA0FF}
.tp-kaavio .k-teksti{font:600 13px/1 -apple-system,'Segoe UI',Roboto,Arial,sans-serif;fill:#D6DEE8}
.tp-kaavio .k-pieni{font:600 12px/1 -apple-system,'Segoe UI',Roboto,Arial,sans-serif;fill:#8D9AAB}
.tp-kaavio .k-yhteenveto{font:800 13.5px/1 -apple-system,'Segoe UI',Roboto,Arial,sans-serif}
.tp-kaavio .k-laatikko{fill:#0B121B;stroke:#243040;stroke-width:1}
.tp-kaavio .k-korostus{fill:rgba(27,114,232,.14);stroke:rgba(63,160,255,.55);stroke-width:1.4}
.tp-kaavio .k-jakaja{stroke:#1E2836;stroke-width:1}
.tp-kaavio .k-viiva{fill:none;stroke:#3A4655;stroke-width:1.6;stroke-linecap:round}
.tp-kaavio .k-viiva-b{fill:none;stroke:#3FA0FF;stroke-width:2;stroke-linecap:round}
.tp-kaavio .k-paksu{stroke-width:3.4}

/* viivat piirtyvät kun kaavio tulee näkyviin */
.tp-kaavio .k-viiva,.tp-kaavio .k-viiva-b{stroke-dasharray:600;stroke-dashoffset:600}
.tp-kaavio.tp-nakyy .k-viiva,.tp-kaavio.tp-nakyy .k-viiva-b{
  animation:tp-piirra 1.05s cubic-bezier(.25,.8,.35,1) forwards}
.tp-kaavio.tp-nakyy .k-v1{animation-delay:.05s}
.tp-kaavio.tp-nakyy .k-v2{animation-delay:.13s}
.tp-kaavio.tp-nakyy .k-v3{animation-delay:.21s}
.tp-kaavio.tp-nakyy .k-v4{animation-delay:.29s}
.tp-kaavio.tp-nakyy .k-v5{animation-delay:.37s}
.tp-kaavio.tp-nakyy .k-o0{animation-delay:.30s}
.tp-kaavio.tp-nakyy .k-o1{animation-delay:.52s}
.tp-kaavio.tp-nakyy .k-o2{animation-delay:.60s}
.tp-kaavio.tp-nakyy .k-o3{animation-delay:.68s}
.tp-kaavio.tp-nakyy .k-o4{animation-delay:.76s}
.tp-kaavio.tp-nakyy .k-o5{animation-delay:.84s}
@keyframes tp-piirra{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){
  .tp-kaavio .k-viiva,.tp-kaavio .k-viiva-b{stroke-dashoffset:0;animation:none!important}
}
@media(max-width:640px){
  .tp-kaavio{padding:20px 14px 14px}
}