:root{
  --brand:#0b6efd;
  --ink:#1c2330;
  --muted:#5b667a;
  --bg:#ffffff;
  --alt:#f6f8fb;
  --card:#ffffff;
  --border:#e5e9f0;
  --success:#15803d;
  --error:#b91c1c;
  --radius:14px;
  --shadow:0 8px 24px rgba(16,24,40,.08);
  --header-height:120px;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root{
    --bg:#0f141b;
    --ink:#e6e9ee;
    --muted:#a7b0bf;
    --alt:#121925;
    --card:#161d2a;
    --border:#253044;
  }
}

html,body{ margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;line-height:1.5 }
img{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:1100px;margin:0 auto;padding:0 20px}
.muted{color:var(--muted)}
.mtop{margin-top:14px}
:focus-visible{ outline:3px solid #94b9ff; outline-offset:2px }

/* Skip link */
.skip-link{ position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;
  background:var(--brand);color:#fff;padding:8px 12px;border-radius:8px; }
.skip-link:focus{ left:12px;top:12px;width:auto;height:auto;z-index:1000 }

/* Header and nav */
.topbar{ position:sticky;top:0;background:var(--card);border-bottom:1px solid var(--border);z-index:50 }
.nav{ display:flex;align-items:center;justify-content:space-between;min-height:var(--header-height) }
.brand{ display:flex;align-items:center;gap:12px }
.brand img{ height:108px;width:auto;border-radius:4px }
.brand span{ font-weight:700;letter-spacing:.2px }

/* Menu and submenu */
.menu{ display:flex;gap:20px;align-items:center; position:relative }
.menu a{ font-weight:700 }
.menu a.menu-link{ color:var(--ink);font-weight:800 }
.menu a.menu-link:focus, .menu a.menu-link:hover{ color:#0a2458;text-decoration:none }

.has-submenu{ position:relative }
.submenu{
  position:absolute;top:100%;left:0;background:var(--card);border:1px solid var(--border);border-radius:10px;
  box-shadow:var(--shadow);padding:8px 0;min-width:220px;display:none;
}
.submenu a{ display:block;padding:8px 14px;color:var(--ink);font-weight:700;white-space:nowrap }
.submenu a:hover, .submenu a:focus{ background:var(--alt);text-decoration:none }
.has-submenu:focus-within .submenu, .has-submenu:hover .submenu{ display:block }

/* Buttons */
.btn{ display:inline-block;padding:10px 16px;border-radius:10px;border:1px solid var(--brand);
  background:transparent;color:var(--brand);font-weight:700 }
.btn-primary{ background:var(--brand);color:#fff;box-shadow:var(--shadow) }
.btn:hover{ text-decoration:none;filter:brightness(.97) }
.btn-ghost{ background:transparent;border-color:#bcd2ff;color:#1c3d92 }
.btn[disabled]{ opacity:.6;cursor:not-allowed }

/* Hero */
.hero{ position:relative;overflow:hidden;background:var(--alt) }
.hero-media img{ width:100%;height:360px;object-fit:cover }
.hero-inner{ position:relative;margin-top:-120px }
.hero-card{ background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow);
  border-radius:var(--radius);padding:28px;max-width:760px }
.lead{ color:var(--muted);font-size:1.1rem;margin:8px 0 6px }
.trust{ display:flex;gap:18px;flex-wrap:wrap;margin-top:10px }
.trust img{ width:18px;height:18px }
.hero-cta{ margin-top:14px;display:flex;gap:10px }

/* Sections */
.section{ padding:56px 0 }
.section-alt{ background:var(--alt) }
h1,h2{ line-height:1.2;margin:0 0 12px }
h3{ margin:0 0 8px }
.intro{ color:var(--muted);max-width:760px }
section[id]{ scroll-margin-top:calc(var(--header-height) + 12px) }

/* Grid and cards */
.grid{ display:grid;gap:22px }
.cols-2{ grid-template-columns:1fr }
.cols-3{ grid-template-columns:1fr }
.cols-4{ grid-template-columns:1fr 1fr }
@media(min-width:720px){ .cols-2{ grid-template-columns:1fr 1fr } .cols-3{ grid-template-columns:repeat(3,1fr) } }
@media(min-width:900px){ .cols-4{ grid-template-columns:repeat(4,1fr) } }
.card{ background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px }
.card-img{ border-radius:10px;height:120px;object-fit:cover;margin-bottom:12px;background:#e6f2ff }

/* Panels */
.two-col{ display:grid;gap:24px }
@media(min-width:900px){ .two-col{ grid-template-columns:1.2fr .8fr } }
.panel{ background:#0b6efd10;border:1px solid #cfe2ff;border-radius:var(--radius);padding:20px }

/* Lists and forms */
.ticklist{ padding-left:18px }
.ticklist li{ margin:6px 0 }
form{ display:grid;gap:14px }
.row{ display:grid;gap:14px }
@media(min-width:680px){ .row{ grid-template-columns:1fr 1fr } }
input,select,textarea{ width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;font:inherit;background:var(--card);color:var(--ink) }
input:focus,select:focus,textarea:focus{ border-color:#94b9ff;outline:none;box-shadow:0 0 0 3px rgba(148,185,255,.35) }
.alert{ margin-top:8px;padding:10px 12px;border-radius:10px }
.success{ background:#ecfdf5;color:var(--success);border:1px solid #bbf7d0 }
.error{ background:#fef2f2;color:var(--error);border:1px solid #fecaca }
.hp{ position:absolute;left:-5000px }

/* Footer and staff links */
.footer{ border-top:1px solid var(--border);padding:22px 0;color:var(--muted) }
.foot{ display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap }
.foot-nav{ display:flex;gap:12px }

.employee-reveal.bl{
  position:fixed;left:12px;bottom:10px;z-index:60;font-size:12px;color:var(--muted);
  background:transparent;padding:4px 6px;border-radius:6px;opacity:.85;
}
.employee-reveal.bl:hover, .employee-reveal.bl:focus-within{ opacity:1 }
.employee-reveal.bl > summary{ list-style:none;cursor:pointer;color:var(--muted);font-weight:700 }
.employee-reveal.bl > summary::-webkit-details-marker{ display:none }
.employee-reveal.bl > summary:focus{ outline:3px solid #94b9ff; outline-offset:2px }
.employee-link{ color:var(--muted);font-weight:600 }
.employee-link:hover, .employee-link:focus{ color:var(--ink);text-decoration:underline }
.sep{ margin:0 6px;color:var(--muted) }

/* Mobile tweaks */
@media (max-width:360px){
  .brand img{ height:92px } .menu{ gap:14px } .btn.btn-primary{ padding:8px 12px }
}
@media (max-width:420px){
  .hero-media img{ height:300px } .hero-inner{ margin-top:-100px } #formMsg{ margin-top:12px }
}
@media (hover:none){ .menu a.menu-link{ padding:10px 0 } }