/* Progressive shell: responsive layout + motion (keeps existing ASP content) */
:root{
  --brand:#0e7490;
  --brand-light:#22d3ee;
  --ink:#0f172a;
  --muted:#64748b;
  --line:#c5d4e0;
  --paper:#ffffff;
  --ease:cubic-bezier(.22,.61,.36,1);
  --wrap:1100px;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
img,video{max-width:100%;height:auto;}
table{max-width:100%;}

/* Force old fixed-width chrome to fluid wrappers */
.site-shell,
table[width="990"],
table[width='990']{
  width:100% !important;
  max-width:var(--wrap) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box;
}
.flashBanner .bigImg,
.flashBanner a img{
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
}

/* ===== Modern header ===== */
.site-top{
  background:linear-gradient(90deg,#0b1220 0%,#0f2744 45%,#0c4a6e 100%);
  box-shadow:0 2px 14px rgba(15,39,68,.28);
  position:sticky;
  top:0;
  z-index:1000;
}
.site-top__inner{
  max-width:var(--wrap);
  margin:0 auto;
  padding:10px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  box-sizing:border-box;
}
.site-top__brand img{
  display:block;
  max-height:56px;
  width:auto;
  max-width:220px;
}
.site-top__toggle{
  display:none;
  width:44px;
  height:44px;
  border:1px solid rgba(148,163,184,.35);
  background:rgba(15,23,42,.35);
  border-radius:6px;
  cursor:pointer;
  padding:0;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
}
.site-top__toggle span{
  display:block;
  width:20px;
  height:2px;
  background:#e2e8f0;
  transition:transform .25s var(--ease),opacity .2s;
}
.site-top.is-open .site-top__toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.site-top.is-open .site-top__toggle span:nth-child(2){opacity:0;}
.site-top.is-open .site-top__toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.site-nav{flex:1;display:flex;justify-content:flex-end;}
.site-nav__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:stretch;
  gap:2px;
}
.site-nav__item{position:relative;}
.site-nav__link{
  display:block;
  min-height:44px;
  line-height:44px;
  padding:0 14px;
  color:#e2e8f0 !important;
  text-decoration:none !important;
  font-size:14px;
  letter-spacing:.04em;
  border-radius:4px;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.site-nav__link:hover,
.site-nav__item:hover > .site-nav__link,
.site-nav__item.is-active > .site-nav__link{
  background:linear-gradient(180deg,#0891b2,#0e7490);
  color:#fff !important;
}
.site-nav__drop{
  display:none;
  position:absolute;
  left:0;
  top:100%;
  min-width:160px;
  margin:0;
  padding:6px 0;
  list-style:none;
  background:#0f172a;
  border:1px solid #1e3a5f;
  border-radius:0 0 6px 6px;
  box-shadow:0 12px 28px rgba(15,23,42,.4);
  z-index:20;
}
.site-nav__item:hover > .site-nav__drop,
.site-nav__item:focus-within > .site-nav__drop{
  display:block;
  animation:navDrop .22s var(--ease);
}
.site-nav__drop a{
  display:block;
  padding:10px 14px;
  color:#cbd5e1 !important;
  text-decoration:none !important;
  font-size:13px;
  white-space:nowrap;
  border-bottom:1px solid #1e293b;
}
.site-nav__drop a:hover{
  background:#0e7490;
  color:#fff !important;
}
.site-nav__drop li:last-child a{border-bottom:0;}

@keyframes navDrop{
  from{opacity:0;transform:translateY(-6px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(12px);}
  to{opacity:1;transform:translateY(0);}
}

/* Banner */
.site-banner{
  max-width:var(--wrap);
  margin:12px auto 18px;
  padding:0 12px;
  box-sizing:border-box;
}
.site-banner .indexCon,
.site-banner .flashBanner{
  width:100% !important;
  max-width:100% !important;
}
.site-banner .flashBanner{
  height:auto !important;
  aspect-ratio:990 / 330;
  background:#0f172a;
  animation:fadeUp .55s var(--ease);
}
.site-banner .flashBanner .mask{bottom:0 !important;}

/* Home cards */
.home-cards{
  max-width:var(--wrap);
  margin:0 auto 28px;
  padding:0 12px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  box-sizing:border-box;
}
.home-cards .col,
.home-cards .col li{
  width:100% !important;
  height:auto !important;
  min-height:300px;
}
.home-cards .col li{
  position:relative;
  overflow:hidden;
  border-radius:6px;
}
.home-cards .pic img{
  width:100% !important;
  height:300px !important;
  object-fit:cover;
  display:block;
  transition:transform .45s var(--ease);
}
.home-cards .col li.liHover .pic img,
.home-cards .col li:hover .pic img{
  transform:scale(1.04);
}
.home-cards .info,
.home-cards .overlay{width:100% !important;}
.home-cards .info h1,
.home-cards .info h2{
  font-size:15px;
  font-weight:600;
}

/* Content pages: sidebar + main */
.page-layout{
  max-width:var(--wrap);
  margin:0 auto 24px;
  padding:0 12px;
  display:grid;
  grid-template-columns:210px minmax(0,1fr);
  gap:20px;
  box-sizing:border-box;
  animation:fadeUp .45s var(--ease);
}
.page-layout__side{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 4px 16px rgba(15,39,68,.06);
}
.page-layout__side .side-title{
  margin:0;
  padding:12px 14px;
  background:linear-gradient(90deg,#0f2744,#0c4a6e);
  color:#fff;
  font-size:14px;
  font-weight:600;
  letter-spacing:.04em;
}
.page-layout__side .side-body{padding:8px 10px 14px;}
.page-layout__main{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 4px 16px rgba(15,39,68,.06);
  min-width:0;
}
.page-layout__main .main-title{
  margin:0;
  padding:14px 18px;
  background:linear-gradient(180deg,#f8fafc,#eef4f8);
  border-bottom:1px solid var(--line);
  color:var(--ink);
  font-size:16px;
  font-weight:700;
}
.page-layout__main .main-body{
  padding:14px 18px 22px;
}
.page-layout__main .main-body img{max-width:100%;height:auto;}

/* Soften legacy nested tables inside new layout */
.page-layout table{width:100% !important;}
.page-layout td[width="190"],
.page-layout td[width="21"],
.page-layout td[width="779"]{display:block;width:100% !important;}

/* Contact card */
.contact-card{
  padding:4px 2px 8px;
  font-size:13px;
  color:#334155;
  line-height:1.7;
}
.contact-card__badge{
  display:block;
  max-width:100%;
  margin:0 auto 10px;
  border-radius:4px;
}
.contact-card__row{
  display:flex;
  gap:8px;
  padding:8px 6px;
  border-bottom:1px dashed #cbd5e1;
}
.contact-card__row:last-child{border-bottom:0;}
.contact-card__label{
  flex:0 0 3.2em;
  color:var(--muted);
}
.contact-card__value{flex:1;word-break:break-all;}
.contact-card a{color:var(--brand);}

/* Footer */
.site-footer-wrap{
  margin-top:28px;
  background:linear-gradient(180deg,#0f172a,#0b1220);
  border-top:1px solid #164e63;
  color:#94a3b8;
}
.site-footer-wrap .site-footer-inner{
  max-width:var(--wrap);
  margin:0 auto;
  padding:28px 16px;
  text-align:center;
  font-size:13px;
  line-height:1.8;
}
.site-footer-wrap a{color:#94a3b8;}
.site-footer-wrap a:hover{color:var(--brand-light);}

/* Legacy table pages: make fluid without rewriting every ASP */
body > table[width="990"],
body > table[align="center"]{
  transition:none;
}
@media (max-width:1024px){
  .home-cards{grid-template-columns:repeat(2,minmax(0,1fr));}
  .site-banner .flashBanner{aspect-ratio:16 / 7;}
}
@media (max-width:768px){
  .site-top{position:sticky;}
  .site-top__toggle{display:flex;}
  .site-nav{
    display:none;
    position:absolute;
    left:0;right:0;top:100%;
    background:#0b1220;
    border-top:1px solid #1e3a5f;
    padding:8px 12px 16px;
    box-shadow:0 16px 30px rgba(0,0,0,.35);
  }
  .site-top.is-open .site-nav{display:block;animation:fadeUp .28s var(--ease);}
  .site-nav__list{flex-direction:column;gap:4px;}
  .site-nav__link{border-radius:6px;}
  .site-nav__drop{
    position:static;
    display:none;
    box-shadow:none;
    border:0;
    background:#111827;
    border-radius:6px;
    margin:4px 0 8px;
    min-width:0;
  }
  .site-nav__item.is-expanded > .site-nav__drop{display:block;}
  .site-nav__item:hover > .site-nav__drop{display:none;}
  .site-nav__item.is-expanded:hover > .site-nav__drop,
  .site-nav__item.is-expanded > .site-nav__drop{display:block;}
  .site-nav__drop a{white-space:normal;}

  .home-cards{grid-template-columns:1fr;gap:14px;}
  .page-layout{grid-template-columns:1fr;gap:14px;}

  /* Collapse classic 990 tables on phones */
  body table[width="990"],
  body table[width='990'],
  .bor11,
  .borbot table{
    display:block !important;
    width:100% !important;
  }
  body table[width="990"] > tbody,
  body table[width="990"] > tbody > tr,
  body table[width='990'] > tbody,
  body table[width='990'] > tbody > tr{
    display:block !important;
    width:100% !important;
  }
  body table[width="990"] > tbody > tr > td,
  body table[width='990'] > tbody > tr > td,
  .bor11 > tbody > tr > td{
    display:block !important;
    width:100% !important;
    box-sizing:border-box;
  }
  td[width="190"],
  td[width="21"],
  td[width="10"],
  td[width="240"]{
    width:100% !important;
  }
  td[width="21"],
  td[width="10"]{display:none !important;height:0 !important;padding:0 !important;}

  .cutpic img,
  .dplist li img,
  .dplist2 li img{max-width:100% !important;height:auto !important;}
  .dplist,.dplist2,.p5,.p6,.pee{width:100% !important;}
  .p5 .li5,.p5 .li51,.p6 .li6,.pee .li7{width:100% !important;}

  .jion_ul LI,
  .jion_ul LI A{width:100% !important;}
  .title4,.titlefl{padding-left:12px !important;}

  /* Side titles without depending on old bg images */
  td.titlefl,
  .titlefl{
    background:linear-gradient(90deg,#0f2744,#0c4a6e) !important;
    background-image:none !important;
    height:auto !important;
    padding:12px 14px !important;
    line-height:1.4 !important;
  }
  td.title4,
  .title4{
    background:linear-gradient(180deg,#f8fafc,#eef4f8) !important;
    background-image:none !important;
    height:auto !important;
    padding:14px 16px !important;
    line-height:1.45 !important;
  }
}

/* Desktop: freshen side/main chrome even without rewriting tables */
@media (min-width:769px){
  td.titlefl,
  .titlefl{
    background:linear-gradient(90deg,#0f2744,#0c4a6e) !important;
    background-image:none !important;
  }
  td.title4,
  .title4{
    background:linear-gradient(180deg,#f8fafc,#eef4f8) !important;
    background-image:none !important;
    color:#0f172a !important;
  }
  table.bor11{
    background:transparent;
  }
  table.bor11 > tbody > tr > td[width="190"]{
    background:#fff;
    border:1px solid #c5d4e0;
    border-radius:6px;
    box-shadow:0 4px 14px rgba(15,39,68,.06);
    vertical-align:top;
  }
  table.bor11 > tbody > tr > td[valign="top"]:last-child table[width="779"],
  table.bor11 > tbody > tr > td[valign="top"]:last-child{
    background:#fff;
  }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
  }
}
