/* /interoperability/ in the Kurrantly News "news desk" look (.iop2). */
.iop2{--navy:#1A2540;--orange:#FE6C35;--ink:#14181F;--line:#E3E6EC;background:#fff!important}
.iop2>.container{padding-top:0!important;overflow:visible}
.iop2 .container{overflow-x:visible}
/* hero: navy over the street-lighting photo */
.iop2 .iop2-hero{position:relative;margin:0 calc(50% - 50vw) 2.4rem!important;width:100vw;max-width:none;padding:3rem max(24px,calc(50vw - 620px)) 2.6rem;color:#fff;background:var(--navy);overflow:hidden}
.iop2 .iop2-hero::before{content:"";position:absolute;inset:0;background:var(--iop-bg) center 60%/cover no-repeat}
.iop2 .iop2-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(26,37,64,.97) 0%,rgba(26,37,64,.88) 50%,rgba(26,37,64,.55) 100%)}
.iop2 .iop2-hero>*{position:relative;z-index:1}
.iop2 h1.display-4{color:#fff!important;font-weight:800;letter-spacing:-.02em;font-size:clamp(2.4rem,4.2vw,3.6rem)}
.iop2 h1.display-4::before{content:"Kurrant · Smart city standards";display:block;font-size:.74rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:.6rem}
.iop2 .iop2-hero h2{color:var(--orange)!important;font-weight:800}
.iop2 .iop2-hero .lead{color:#D5DBEA;font-size:1.08rem;line-height:1.6}
.iop2 #lottie-interop{filter:drop-shadow(0 0 18px rgba(254,108,53,.35))}
/* projects panel */
.iop2 .card.k-bklightblue{background:#F7F8FC!important;border:1px solid var(--line)!important;box-shadow:none!important}
/* section headings: black rule like the news pages */
.iop2 h2.h3.k-textorange{color:var(--ink)!important;font-weight:800;font-size:1.5rem;letter-spacing:-.01em;border-top:3px solid var(--ink);padding-top:.8rem!important;margin-left:0!important}
/* consortium logo cards */
.iop2 .logo-container{box-shadow:none!important;border:1px solid var(--line);border-radius:10px;transition:border-color .2s,transform .2s}
.iop2 .logo-container:hover{border-color:var(--orange);transform:translateY(-3px)}
.iop2 .logo-subtitle{color:#4B5563!important}
/* consortium detail cards */
.iop2 .card.talqcard,.iop2 .card.zhagacard,.iop2 .card.ucificard{background:#fff!important;border:1px solid var(--line)!important;border-radius:10px!important;box-shadow:none!important;margin-bottom:1.6rem}
.iop2 .dali-logo,.iop2 .talq-logo,.iop2 .zhaga-logo{max-width:260px!important;height:auto;margin:0 auto 1.4rem!important;display:block}
.iop2 .ucificard img.talq-logo2{max-width:220px!important;width:220px!important}
.iop2 .card.talqcard h3:not(.card-title),.iop2 .card.zhagacard h3:not(.card-title),.iop2 .card.ucificard h3:not(.card-title){font-size:1.35rem;font-weight:800;color:var(--navy);letter-spacing:-.005em;line-height:1.25}
.iop2 .card p{color:#3A4150;line-height:1.65}
/* RESOURCES label */
.iop2 h3.mt-4[style],.iop2 h3.mt-4.mb-3[style]{color:var(--orange)!important;font-size:.78rem!important;font-weight:800;letter-spacing:.14em;border-top:1px solid var(--line);padding-top:1.2rem;margin-top:1.8rem!important}
/* buttons: one consistent style */
.iop2 .btn.button{background:var(--orange)!important;color:#fff!important;border:0!important;border-radius:999px!important;padding:.55rem 1.15rem!important;font-weight:700;display:inline-flex;align-items:center;gap:.45rem}
.iop2 .btn.button:hover{background:#F0570C!important}
.iop2 .btn.button.btn-k-black{background:var(--navy)!important}
.iop2 .btn.button img{filter:brightness(0) invert(1)}
/* resource cards */
.iop2 .image-wrapper-inter img,.iop2 .video-item img,.iop2 .video-item-dali img,.iop2 .zhaga-video-item img{border-radius:6px!important}
.iop2 .card-title.h6{font-weight:700!important;color:var(--ink)!important;line-height:1.35}
.iop2 a:hover .card-title.h6{color:#C2410C!important}
body{overflow-x:hidden}
/* live panel block reuses the news-desk styles */
.iop2 .kn2{margin:0 0 2.4rem}
.iop2 .kn2 .kn2-lp{margin-top:0}
/* "Visit website" in each standard's own colour */
.iop2 .btn.button.btn-dali-blue{background:#017EB6!important}
.iop2 .btn.button.btn-dali-blue:hover{background:#036C9C!important}
.iop2 .btn.button.btn-talq-red{background:#CD1542!important}
.iop2 .btn.button.btn-talq-red:hover{background:#A80F35!important}
.iop2 .btn.button.btn-ucifi-green{background:#2BB09F!important}
.iop2 .btn.button.btn-ucifi-green:hover{background:#228F81!important}
.iop2 .btn.button.btn-zhaga-blue{background:linear-gradient(90deg,#1F1BFF 0%,#7A00FF 55%,#D6005C 100%)!important}
.iop2 .btn.button.btn-zhaga-blue:hover{filter:brightness(.9)}
/* sections with only a few resources: show them two per row, larger */
/* closing "Seeking guidance" card: navy over the lighting photo, like the hero */
.iop2 .iop2-cta{position:relative;overflow:hidden;background:#1A2540!important;box-shadow:none!important;border-radius:10px!important;padding:3rem 2rem!important;color:#fff!important}
.iop2 .iop2-cta::before{content:"";position:absolute;inset:0;background:var(--iop-bg) center 60%/cover no-repeat;opacity:.45}
.iop2 .iop2-cta::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,37,64,.82),rgba(26,37,64,.95))}
.iop2 .iop2-cta>*{position:relative;z-index:1}
.iop2 .iop2-cta p.k-textblue{color:#fff!important;font-weight:800!important;font-size:1.75rem!important;letter-spacing:-.01em}
.iop2 .iop2-cta p.k-textblue::before{content:"Work with Kurrant";display:block;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:#FE6C35;margin-bottom:.6rem}
.iop2 .iop2-cta p.fs-5{color:#D5DBEA!important;font-size:1.05rem!important;line-height:1.6}
.iop2 .iop2-cta .lc-block>.btn-k-orange{background:#FE6C35!important;border:0!important;color:#fff!important;border-radius:999px!important;font-weight:700;padding:.65rem 1.4rem!important}
.iop2 .iop2-cta .lc-block>.btn-k-orange:hover{background:#F0570C!important}
/* "Our projects": navy title, orange arrows */
.iop2 .project-template .projects-title h2{color:var(--navy)!important;font-weight:800;letter-spacing:-.01em}
.iop2 .project-template .projects-title h2::first-line{color:var(--navy)}
.iop2 .project-template .projects-streetlighting path,.iop2 .project-template .projects-streetlighting [fill="#5F80CF"]{fill:var(--orange)!important}
/* project cards: equal height, titles clamped inside the card */
.iop2 .project-template .swiper-slide{height:auto}
.iop2 .project-template .swiper-slide .card{height:100%;overflow:hidden}
.iop2 .project-template .card-body{padding:.9rem 1rem 1.1rem}
.iop2 .project-template .card-title{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;margin:0}
.iop2 .project-template .swiper{padding-bottom:.4rem}
/* resources: 4 per row only when there is room; 3 on laptops, 2 on tablets */
@media (max-width:1399px){.iop2 .row>.col-md-3.video-item-dali,.iop2 .row>.col-md-3.zhaga-video-item,.iop2 #talq .row>.col-md-3{flex:0 0 33.333%;max-width:33.333%}}
@media (max-width:991px){.iop2 .row>.col-md-3.video-item-dali,.iop2 .row>.col-md-3.zhaga-video-item,.iop2 #talq .row>.col-md-3{flex:0 0 50%;max-width:50%}}
/* same 16:9 crop for every resource thumbnail */
.iop2 .image-wrapper-inter img.img-fluid{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center!important}
@media (max-width:575px){.iop2 .row>.col-md-3.video-item-dali,.iop2 .row>.col-md-3.zhaga-video-item,.iop2 #talq .row>.col-md-3{flex:0 0 100%;max-width:100%}}
/* thumbnails always fill their column (wrappers were inline-block = image's own size) */
.iop2 .image-container-inter,.iop2 .image-wrapper-inter{display:block!important;width:100%!important}
.iop2 .image-wrapper-inter>img.img-fluid{display:block;width:100%!important;max-width:none!important;height:auto;aspect-ratio:16/9!important;object-fit:cover!important;object-position:center!important}