:root {
  --cwi-navy: #062b55;
  --cwi-blue: #0b4fa3;
  --cwi-sky: #38a8ff;
  --cwi-green: #1f9d58;
  --cwi-mint: #eaf9f1;
  --cwi-gold: #f2a51a;
  --cwi-ink: #14243d;
  --cwi-muted: #63728a;
  --cwi-soft: #f4f9ff;
  --cwi-border: #dce8f5;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--cwi-ink);
  background: #fff;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
img { max-width: 100%; height: auto; }
a { color: var(--cwi-blue); }

.topbar { background: var(--cwi-navy); color: #d9ecff; font-size: .9rem; }
.site-navbar { box-shadow: 0 10px 30px rgba(6, 43, 85, .09); }
.navbar-brand img { width: 200px; height: 42px; object-fit: contain; }
.site-navbar .nav-link {
  color: #1d355d;
  font-weight: 750;
  border-radius: 12px;
  padding: .65rem .72rem;
}
.site-navbar .nav-link:hover,
.site-navbar .nav-link.current-page {
  color: var(--cwi-blue);
  background: rgba(11, 79, 163, .07);
}
.dropdown-menu {
  min-width: 240px;
  padding: .65rem;
  border: 1px solid var(--cwi-border);
  border-radius: 18px;
  box-shadow: 0 22px 55px rgba(6, 43, 85, .15);
}
.dropdown-item { padding: .65rem .8rem; border-radius: 10px; font-weight: 650; color: #28415f; }
.dropdown-item:hover, .dropdown-item.active { color: var(--cwi-blue); background: var(--cwi-soft); }

.btn-cwi,
.btn-cwi-outline,
.btn-white-outline {
  border-radius: 999px;
  padding: .82rem 1.25rem;
  font-weight: 800;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-cwi {
  color: #fff;
  border: 0;
  background: linear-gradient(135deg, var(--cwi-green), #35c996);
  box-shadow: 0 12px 26px rgba(31, 157, 88, .24);
}
.btn-cwi:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 34px rgba(31, 157, 88, .3); }
.btn-cwi-outline { color: var(--cwi-blue); border: 2px solid var(--cwi-blue); background: transparent; }
.btn-cwi-outline:hover { color: #fff; background: var(--cwi-blue); }
.btn-white-outline { color: #fff; border: 2px solid rgba(255, 255, 255, .8); }
.btn-white-outline:hover { color: var(--cwi-navy); background: #fff; }

.section-pad { padding: 92px 0; }
.section-kicker {
  margin-bottom: .8rem;
  color: var(--cwi-green);
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.section-title {
  color: var(--cwi-navy);
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -.045em;
}
.text-cwi-muted { color: var(--cwi-muted); }
.bg-cwi-soft { background: var(--cwi-soft); }

.page-hero {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: center;
  color: #fff;
  isolation: isolate;
  background-position: center;
  background-size: cover;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(3, 24, 50, .95) 0%, rgba(6, 43, 85, .84) 47%, rgba(6, 43, 85, .32) 100%);
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 110px;
  z-index: -1;
  background: linear-gradient(0deg, #fff, transparent);
}
.page-hero-content { max-width: 800px; padding: 110px 0 145px; }
.page-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .8rem;
  color: #dff2ff;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}
.page-hero h1 {
  margin: 1.15rem 0;
  font-size: clamp(3rem, 7vw, 6.1rem);
  line-height: .95;
  font-weight: 950;
  letter-spacing: -.065em;
}
.page-hero .lead { max-width: 740px; color: #edf8ff; line-height: 1.7; }

.content-card,
.pillar-card,
.outcome-card,
.form-card,
.document-card,
.story-card {
  height: 100%;
  border: 1px solid var(--cwi-border);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 16px 50px rgba(6, 43, 85, .08);
}
.content-card { padding: clamp(1.6rem, 4vw, 3rem); }
.pillar-card, .outcome-card, .story-card { padding: 1.8rem; transition: transform .2s ease, box-shadow .2s ease; }
.pillar-card:hover, .outcome-card:hover, .story-card:hover { transform: translateY(-5px); box-shadow: 0 24px 65px rgba(6, 43, 85, .13); }
.card-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-bottom: 1.1rem;
  color: var(--cwi-blue);
  background: var(--cwi-soft);
  border-radius: 18px;
  font-size: 1.55rem;
}
.pillar-card h3, .outcome-card h3, .story-card h3 { color: var(--cwi-navy); font-size: 1.25rem; font-weight: 850; }

.feature-image {
  min-height: 460px;
  overflow: hidden;
  border-radius: 32px;
  box-shadow: 0 24px 70px rgba(6, 43, 85, .16);
}
.feature-image img { width: 100%; height: 100%; min-height: 460px; object-fit: cover; }

.statement-panel,
.cta-panel {
  position: relative;
  overflow: hidden;
  color: #fff;
  border-radius: 36px;
  background: linear-gradient(135deg, var(--cwi-navy), var(--cwi-blue) 62%, var(--cwi-green));
  box-shadow: 0 26px 70px rgba(6, 43, 85, .22);
}
.statement-panel { padding: clamp(2rem, 5vw, 4.5rem); }
.statement-panel::after,
.cta-panel::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  right: -100px;
  top: -100px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
}
.quote-mark { color: #6cc7ff; font-size: 5rem; font-weight: 900; line-height: .7; }
.cta-panel { padding: clamp(2.2rem, 5vw, 4.5rem); text-align: center; }
.cta-panel > * { position: relative; z-index: 1; }

.project-nav {
  display: flex;
  gap: .65rem;
  padding-bottom: .5rem;
  overflow-x: auto;
}
.project-nav a {
  flex: 0 0 auto;
  padding: .65rem .95rem;
  color: #28415f;
  text-decoration: none;
  border: 1px solid var(--cwi-border);
  border-radius: 999px;
  background: #fff;
  font-weight: 750;
}
.project-nav a:hover, .project-nav a.active { color: #fff; background: var(--cwi-blue); border-color: var(--cwi-blue); }

.document-card { padding: 2rem; border-left: 5px solid var(--cwi-green); }
.document-card .bi { color: var(--cwi-blue); font-size: 2rem; }

.form-card { padding: clamp(1.5rem, 4vw, 3rem); }
.form-label { color: var(--cwi-navy); font-weight: 750; }
.form-control, .form-select {
  min-height: 52px;
  border-color: #cddceb;
  border-radius: 14px;
}
textarea.form-control { min-height: 150px; }
.form-control:focus, .form-select:focus {
  border-color: var(--cwi-sky);
  box-shadow: 0 0 0 .25rem rgba(56, 168, 255, .15);
}

.footer-main { color: #cfe7ff; background: #041d39; }
.footer-main h2, .footer-main h3 { color: #fff; }
.footer-main a { color: #eaf6ff; text-decoration: none; }
.footer-main a:hover { color: #fff; text-decoration: underline; }
.footer-logo { width: 200px; padding: 5px 9px; border-radius: 12px; background: #fff; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); color: #a9c8e5; }

@media (max-width: 1199.98px) {
  .site-navbar .nav-link { padding: .58rem .5rem; font-size: .94rem; }
}
@media (max-width: 991.98px) {
  .section-pad { padding: 70px 0; }
  .page-hero { min-height: 560px; }
  .page-hero::before { background: linear-gradient(90deg, rgba(3, 24, 50, .95), rgba(6, 43, 85, .72)); }
  .page-hero-content { padding: 85px 0 120px; }
  .navbar-collapse { padding: 1rem 0; max-height: calc(100vh - 90px); overflow-y: auto; }
  .dropdown-menu { border: 0; box-shadow: none; background: var(--cwi-soft); }
}
@media (max-width: 575.98px) {
  .navbar-brand img { width: 168px; height: auto; }
  .page-hero h1 { font-size: 3.15rem; }
  .feature-image, .feature-image img { min-height: 320px; }
  .pillar-card, .outcome-card, .story-card { padding: 1.4rem; }
}