/* P80 Smart City – WordPress layer on top of design.css */
html{scroll-behavior:smooth;scroll-padding-top:16px}
*,*::before,*::after{box-sizing:border-box}
.p80-root{overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column}
#main{flex:1 0 auto}
img{max-width:100%;height:auto}
.skip-link{position:absolute;left:-9999px;top:8px;z-index:100;background:#0B1F2A;color:#fff;padding:10px 16px;border-radius:8px}
.skip-link:focus{left:8px}
:focus-visible{outline:2px solid #0E7FC0;outline-offset:2px}
.navlink.is-current{color:#0B7F86;font-weight:500}

/* language switch (links instead of buttons) */
.lang-sw a{text-decoration:none;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;letter-spacing:.06em;color:#3E4F5F;min-width:44px;height:38px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;padding:0 10px}
.lang-sw a:hover{color:#0B7F86}
.lang-sw a.on{background-image:linear-gradient(135deg,#1E40AF,#0AA6A6);color:#FFFFFF}

/* vision bars */
.vp-bar{background:rgba(11,127,134,.15);transition:background .3s ease}
.vp-bar.on{background-image:linear-gradient(90deg,#1E40AF,#0AA6A6)}
#vp-desc,#vp-en,#vp-th{transition:opacity .2s ease}
.vp-fade{opacity:.15}

/* whole-card links */
.pf-link{display:block;text-decoration:none;color:inherit}
.stretched::after{content:"";position:absolute;inset:0;z-index:1}
.news-item .svc-link:hover .svc-go,.news-item:hover .svc-go{background-image:linear-gradient(135deg,#1E40AF,#0AA6A6);color:#FFFFFF;border-color:transparent}
.news-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* quote form notice */
.p80-notice{border-radius:14px;padding:12px 16px;font-size:15px;line-height:1.6}
.p80-notice.ok{background:#E6FAF5;color:#065F55;border:1px solid #99E6D5}
.p80-notice.err{background:#FFF1F1;color:#9B1C1C;border:1px solid #FCC}
.hp-field{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}

/* inner pages */
.wrap{max-width:1240px;margin:0 auto;padding-left:24px;padding-right:24px;width:100%}
.inner{padding-top:64px;padding-bottom:96px}
.page-hero{position:relative;overflow:hidden;isolation:isolate;color:#FFFFFF;background-color:#0B2A5C;background-image:radial-gradient(560px 380px at 85% 20%,rgba(10,166,166,.45),transparent 70%),radial-gradient(520px 360px at 5% 100%,rgba(10,166,166,.25),transparent 70%),linear-gradient(130deg,#0B1A4A 0%,#123E86 48%,#0A6E73 100%)}
.page-hero-net{position:absolute;z-index:-1;right:-80px;top:50%;transform:translateY(-50%);width:min(760px,90vw);height:auto;opacity:.45}
.page-hero-in{max-width:1240px;margin:0 auto;padding:72px 24px 80px;display:flex;flex-direction:column;gap:16px}
.page-hero h1{margin:0;overflow-wrap:anywhere;font-size:clamp(30px,4vw,52px);line-height:1.25;font-weight:600;max-width:900px}
.page-hero p{margin:0;max-width:720px;font-size:17px;line-height:1.8;color:#D6E8F5;font-weight:300}
.kicker{display:inline-flex;align-items:center;gap:10px;font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.16em;color:#A5F3FC}
.kicker-line{width:28px;height:2px;border-radius:1px;background-image:linear-gradient(90deg,#7DD3FC,#5EEAD4)}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:#BFD6EA}
.crumbs a{color:#E2EEF9;text-decoration:none}
.crumbs a:hover{color:#5EEAD4}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px}
.chips a{text-decoration:none;font-size:15px;color:#3E4F5F;border:1px solid rgba(11,127,134,.25);border-radius:999px;padding:8px 18px;min-height:40px;display:inline-flex;align-items:center;background:#FFFFFF}
.chips a:hover{border-color:#0FB5BA;color:#0B7F86}
.chips a.on{background-image:linear-gradient(135deg,#1E40AF,#0AA6A6);color:#FFFFFF;border-color:transparent}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:24px}
.p-card{position:relative;border:1px solid rgba(11,127,134,.14);border-radius:24px;overflow:hidden;background:#FFFFFF;display:flex;flex-direction:column}
.p-card-media{position:relative;aspect-ratio:16/10;overflow:hidden;background-image:linear-gradient(140deg,#1E40AF 0%,#0E7FC0 55%,#0AA6A6 100%)}
.p-card .chip{position:absolute;left:16px;top:16px;font-size:13px;color:#0B1F2A;background:#FFFFFF;border-radius:999px;padding:5px 12px;z-index:1}
.p-card-body{padding:22px 24px;display:flex;flex-direction:column;gap:10px;flex-grow:1}
.p-card-body .meta{font-family:'JetBrains Mono',monospace;font-size:12px;color:#5B6B7C}
.p-card-title{margin:0;font-size:20px;font-weight:600;line-height:1.45}
.p-card-body p{margin:0;font-size:15px;line-height:1.75;color:#5B6B7C;font-weight:300}
.p-card-body .svc-link{margin-top:auto;border-top:1px solid rgba(11,127,134,.12);padding-top:12px}

.pf-card{position:relative;overflow:hidden;border-radius:24px;min-height:320px;background-image:linear-gradient(170deg,#DCE6FF 0%,#D6F1EF 100%);box-shadow:0 24px 50px -36px rgba(30,64,175,.5)}
.pf-card-body{position:absolute;left:0;right:0;bottom:0;padding:22px 24px;display:flex;flex-direction:column;gap:6px;color:#FFFFFF}
.pf-kicker{font-family:'JetBrains Mono',monospace;font-size:12px;color:#A5F3FC;letter-spacing:.1em}
.pf-card-title{margin:0;font-size:21px;font-weight:500;line-height:1.35}
.pf-agency{font-size:15px;color:#D6E4F0;font-weight:300}

.p80-pager{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:48px}
.p80-pager .page-numbers{min-width:44px;height:44px;padding:0 14px;border-radius:999px;border:1px solid rgba(11,127,134,.25);display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:#0B1F2A;font-size:15px}
.p80-pager a.page-numbers:hover{border-color:#0FB5BA;color:#0B7F86}
.p80-pager .current{background-image:linear-gradient(135deg,#1E40AF,#0AA6A6);color:#fff;border-color:transparent}
.empty{text-align:center;color:#5B6B7C;font-weight:300;padding:48px 0;border:1px dashed rgba(11,127,134,.3);border-radius:24px}

/* single article / page / portfolio item
   NOTE: never style ".single" – WordPress puts that class on <body>. */
.p80-article{max-width:820px;margin:0 auto;padding:56px 24px 72px;width:100%}
.p80-cover{margin:-120px 0 48px;border-radius:24px;overflow:hidden;position:relative;z-index:2;background:#DCE6FF;box-shadow:0 40px 80px -40px rgba(11,26,74,.55)}
.p80-cover img{display:block;width:100%;height:auto;aspect-ratio:14/9;object-fit:cover}
.page-hero:has(+ .p80-article .p80-cover) .page-hero-in{padding-bottom:160px}
.prose{font-size:18px;line-height:1.9;color:#2B3B4B;font-weight:300;overflow-wrap:break-word}
.prose > *:first-child{margin-top:0}
.prose p{margin:0 0 1.3em}
.prose strong,.prose b{font-weight:500;color:#0B1F2A}
.prose h2,.prose h3,.prose h4{color:#0B1F2A;font-weight:600;line-height:1.4;margin:1.9em 0 .6em}
.prose h2{font-size:clamp(24px,2.6vw,30px);padding-left:16px;border-left:4px solid #0AA6A6}
.prose h3{font-size:clamp(20px,2.2vw,24px)}
.prose h4{font-size:19px}
.prose a{color:#0B6AA3;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(11,106,163,.35)}
.prose a:hover{color:#0B7F86;text-decoration-color:currentColor}
.prose img{max-width:100%;height:auto;border-radius:16px}
.prose figure{margin:2.2em 0}
.prose figure.wp-block-image img,.prose .wp-block-image img{width:100%}
.prose figcaption,.prose .wp-caption-text{font-size:14px;color:#5B6B7C;text-align:center;margin-top:10px}
.prose blockquote,.prose .wp-block-quote{margin:2.2em 0;padding:24px 28px;border:0;border-radius:20px;background:linear-gradient(135deg,rgba(30,64,175,.06),rgba(10,166,166,.08));color:#123E86;font-size:20px;font-weight:400;position:relative}
.prose blockquote p:last-child{margin-bottom:0}
.prose blockquote cite{display:block;margin-top:10px;font-size:14px;font-style:normal;color:#5B6B7C}
.prose ul,.prose ol{padding-left:1.4em;margin:0 0 1.3em}
.prose li{margin:.35em 0}
.prose ul li::marker{color:#0AA6A6}
.prose ol li::marker{color:#0E7FC0;font-weight:500}
.prose hr{border:0;height:1px;background:rgba(11,127,134,.18);margin:2.5em 0}
.prose table{width:100%;border-collapse:collapse;font-size:16px;margin:2em 0;display:block;overflow-x:auto}
.prose th,.prose td{border:1px solid rgba(11,127,134,.18);padding:10px 12px;text-align:left}
.prose th{background:#F4F8FF;font-weight:500;color:#0B1F2A}
.prose pre,.prose code{font-family:'JetBrains Mono',monospace;font-size:15px;background:#F4F8FF;border-radius:8px}
.prose code{padding:2px 6px}
.prose pre{padding:16px;overflow-x:auto}
.prose iframe,.prose video{max-width:100%;border-radius:16px}
.prose .wp-block-embed__wrapper iframe{width:100%;aspect-ratio:16/9;height:auto}
.prose .alignwide,.prose .alignfull{max-width:none}
.prose .wp-block-button__link{display:inline-flex;text-decoration:none;color:#fff;background-image:linear-gradient(110deg,#1E40AF 0%,#0E7FC0 55%,#0B9C9E 100%);border-radius:999px;padding:12px 24px}
.p80-article-foot{margin-top:56px;padding-top:24px;border-top:1px solid rgba(11,127,134,.14);display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
.p80-article-foot .chips{margin:0;width:100%}
.share{display:flex;gap:10px;align-items:center;font-size:15px;color:#5B6B7C}
.share a{text-decoration:none;color:#0B6AA3;border:1px solid rgba(11,127,134,.25);border-radius:999px;padding:6px 14px;min-height:40px;display:inline-flex;align-items:center}
.share a:hover{border-color:#0FB5BA;color:#0B7F86}
.related{padding-top:24px;padding-bottom:96px;border-top:1px solid rgba(11,127,134,.1)}
.related h2{font-size:clamp(24px,2.6vw,30px);font-weight:600;margin:48px 0 24px}
.facts{display:flex;flex-wrap:wrap;gap:16px;margin:0 0 32px;padding:0}
.facts div{flex:1 1 200px;border:1px solid rgba(11,127,134,.16);border-radius:16px;padding:14px 18px;background:#F7FAFF}
.facts dt{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;color:#5B6B7C;margin-bottom:4px}
.facts dd{margin:0;font-size:17px;font-weight:500}

.cta-band{border-radius:28px;padding:clamp(24px,4vw,48px);color:#FFFFFF;background-color:#123E86;background-image:radial-gradient(560px 380px at 85% 20%,rgba(10,166,166,.45),transparent 70%),linear-gradient(130deg,#0B1A4A 0%,#123E86 48%,#0A6E73 100%);display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;box-shadow:0 40px 80px -40px rgba(30,64,175,.6)}
.ghost-light{color:#FFFFFF !important;border-color:rgba(255,255,255,.45) !important;background:rgba(255,255,255,.06)}
.ghost-light:hover{border-color:#5EEAD4 !important}

/* WordPress core classes */
.alignleft{float:left;margin:0 1.5em 1em 0}.alignright{float:right;margin:0 0 1em 1.5em}.aligncenter{display:block;margin-left:auto;margin-right:auto}
.screen-reader-text{position:absolute !important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden}
.wp-caption-text{font-size:14px;color:#5B6B7C}
body.admin-bar .site-header{top:0}

@media (max-width:640px){
.inner{padding-top:40px;padding-bottom:64px}
.page-hero-in{padding:48px 20px 56px}
.prose{font-size:17px}
.p80-article{padding:40px 20px 56px}
.p80-cover{margin:-72px 0 32px;border-radius:18px}
.page-hero:has(+ .p80-article .p80-cover) .page-hero-in{padding-bottom:104px}
.cta-band .solid,.cta-band .ghost{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;scroll-behavior:auto !important}}

/* header on small screens */
.menu-btn [hidden]{display:none !important}
@media (max-width:640px){
.site-header > div{gap:10px !important;padding:12px 16px !important}
.lang-sw a{min-width:38px;padding:0 8px}
}
@media (max-width:420px){
.site-header > div > a:first-child{gap:8px !important}
.site-header > div > a:first-child img{width:40px !important;height:40px !important}
.brand-sub{font-size:9px !important;letter-spacing:.08em !important;white-space:nowrap}
.site-header .lang-sw a{min-width:34px;padding:0 6px;height:34px}
.site-header .menu-btn{width:40px;height:40px}
}

/* phone number in the contact box: fit small screens */
@media (max-width:640px){
.cta-tel{height:auto !important;gap:14px !important;max-width:100%}
.cta-tel > span:first-child{flex-shrink:0;width:46px !important;height:46px !important}
.cta-tel > span:last-child{width:auto !important;height:auto !important;min-width:0;font-size:clamp(26px,8vw,38px) !important;white-space:nowrap}
.cta-tel > span:last-child > span{font-size:16px !important}
}

/* mobile: every button full width */
@media (max-width:640px){
.p80-root .solid:not(.hdr-cta),.p80-root .ghost{width:100%;max-width:100%;align-self:stretch;justify-content:center;text-align:center;box-sizing:border-box;flex:1 1 100%}
}
@media (max-width:340px){.brand-sub{display:none !important}}

.page-hero--narrow .page-hero-in{max-width:868px}
.page-hero--narrow h1{font-size:clamp(28px,3.4vw,44px)}