/* publish-fix v6 */
@media (max-width:980px){
  body{overflow-x:hidden}
  .app{margin:0; border-radius:0; border-left:0; border-right:0}
  .topbar{position:sticky; top:0; z-index:120}
  .nav{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"brand toggle" "menu menu";
    align-items:center;
    gap:12px;
    padding:14px 14px !important;
  }
  .brand{grid-area:brand; min-width:0 !important; overflow:hidden}
  .brand>div:last-child{min-width:0}
  .brand b{font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .brand span{font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .logo{width:42px; height:42px; flex:0 0 42px}
  .navtoggle{
    grid-area:toggle;
    display:inline-flex !important;
    align-items:center; justify-content:center;
    min-height:46px; padding:10px 16px !important;
    border-radius:999px;
    border:1px solid var(--line);
    background:#fff; font-weight:700;
    position:relative; z-index:130;
  }
  .navlinks,.actions{
    display:none !important;
    grid-area:menu;
    width:100%;
  }
  .nav.nav-open .navlinks,
  .nav.nav-open .actions{
    display:flex !important;
    position:relative;
    z-index:125;
  }
  .nav.nav-open .navlinks{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    margin-top:8px;
    padding:12px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px 18px 0 0;
    box-shadow:0 18px 40px rgba(11,13,18,.08);
  }
  .nav.nav-open .navlinks a{
    display:block;
    padding:12px 14px;
    background:var(--chip2);
    border-radius:14px;
    font-size:14px;
  }
  .nav.nav-open .actions{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding:0 12px 12px;
    background:#fff;
    border:1px solid var(--line);
    border-top:0;
    border-radius:0 0 18px 18px;
    box-shadow:0 18px 40px rgba(11,13,18,.08);
  }
  .nav.nav-open .actions .btn{width:100%; justify-content:center}
}

.pb2-wrap{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:140;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:12px;
  pointer-events:none;
}
.pb2-btn,.pb2-panel,.pb2-panel *{pointer-events:auto}
.pb2-btn{
  min-width:300px; max-width:min(92vw,340px);
  border:1px solid rgba(255,255,255,.24);
  background:linear-gradient(135deg, rgba(11,13,18,.98), rgba(35,49,74,.96));
  color:#fff;
  border-radius:22px;
  padding:14px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  box-shadow:0 20px 60px rgba(8,12,20,.28);
}
.pb2-btn strong{display:block; font-size:14px; line-height:1.15}
.pb2-btn small{display:block; font-size:12px; color:rgba(255,255,255,.74); margin-top:4px}
.pb2-dot{width:10px; height:10px; border-radius:50%; background:#6effb0; box-shadow:0 0 0 6px rgba(110,255,176,.14)}
.pb2-panel{
  width:min(400px, calc(100vw - 24px));
  max-height:min(72vh, 650px);
  display:none;
  flex-direction:column;
  overflow:hidden;
  background:rgba(255,255,255,.98);
  border:1px solid rgba(11,13,18,.08);
  border-radius:26px;
  box-shadow:0 36px 100px rgba(7,12,22,.18);
}
.pb2-wrap.open .pb2-panel{display:flex}
.pb2-head{
  display:flex; justify-content:space-between; align-items:flex-start; gap:14px;
  padding:16px; border-bottom:1px solid var(--line);
  background:radial-gradient(700px 220px at 100% 0%, rgba(72,126,255,.14), transparent 50%), linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.9));
}
.pb2-head h3{margin:8px 0 4px; font-size:18px}
.pb2-head p{margin:0; color:var(--muted); font-size:13px; line-height:1.45}
.pb2-badge{display:inline-flex; padding:6px 10px; border-radius:999px; background:#eef4ff; border:1px solid rgba(72,126,255,.18); color:#294c96; font-size:11px; font-weight:700}
.pb2-close{width:44px; height:44px; border-radius:16px; border:1px solid var(--line); background:#fff; font-size:28px; line-height:1}
.pb2-stream{padding:14px; overflow:auto; display:flex; flex-direction:column; gap:12px}
.pb2-msg{padding:14px 16px; border-radius:20px; max-width:100%; line-height:1.55}
.pb2-msg.bot{background:#fff; border:1px solid var(--line)}
.pb2-msg.user{background:#0b0d12; color:#fff; margin-left:auto}
.pb2-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
.pb2-chip,.pb2-link{
  border:1px solid var(--line); background:#fff; border-radius:999px; padding:11px 14px;
  font-size:14px; display:inline-flex; align-items:center; justify-content:center;
}
.pb2-chip.primary,.pb2-link.primary{background:#0b0d12; color:#fff; border-color:#0b0d12}
.pb2-compose{display:flex; gap:10px; padding:12px; border-top:1px solid var(--line); background:#fff}
.pb2-compose input{flex:1; min-width:0; font-size:16px}
.pb2-send{padding:12px 16px; border-radius:16px; background:#0b0d12; color:#fff; border:1px solid #0b0d12}
@media (max-width:980px){
  .pb2-wrap{left:10px; right:10px; bottom:calc(12px + var(--kb-offset, 0px)); align-items:stretch}
  .pb2-btn{width:100%; max-width:none; min-width:0}
  .pb2-panel{width:100%; max-height:calc(100svh - 90px - var(--kb-offset,0px)); border-radius:24px}
}
@media (max-width:640px){
  .pb2-panel{max-height:calc(100svh - 84px - var(--kb-offset,0px))}
  .pb2-head{padding:14px}
  .pb2-head h3{font-size:17px}
  .pb2-head p{font-size:12px}
  .pb2-stream{padding:12px}
  .pb2-compose{padding:10px}
}
.thumb[data-cover]{background-size:cover !important; background-position:center !important}

/* avatar + blog images v7 */
.pb2-avatar{
 width:42px;height:42px;border-radius:50%;
 background:url('https://basaao.com/wp-content/uploads/2026/03/chatbot-Arohi.webp') center/cover no-repeat;
 box-shadow:0 6px 18px rgba(0,0,0,.15);
 animation:pb2float 3.6s ease-in-out infinite;
}
@keyframes pb2float{
 0%{transform:translateY(0)}
 50%{transform:translateY(-4px)}
 100%{transform:translateY(0)}
}

.pb2-head{display:flex;gap:12px;align-items:flex-start}


/* mobile menu cleanup v8 */
@media (max-width:980px){
  .nav.nav-open .navlinks,
  .nav.nav-open .actions{
    width:100%;
    margin:0;
  }
  .nav.nav-open .navlinks{
    display:grid !important;
    grid-template-columns:1fr;
    gap:10px;
    padding:12px;
    border-radius:18px 18px 0 0;
  }
  .nav.nav-open .actions{
    display:grid !important;
    grid-template-columns:1fr;
    gap:10px;
    padding:0 12px 12px;
    border-radius:0 0 18px 18px;
  }
  .nav.nav-open .navlinks a,
  .nav.nav-open .actions .btn,
  .nav.nav-open .actions a,
  .nav.nav-open .actions button{
    width:100% !important;
    min-width:0 !important;
    display:flex !important;
    align-items:center;
    justify-content:center;
    margin:0 !important;
    text-align:center;
  }
  .nav.nav-open .navlinks a{
    justify-content:flex-start;
    min-height:48px;
    padding:12px 16px !important;
    background:#f5f7fb !important;
    border:1px solid var(--line);
    border-radius:14px;
  }
  .nav.nav-open .actions .btn,
  .nav.nav-open .actions a,
  .nav.nav-open .actions button{
    min-height:48px;
    border-radius:999px !important;
  }
}

/* blog readability v8 */
.blog-content, article .content, .prose, article{
  line-height:1.8;
}
.blog-key-takeaways{
  padding:16px 18px;
  background:#f7fafc;
  border:1px solid var(--line);
  border-radius:18px;
  margin:18px 0 22px;
}
.blog-key-takeaways h3{
  margin:0 0 10px;
  font-size:18px;
}
.blog-key-takeaways ul{
  margin:0;
  padding-left:18px;
}



/* mobile menu normalization v9 */
@media (max-width:980px){
  .nav{
    align-items:start !important;
  }
  .nav.nav-open .navlinks,
  .nav.nav-open .actions{
    box-sizing:border-box;
  }
  .nav.nav-open .navlinks{
    margin-top:10px !important;
    padding:12px !important;
    background:#fff !important;
    border:1px solid var(--line) !important;
    border-bottom:0 !important;
    border-radius:18px 18px 0 0 !important;
  }
  .nav.nav-open .actions{
    margin-top:0 !important;
    padding:12px !important;
    background:#fff !important;
    border:1px solid var(--line) !important;
    border-top:1px dashed rgba(11,13,18,.08) !important;
    border-radius:0 0 18px 18px !important;
  }
  .nav.nav-open .navlinks a{
    min-height:46px !important;
    background:#f5f7fb !important;
    border:1px solid var(--line) !important;
    border-radius:14px !important;
  }
  .nav.nav-open .actions .btn,
  .nav.nav-open .actions a,
  .nav.nav-open .actions button{
    min-height:48px !important;
    width:100% !important;
    border-radius:999px !important;
  }
  .nav.nav-open .actions .btn + .btn,
  .nav.nav-open .actions a + a,
  .nav.nav-open .actions button + button,
  .nav.nav-open .actions .btn + a,
  .nav.nav-open .actions a + .btn{
    margin-top:10px !important;
  }
  .nav.nav-open .navlinks::after{
    content:"Quick actions";
    display:block;
    margin-top:10px;
    padding:2px 2px 0;
    color:var(--muted);
    font-size:12px;
    font-weight:700;
    letter-spacing:.02em;
  }
  .nav.nav-open .actions{
    position:relative;
  }
}



/* mobile nav overlap fix v10 */
@media (max-width:980px){
  .nav{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-areas:
      "brand toggle"
      "navlinks navlinks"
      "actions actions" !important;
    align-items:center !important;
    row-gap:12px !important;
  }
  .brand{grid-area:brand !important;}
  .navtoggle{grid-area:toggle !important; align-self:start;}
  .navlinks{grid-area:navlinks !important;}
  .actions{grid-area:actions !important;}

  .nav.nav-open .navlinks,
  .nav.nav-open .actions{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    margin:0 !important;
    clear:both !important;
    position:relative !important;
    inset:auto !important;
    transform:none !important;
  }

  .nav.nav-open .navlinks{
    gap:10px !important;
    padding:12px !important;
    background:#fff !important;
    border:1px solid var(--line) !important;
    border-radius:18px !important;
    box-shadow:none !important;
  }

  .nav.nav-open .actions{
    gap:10px !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }

  .nav.nav-open .navlinks::after{
    content:none !important;
    display:none !important;
  }

  .nav.nav-open .navlinks a{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    width:100% !important;
    min-height:48px !important;
    margin:0 !important;
    padding:12px 16px !important;
    background:#f5f7fb !important;
    border:1px solid var(--line) !important;
    border-radius:14px !important;
  }

  .nav.nav-open .actions .btn,
  .nav.nav-open .actions a,
  .nav.nav-open .actions button{
    display:flex !important;
    width:100% !important;
    min-height:48px !important;
    margin:0 !important;
    justify-content:center !important;
    border-radius:999px !important;
  }
}


/* blog full content v11 */
.blog-content, .blog-article, article, .prose{line-height:1.85}
.blog-content h3{margin-top:24px;font-size:22px}
.blog-content .desc{font-size:18px;color:var(--muted)}
.blog-content .seo{margin:16px 0 20px;padding:14px 16px;background:#f7f9fc;border:1px solid var(--line);border-radius:18px}
.blog-content .faq p{margin:12px 0}
.blog-content .internal-links{margin-top:24px;padding:18px;background:#f7fafc;border:1px solid var(--line);border-radius:18px}

/* chatbot avatar v13 */
.pb2-avatar{
width:44px;
height:44px;
border-radius:50%;
background:url('https://basaao.com/wp-content/uploads/2026/03/chatbot-Arohi.webp') center/cover no-repeat;
animation:botFloat 3.5s ease-in-out infinite;
box-shadow:0 8px 22px rgba(0,0,0,.18);
}

@keyframes botFloat{
0%{transform:translateY(0)}
50%{transform:translateY(-4px)}
100%{transform:translateY(0)}
}

.pb2-head{display:flex;gap:12px;align-items:flex-start}


/* real chatbot avatar pulse v15 */
.chatbot-avatar{
  width:42px;
  height:42px;
  border-radius:50%;
  background:url('https://basaao.com/wp-content/uploads/2026/03/chatbot-Arohi.webp') center/cover no-repeat;
  position:relative;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
  flex:0 0 42px;
  margin-right:10px;
}
.chatbot-avatar::after{
  content:'';
  position:absolute;
  right:-2px;
  bottom:-2px;
  width:10px;
  height:10px;
  background:#22c55e;
  border-radius:50%;
  border:2px solid #fff;
}
.chatbot-avatar::before{
  content:'';
  position:absolute;
  right:-4px;
  bottom:-4px;
  width:16px;
  height:16px;
  background:#22c55e;
  border-radius:50%;
  opacity:.6;
  animation:chatbotPulse 1.8s infinite;
}
@keyframes chatbotPulse{
  0%{transform:scale(.6);opacity:.8}
  70%{transform:scale(1.6);opacity:0}
  100%{opacity:0}
}
.chatbot-info{display:flex;flex-direction:column;min-width:0}
.chatbot-status{font-size:12px;color:#22c55e;font-weight:600;display:block;margin:2px 0 1px}
.pb2-head{align-items:flex-start}
.pb2-head > div:first-child{display:flex;gap:10px;align-items:flex-start;min-width:0}


/* human chat cta v16 */
.chatbot-cta{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  background:linear-gradient(135deg, #0b0d12, #192132);
  color:#fff;
  padding:14px 16px;
  border-radius:999px;
  cursor:pointer;
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease;
  box-shadow:0 14px 34px rgba(7,12,22,.24);
  border:1px solid rgba(255,255,255,.08);
}
.chatbot-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 42px rgba(7,12,22,.30);
}
.chatbot-cta-avatar{
  width:40px;
  height:40px;
  border-radius:50%;
  background:url('https://basaao.com/wp-content/uploads/2026/03/chatbot-Arohi.webp') center/cover no-repeat;
  position:relative;
  flex:0 0 40px;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.chatbot-cta-avatar::after{
  content:'';
  position:absolute;
  right:-2px;
  bottom:-2px;
  width:10px;
  height:10px;
  background:#22c55e;
  border-radius:50%;
  border:2px solid #0b0d12;
}
.chatbot-cta-avatar::before{
  content:'';
  position:absolute;
  right:-4px;
  bottom:-4px;
  width:16px;
  height:16px;
  background:#22c55e;
  border-radius:50%;
  opacity:.55;
  animation:chatCtaPulse 1.8s infinite;
}
@keyframes chatCtaPulse{
  0%{transform:scale(.6);opacity:.85}
  70%{transform:scale(1.6);opacity:0}
  100%{opacity:0}
}
.chatbot-cta-text{
  display:flex;
  flex-direction:column;
  min-width:0;
  text-align:left;
}
.chatbot-cta-text strong{
  font-size:14px;
  line-height:1.15;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.chatbot-cta-text span{
  font-size:12px;
  color:rgba(255,255,255,.74);
  margin-top:4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.chatbot-cta-action{
  margin-left:auto;
  background:#22c55e;
  color:#fff;
  font-size:13px;
  font-weight:700;
  line-height:1;
  padding:9px 13px;
  border-radius:999px;
  white-space:nowrap;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
@media (max-width:640px){
  .chatbot-cta{padding:13px 14px; gap:10px;}
  .chatbot-cta-avatar{width:36px;height:36px;flex-basis:36px;}
  .chatbot-cta-text strong{font-size:13px;}
  .chatbot-cta-text span{font-size:11px;}
  .chatbot-cta-action{padding:8px 11px; font-size:12px;}
}


/* mobile nav + slim chat cta v17 */
@media (max-width:980px){
  .navtoggle,
  .navlinks a,
  .actions a,
  .actions button,
  .actions .btn{
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .nav.nav-open .navlinks,
  .nav.nav-open .actions{
    position: relative !important;
    z-index: 120 !important;
  }
}

/* slim chatbot CTA */
.chatbot-cta{
  overflow:hidden;
}
@media (max-width:768px){
  #chatNow{
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }
  .chatbot-cta{
    gap:10px !important;
    padding:10px 12px !important;
    border-radius:24px !important;
    min-height:58px !important;
  }
  .chatbot-cta-avatar{
    width:34px !important;
    height:34px !important;
    flex-basis:34px !important;
  }
  .chatbot-cta-text{
    min-width:0 !important;
    flex:1 1 auto !important;
  }
  .chatbot-cta-text strong{
    font-size:13px !important;
    line-height:1.1 !important;
  }
  .chatbot-cta-text span{
    font-size:11px !important;
    line-height:1.15 !important;
    margin-top:3px !important;
  }
  .chatbot-cta-action{
    margin-left:0 !important;
    font-size:12px !important;
    padding:7px 10px !important;
    flex:0 0 auto !important;
  }
}


/* mobile menu reopen fix v18 */
@media (max-width:980px){
  .nav.nav-open .navlinks,
  .nav.nav-open .actions{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }
  .navlinks, .actions{
    transition:none !important;
  }
}


/* bottom chat CTA responsive + clickable v19 */
#chatNow{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  position:relative !important;
  z-index:80 !important;
}
#chatNow .chatbot-cta{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}
@media (max-width:768px){
  #chatNow{
    margin:0 !important;
    padding:0 !important;
  }
  #chatNow .chatbot-cta{
    min-height:56px !important;
    border-radius:20px !important;
    padding:10px 12px !important;
    gap:10px !important;
  }
  #chatNow .chatbot-cta-avatar{
    width:34px !important;
    height:34px !important;
    flex:0 0 34px !important;
  }
  #chatNow .chatbot-cta-text{
    min-width:0 !important;
    flex:1 1 auto !important;
  }
  #chatNow .chatbot-cta-text strong{
    font-size:13px !important;
    line-height:1.1 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  #chatNow .chatbot-cta-text span{
    font-size:11px !important;
    line-height:1.15 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  #chatNow .chatbot-cta-action{
    padding:8px 10px !important;
    font-size:12px !important;
    line-height:1 !important;
    flex:0 0 auto !important;
  }
}
@media (min-width:769px){
  #chatNow .chatbot-cta{
    min-height:64px !important;
  }
}


/* final mobile publish polish v20 */
html, body{
  max-width:100%;
  overflow-x:hidden;
}

@media (max-width:768px){
  body{
    overflow-x:hidden !important;
  }

  .app, .shell, main, .page, .section, .hero, .panel, .card{
    max-width:100% !important;
  }

  /* Header cleanup */
  .topbar{
    position:sticky;
    top:0;
    z-index:110;
    background:#fff;
  }
  .nav{
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:10px !important;
    padding:12px !important;
    align-items:center !important;
  }
  .brand{
    min-width:0 !important;
    max-width:100% !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    overflow:hidden !important;
  }
  .brand > div:last-child{
    min-width:0 !important;
    overflow:hidden !important;
  }
  .brand b{
    display:block !important;
    font-size:12px !important;
    line-height:1.15 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  .brand span{
    display:block !important;
    font-size:10px !important;
    line-height:1.1 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  .logo{
    width:34px !important;
    height:34px !important;
    flex:0 0 34px !important;
  }
  .navtoggle{
    min-width:74px !important;
    min-height:42px !important;
    padding:8px 14px !important;
    font-size:13px !important;
    border-radius:999px !important;
    justify-self:end !important;
  }

  /* Chat CTA hard width clamp */
  #chatNow{
    display:block !important;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }
  #chatNow .chatbot-cta{
    display:flex !important;
    align-items:center !important;
    width:min(calc(100vw - 28px), 100%) !important;
    max-width:min(calc(100vw - 28px), 100%) !important;
    min-height:54px !important;
    margin:0 auto !important;
    padding:8px 10px !important;
    gap:8px !important;
    border-radius:18px !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }
  #chatNow .chatbot-cta-avatar{
    width:32px !important;
    height:32px !important;
    flex:0 0 32px !important;
    margin-right:0 !important;
  }
  #chatNow .chatbot-cta-text{
    min-width:0 !important;
    flex:1 1 auto !important;
    overflow:hidden !important;
  }
  #chatNow .chatbot-cta-text strong{
    display:block !important;
    font-size:12px !important;
    line-height:1.05 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  #chatNow .chatbot-cta-text span{
    display:block !important;
    font-size:10px !important;
    line-height:1.05 !important;
    margin-top:2px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  #chatNow .chatbot-cta-action{
    flex:0 0 auto !important;
    margin-left:0 !important;
    padding:7px 9px !important;
    font-size:11px !important;
    line-height:1 !important;
    border-radius:999px !important;
    white-space:nowrap !important;
  }
}

/* Slight desktop tidy */
@media (min-width:769px){
  .brand b{line-height:1.15}
  .brand span{line-height:1.1}
}


/* mobile menu link click fix v21 */
@media (max-width:980px){
  .nav.nav-open .navlinks a,
  .nav.nav-open .actions a,
  .nav.nav-open .actions button,
  .nav.nav-open .actions .btn{
    pointer-events:auto !important;
    position:relative !important;
    z-index:140 !important;
    touch-action:manipulation !important;
  }
}


/* === 2026 Theme Refresh: Navy + Sand Premium === */
:root{
  --bg:#eceff3;
  --panel:#ffffff;
  --ink:#122a56;
  --muted:#5f6f84;
  --line:rgba(18,42,86,.12);
  --shadow:0 24px 60px rgba(13,34,73,.12);
  --shadow2:0 10px 28px rgba(13,34,73,.09);
  --accent:#1a4a9a;
  --accent2:#123d87;
  --chip:#f1f5fd;
  --chip2:#eaf1fc;
  --focus:rgba(26,74,154,.22);
}

body{
  color:var(--ink);
  background:
    radial-gradient(1200px 700px at 80% -12%, rgba(26,74,154,.12), rgba(26,74,154,0) 56%),
    radial-gradient(980px 620px at 0% -10%, rgba(16,46,98,.08), rgba(16,46,98,0) 60%),
    var(--bg);
}

.app{
  border-color:rgba(18,42,86,.10);
  box-shadow:var(--shadow);
  background:var(--panel);
}

.topbar{
  background:rgba(255,255,255,.92);
  border-bottom:1px solid rgba(18,42,86,.10);
}

.logo{
  background-color:#fff;
  background-image:url("https://basaao.com/wp-content/uploads/2026/03/BPNM-small-logo.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  box-shadow:0 12px 28px rgba(12,34,73,.18);
}

.brand b{color:#102c5d}
.brand span{color:#6b7a91}
.navlinks{color:rgba(18,42,86,.76)}
.navlinks a:hover{background:#f4f8ff}
.navlinks a[aria-current="page"]{
  background:#edf3ff;
  color:#133f85;
}

.navtoggle{
  border-color:rgba(18,42,86,.16);
  background:#fff;
  color:#173f82;
}

.btn{
  border-color:rgba(18,42,86,.14);
  color:#163b73;
  background:#fff;
}
.btn:hover{
  box-shadow:0 10px 26px rgba(18,42,86,.10);
}
.btn.primary{
  background:linear-gradient(135deg, #1b4da1, #123d88);
  color:#fff;
  border-color:#123d88;
  box-shadow:0 12px 28px rgba(18,61,136,.26);
}
.btn.primary:hover{
  filter:brightness(1.03);
}
.btn.ghost{
  background:#f3f8ff;
  border-color:#d2e1f8;
  color:#16509b;
}

.hero{
  border-color:rgba(18,42,86,.16);
  background:#f2ecdf;
}

.hero .mapbg{
  background:
    linear-gradient(180deg, rgba(248,244,234,.82) 0%, rgba(245,239,228,.94) 58%, rgba(245,239,228,1) 100%),
    url("../placeholder/map.webp");
  background-size:cover;
  background-position:center;
  filter:saturate(.86) contrast(.96);
}

.hero .grid > div:first-child{
  background:linear-gradient(155deg, #0d2a59 0%, #113b7c 48%, #0f326b 100%);
  border:1px solid rgba(255,255,255,.14);
  border-radius:26px;
  padding:clamp(18px, 2.5vw, 30px);
  box-shadow:0 26px 54px rgba(9,30,68,.34);
}

.hero .grid > div:first-child h1{
  color:#fff;
  font-weight:780;
}

.hero .grid > div:first-child .lead{
  color:rgba(255,255,255,.86);
}

.hero .grid > div:first-child .lead b{
  color:#fff;
}

.hero .grid > div:first-child .h-eyebrow{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.18);
  color:rgba(255,255,255,.9);
}

.hero .grid > div:first-child .dot{
  background:#f1c15d;
  box-shadow:0 0 0 6px rgba(241,193,93,.24);
}

.hero .grid > div:first-child .pill{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.18);
  color:rgba(255,255,255,.86);
}

.hero .grid > div:first-child .pill strong{
  color:#fff;
}

.hero .grid > div:first-child .filterbar{
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86));
  border-color:rgba(255,255,255,.24);
}

.hero .grid > div:first-child .filterbar input,
.hero .grid > div:first-child .filterbar select{
  border-color:#d3ddec;
  background:#fff;
  color:#213f70;
}

.hero .grid > div:first-child .filterbar .btn.primary{
  background:linear-gradient(135deg, #f2c35c, #e8af3f);
  color:#1b3764;
  border-color:#e5ad3f;
  box-shadow:none;
}

.hero .grid > div:first-child .filterbar .kbd{
  background:rgba(18,42,86,.10);
  border-color:rgba(18,42,86,.14);
  color:#1c3969;
}

.hero .grid > div:first-child .trustbar .btn:not(.primary){
  background:rgba(255,255,255,.98);
  border-color:#d1ddef;
  color:#174285;
}

.floatcard{
  border-color:rgba(18,42,86,.12);
  background:rgba(255,255,255,.95);
  box-shadow:0 18px 40px rgba(18,42,86,.15);
}

.floatcard .body{
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,255,.98));
}

.badge{
  background:#edf3ff;
  border-color:#d5e1f6;
  color:#235088;
}

.badge.ok{
  background:#eaf8ee;
  border-color:#bde8cd;
  color:#1b7b45;
}

.badge.warn{
  background:#fff2df;
  border-color:#f3d6aa;
  color:#9c5e0c;
}

.cardmeta span{
  background:#eef3fc;
  border-color:#d5e0f3;
  color:#285187;
}

.panel,
.card{
  border-color:rgba(18,42,86,.10);
  box-shadow:var(--shadow2);
}

.panel.soft{
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,250,255,.96));
}

.tabs{
  background:#f4f8ff;
  border-color:#dbe6f7;
}

.tab{color:#335483}
.tab.active{
  background:linear-gradient(135deg, #1b4da1, #123d88);
  color:#fff;
}

.small,
.note,
label,
.section p{
  color:#607086;
}

.section h2{
  color:#132f63;
}

.pill{
  background:#f3f7ff;
  border-color:#d6e2f6;
  color:#2e5289;
}

.pill strong{
  color:#153968;
}

.footer{
  border-top:1px solid rgba(18,42,86,.10);
  background:linear-gradient(180deg, rgba(252,253,255,.96), rgba(246,249,254,.96));
}

.footer a{color:#355178}
.footer a:hover{color:#173d79}
.copy{color:#697a91}

.blog-key-takeaways,
.blog-content .seo,
.blog-content .internal-links{
  background:#f5f8ff;
  border-color:#d8e2f4;
}

.mobilebar .wrap{
  background:rgba(255,255,255,.94);
  border-color:rgba(18,42,86,.12);
}

.map-embed-card{
  border-color:rgba(18,42,86,.14);
  background:#dfe8f7;
}

.map-cta-overlay{
  background:linear-gradient(180deg, rgba(16,42,88,0) 42%, rgba(16,42,88,.36) 100%);
}

@media (max-width:980px){
  .nav.nav-open .navlinks{
    background:#fff !important;
    border-color:rgba(18,42,86,.14) !important;
  }
  .nav.nav-open .actions{
    background:#fff !important;
    border-color:rgba(18,42,86,.14) !important;
  }
  .nav.nav-open .navlinks a{
    background:#f2f6ff !important;
    border-color:#d5e1f6 !important;
    color:#1f4888;
  }
  .hero .grid > div:first-child{
    border-radius:22px;
    padding:16px;
  }
}


/* === Mobile nav icon: hamburger instead of text menu === */
@media (max-width:980px){
  .navtoggle{
    width:46px !important;
    min-width:46px !important;
    height:46px !important;
    min-height:46px !important;
    padding:0 !important;
    font-size:0 !important;
    line-height:0 !important;
    color:transparent !important;
    text-shadow:none !important;
    border-radius:999px !important;
    position:relative !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .navtoggle::before,
  .navtoggle::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:18px;
    height:2px;
    border-radius:2px;
    background:#173f82;
    transform-origin:center;
    transition:transform .22s ease, box-shadow .22s ease, opacity .22s ease;
  }

  .navtoggle::before{
    transform:translate(-50%, -6px);
    box-shadow:0 6px 0 #173f82;
  }

  .navtoggle::after{
    transform:translate(-50%, 6px);
  }

  .nav.nav-open .navtoggle::before{
    transform:translate(-50%, 0) rotate(45deg);
    box-shadow:none;
  }

  .nav.nav-open .navtoggle::after{
    transform:translate(-50%, 0) rotate(-45deg);
  }
}

/* === Project map lock visual treatment === */
.map-embed-card{
  background-color:#e6edf8;
}
.map-embed-card.map-lock-active{
  position:relative;
  overflow:hidden;
  cursor:pointer;
}
.map-embed-card.map-lock-active::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(10,25,56,.28) 0%, rgba(10,25,56,.44) 100%);
  backdrop-filter:blur(2px);
  z-index:1;
}
.map-embed-card.map-lock-active::after{content:none;display:none;}
.map-embed-card.map-lock-active iframe{
  display:none !important;
}
.map-embed-card .map-cta-overlay{
  z-index:3;
}
.map-embed-card.map-lock-active .map-cta-overlay{
  justify-content:center;
  align-items:flex-end;
  padding:18px;
  background:linear-gradient(180deg, rgba(12,31,66,.06) 20%, rgba(12,31,66,.58) 100%);
}
.map-embed-card.map-lock-active .map-cta-overlay .btn{
  min-width:220px;
}





/* Hero alignment polish for desktop/tablet (no structural changes) */
@media (min-width:981px){
  .hero{
    min-height:clamp(470px, 61vh, 650px);
  }

  .hero .grid{
    grid-template-columns:minmax(0, 1.08fr) minmax(360px, .92fr);
    align-items:start;
    gap:clamp(14px, 1.9vw, 24px);
    padding:clamp(16px, 2.1vw, 28px);
  }

  .hero .grid > div:first-child{
    align-self:start;
    min-height:0;
    padding:clamp(16px, 2vw, 24px);
  }

  .hero .grid > div:first-child h1{
    margin:12px 0;
    max-width:17ch;
    line-height:1.08;
  }

  .hero .grid > div:first-child .lead{
    margin:0;
    max-width:66ch;
    line-height:1.56;
  }

  .hero .grid > div:first-child .lead + .lead{
    margin-top:14px;
  }

  .hero .grid > div:first-child .trustbar{
    margin-top:14px;
  }

  .hero .grid > div:first-child .filterbar{
    margin-top:14px;
  }

  .hero .grid > div:first-child .trustbar:last-child{
    margin-top:16px;
  }

  .floatcard .media{
    aspect-ratio:16/9;
  }
}

@media (min-width:981px) and (max-width:1280px){
  .hero{
    min-height:clamp(460px, 58vh, 620px);
  }

  .hero .grid{
    grid-template-columns:minmax(0, 1fr) minmax(330px, .92fr);
  }

  .hero .grid > div:first-child h1{
    font-size:clamp(34px, 2.9vw, 46px);
    max-width:18ch;
  }

  .hero .grid > div:first-child .lead{
    font-size:clamp(14px, 1.15vw, 16px);
  }
}