/*


 * KP Teenused — Frontend styles


 * Värvid: navy #032e68 · oranž #e95e23


 * Fondid: Dosis (pealkirjad) · Nunito (tekst)


 */





@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700&family=Dosis:wght@400;500;600;700;800&display=swap');





/* ═══════════════════════════════════════════════════════════


   BASE


═══════════════════════════════════════════════════════════ */


.kpt-wrap *,


.kpt-wrap *::before,


.kpt-wrap *::after {


    box-sizing: border-box !important;


}





.kpt-wrap {


    width: 100% !important;


    overflow: hidden !important;


    font-family: 'Nunito', sans-serif !important;


}





/* Section header */


.kpt-section-header {


    text-align: center !important;


    padding: 64px 24px 32px !important;


    max-width: 820px !important;


    margin: 0 auto !important;


}





.kpt-section-title {


    font-family: 'Dosis', sans-serif !important;


    font-size: 2.6rem !important;


    font-weight: 800 !important;


    color: #032e68 !important;


    line-height: 1.1 !important;


    margin: 0 0 16px !important;


    letter-spacing: -0.01em !important;


}





.kpt-section-intro {


    font-size: 23px !important;


    font-weight: 300 !important;


    color: #555 !important;


    line-height: 1.7 !important;


    margin: 0 !important;


}





/* Shared typography */


.kpt-title {


    font-family: 'Dosis', sans-serif !important;


    font-size: 2rem !important;


    font-weight: 700 !important;


    line-height: 1.1 !important;


    color: #032e68 !important;


    margin: 0 0 16px !important;


    letter-spacing: -0.01em !important;


}





.kpt-text-white { color: #ffffff !important; }





.kpt-intro {


    font-size: 23px !important;


    font-weight: 300 !important;


    line-height: 1.75 !important;


    color: #444 !important;


    margin: 0 0 28px !important;


}





.kpt-intro-muted { color: rgba(255,255,255,0.82) !important; }





/* Buttons */


.kpt-btn {


    display: inline-block !important;
    align-self: flex-start !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: max-content !important;


    font-family: 'Dosis', sans-serif !important;


    font-size: 0.95rem !important;


    font-weight: 700 !important;


    letter-spacing: 0.08em !important;


    text-transform: uppercase !important;


    padding: 11px 28px !important;


    text-decoration: none !important;


    border: 2px solid transparent !important;


    transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease !important;


    cursor: pointer !important;


    line-height: 1 !important;


}





.kpt-btn--navy {


    background: #032e68 !important;


    color: #fff !important;


    border-color: #032e68 !important;


}


.kpt-btn--navy:hover {


    background: #e95e23 !important;


    border-color: #e95e23 !important;


    color: #fff !important;


}





.kpt-btn--orange {


    background: #e95e23 !important;


    color: #fff !important;


    border-color: #e95e23 !important;


}


.kpt-btn--orange:hover {


    background: #032e68 !important;


    border-color: #032e68 !important;


    color: #fff !important;


}





.kpt-btn--outline-white {


    background: transparent !important;


    color: #fff !important;


    border-color: rgba(255,255,255,0.7) !important;


}


.kpt-btn--outline-white:hover {


    background: #e95e23 !important;


    border-color: #e95e23 !important;


    color: #fff !important;


}





/* Helpers */


.kpt-navy { background-color: #032e68 !important; }





.kpt-img {


    width: 100% !important;


    height: 100% !important;


    object-fit: cover !important;


    display: block !important;


}





.kpt-img-ph {


    width: 100% !important;


    height: 100% !important;


    min-height: 300px !important;


    background: linear-gradient(135deg, #032e68 0%, #0b4ea6 100%) !important;


}





/* ═══════════════════════════════════════════════════════════


   LAYOUT 1 — Vahelduv klassikaline (50 / 50)


═══════════════════════════════════════════════════════════ */


.kpt-l1-row {


    display: flex !important;


    min-height: 560px !important;


}





.kpt-l1-content {


    flex: 1 1 50% !important;


    display: flex !important;


    flex-direction: column !important;


    justify-content: center !important;


    padding: 64px 72px !important;


    background: #fff !important;


    position: relative !important;


}





.kpt-l1-content--alt {


    background: #f7f9fd !important;


}





.kpt-l1-accent {


    position: absolute !important;


    left: 0 !important;


    top: 50% !important;


    transform: translateY(-50%) !important;


    width: 4px !important;


    height: 64px !important;


    background: #e95e23 !important;


}





.kpt-l1-img {


    flex: 1 1 50% !important;


    overflow: hidden !important;


    position: relative !important;


}





.kpt-l1-img .kpt-img {


    transition: transform 0.5s ease !important;


}





.kpt-l1-row:hover .kpt-l1-img .kpt-img {


    transform: scale(1.03) !important;


}





.kpt-l1-rev {


    flex-direction: row-reverse !important;


}





.kpt-l1-rev .kpt-l1-accent {


    left: auto !important;


    right: 0 !important;


}

/* Nupp kitsas ja vasakjoondus layout 1-s */
.kpt-l1-content .kpt-btn {
    align-self: flex-start !important;
    width: auto !important;
}





@media (max-width: 800px) {


    .kpt-l1-row, .kpt-l1-rev {


        flex-direction: column !important;


    }


    .kpt-l1-img { min-height: 240px !important; }


    .kpt-l1-content { padding: 40px 28px !important; }


    .kpt-l1-accent { display: none !important; }


}





/* ═══════════════════════════════════════════════════════════


   LAYOUT 2 — Suur pilt vasakul (65 / 35)


═══════════════════════════════════════════════════════════ */


.kpt-l2-row {


    display: flex !important;


    min-height: 440px !important;


    margin-bottom: 3px !important;


}





.kpt-l2-img {


    flex: 0 0 65% !important;


    overflow: hidden !important;


    position: relative !important;


}





.kpt-l2-img .kpt-img {


    transition: transform 0.5s ease !important;


}





.kpt-l2-row:hover .kpt-l2-img .kpt-img {


    transform: scale(1.03) !important;


}





.kpt-l2-content {


    flex: 0 0 35% !important;


    display: flex !important;


    flex-direction: column !important;


    justify-content: center !important;


    padding: 56px 52px !important;


}





@media (max-width: 800px) {


    .kpt-l2-row { flex-direction: column !important; }


    .kpt-l2-img { flex: none !important; min-height: 240px !important; }


    .kpt-l2-content { flex: none !important; padding: 40px 28px !important; }


}





/* ═══════════════════════════════════════════════════════════


   LAYOUT 3 — Suur pilt paremal (35 / 65)


═══════════════════════════════════════════════════════════ */


.kpt-l3-row {


    display: flex !important;


    min-height: 440px !important;


    margin-bottom: 3px !important;


}





.kpt-l3-content {


    flex: 0 0 35% !important;


    display: flex !important;


    flex-direction: column !important;


    justify-content: center !important;


    padding: 56px 52px !important;


}





.kpt-l3-img {


    flex: 0 0 65% !important;


    overflow: hidden !important;


    position: relative !important;


}





.kpt-l3-img .kpt-img {


    transition: transform 0.5s ease !important;


}





.kpt-l3-row:hover .kpt-l3-img .kpt-img {


    transform: scale(1.03) !important;


}





@media (max-width: 800px) {


    .kpt-l3-row { flex-direction: column !important; }


    .kpt-l3-img { order: -1 !important; flex: none !important; min-height: 240px !important; }


    .kpt-l3-content { flex: none !important; padding: 40px 28px !important; }


}





/* ═══════════════════════════════════════════════════════════


   LAYOUT 4 — 3-veeruline kaardistik


═══════════════════════════════════════════════════════════ */


.kpt-l4 {


    display: grid !important;


    grid-template-columns: repeat(3, 1fr) !important;


    gap: 28px !important;


    padding: 48px 48px !important;


    max-width: 1400px !important;


    margin: 0 auto !important;


}





.kpt-l4-card {


    background: #fff !important;


    box-shadow: 0 2px 20px rgba(3, 46, 104, 0.08) !important;


    overflow: hidden !important;


    transition: box-shadow 0.3s ease, transform 0.3s ease !important;


}





.kpt-l4-card:hover {


    box-shadow: 0 8px 40px rgba(3, 46, 104, 0.14) !important;


    transform: translateY(-5px) !important;


}





.kpt-l4-thumb {


    height: 220px !important;


    overflow: hidden !important;


}





.kpt-l4-thumb .kpt-img {


    transition: transform 0.4s ease !important;


}





.kpt-l4-card:hover .kpt-l4-thumb .kpt-img {


    transform: scale(1.06) !important;


}





.kpt-l4-body {


    padding: 32px !important;


}





.kpt-l4-top-bar {


    height: 3px !important;


    background: #e95e23 !important;


    margin: 0 0 24px !important;


    margin-left: -32px !important;


    width: calc(100% + 64px) !important;


    margin-top: -32px !important;


}





.kpt-l4-body .kpt-title {


    font-size: 1.5rem !important;


}





@media (max-width: 960px) {


    .kpt-l4 { grid-template-columns: repeat(2, 1fr) !important; }


}


@media (max-width: 600px) {


    .kpt-l4 { grid-template-columns: 1fr !important; padding: 24px !important; }


}





/* ═══════════════════════════════════════════════════════════


   LAYOUT 5 — 2-veeruline kaardistik


═══════════════════════════════════════════════════════════ */


.kpt-l5 {


    display: grid !important;


    grid-template-columns: repeat(2, 1fr) !important;


    gap: 3px !important;


}





.kpt-l5-card {


    display: flex !important;


    flex-direction: column !important;


    overflow: hidden !important;


}





.kpt-l5-thumb {


    height: 300px !important;


    overflow: hidden !important;


    position: relative !important;


}





.kpt-l5-thumb .kpt-img {


    transition: transform 0.5s ease !important;


}





.kpt-l5-card:hover .kpt-l5-thumb .kpt-img {


    transform: scale(1.05) !important;


}





.kpt-l5-body {


    flex: 1 !important;


    padding: 48px 52px !important;


    display: flex !important;


    flex-direction: column !important;


    justify-content: center !important;


}





@media (max-width: 700px) {


    .kpt-l5 { grid-template-columns: 1fr !important; }


    .kpt-l5-thumb { height: 220px !important; }


    .kpt-l5-body { padding: 36px 28px !important; }


}





/* ═══════════════════════════════════════════════════════════


   LAYOUT 6 — Täislaius bännerid


═══════════════════════════════════════════════════════════ */


.kpt-l6-row {


    min-height: 440px !important;


    background-size: cover !important;


    background-position: center !important;


    background-color: #032e68 !important;


    display: flex !important;


    align-items: stretch !important;


    margin-bottom: 3px !important;


}





.kpt-l6-overlay {


    flex: 1 !important;


    background: linear-gradient(


        105deg,


        rgba(3, 46, 104, 0.95) 0%,


        rgba(3, 46, 104, 0.7)  55%,


        rgba(3, 46, 104, 0.2)  100%


    ) !important;


    display: flex !important;


    align-items: center !important;


}





.kpt-l6-inner {


    max-width: 580px !important;


    padding: 64px 80px !important;


}





.kpt-l6-inner .kpt-title {


    font-size: 2.8rem !important;


}





@media (max-width: 768px) {


    .kpt-l6-overlay {


        background: rgba(3, 46, 104, 0.88) !important;


    }


    .kpt-l6-inner { padding: 44px 28px !important; }


    .kpt-l6-inner .kpt-title { font-size: 2rem !important; }


}





/* ═══════════════════════════════════════════════════════════


   LAYOUT 7 — Navy / valge vahelduvad ribad


═══════════════════════════════════════════════════════════ */


.kpt-l7-light {


    background: #fff !important;


    border-bottom: 1px solid #e8eef5 !important;


}





.kpt-l7-dark {


    background: #032e68 !important;


}





.kpt-l7-inner {


    display: flex !important;


    align-items: center !important;


    gap: 52px !important;


    max-width: 1160px !important;


    margin: 0 auto !important;


    padding: 64px 60px !important;


}





.kpt-l7-circle {


    width: 130px !important;


    height: 130px !important;


    flex-shrink: 0 !important;


    border-radius: 50% !important;


    overflow: hidden !important;


    border: 3px solid #e95e23 !important;


}





.kpt-l7-circle img {


    width: 100% !important;


    height: 100% !important;


    object-fit: cover !important;


    display: block !important;


}





.kpt-l7-text { flex: 1 !important; }





.kpt-l7-light .kpt-title { color: #032e68 !important; }


.kpt-l7-dark .kpt-title  { color: #fff !important; }


.kpt-l7-light .kpt-intro { color: #555 !important; }


.kpt-l7-dark .kpt-intro  { color: rgba(255,255,255,0.8) !important; }





@media (max-width: 700px) {


    .kpt-l7-inner { flex-direction: column !important; gap: 24px !important; padding: 40px 24px !important; }


    .kpt-l7-circle { width: 88px !important; height: 88px !important; }


}





/* ═══════════════════════════════════════════════════════════


   LAYOUT 8 — Panoraampilt + sisu all


═══════════════════════════════════════════════════════════ */


.kpt-l8 {


    max-width: 1280px !important;


    margin: 0 auto !important;


    padding: 48px 48px !important;


    display: flex !important;


    flex-direction: column !important;


    gap: 56px !important;


}





.kpt-l8-pano {


    width: 100% !important;


    height: 320px !important;


    overflow: hidden !important;


}





.kpt-l8-pano img {


    width: 100% !important;


    height: 100% !important;


    object-fit: cover !important;


    display: block !important;


    transition: transform 0.5s ease !important;


}





.kpt-l8-item:hover .kpt-l8-pano img {


    transform: scale(1.03) !important;


}





.kpt-l8-body {


    display: flex !important;


    align-items: flex-start !important;


    gap: 28px !important;


    padding-top: 8px !important;


    border-bottom: 1px solid #dde5ef !important;


    padding-bottom: 48px !important;


}





.kpt-l8-item:last-child .kpt-l8-body {


    border-bottom: none !important;


}





.kpt-l8-accent {


    flex-shrink: 0 !important;


    width: 4px !important;


    height: 72px !important;


    background: #e95e23 !important;


    margin-top: 4px !important;


}





.kpt-l8-text { flex: 1 !important; }





@media (max-width: 640px) {


    .kpt-l8 { padding: 24px !important; gap: 40px !important; }


    .kpt-l8-pano { height: 200px !important; }


    .kpt-l8-body { flex-direction: column !important; gap: 16px !important; }


    .kpt-l8-accent { width: 40px !important; height: 4px !important; margin-top: 0 !important; }


}





/* ═══════════════════════════════════════════════════════════


   LAYOUT 9 — Diagonaallõige (clip-path)


═══════════════════════════════════════════════════════════ */


.kpt-l9-item {


    display: flex !important;


    min-height: 460px !important;


    position: relative !important;


    overflow: hidden !important;


    margin-bottom: 3px !important;


}





.kpt-l9-img {


    width: 60% !important;


    flex-shrink: 0 !important;


    clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%) !important;


    overflow: hidden !important;


    position: relative !important;


    z-index: 1 !important;


}





.kpt-l9-img .kpt-img {


    transition: transform 0.5s ease !important;


}





.kpt-l9-item:hover .kpt-l9-img .kpt-img {


    transform: scale(1.04) !important;


}





.kpt-l9-content {


    position: absolute !important;


    right: 0 !important;


    top: 0 !important;


    bottom: 0 !important;


    width: 48% !important;


    display: flex !important;


    flex-direction: column !important;


    justify-content: center !important;


    padding: 60px 64px 60px 72px !important;


    z-index: 0 !important;


}





.kpt-l9-rev .kpt-l9-img {


    clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%) !important;


    order: 2 !important;


}





.kpt-l9-rev .kpt-l9-content {


    left: 0 !important;


    right: auto !important;


    padding: 60px 72px 60px 64px !important;


    order: 1 !important;


}





.kpt-l9-item .kpt-btn--outline-white {


    border-color: rgba(255,255,255,0.5) !important;


}





@media (max-width: 800px) {


    .kpt-l9-item, .kpt-l9-rev {


        flex-direction: column !important;


        min-height: auto !important;


    }


    .kpt-l9-img, .kpt-l9-rev .kpt-l9-img {


        width: 100% !important;


        clip-path: none !important;


        height: 250px !important;


        order: 0 !important;


        position: relative !important;


    }


    .kpt-l9-content, .kpt-l9-rev .kpt-l9-content {


        position: relative !important;


        width: 100% !important;


        padding: 40px 28px !important;


        inset: auto !important;


        order: 1 !important;


    }


}





/* ═══════════════════════════════════════════════════════════


   LAYOUT 10 — Pildiga taustal kaardid (hover reveal)


═══════════════════════════════════════════════════════════ */


.kpt-l10 {


    display: grid !important;


    grid-template-columns: repeat(3, 1fr) !important;


    gap: 3px !important;


}





.kpt-l10-card {


    height: 440px !important;


    background-size: cover !important;


    background-position: center !important;


    background-color: #032e68 !important;


    position: relative !important;


    overflow: hidden !important;


    cursor: pointer !important;


}





.kpt-l10-overlay {


    position: absolute !important;


    inset: 0 !important;


    background: linear-gradient(


        180deg,


        rgba(3, 46, 104, 0.18) 0%,


        rgba(3, 46, 104, 0.88) 100%


    ) !important;


    transition: background 0.35s ease !important;


    display: flex !important;


    align-items: flex-end !important;


}





.kpt-l10-card:hover .kpt-l10-overlay {


    background: linear-gradient(


        180deg,


        rgba(3, 46, 104, 0.55) 0%,


        rgba(3, 46, 104, 0.97) 100%


    ) !important;


}





.kpt-l10-body {


    padding: 36px !important;


    width: 100% !important;


}





.kpt-l10-body .kpt-title {


    font-size: 1.65rem !important;


    margin-bottom: 4px !important;


    transition: margin 0.35s ease !important;


}





.kpt-l10-reveal {


    overflow: hidden !important;


    max-height: 0 !important;


    opacity: 0 !important;


    transition: max-height 0.4s ease, opacity 0.35s ease !important;


    margin-top: 12px !important;


}





.kpt-l10-card:hover .kpt-l10-reveal {


    max-height: 220px !important;


    opacity: 1 !important;


}





@media (max-width: 960px) {


    .kpt-l10 { grid-template-columns: repeat(2, 1fr) !important; }


}


@media (max-width: 600px) {


    .kpt-l10 { grid-template-columns: 1fr !important; }


    .kpt-l10-card { height: 320px !important; }


    /* Always show reveal on mobile */


    .kpt-l10-reveal { max-height: 300px !important; opacity: 1 !important; }


}






/* ═══════════════════════════════════════════════════════════

   LAYOUT 16 — Diagonaalribad (vahelduvad clip-path lõiked)

════════════════════════════════════════════════════════════ */



.kpt-l16 {

    overflow: hidden !important;

}



.kpt-l16-item {

    position: relative !important;

    display: grid !important;

    min-height: 420px !important;

}



.kpt-l16-odd {

    grid-template-columns: 55fr 45fr !important;

    background: #ffffff !important;

}



.kpt-l16-even {

    grid-template-columns: 45fr 55fr !important;

    background: #032e68 !important;

}



.kpt-l16-img {

    overflow: hidden !important;

}



.kpt-l16-img .kpt-img {

    width: 100% !important;

    height: 100% !important;

    object-fit: cover !important;

    display: block !important;

}



.kpt-l16-img .kpt-img-ph {

    height: 100% !important;

    min-height: 420px !important;

    background: #6b8fa8 !important;

}



.kpt-l16-text {

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    padding: 80px 44px 80px 40px !important;

}



.kpt-l16-text--dark {

    padding: 80px 40px 80px 44px !important;

}



.kpt-l16-num {

    display: block !important;

    font-family: 'Dosis', sans-serif !important;

    font-size: 3.5rem !important;

    font-weight: 700 !important;

    line-height: 1 !important;

    margin-bottom: 6px !important;

    pointer-events: none !important;

    user-select: none !important;

    letter-spacing: -0.02em !important;

}



.kpt-l16-text--light .kpt-l16-num {

    color: #e95e23 !important;

    opacity: 0.2 !important;

}



.kpt-l16-text--dark .kpt-l16-num {

    color: #ffffff !important;

    opacity: 0.13 !important;

}



.kpt-l16-accent {

    width: 3px !important;

    height: 36px !important;

    background: #e95e23 !important;

    margin-bottom: 14px !important;

    flex-shrink: 0 !important;

}



@media (max-width: 860px) {

    .kpt-l16-item {

        grid-template-columns: 1fr !important;

        clip-path: none !important;

        margin-bottom: 2px !important;

        min-height: auto !important;

    }

    .kpt-l16-even .kpt-l16-img {

        order: -1 !important;

    }

    .kpt-l16-img {

        min-height: 240px !important;

    }

    .kpt-l16-text,

    .kpt-l16-text--dark {

        padding: 28px 24px !important;

    }

}



/* ═══════════════════════════════════════════════════════════

   LAYOUT 11 — Diagonaal hover-shrink (navy taust)
   \ diagonaal; teksti peal hoverides pilt kahaneb 60 → 38%

═══════════════════════════════════════════════════════════ */


.kpt-l11-item {

    display: flex !important;

    min-height: 460px !important;

    overflow: hidden !important;

    margin-bottom: 3px !important;

    background: #032e68 !important;

}


/* Image: order:-1 → visuaalselt VASAK, kuid DOM-is content järel */

.kpt-l11-img {

    order: -1 !important;

    flex: 0 0 auto !important;

    width: 60% !important;

    clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%) !important;

    overflow: hidden !important;

    position: relative !important;

    will-change: clip-path !important;

    transition: clip-path 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;

}


.kpt-l11-img .kpt-img {

    display: block !important;

}


.kpt-l11-content {

    flex: 1 !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    padding: 60px 64px 60px 152px !important;

    margin-left: -100px !important;

}


.kpt-l11-content .kpt-btn {

    align-self: flex-start !important;

    width: auto !important;

}


/* Hoverdades ITEM peale → pilt laieneb (diagonaal nihkub sisu poole) */

.kpt-l11-item:hover .kpt-l11-img {

    clip-path: polygon(0 0, 100% 0, 93% 100%, 0 100%) !important;

}


/* Rev: pilt PAREMALE (order:1 overrides base order:-1) */

.kpt-l11-rev .kpt-l11-img {

    order: 1 !important;

    clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%) !important;

}


.kpt-l11-rev:hover .kpt-l11-img {

    clip-path: polygon(7% 0, 100% 0, 100% 100%, 0 100%) !important;

}


.kpt-l11-rev .kpt-l11-content {

    padding: 60px 152px 60px 64px !important;

    margin-left: 0 !important;

    margin-right: -100px !important;

}


@media (max-width: 800px) {

    .kpt-l11-item {

        flex-direction: column !important;

        min-height: auto !important;

    }

    .kpt-l11-img,
    .kpt-l11-rev .kpt-l11-img {

        order: -1 !important;

        width: 100% !important;

        height: 260px !important;

        clip-path: none !important;

    }

    .kpt-l11-content,
    .kpt-l11-rev .kpt-l11-content {

        padding: 40px 28px !important;

        margin-left: 0 !important;

        margin-right: 0 !important;

    }

}


/* ═══════════════════════════════════════════════════════════

   LAYOUT 12 — Diagonaal hover-shrink (valge taust)
   \ diagonaal; teksti peal hoverides pilt kahaneb 60 → 38%

═══════════════════════════════════════════════════════════ */


.kpt-l12-item {

    display: flex !important;

    min-height: 460px !important;

    overflow: hidden !important;

    margin-bottom: 3px !important;

    background: #ffffff !important;

}


.kpt-l12-img {

    order: -1 !important;

    flex: 0 0 auto !important;

    width: 60% !important;

    clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%) !important;

    overflow: hidden !important;

    position: relative !important;

    will-change: clip-path !important;

    transition: clip-path 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;

}


.kpt-l12-img .kpt-img {

    display: block !important;

}


.kpt-l12-content {

    flex: 1 !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    padding: 60px 64px 60px 152px !important;

    margin-left: -100px !important;

    background: #ffffff !important;

    position: relative !important;

}


.kpt-l12-accent {

    width: 4px !important;

    height: 60px !important;

    background: #e95e23 !important;

    margin-bottom: 22px !important;

    flex-shrink: 0 !important;

    align-self: flex-start !important;

}


.kpt-l12-content .kpt-btn {

    align-self: flex-start !important;

    width: auto !important;

}


/* Hoverdades ITEM peale → pilt laieneb (diagonaal nihkub sisu poole) */

.kpt-l12-item:hover .kpt-l12-img {

    clip-path: polygon(0 0, 100% 0, 93% 100%, 0 100%) !important;

}


/* Rev */

.kpt-l12-rev .kpt-l12-img {

    order: 1 !important;

    clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%) !important;

}


.kpt-l12-rev:hover .kpt-l12-img {

    clip-path: polygon(7% 0, 100% 0, 100% 100%, 0 100%) !important;

}


.kpt-l12-rev .kpt-l12-content {

    padding: 60px 152px 60px 64px !important;

    margin-left: 0 !important;

    margin-right: -100px !important;

}


@media (max-width: 800px) {

    .kpt-l12-item {

        flex-direction: column !important;

        min-height: auto !important;

    }

    .kpt-l12-img,
    .kpt-l12-rev .kpt-l12-img {

        order: -1 !important;

        width: 100% !important;

        height: 260px !important;

        clip-path: none !important;

    }

    .kpt-l12-content,
    .kpt-l12-rev .kpt-l12-content {

        padding: 40px 28px !important;

        margin-left: 0 !important;

        margin-right: 0 !important;

    }

    .kpt-l12-accent {

        display: none !important;

    }

}


/* ═══════════════════════════════════════════════════════════

   LAYOUT 19 — Hover, vahelduv navy + oranž
   Taaskasutab L11 struktuuri (img/content/hover), lisab ainult
   rea taustavärvi ja nupu värvi vaheldumise (nth-child)

═══════════════════════════════════════════════════════════ */


.kpt-l19 .kpt-l19-item:nth-child(odd) {

    background: #032e68 !important;

}


.kpt-l19 .kpt-l19-item:nth-child(even) {

    background: #e95e23 !important;

}


.kpt-l19 .kpt-l19-item:nth-child(odd) .kpt-l11-content {

    background-color: #032e68 !important;

}


.kpt-l19 .kpt-l19-item:nth-child(even) .kpt-l11-content {

    background-color: #e95e23 !important;

}


.kpt-l19 .kpt-l19-item:nth-child(odd) .kpt-btn--outline-white {

    background: #e95e23 !important;

    border-color: #e95e23 !important;

    color: #ffffff !important;

}


.kpt-l19 .kpt-l19-item:nth-child(even) .kpt-btn--outline-white {

    background: #032e68 !important;

    border-color: #032e68 !important;

    color: #ffffff !important;

}


.kpt-l19 .kpt-l19-item:nth-child(odd) .kpt-btn--outline-white:hover {

    background: #ffffff !important;

    color: #032e68 !important;

}


.kpt-l19 .kpt-l19-item:nth-child(even) .kpt-btn--outline-white:hover {

    background: #ffffff !important;

    color: #e95e23 !important;

}


/* ═══════════════════════════════════════════════════════════

   LAYOUT 20 — Hover, vahelduv navy + valge
   Taaskasutab L11 struktuuri (img/content/hover), iga teine rida
   valge taust + oranž aktsentriba, navy tekst

═══════════════════════════════════════════════════════════ */


.kpt-l20 .kpt-l20-item:nth-child(odd) {

    background: #032e68 !important;

}


.kpt-l20 .kpt-l20-item:nth-child(odd) .kpt-l20-accent {

    display: none !important;

}


.kpt-l20 .kpt-l20-item:nth-child(odd) .kpt-btn--outline-white {

    background: #e95e23 !important;

    border-color: #e95e23 !important;

    color: #ffffff !important;

}


.kpt-l20 .kpt-l20-item:nth-child(odd) .kpt-btn--outline-white:hover {

    background: #ffffff !important;

    color: #032e68 !important;

}


.kpt-l20 .kpt-l20-item:nth-child(even) {

    background: #ffffff !important;

}


.kpt-l20 .kpt-l20-item:nth-child(even) .kpt-l20-content {

    background: transparent !important;

}


.kpt-l20 .kpt-l20-item:nth-child(even) .kpt-l20-accent {

    display: block !important;

    width: 4px !important;

    height: 44px !important;

    background: #e95e23 !important;

    margin-bottom: 20px !important;

    flex-shrink: 0 !important;

    align-self: flex-start !important;

}


.kpt-l20 .kpt-l20-item:nth-child(even) .kpt-title,
.kpt-l20 .kpt-l20-item:nth-child(even) .kpt-intro {

    color: #032e68 !important;

}


.kpt-l20 .kpt-l20-item:nth-child(even) .kpt-intro {

    opacity: 0.75 !important;

}


.kpt-l20 .kpt-l20-item:nth-child(even) .kpt-btn--outline-white {

    background: #032e68 !important;

    border-color: #032e68 !important;

    color: #ffffff !important;

}


.kpt-l20 .kpt-l20-item:nth-child(even) .kpt-btn--outline-white:hover {

    background: #e95e23 !important;

    border-color: #e95e23 !important;

    color: #ffffff !important;

}


@media (max-width: 800px) {

    .kpt-l19 .kpt-l19-item,
    .kpt-l20 .kpt-l20-item,
    .kpt-l21 .kpt-l21-item {

        margin-bottom: 3px !important;

    }

}


/* ═══════════════════════════════════════════════════════════

   LAYOUT 21 — Hover, vahelduv navy + sinine
   Taaskasutab L11 struktuuri (img/content/hover), lisab ainult
   rea taustavärvi ja nupu värvi vaheldumise (nth-child)

═══════════════════════════════════════════════════════════ */


.kpt-l21 .kpt-l21-item:nth-child(odd) {

    background: #032e68 !important;

}


.kpt-l21 .kpt-l21-item:nth-child(even) {

    background: #1477c8 !important;

}


.kpt-l21 .kpt-l21-item:nth-child(odd) .kpt-l11-content {

    background-color: #032e68 !important;

}


.kpt-l21 .kpt-l21-item:nth-child(even) .kpt-l11-content {

    background-color: #1477c8 !important;

}


.kpt-l21 .kpt-l21-item:nth-child(odd) .kpt-btn--outline-white {

    background: #1477c8 !important;

    border-color: #1477c8 !important;

    color: #ffffff !important;

}


.kpt-l21 .kpt-l21-item:nth-child(even) .kpt-btn--outline-white {

    background: #032e68 !important;

    border-color: #032e68 !important;

    color: #ffffff !important;

}


.kpt-l21 .kpt-l21-item:nth-child(odd) .kpt-btn--outline-white:hover {

    background: #ffffff !important;

    color: #032e68 !important;

}


.kpt-l21 .kpt-l21-item:nth-child(even) .kpt-btn--outline-white:hover {

    background: #ffffff !important;

    color: #1477c8 !important;

}


@media (max-width: 800px) {

    .kpt-l21 .kpt-l21-item {

        margin-bottom: 3px !important;

    }

}


/* ═══════════════════════════════════════════════════════════

   LAYOUT 22 — Hover, vahelduv oranž + valge
   Taaskasutab L11 struktuuri (img/content/hover), iga teine rida
   valge taust + navy aktsentriba, oranž tekst

═══════════════════════════════════════════════════════════ */


.kpt-l22 .kpt-l22-item:nth-child(odd) {

    background: #e95e23 !important;

}


.kpt-l22 .kpt-l22-item:nth-child(odd) .kpt-l22-accent {

    display: none !important;

}


.kpt-l22 .kpt-l22-item:nth-child(odd) .kpt-btn--outline-white {

    background: #032e68 !important;

    border-color: #032e68 !important;

    color: #ffffff !important;

}


.kpt-l22 .kpt-l22-item:nth-child(odd) .kpt-btn--outline-white:hover {

    background: #ffffff !important;

    color: #e95e23 !important;

}


.kpt-l22 .kpt-l22-item:nth-child(even) {

    background: #ffffff !important;

}


.kpt-l22 .kpt-l22-item:nth-child(even) .kpt-l22-content {

    background: transparent !important;

}


.kpt-l22 .kpt-l22-item:nth-child(even) .kpt-l22-accent {

    display: block !important;

    width: 4px !important;

    height: 44px !important;

    background: #032e68 !important;

    margin-bottom: 20px !important;

    flex-shrink: 0 !important;

    align-self: flex-start !important;

}


.kpt-l22 .kpt-l22-item:nth-child(even) .kpt-title,
.kpt-l22 .kpt-l22-item:nth-child(even) .kpt-intro {

    color: #032e68 !important;

}


.kpt-l22 .kpt-l22-item:nth-child(even) .kpt-intro {

    opacity: 0.75 !important;

}


.kpt-l22 .kpt-l22-item:nth-child(even) .kpt-btn--outline-white {

    background: #e95e23 !important;

    border-color: #e95e23 !important;

    color: #ffffff !important;

}


.kpt-l22 .kpt-l22-item:nth-child(even) .kpt-btn--outline-white:hover {

    background: #032e68 !important;

    border-color: #032e68 !important;

    color: #ffffff !important;

}


@media (max-width: 800px) {

    .kpt-l22 .kpt-l22-item {

        margin-bottom: 3px !important;

    }

}


/* ═══════════════════════════════════════════════════════════

   LAYOUT 23 — Chevron navy + oranž
   Taaskasutab L17 mootorit (struktuur/clip-path/hover), lisab
   ainult rea taustavärvi ja nupu värvi vaheldumise (nth-child)

═══════════════════════════════════════════════════════════ */


.kpt-l23 .kpt-l23-item:nth-child(odd) {

    background: #032e68 !important;

}


.kpt-l23 .kpt-l23-item:nth-child(even) {

    background: #e95e23 !important;

}


.kpt-l23 .kpt-l23-item:nth-child(odd) .kpt-l17-content {

    background-color: #032e68 !important;

}


.kpt-l23 .kpt-l23-item:nth-child(even) .kpt-l17-content {

    background-color: #e95e23 !important;

}


.kpt-l23 .kpt-l23-item:nth-child(odd) .kpt-btn--outline-white {

    background: #e95e23 !important;

    border-color: #e95e23 !important;

    color: #ffffff !important;

}


.kpt-l23 .kpt-l23-item:nth-child(even) .kpt-btn--outline-white {

    background: #032e68 !important;

    border-color: #032e68 !important;

    color: #ffffff !important;

}


.kpt-l23 .kpt-l23-item:nth-child(odd) .kpt-btn--outline-white:hover {

    background: #ffffff !important;

    color: #032e68 !important;

}


.kpt-l23 .kpt-l23-item:nth-child(even) .kpt-btn--outline-white:hover {

    background: #ffffff !important;

    color: #e95e23 !important;

}


@media (max-width: 800px) {

    .kpt-l23 .kpt-l23-item {

        margin-bottom: 3px !important;

    }

}


/* ═══════════════════════════════════════════════════════════

   LAYOUT 24 — Chevron navy + valge
   Taaskasutab L17 mootorit, iga teine rida valge taust + oranž aktsent

═══════════════════════════════════════════════════════════ */


.kpt-l24 .kpt-l24-item:nth-child(odd) {

    background: #032e68 !important;

}


.kpt-l24 .kpt-l24-item:nth-child(odd) .kpt-l24-accent {

    display: none !important;

}


.kpt-l24 .kpt-l24-item:nth-child(odd) .kpt-btn--outline-white {

    background: #e95e23 !important;

    border-color: #e95e23 !important;

    color: #ffffff !important;

}


.kpt-l24 .kpt-l24-item:nth-child(odd) .kpt-btn--outline-white:hover {

    background: #ffffff !important;

    color: #032e68 !important;

}


.kpt-l24 .kpt-l24-item:nth-child(even) {

    background: #ffffff !important;

}


.kpt-l24 .kpt-l24-item:nth-child(even) .kpt-l24-content {

    background: transparent !important;

}


.kpt-l24 .kpt-l24-item:nth-child(even) .kpt-l24-accent {

    display: block !important;

    width: 4px !important;

    height: 44px !important;

    background: #e95e23 !important;

    margin-bottom: 20px !important;

    flex-shrink: 0 !important;

    align-self: flex-start !important;

}


.kpt-l24 .kpt-l24-item:nth-child(even) .kpt-title,
.kpt-l24 .kpt-l24-item:nth-child(even) .kpt-intro {

    color: #032e68 !important;

}


.kpt-l24 .kpt-l24-item:nth-child(even) .kpt-intro {

    opacity: 0.75 !important;

}


.kpt-l24 .kpt-l24-item:nth-child(even) .kpt-btn--outline-white {

    background: #032e68 !important;

    border-color: #032e68 !important;

    color: #ffffff !important;

}


.kpt-l24 .kpt-l24-item:nth-child(even) .kpt-btn--outline-white:hover {

    background: #e95e23 !important;

    border-color: #e95e23 !important;

    color: #ffffff !important;

}


@media (max-width: 800px) {

    .kpt-l24 .kpt-l24-item {

        margin-bottom: 3px !important;

    }

}


/* ═══════════════════════════════════════════════════════════

   LAYOUT 25 — Chevron navy + sinine
   Taaskasutab L17 mootorit, lisab rea taustavärvi ja nupu värvi
   vaheldumise (nth-child)

═══════════════════════════════════════════════════════════ */


.kpt-l25 .kpt-l25-item:nth-child(odd) {

    background: #032e68 !important;

}


.kpt-l25 .kpt-l25-item:nth-child(even) {

    background: #1477c8 !important;

}


.kpt-l25 .kpt-l25-item:nth-child(odd) .kpt-l17-content {

    background-color: #032e68 !important;

}


.kpt-l25 .kpt-l25-item:nth-child(even) .kpt-l17-content {

    background-color: #1477c8 !important;

}


.kpt-l25 .kpt-l25-item:nth-child(odd) .kpt-btn--outline-white {

    background: #1477c8 !important;

    border-color: #1477c8 !important;

    color: #ffffff !important;

}


.kpt-l25 .kpt-l25-item:nth-child(even) .kpt-btn--outline-white {

    background: #032e68 !important;

    border-color: #032e68 !important;

    color: #ffffff !important;

}


.kpt-l25 .kpt-l25-item:nth-child(odd) .kpt-btn--outline-white:hover {

    background: #ffffff !important;

    color: #032e68 !important;

}


.kpt-l25 .kpt-l25-item:nth-child(even) .kpt-btn--outline-white:hover {

    background: #ffffff !important;

    color: #1477c8 !important;

}


@media (max-width: 800px) {

    .kpt-l25 .kpt-l25-item {

        margin-bottom: 3px !important;

    }

}


/* ═══════════════════════════════════════════════════════════

   LAYOUT 26 — Chevron oranž + valge
   Taaskasutab L17 mootorit, iga teine rida valge taust + navy aktsent

═══════════════════════════════════════════════════════════ */


.kpt-l26 .kpt-l26-item:nth-child(odd) {

    background: #e95e23 !important;

}


.kpt-l26 .kpt-l26-item:nth-child(odd) .kpt-l26-accent {

    display: none !important;

}


.kpt-l26 .kpt-l26-item:nth-child(odd) .kpt-btn--outline-white {

    background: #032e68 !important;

    border-color: #032e68 !important;

    color: #ffffff !important;

}


.kpt-l26 .kpt-l26-item:nth-child(odd) .kpt-btn--outline-white:hover {

    background: #ffffff !important;

    color: #e95e23 !important;

}


.kpt-l26 .kpt-l26-item:nth-child(even) {

    background: #ffffff !important;

}


.kpt-l26 .kpt-l26-item:nth-child(even) .kpt-l26-content {

    background: transparent !important;

}


.kpt-l26 .kpt-l26-item:nth-child(even) .kpt-l26-accent {

    display: block !important;

    width: 4px !important;

    height: 44px !important;

    background: #032e68 !important;

    margin-bottom: 20px !important;

    flex-shrink: 0 !important;

    align-self: flex-start !important;

}


.kpt-l26 .kpt-l26-item:nth-child(even) .kpt-title,
.kpt-l26 .kpt-l26-item:nth-child(even) .kpt-intro {

    color: #032e68 !important;

}


.kpt-l26 .kpt-l26-item:nth-child(even) .kpt-intro {

    opacity: 0.75 !important;

}


.kpt-l26 .kpt-l26-item:nth-child(even) .kpt-btn--outline-white {

    background: #e95e23 !important;

    border-color: #e95e23 !important;

    color: #ffffff !important;

}


.kpt-l26 .kpt-l26-item:nth-child(even) .kpt-btn--outline-white:hover {

    background: #032e68 !important;

    border-color: #032e68 !important;

    color: #ffffff !important;

}


@media (max-width: 800px) {

    .kpt-l26 .kpt-l26-item {

        margin-bottom: 3px !important;

    }

}


/* ═══════════════════════════════════════════════════════════

   LAYOUTID 27–30 — Kokkupuutuv siksak-diagonaal
   Värviosa = item enda taust (terve pind, MITTE notš). SISU on
   nüüd tavalises voos (mitte absoluutne) — see määrab ise rea
   kõrguse vastavalt tekstipikkusele, ekraanilaiusest sõltumata.
   Pilt on absoluutne kiht (inset:0), mis venib alati automaatselt
   täpselt sama kõrgeks kui sisu. Turvaline padding-left
   (calc(54% + 40px)) on alati suurem kui pildi max ulatus (54%)
   — tekst EI SAA kunagi pildi alla jääda, ükskõik kui pikk see on.

═══════════════════════════════════════════════════════════ */


.kpt-l27, .kpt-l28, .kpt-l29, .kpt-l30 {

    display: flex !important;

    flex-direction: column !important;

}


.kpt-l27-item, .kpt-l28-item, .kpt-l29-item, .kpt-l30-item {

    position: relative !important;

    overflow: hidden !important;

    margin-bottom: 3px !important;

}


.kpt-l27-img, .kpt-l28-img, .kpt-l29-img, .kpt-l30-img {

    position: absolute !important;

    inset: 0 !important;

    z-index: 1 !important;

    overflow: hidden !important;

    clip-path: polygon(0 0, 46% 0, 54% 100%, 0 100%) !important;

}


.kpt-l27-img .kpt-img, .kpt-l27-img .kpt-img-ph,
.kpt-l28-img .kpt-img, .kpt-l28-img .kpt-img-ph,
.kpt-l29-img .kpt-img, .kpt-l29-img .kpt-img-ph,
.kpt-l30-img .kpt-img, .kpt-l30-img .kpt-img-ph {

    width: 100% !important;

    height: 100% !important;

    object-fit: cover !important;

    display: block !important;

    transition: transform 0.5s ease !important;

}


.kpt-l27-item:hover .kpt-img, .kpt-l28-item:hover .kpt-img,
.kpt-l29-item:hover .kpt-img, .kpt-l30-item:hover .kpt-img {

    transform: scale(1.04) !important;

}


.kpt-l27-content, .kpt-l28-content, .kpt-l29-content, .kpt-l30-content {

    position: relative !important;

    z-index: 2 !important;

    width: 100% !important;

    box-sizing: border-box !important;

    min-height: 340px !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    padding: 60px 64px 60px calc(54% + 40px) !important;

}


.kpt-l27-content .kpt-btn, .kpt-l28-content .kpt-btn,
.kpt-l29-content .kpt-btn, .kpt-l30-content .kpt-btn {

    align-self: flex-start !important;

    width: auto !important;

}


.kpt-l27-rev .kpt-l27-img, .kpt-l28-rev .kpt-l28-img,
.kpt-l29-rev .kpt-l29-img, .kpt-l30-rev .kpt-l30-img {

    clip-path: polygon(54% 0, 100% 0, 100% 100%, 46% 100%) !important;

}


.kpt-l27-rev .kpt-l27-content, .kpt-l28-rev .kpt-l28-content,
.kpt-l29-rev .kpt-l29-content, .kpt-l30-rev .kpt-l30-content {

    padding: 60px calc(54% + 40px) 60px 64px !important;

}


@media (max-width: 800px) {

    .kpt-l27-item, .kpt-l28-item, .kpt-l29-item, .kpt-l30-item {

        display: flex !important;

        flex-direction: column !important;

    }

    .kpt-l27-img, .kpt-l28-img, .kpt-l29-img, .kpt-l30-img,
    .kpt-l27-rev .kpt-l27-img, .kpt-l28-rev .kpt-l28-img,
    .kpt-l29-rev .kpt-l29-img, .kpt-l30-rev .kpt-l30-img {

        position: static !important;

        width: 100% !important;

        height: 220px !important;

        clip-path: none !important;

        z-index: auto !important;

        order: -1 !important;

    }

    .kpt-l27-content, .kpt-l28-content, .kpt-l29-content, .kpt-l30-content,
    .kpt-l27-rev .kpt-l27-content, .kpt-l28-rev .kpt-l28-content,
    .kpt-l29-rev .kpt-l29-content, .kpt-l30-rev .kpt-l30-content {

        min-height: auto !important;

        padding: 32px 24px !important;

    }

    .kpt-l27-content .kpt-title, .kpt-l28-content .kpt-title,
    .kpt-l29-content .kpt-title, .kpt-l30-content .kpt-title {

        width: 100% !important;

        overflow-wrap: break-word !important;

        word-break: break-word !important;

    }

}


/* ── LAYOUT 27 värvivaheldus: navy ↔ oranž ── */


.kpt-l27-item:nth-child(odd) {

    background: #032e68 !important;

}


.kpt-l27-item:nth-child(even) {

    background: #e95e23 !important;

}


.kpt-l27-item:nth-child(odd) .kpt-btn--outline-white {

    background: #e95e23 !important;

    border-color: #e95e23 !important;

    color: #ffffff !important;

}


.kpt-l27-item:nth-child(even) .kpt-btn--outline-white {

    background: #032e68 !important;

    border-color: #032e68 !important;

    color: #ffffff !important;

}


.kpt-l27-item:nth-child(odd) .kpt-btn--outline-white:hover {

    background: #ffffff !important;

    color: #032e68 !important;

}


.kpt-l27-item:nth-child(even) .kpt-btn--outline-white:hover {

    background: #ffffff !important;

    color: #e95e23 !important;

}


/* ── LAYOUT 28 värvivaheldus: navy ↔ valge ── */


.kpt-l28-item:nth-child(odd) {

    background: #032e68 !important;

}


.kpt-l28-item:nth-child(even) {

    background: #ffffff !important;

}


.kpt-l28-item:nth-child(even) .kpt-title {

    color: #032e68 !important;

}


.kpt-l28-item:nth-child(even) .kpt-intro {

    color: #555555 !important;

}


/* ── LAYOUT 29 värvivaheldus: valge ↔ oranž ── */


.kpt-l29-item:nth-child(odd) {

    background: #ffffff !important;

}


.kpt-l29-item:nth-child(even) {

    background: #e95e23 !important;

}


.kpt-l29-item:nth-child(odd) .kpt-title {

    color: #032e68 !important;

}


.kpt-l29-item:nth-child(odd) .kpt-intro {

    color: #555555 !important;

}


/* ── LAYOUT 30 värvivaheldus: oranž ↔ navy (oranž alustab) ── */


.kpt-l30-item:nth-child(odd) {

    background: #e95e23 !important;

}


.kpt-l30-item:nth-child(even) {

    background: #032e68 !important;

}


.kpt-l30-item:nth-child(odd) .kpt-btn--outline-white {

    background: #032e68 !important;

    border-color: #032e68 !important;

    color: #ffffff !important;

}


.kpt-l30-item:nth-child(even) .kpt-btn--outline-white {

    background: #e95e23 !important;

    border-color: #e95e23 !important;

    color: #ffffff !important;

}


.kpt-l30-item:nth-child(odd) .kpt-btn--outline-white:hover {

    background: #ffffff !important;

    color: #e95e23 !important;

}


.kpt-l30-item:nth-child(even) .kpt-btn--outline-white:hover {

    background: #ffffff !important;

    color: #032e68 !important;

}


/* ═══════════════════════════════════════════════════════════

   LAYOUT 13 — Vastupidine diagonaalsuund (/ lõige, navy)
   Staatik; base: pilt VASAK / suunas, rev: pilt PAREM \ suunas

═══════════════════════════════════════════════════════════ */


.kpt-l13-item {

    display: flex !important;

    min-height: 460px !important;

    overflow: hidden !important;

    margin-bottom: 3px !important;

    background: #032e68 !important;

}


/* Image order:-1 = visuaalselt vasak */

.kpt-l13-img {

    order: -1 !important;

    flex: 0 0 auto !important;

    width: 60% !important;

    /* / diagonaal: kitsas ülal, lai all */

    clip-path: polygon(0 0, 82% 0, 100% 100%, 0 100%) !important;

    overflow: hidden !important;

    position: relative !important;

}


.kpt-l13-img .kpt-img {

    transition: transform 0.5s ease !important;

}


.kpt-l13-item:hover .kpt-l13-img .kpt-img {

    transform: scale(1.03) !important;

}


.kpt-l13-content {

    flex: 1 !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    padding: 60px 64px 60px 44px !important;

}


.kpt-l13-content .kpt-btn {

    align-self: flex-start !important;

    width: auto !important;

}


/* Rev: pilt PAREMALE, \ suunas */

.kpt-l13-rev .kpt-l13-img {

    order: 1 !important;

    /* \ diagonaal parema pildi vasakul küljel */

    clip-path: polygon(0 0, 100% 0, 100% 100%, 18% 100%) !important;

}


.kpt-l13-rev .kpt-l13-content {

    padding: 60px 44px 60px 64px !important;

}


@media (max-width: 800px) {

    .kpt-l13-item {

        flex-direction: column !important;

        min-height: auto !important;

    }

    .kpt-l13-img,
    .kpt-l13-rev .kpt-l13-img {

        order: -1 !important;

        width: 100% !important;

        height: 260px !important;

        clip-path: none !important;

    }

    .kpt-l13-content,
    .kpt-l13-rev .kpt-l13-content {

        padding: 40px 28px !important;

    }

}


/* ═══════════════════════════════════════════════════════════

   LAYOUT 14 — Sügav diagonaal (pilt 70%, valge taust)
   \ diagonaal 100%→74%; pilt domineerib, staatik

═══════════════════════════════════════════════════════════ */


.kpt-l14-item {

    display: flex !important;

    min-height: 480px !important;

    overflow: hidden !important;

    margin-bottom: 3px !important;

    background: #ffffff !important;

}


.kpt-l14-img {

    order: -1 !important;

    flex: 0 0 auto !important;

    width: 70% !important;

    /* Sügav \: 100% ülal → 74% all */

    clip-path: polygon(0 0, 100% 0, 74% 100%, 0 100%) !important;

    overflow: hidden !important;

    position: relative !important;

}


.kpt-l14-img .kpt-img {

    transition: transform 0.5s ease !important;

}


.kpt-l14-item:hover .kpt-l14-img .kpt-img {

    transform: scale(1.03) !important;

}


.kpt-l14-content {

    flex: 1 !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    padding: 60px 48px 60px 40px !important;

    background: #ffffff !important;

}


.kpt-l14-accent {

    width: 4px !important;

    height: 56px !important;

    background: #e95e23 !important;

    margin-bottom: 24px !important;

    flex-shrink: 0 !important;

    align-self: flex-start !important;

}


.kpt-l14-content .kpt-btn {

    align-self: flex-start !important;

    width: auto !important;

}


/* Rev */

.kpt-l14-rev .kpt-l14-img {

    order: 1 !important;

    clip-path: polygon(26% 0, 100% 0, 100% 100%, 0 100%) !important;

}


.kpt-l14-rev .kpt-l14-content {

    padding: 60px 40px 60px 48px !important;

}


@media (max-width: 800px) {

    .kpt-l14-item {

        flex-direction: column !important;

        min-height: auto !important;

    }

    .kpt-l14-img,
    .kpt-l14-rev .kpt-l14-img {

        order: -1 !important;

        width: 100% !important;

        height: 280px !important;

        clip-path: none !important;

    }

    .kpt-l14-content,
    .kpt-l14-rev .kpt-l14-content {

        padding: 40px 28px !important;

    }

    .kpt-l14-accent {

        display: none !important;

    }

}



/* ═══════════════════════════════════════════════════════════

   LAYOUT 15 — Vahelduv diagonaal (valge sisu, navy vahemik)
   Pilt vaheldub L↔R; \ ja / diagonaalid kohtuvad ~49% joonel.
   Navy tausta (item bg) täidab diagonaallõhe mõlemal real.

═══════════════════════════════════════════════════════════ */


.kpt-l15-item {

    display: flex !important;

    min-height: 460px !important;

    overflow: hidden !important;

    margin-bottom: 3px !important;

    background: #032e68 !important;   /* navy täidab diagonaallõhe */

}


/* Base: pilt VASAK (order -1), \ lõige */

.kpt-l15-img {

    order: -1 !important;

    flex: 0 0 auto !important;

    width: 60% !important;

    clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%) !important;

    overflow: hidden !important;

}


.kpt-l15-img .kpt-img {

    display: block !important;

}


.kpt-l15-content {

    flex: 1 !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    padding: 64px 64px 64px 144px !important;

    margin-left: -100px !important;

    background: #ffffff !important;

}


.kpt-l15-accent {

    width: 4px !important;

    height: 56px !important;

    background: #e95e23 !important;

    margin-bottom: 22px !important;

    flex-shrink: 0 !important;

    align-self: flex-start !important;

}


.kpt-l15-content .kpt-btn {

    align-self: flex-start !important;

    width: auto !important;

}


/* Rev: pilt PAREMALE, / lõige — kohtub base \ lõikel täpselt ~49% */

.kpt-l15-rev .kpt-l15-img {

    order: 1 !important;

    clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%) !important;

}


.kpt-l15-rev .kpt-l15-content {

    padding: 64px 144px 64px 64px !important;

    margin-left: 0 !important;

    margin-right: -100px !important;

}


@media (max-width: 800px) {

    .kpt-l15-item {

        flex-direction: column !important;

        min-height: auto !important;

    }

    .kpt-l15-img,
    .kpt-l15-rev .kpt-l15-img {

        order: -1 !important;

        width: 100% !important;

        height: 260px !important;

        clip-path: none !important;

    }

    .kpt-l15-content,
    .kpt-l15-rev .kpt-l15-content {

        padding: 40px 28px !important;

        margin-left: 0 !important;

        margin-right: 0 !important;

    }

    .kpt-l15-accent { display: none !important; }

}


/* ═══════════════════════════════════════════════════════════

   LAYOUT 17 — Chevron vasak (pilt ALATI vasak, diagonaal vaheldub)
   Row 0: \ lõige  →  Row 1: / lõige  →  koos moodustavad < chevron
   Kohtumispunkt: 82% × 60% = 49.2% konteinerist vasakult

═══════════════════════════════════════════════════════════ */


.kpt-l17 {

    display: flex !important;

    flex-direction: column !important;

    gap: 0 !important;           /* saumatu chevron */

}


.kpt-l17-item {

    display: flex !important;

    min-height: 460px !important;

    overflow: hidden !important;

    background: #032e68 !important;

}


/* Pilt ALATI VASAK */

.kpt-l17-img {

    order: -1 !important;

    flex: 0 0 auto !important;

    width: 60% !important;

    overflow: hidden !important;

}


.kpt-l17-img .kpt-img {

    display: block !important;

}


/* Even rows: \ lõige (lai ülal, kitsas all) */

.kpt-l17-img {

    clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%) !important;

}


/* Odd rows: / lõige (kitsas ülal, lai all) — kohtub täpselt samas punktis */

.kpt-l17-slash .kpt-l17-img {

    clip-path: polygon(0 0, 82% 0, 100% 100%, 0 100%) !important;

}


.kpt-l17-content {

    flex: 1 !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    padding: 64px 64px 64px 144px !important;

    margin-left: -100px !important;

}


.kpt-l17-content .kpt-btn {

    align-self: flex-start !important;

    width: auto !important;

}


@media (max-width: 800px) {

    .kpt-l17-item {

        flex-direction: column !important;

        min-height: auto !important;

    }

    .kpt-l17-img,
    .kpt-l17-slash .kpt-l17-img {

        order: -1 !important;

        width: 100% !important;

        height: 260px !important;

        clip-path: none !important;

    }

    .kpt-l17-content { padding: 40px 28px !important; margin-left: 0 !important; }

}


/* ═══════════════════════════════════════════════════════════

   LAYOUT 18 — Chevron parem (pilt ALATI paremal, diagonaal vaheldub)
   Row 0: / lõige vasakul küljel  →  Row 1: \ lõige  →  koos moodustavad > chevron
   Kohtumispunkt: 0% × 60% + 40% = 40% konteinerist vasakult

═══════════════════════════════════════════════════════════ */


.kpt-l18 {

    display: flex !important;

    flex-direction: column !important;

    gap: 0 !important;           /* saumatu chevron */

}


.kpt-l18-item {

    display: flex !important;

    min-height: 460px !important;

    overflow: hidden !important;

    background: #032e68 !important;

}


/* Pilt ALATI PAREMAL (content on left in DOM → appears right naturally) */

.kpt-l18-img {

    flex: 0 0 auto !important;

    width: 60% !important;

    overflow: hidden !important;

}


.kpt-l18-img .kpt-img {

    display: block !important;

}


/* Even rows: / lõige vasakul küljel pildil (kitsas ülal, lai all) */

.kpt-l18-img {

    clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%) !important;

}


/* Odd rows: \ lõige vasakul küljel (lai ülal, kitsas all) — kohtub täpselt */

.kpt-l18-bs .kpt-l18-img {

    clip-path: polygon(0 0, 100% 0, 100% 100%, 18% 100%) !important;

}


.kpt-l18-content {

    flex: 1 !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: center !important;

    padding: 64px 144px 64px 64px !important;

    margin-right: -100px !important;

}


.kpt-l18-content .kpt-btn {

    align-self: flex-start !important;

    width: auto !important;

}


@media (max-width: 800px) {

    .kpt-l18-item {

        flex-direction: column !important;

        min-height: auto !important;

    }

    .kpt-l18-img,
    .kpt-l18-bs .kpt-l18-img {

        order: -1 !important;

        width: 100% !important;

        height: 260px !important;

        clip-path: none !important;

    }

    .kpt-l18-content { padding: 40px 28px !important; margin-right: 0 !important; }

}



/* ═══════════════════════════════════════════════════════════

   HOVER EFEKTID — L15, L17, L18
   Uus tehnika: pilt kaetud üle (z-order), sisu paneel "voolab"
   pisut pildi alla juba vaikimisi (tekst osaliselt pildi peal).
   Hoverdades LAIENEB pilt diagonaali pidi sisu paneeli peale.

   Tekst/nupp EI liigu, EI skaleeru — täiesti staatilised.
   Ainuke liikuv element on pildi enda diagonaaljoon (clip-path),
   ja liikumise ulatus on tunduvalt väiksem kui varem.

═══════════════════════════════════════════════════════════ */


.kpt-l15-img,
.kpt-l17-img,
.kpt-l18-img {

    will-change: clip-path !important;

    transition: clip-path 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;

}


/* ─── L15 hover: pilt laieneb (diagonaal nihkub sisu poole) ─── */

/* Base \ : 82% → 90% (notš väheneb, pilt katab osa paneelist) */

.kpt-l15-item:not(.kpt-l15-rev):hover .kpt-l15-img {

    clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%) !important;

}

/* Rev / : 15% → 8% */

.kpt-l15-rev:hover .kpt-l15-img {

    clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%) !important;

}


/* ─── L17 hover: pilt laieneb ─── */

/* Even \ : 82% → 90% */

.kpt-l17-item:not(.kpt-l17-slash):hover .kpt-l17-img {

    clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%) !important;

}

/* Slash / : 82% → 90% */

.kpt-l17-slash:hover .kpt-l17-img {

    clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%) !important;

}


/* ─── L18 hover: pilt laieneb ─── */

/* Even / : 18% → 10% */

.kpt-l18-item:not(.kpt-l18-bs):hover .kpt-l18-img {

    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%) !important;

}

/* BS \ : 18% → 10% */

.kpt-l18-bs:hover .kpt-l18-img {

    clip-path: polygon(0 0, 100% 0, 100% 100%, 10% 100%) !important;

}


/* ─── Mobiil: touch-seadmetel hover efektid maha ─── */

@media (max-width: 800px) {

    .kpt-l15-item:hover .kpt-l15-img,
    .kpt-l15-rev:hover .kpt-l15-img,
    .kpt-l17-item:hover .kpt-l17-img,
    .kpt-l17-slash:hover .kpt-l17-img,
    .kpt-l18-item:hover .kpt-l18-img,
    .kpt-l18-bs:hover .kpt-l18-img {

        clip-path: none !important;

    }

}



/* ═══════════════════════════════════════════════════════════

   DISAINIVAATUR — vasakpoolne sidebar
   position:fixed left:0 → libiseb sisse/välja, Divi-sõbralik

═══════════════════════════════════════════════════════════ */


/* Sidebar wrapper: libiseb vasakust äärest välja */
.kpt-pb {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 200px !important;
    z-index: 9000 !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-family: 'Nunito', sans-serif !important;
}

.kpt-pb.is-hidden {
    transform: translateX(-200px) !important;
}

/* Toggle tab — nähtav alati, libiseb koos sidebariga */
.kpt-pb-toggle {
    position: absolute !important;
    right: -40px !important;
    top: 40% !important;
    transform: translateY(-50%) !important;
    width: 40px !important;
    height: 76px !important;
    background: #ffffff !important;
    border: 2px solid #e2e8f0 !important;
    border-left: none !important;
    border-radius: 0 12px 12px 0 !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    box-shadow: 4px 0 18px rgba(3,46,104,0.16) !important;
    padding: 0 !important;
    font-family: inherit !important;
    transition: background 0.18s, box-shadow 0.18s !important;
}

.kpt-pb-toggle:hover {
    background: #f8fafc !important;
    box-shadow: 5px 0 22px rgba(3,46,104,0.22) !important;
}

.kpt-pb-arrow {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #032e68 !important;
    line-height: 1 !important;
}

.kpt-pb-toggle-emoji {
    font-size: 15px !important;
    line-height: 1 !important;
}

/* Sidebari paneel */
.kpt-pb-panel {
    position: absolute !important;
    inset: 0 !important;
    background: #ffffff !important;
    border-right: 1px solid #e2e8f0 !important;
    box-shadow: 4px 0 28px rgba(3,46,104,0.14) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Päis */
.kpt-pb-head {
    padding: 14px 14px 11px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #032e68 !important;
    border-bottom: 3px solid #e95e23 !important;
    flex-shrink: 0 !important;
    background: #fff !important;
}

/* Sektsiooni silt */
.kpt-pb-lbl-row {
    font-size: 9.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #94a3b8 !important;
    padding: 8px 12px 4px !important;
    flex-shrink: 0 !important;
}

/* Keritav paigutuste nimekiri */
.kpt-pb-layouts {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 2px 8px 6px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    scrollbar-width: thin !important;
    scrollbar-color: #cbd5e1 transparent !important;
}

.kpt-pb-layouts::-webkit-scrollbar { width: 4px !important; }
.kpt-pb-layouts::-webkit-scrollbar-thumb { background: #cbd5e1 !important; border-radius: 4px !important; }

/* Paigutuse nupp: miniatuur + tekst kõrvuti */
.kpt-pb-lay-btn {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #f8fafc !important;
    border: 2px solid transparent !important;
    border-radius: 6px !important;
    padding: 5px 7px !important;
    cursor: pointer !important;
    text-align: left !important;
    width: 100% !important;
    flex-shrink: 0 !important;
    font-family: inherit !important;
    transition: all 0.18s !important;
}

.kpt-pb-lay-btn:hover {
    background: #f1f5fb !important;
    border-color: #cbd5e1 !important;
}

.kpt-pb-lay-btn.is-active {
    background: #fff3ef !important;
    border-color: #e95e23 !important;
}

.kpt-pb-thumb {
    flex-shrink: 0 !important;
    width: 50px !important;
    height: 36px !important;
    overflow: hidden !important;
    border-radius: 3px !important;
    pointer-events: none !important;
    display: block !important;
}

.kpt-pb-thumb svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.kpt-pb-lay-name {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    line-height: 1.25 !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.kpt-pb-lay-btn.is-active .kpt-pb-lay-name {
    color: #e95e23 !important;
    font-weight: 700 !important;
}

/* Värvide sektsioon */
.kpt-pb-colors-wrap {
    border-top: 1px solid #f1f5f9 !important;
    flex-shrink: 0 !important;
}

.kpt-pb-colors {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 2px 8px 8px !important;
}

.kpt-pb-col-btn {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #f8fafc !important;
    border: 2px solid transparent !important;
    border-radius: 20px !important;
    padding: 6px 12px !important;
    cursor: pointer !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    color: #334155 !important;
    text-align: left !important;
    transition: all 0.18s !important;
    line-height: 1 !important;
}

.kpt-pb-col-btn:hover {
    background: #f1f5fb !important;
    border-color: #cbd5e1 !important;
}

.kpt-pb-col-btn.is-active {
    background: #fff3ef !important;
    border-color: #e95e23 !important;
    color: #e95e23 !important;
}

.kpt-pb-swatch {
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(0,0,0,0.1) !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
}

/* Jalus: valik + kopeeri */
.kpt-pb-foot {
    border-top: 1px solid #f1f5f9 !important;
    padding: 10px 10px 14px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.kpt-pb-sel-info {
    font-size: 10px !important;
    color: #94a3b8 !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}

.kpt-pb-sel-info strong {
    display: block !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #032e68 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin-top: 3px !important;
}

.kpt-pb-copy-btn {
    background: #e95e23 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 9px 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    cursor: pointer !important;
    text-align: center !important;
    width: 100% !important;
    transition: background 0.18s !important;
    letter-spacing: 0.03em !important;
    line-height: 1 !important;
    box-shadow: 0 2px 8px rgba(233,94,35,0.25) !important;
}

.kpt-pb-copy-btn:hover { background: #cf4f1a !important; }

/* Ruumi aluse jaoks eemaldame */
body:has(.kpt-pb) .kpt-wrap { padding-bottom: 0 !important; }

@media (max-width: 480px) {
    .kpt-pb { width: 180px !important; }
    .kpt-pb.is-hidden { transform: translateX(-180px) !important; }
    .kpt-pb-toggle { right: -36px !important; width: 36px !important; }
}

/* ═══════════════════════════════════════════════════════════

   VÄRVITEEMAD — kpt-wrap saab JS klassi kpt-theme-*

═══════════════════════════════════════════════════════════ */


/* ── Oranž teema: navy → oranž ── */

.kpt-wrap.kpt-theme-orange .kpt-navy {

    background-color: #e95e23 !important;

}

.kpt-wrap.kpt-theme-orange .kpt-l9-content,
.kpt-wrap.kpt-theme-orange .kpt-l11-item:not(.kpt-l19-item):not(.kpt-l20-item):not(.kpt-l21-item):not(.kpt-l22-item),
.kpt-wrap.kpt-theme-orange .kpt-l13-item,
.kpt-wrap.kpt-theme-orange .kpt-l15-item,
.kpt-wrap.kpt-theme-orange .kpt-l17-item:not(.kpt-l23-item):not(.kpt-l24-item):not(.kpt-l25-item):not(.kpt-l26-item),
.kpt-wrap.kpt-theme-orange .kpt-l18-item {

    background-color: #e95e23 !important;

}

/* Aktsentriribad → navy kontrastiks */

.kpt-wrap.kpt-theme-orange .kpt-l1-accent,
.kpt-wrap.kpt-theme-orange .kpt-l8-accent,
.kpt-wrap.kpt-theme-orange .kpt-l12-accent,
.kpt-wrap.kpt-theme-orange .kpt-l14-accent,
.kpt-wrap.kpt-theme-orange .kpt-l15-accent,
.kpt-wrap.kpt-theme-orange .kpt-l16-accent {

    background-color: #032e68 !important;

}


/* ── Vahelduv teema: paaris read → oranž ── */

.kpt-wrap.kpt-theme-alt .kpt-l17-item:not(.kpt-l23-item):not(.kpt-l24-item):not(.kpt-l25-item):not(.kpt-l26-item):nth-child(even),
.kpt-wrap.kpt-theme-alt .kpt-l18-item:nth-child(even),
.kpt-wrap.kpt-theme-alt .kpt-l15-item:nth-child(even) {

    background-color: #e95e23 !important;

}

.kpt-wrap.kpt-theme-alt .kpt-l17-item:not(.kpt-l23-item):not(.kpt-l24-item):not(.kpt-l25-item):not(.kpt-l26-item):nth-child(even) .kpt-navy,
.kpt-wrap.kpt-theme-alt .kpt-l18-item:nth-child(even) .kpt-navy {

    background-color: #e95e23 !important;

}

.kpt-wrap.kpt-theme-alt .kpt-l15-item:nth-child(even) .kpt-l15-accent {

    background-color: #032e68 !important;

}