* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Open Sans',sans-serif; line-height:1.7; color:#222; background:#fff; }
h1,h2,h3 { font-family:'Playfair Display',serif; font-weight:700; }
a { color:#28549B; text-decoration:none; }
a:hover { text-decoration:underline; color:#1e3f7a; }
.container { max-width:1200px; margin:0 auto; padding:0 20px; }

/* ==================== HEADER ==================== */
header {
  position:sticky;
  top:0;
  background:white;
  box-shadow:0 3px 12px rgba(0,0,0,0.08);
  z-index:100;
  padding:16px 0;
}

.header-container {
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}

.branding {
  display:flex;
  align-items:center;
  gap:18px;
  flex-shrink: 0;
}

.logo-icon {
  width:68px;
  height:68px;
  object-fit:contain;
  flex-shrink: 0;
}

.site-title-group { }

.site-title {
  font-size:2.25rem;
  margin:0;
  color:#28549B;
  letter-spacing:-0.4px;
  white-space: nowrap;
  line-height: 1.05;
}

.site-tagline {
  font-size:1.05rem;
  color:#555;
  margin:4px 0 0;
  font-style:italic;
}

.header-utils { display:flex; align-items:center; gap:12px; }
.contrast-btn {
  font-size:0.95rem;
  padding:8px 16px;
  border:2px solid #28549B;
  border-radius:6px;
  background:white;
  color:#28549B;
  cursor:pointer;
  font-weight:600;
}
.contrast-btn:hover { background:#28549B; color:white; }

.menu-toggle {
  display:none;
  font-size:2.1rem;
  background:none;
  border:none;
  color:#28549B;
  cursor:pointer;
}

/* Navigation */
#main-nav { width:100%; margin-top:12px; }
.nav-list {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:24px 18px;
  list-style:none;
  margin:0;
  padding:0;
}
.nav-list li a {
  font-weight:600;
  font-size:1.05rem;
  color:#28549B;
}

/* ==================== MOBILE ==================== */
@media (max-width: 768px) {
  .header-container {
    flex-direction: column;
    align-items: stretch;
  }

  .branding {
    width: 100%;
    justify-content: center;
    gap: 14px;
  }

  .logo-icon { width:56px; height:56px; }
  .site-title { font-size: 1.78rem; }
  .site-tagline { font-size: 0.95rem; text-align: center; }

  .header-utils {
    width: 100%;
    justify-content: space-between;
  }

  .menu-toggle { display: block; }

  #main-nav {
    display: none;
    margin-top: 12px;
    width: 100%;
    background: #f8f9fa;
    padding: 16px;
    border-radius: 8px;
  }
  #main-nav.active { display: block; }
  .nav-list {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

/* Hero */
.hero {
  background:linear-gradient(to bottom,#f0f8ff,#e6f2ff);
  text-align:center;
  padding:60px 20px 80px;
}
.hero h1 { font-size:2.8rem; margin-bottom:24px; color:#28549B; }
.lead { font-size:1.4rem; margin-bottom:32px; color:#333; }

/* Sections */
.section { padding:80px 0; }
.alt-bg { background:#f9fbff; }
.section h2 {
  font-size:2.6rem;
  text-align:center;
  margin-bottom:48px;
  color:#28549B;
}

/* About Section */
#about .about-intro {
  font-size:1.25rem;
  font-weight:500;
  color:#333;
  margin-bottom:28px;
  line-height:1.65;
  text-align:center;
  max-width:800px;
  margin-left:auto;
  margin-right:auto;
}

#about p {
  font-size:1.08rem;
  margin-bottom:1.6em;
  line-height:1.75;
  max-width:780px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

#about .about-cta {
  text-align:center;
  margin-top:40px;
}

/* Contact Section */
#contact .contact-section {
  text-align:center;
  max-width:700px;
  margin:0 auto;
}

#contact .contact-intro {
  font-size:1.15rem;
  margin-bottom:32px;
  color:#444;
  line-height:1.6;
}

#contact .contact-details {
  margin:24px 0 40px;
  font-size:1.15rem;
}

#contact .contact-details strong {
  color:#28549B;
}

#contact .contact-note {
  font-size:0.95rem;
  color:#666;
  margin-top:8px;
  font-style:italic;
}

/* Cards */
.services-grid, .articles-list, .resources-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
}

.card, .article-item, .resource-item {
  background: white;
  padding: 32px;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.07);
  transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover, .article-item:hover, .resource-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

.card h3, .article-item h3, .resource-item h3 {
  font-size: 1.45rem;
  margin-bottom: 16px;
  color: #28549B;
}

/* Achievements */
.achievements-list {
  list-style: none;
  max-width: 800px;
  margin: 0 auto;
}

.achievements-list li {
  margin-bottom: 16px;
  font-size: 1.1rem;
  padding-left: 32px;
  position: relative;
}

.achievements-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #28549B;
  font-weight: bold;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 8px;
  font-weight: 600;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.primary {
  background:#28549B;
  color:white;
}
.primary:hover {
  background:#1e3f7a;
  color:white !important;
  text-decoration:none;
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(0,0,0,0.15);
}
.large { padding:18px 40px; font-size:1.2rem; }

/* Footer */
footer {
  background:#28549B;
  color:white;
  text-align:center;
  padding:50px 0 40px;
  font-size:0.95rem;
}

/* High Contrast Mode WCAG AA+ compliant */
body.high-contrast {
  --bg: #ffffff;
  --text: #000000;
  --link: #0000ff;
  --heading: #000000;
  --accent: #000000;
  --focus: #ffff00;
  --card-bg: #f0f0f0;
  background: var(--bg) !important;
  color: var(--text) !important;
}

body.high-contrast header,
body.high-contrast .alt-bg,
body.high-contrast .section {
  background: var(--card-bg) !important;
  border: 3px solid #000000 !important;
}

body.high-contrast .card,
body.high-contrast .article-item,
body.high-contrast .resource-item {
  background: #ffffff !important;
  border: 3px solid #000000 !important;
  box-shadow: none !important;
}

body.high-contrast h1,
body.high-contrast h2,
body.high-contrast .site-title,
body.high-contrast p,
body.high-contrast li {
  color: var(--text) !important;
}

body.high-contrast a,
body.high-contrast .contrast-btn,
body.high-contrast .nav-list a {
  color: var(--link) !important;
}

body.high-contrast .btn.primary {
  background: #0000ff !important;
  color: #ffffff !important;
  border: 2px solid #000000 !important;
}

body.high-contrast .logo-icon {
  filter: none !important;
  background: #ffffff !important;
  border: 5px solid #000000 !important;
  padding: 8px !important;
  border-radius: 50% !important;
}

body.high-contrast .site-tagline {
  color: #333333 !important;
}

body.high-contrast :focus-visible {
  outline: 4px solid var(--focus) !important;
  outline-offset: 3px;
}

body.high-contrast footer {
  background:white;
}
body.high-contrast .hero {
  background:white;
}

main.bio-container {
  max-width: 900px;
  margin: 60px auto 80px;
  padding: 40px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.1);
}
.bio-container h1 {
  font-size: 2.8rem;
  color: #28549B;
  margin-bottom: 32px;
  text-align: center;
  line-height: 1.1;
}
.bio-container p {
  font-size: 1.1rem;
  margin-bottom: 1.5em;
}
.bio-container ul {
  list-style: none;
  padding-left: 0;
  margin: 24px 0;
}
.bio-container ul li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 12px;
  font-size: 1.1rem;
}
.bio-container ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #28549B;
  font-size: 1.8rem;
  line-height: 1;
}