:root{
  --bg:#f6f8fc;
  --card:#ffffff;
  --text:#0b1220;
  --muted:#526076;
  --stroke:rgba(15,23,42,.12);
  --accent:#0369a1;
  --shadow:0 10px 28px rgba(15,23,42,.10);
  --radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:1100px;margin:0 auto;padding:0 18px}

.skipLink{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skipLink:focus{left:18px;top:12px;width:auto;height:auto;background:#fff;padding:10px 12px;border:1px solid var(--stroke);border-radius:12px;z-index:999}

.siteHeader{background:rgba(255,255,255,.92);border-bottom:1px solid var(--stroke)}
.headerTop{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:14px 18px}
.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit}
.brandLogo{height:54px;width:auto;border-radius:14px;box-shadow:var(--shadow);background:#fff}
.brandName{font-weight:900;letter-spacing:.4px}
.brandTag{color:var(--muted);font-size:14px}
.headerContact{font-size:14px;color:var(--muted);text-align:right}
.headerContact strong{color:var(--text)}
.bannerWrap{background:#fff;border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke)}
.bannerImg{
  display:block;
  width:100%;
  height:clamp(180px, 22vw, 320px); /* responsive & stable */
  object-fit:cover;                /* fills the header (no tiny image) */
  object-position:center;
  background:#fff;
}
.nav{background:#fff}
.navInner{display:flex;flex-wrap:wrap;gap:10px;padding:12px 18px}
.navLink{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;border-radius:14px;border:1px solid var(--stroke);
  background:rgba(255,255,255,.95);font-weight:800;color:rgba(11,18,32,.88);
  box-shadow:0 8px 18px rgba(15,23,42,.08);
}
.navLink:hover{text-decoration:none;opacity:.92}

.main{padding:22px 0 30px}
/* Make any existing “cards/sections” look nicer without changing text */
.main .card, .main .panel, .main section{
  background:transparent;
}

/* Footer */
.siteFooter{background:#0b1220;color:#e7eefc;margin-top:26px}
.siteFooter a{color:#bfe6ff}
.footerCols{display:grid;grid-template-columns:2fr 2fr 1fr;gap:18px;padding:22px 0}
.footerTitle{font-weight:900;margin-bottom:6px}
.footerBottom{border-top:1px solid rgba(255,255,255,.14);padding:14px 0;color:rgba(231,238,252,.82)}

@media (max-width:900px){
  .headerTop{flex-direction:column;align-items:flex-start}
  .headerContact{text-align:left}
  .bannerImg{
  display:block;
  width:100%;
  height:clamp(180px, 22vw, 320px); /* responsive & stable */
  object-fit:cover;                /* fills the header (no tiny image) */
  object-position:center;
  background:#fff;
}
}
@media (max-width:520px){
  .bannerImg{
  display:block;
  width:100%;
  height:clamp(180px, 22vw, 320px); /* responsive & stable */
  object-fit:cover;                /* fills the header (no tiny image) */
  object-position:center;
  background:#fff;
}
  .brandLogo{height:48px}
}


@media (max-width:520px){
  .bannerImg{height:clamp(150px, 40vw, 240px)}
}