:root {
  --org-navy: #113643;
  --org-navy-deep: #0b2a35;
  --org-teal: #1d7a72;
  --org-teal-soft: #2f9a92;
  --org-mint: #eaf6f3;
  --org-sand: #fbf8f2;
  --org-gold: #c58c2e;
  --org-text: #1e3a3f;
  --org-muted: #567078;
  --org-card-border: rgba(17, 94, 102, 0.16);
  --org-card-shadow: 0 14px 30px rgba(12, 48, 56, 0.12);
  --org-ring: rgba(47, 154, 146, 0.28);
}

body {
  background:
    radial-gradient(900px 400px at 8% -14%, rgba(38, 153, 142, 0.18), transparent 62%),
    radial-gradient(860px 420px at 100% 0%, rgba(197, 140, 46, 0.1), transparent 64%),
    linear-gradient(180deg, #f5fbfa 0%, var(--org-sand) 62%, #f2f8f7 100%);
  color: var(--org-text);
}

.top-bar {
  background: linear-gradient(90deg, var(--org-navy-deep), var(--org-navy));
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 24px rgba(11, 42, 53, 0.22);
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}

.top-bar a,
.top-bar span {
  color: #e7f4f8;
}

.top-bar .divider {
  opacity: 0.4;
}

.top-ein {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  padding: 0.18rem 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
}

.navbar {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(17, 94, 102, 0.16);
}

.nav-logo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #dff7f4 url('images/logo-nouveau-hope.svg') center/cover no-repeat;
  border: 2px solid #f2fffd;
  box-shadow: 0 10px 24px rgba(16, 96, 87, 0.32);
}

.nav-logo svg {
  display: none;
}

.nav-brand-name {
  color: var(--org-navy);
}

.nav-brand-sub {
  color: var(--org-muted);
}

.nav-links a {
  color: var(--org-navy);
}

.nav-links a:hover,
.nav-links a.active {
  background: #e8f6f3;
  color: #0f5f67;
}

.hero,
.page-hero {
  position: relative;
}

.hero::after,
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(112deg, rgba(8, 39, 47, 0.46) 0%, rgba(8, 39, 47, 0.24) 46%, rgba(8, 39, 47, 0.14) 100%),
    radial-gradient(760px 340px at 85% 12%, rgba(37, 179, 165, 0.16), transparent 58%);
  pointer-events: none;
}

.hero-content,
.page-hero > * {
  position: relative;
  z-index: 1;
}

.section-label,
.page-hero-label {
  color: var(--org-teal-soft);
}

.section-title,
.page-hero h1,
.footer-brand-name,
.mission-quote,
.value-name,
.timeline-title,
.program-title,
.team-name,
.leader-name,
.connect-title,
.join-title,
.approach-title,
.contact-info-title,
.form-title {
  color: var(--org-navy);
}

.section-desc,
.program-desc,
.team-bio,
.leader-bio,
.connect-desc,
.join-desc,
.approach-desc,
.mission-statement p,
.contact-detail-value,
.form-note,
.footer-tagline,
.footer-contact-item,
.footer-links a {
  color: var(--org-muted);
}

.hero-card,
.value-card,
.vision-block,
.program-card,
.team-card,
.leader-card,
.contact-info-card,
.contact-form-card,
.join-card,
.connect-card,
.approach-card,
.hours-card,
.testimonial-card,
.commitment-item,
.mission-statement,
.founding-visual,
.founding-text,
.timeline-content,
.stat-item {
  border: 1px solid var(--org-card-border);
  box-shadow: var(--org-card-shadow);
}

img,
.vision-img,
.founding-img,
.team-avatar,
.leader-avatar,
.testimonial-avatar,
.program-image,
.program-card-img,
.hero-feature-img {
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(7, 46, 54, 0.2);
  transition: transform 0.32s ease, box-shadow 0.32s ease, filter 0.32s ease;
  filter: saturate(1.06) contrast(1.03);
}

img:hover,
.vision-img:hover,
.founding-img:hover,
.team-avatar:hover,
.leader-avatar:hover,
.testimonial-avatar:hover,
.program-image:hover,
.program-card-img:hover,
.hero-feature-img:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(7, 46, 54, 0.24);
}

.btn {
  border-radius: 999px;
}

.btn-primary,
.btn-secondary,
.form-submit {
  background-image: linear-gradient(135deg, var(--org-teal-soft), var(--org-teal));
  border: none;
  box-shadow: 0 10px 22px rgba(30, 122, 114, 0.28);
}

.btn-primary:hover,
.btn-secondary:hover,
.form-submit:hover {
  box-shadow: 0 14px 30px rgba(30, 122, 114, 0.36);
}

.btn-outline {
  border-color: rgba(234, 251, 247, 0.68);
}

.nav-links a,
.footer-links a,
.footer-social,
.top-bar a {
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.top-bar a:hover,
.footer-links a:hover {
  color: #ffffff;
}

.footer-social:hover {
  transform: translateY(-2px);
}

.fade-in {
  transition: opacity 0.72s ease, transform 0.72s ease;
}

footer {
  background: linear-gradient(160deg, #102f3a 0%, #0b2530 100%);
}

footer .footer-links a,
footer .footer-contact-item,
footer .footer-tagline {
  color: rgba(225, 242, 246, 0.8);
}

footer .footer-links a:hover {
  color: #ffffff;
}

@media (max-width: 768px) {
  .nav-logo {
    width: 44px;
    height: 44px;
  }

  .top-bar {
    gap: 0.7rem;
  }

  .top-ein {
    padding: 0.12rem 0.55rem;
    font-size: 0.74rem;
  }

  img,
  .vision-img,
  .founding-img,
  .team-avatar,
  .leader-avatar,
  .testimonial-avatar,
  .program-image,
  .program-card-img,
  .hero-feature-img {
    border-radius: 12px;
  }
}