/* ===== Root Colours & Fonts ===== */
:root {
  --purple:#403d84;
  --blue:#5d84c2;
  --green:#88aa6f;
  --green-hover:#76985f;
  --dark-purple:#2f2c63;
  --white:#fff;
  --light:#f5f7fa;
  --text:#333;
  --text-light:#666;
  --border:#e0e4e8;
  --radius:12px;
  --transition:.3s ease;
  --heading:'Merriweather',serif;
  --heading2:'Open Sans',sans-serif;
  --body:'Open Sans',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--body);color:var(--text);background:#fff;line-height:1.6}
img{max-width:100%;display:block}
a{text-decoration:none;transition:var(--transition);color:inherit}
ul{list-style:none}
h1,h3,h4{font-family:var(--heading);color:var(--purple)}
h2{font-family:var(--heading2);color:var(--purple)}
h2{font-size:2.9rem;}
h4{font-size: 1.6rem}
.container{max-width:1200px;margin:auto;padding:0 20px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 22px;font-weight:600;border:2px solid transparent;border-radius:24px;cursor:pointer;transition:var(--transition)}
.btn-primary{background:var(--green);border-color:var(--green);color:var(--white)}
.btn-primary:hover{background:var(--green-hover)}
.btn-dark{background:var(--purple);color:#fff}
.btn-dark:hover{background:var(--dark-purple)}
.btn-outline{border-color:#fff;color:#fff;background:transparent}
.btn-outline:hover{background:#fff;color:var(--purple)}


/* Header */
header{background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.1);position:sticky;top:0;z-index:10}
header .container{display:flex;align-items:center;justify-content:space-between;height:90px}
.logo img{height:80px}
.nav-list{display:flex;gap:1.5rem;list-style: none;padding: 0;margin: 0;}
.nav-list a{font-weight:600;position:relative}
.nav-list a::after{content:"";position:absolute;bottom:-5px;left:0;width:0;height:2px;background:var(--blue);transition:var(--transition)}
.nav-list a:hover::after{width:100%}



/* Hero */
/* HERO SECTION IMPROVED */
.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
}

/* Soft gradient background blending purple + green */
.hero-overlay {
  background: linear-gradient(120deg, #403d84 0%, #5d84c2 50%, #88aa6f 100%);
  background-size: 200% 200%;
  animation: gradientShift 10s ease infinite;
  padding: 6rem 0;
}

/* Subtle animated gradient */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.hero-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.hero-text h1 {
  font-size: 3.5rem;
  line-height: 1.2;
  font-family: var(--heading);
  margin-bottom: 1.5rem;
  color: #fff;
}

/* Emphasize "Canadian" in green */
.hero-text h1 span {
  color: #cde2c0;
}

/* Subtle drop-shadow for text to stand out */
.hero-text p {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.9);
  max-width: 600px;
  margin-bottom: 2.5rem;
}

/* Buttons: contrast & hover animation */
.hero-buttons .btn {
  margin-right: 1rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hero-buttons .btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* Hero Image Styling */
.hero-image {
  position: relative;
}

.hero-image img {
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  transform: scale(1);
  transition: transform 5s ease;
}

/* Subtle slow zoom animation on load */
.hero-image img:hover {
  transform: scale(1.05);
}


/* About Section */
.about-section{padding:4rem 0;text-align:center}
.about-section .intro{max-width:900px;margin:0 auto 4.5rem;color:var(--text-light)}
.about-text {
  max-width: 850px;
  margin: 0 auto;
  text-align: left;          /* makes large paragraphs easier to read */
  color: var(--color-text-light);
  line-height: 1.75;
  font-size: 1.05rem;
}

.about-text p {
  margin-bottom: 1.2rem;
}
.ccb-link {
  color: var(--purple);
  text-decoration: none;
}

.ccb-link:hover {
  color: var(--dark-purple);
  text-decoration: underline;
}
.section-title {
  text-align: center;
  font-size: 2.8rem;
  color: var(--purple);
  margin-bottom: 2.5rem;
}


.mission-vision {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 3rem;
  margin-bottom: 3rem; /* extra white space under cards */
}


/* Base card styling */
.card {
  border: none;
  border-radius: var(--radius);
  padding: 2rem;
  text-align: left;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* Mission box – light blue */
.mission-box {
  background: #eef3fb; /* pale blue */
}

/* Vision box – light green */
.vision-box {
  background: #f4f8f1; /* pale green */
}

.mission-box,
.vision-box {
  min-height: 450px;   /* controls vertical height */
  padding: 3rem 2rem;  /* gives them more “column” feel */
  display: flex;
  flex-direction: column;
}

.mission-vision {
  display: grid;
  grid-template-columns: 400px 400px; /* narrower boxes */
  justify-content: center;            /* centers the pair */
  gap: 2rem;
}
/* Optional: small detail line under heading */
.card h3 {
  color: var(--purple);
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
  border-bottom: 2px solid var(--green);
  display: inline-block;
  padding-bottom: 4px;
}

.card{border:1px solid var(--border);border-radius:var(--radius);padding:2rem;text-align:left}
.card img{width:60px;margin-bottom:1rem}



/* What We Do */

.what-we-do{text-align: center;padding:4rem 0;background:var(--light)}
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;text-align:center}
.service{background:#fff;border-radius:var(--radius);padding:2rem;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.service img{width:60px;margin:0 auto 1rem}
.service h3{color:var(--blue);margin-bottom:.5rem}

/* Research Initiative */
/* Research Initiative */
.research {
  padding: 4rem 0;
}

.research-box {
  background: #f5f4fa; /* pale lavender‑white tone */
  color: var(--text);
  border-radius: var(--radius);
  padding: 3rem;
}

.research-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.research-box h2 {
  text-align: center;
  margin-bottom: 50px;
}
.research ul li {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .6rem;
}

.research ul img {
  width: 20px;
}
/* White spacer panel between Focus and Phases */
.focus-phases-spacer {
    background: #fff;          /* pure white panel */
    height: 100px;              /* adjust thickness as needed */
    width: 100%;
    border-top: 1px solid #eef0f3;    /* subtle separation lines */
    border-bottom: 1px solid #eef0f3; 
    box-shadow: inset 0 1px 0 rgba(0,0,0,0.02), inset 0 -1px 0 rgba(0,0,0,0.02);
  }
  /* Reduce extra vertical gaps so the panel is the visual divider */
  .focus { margin-bottom: 0; }
  .phases { margin-top: 0; }   /* keep your existing padding in .phases */

/* Focus Areas */
.focus{background:var(--light);padding:4rem 0; text-align:center}
.focus-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;text-align:center}
.focus-item{background:#fff;border-radius:var(--radius);padding:1.5rem;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.focus-item img{width:55px;margin:0 auto 1rem}
.focus-item h3{color:var(--blue);margin-bottom:.5rem}


/* Phases VERTICAL TIMELINE — perfectly aligned */
.phases {
    padding: 6rem 0;
    background: var(--light);
  }
  
  .timeline {
    position: relative;
    max-width: 900px;
    margin: 4rem auto;
  }
  
  /* center dashed line */
  .timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-left: 3px dashed rgba(64,61,132,0.25);
    z-index: 0;
  }
  
  .timeline-item {
    display: flex;
    justify-content: flex-end;
    position: relative;
    margin: 3.5rem 0;
  }
  
  .timeline-item.right {
    justify-content: flex-start;
  }
  
  .timeline-item::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    background: var(--purple);
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 0 0 4px #fff;
  }
  
  /* content cards */
  .timeline-item .content {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    padding: 2.5rem;
    width: 45%;
    position: relative;
    z-index: 1;
    transition: transform .3s, box-shadow .3s;
  }
  
  .timeline-item .content:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
  }
  
  /* number circle */
  .timeline-item .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.6rem;
  }
  
  .num.purple { background: var(--purple); }
  .num.green  { background: var(--green);  }
  .num.blue   { background: var(--blue);   }
  
  /* text formatting */
  .timeline-item h3 {
    color: var(--purple);
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
  }
  
  .timeline-item p {
    color: var(--text-light);
    margin-bottom: 1rem;
  }
  
  .timeline-item ul {
    margin: 0 0 1.25rem 1.25rem;
    color: var(--text-light);
    line-height: 1.65;
    font-size: 0.95rem;
  }
  
  .timeline-item a {
    color: var(--blue);
    font-weight: 600;
    text-decoration: none;
  }
  
  .timeline-item a:hover {
    color: var(--green);
  }
  
  /* responsive: stack vertically */
  @media (max-width: 768px) {
    .timeline::before { left: 24px; }
    .timeline-item {
      justify-content: flex-start;
    }
    .timeline-item .content {
      width: calc(100% - 40px);
      margin-left: 45px;
    }
  }
  
  
  
  /* ===== Responsive ===== */
  @media (max-width: 900px) {
    .phase-grid {
      gap: 2rem;
    }
    .phase {
      margin-top: 0;
      box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    }
  }
  
/* HOW YOU CAN HELP SECTION Split Image + Text Design */
/* Reusable white spacer panel between sections */
.section-spacer {
    background: #fff;
    height: 80px;                 /* adjust thickness */
    width: 100%;
    border-top: 1px solid #eef0f3;
    border-bottom: 1px solid #eef0f3;
    box-shadow: inset 0 1px 0 rgba(0,0,0,0.02), inset 0 -1px 0 rgba(0,0,0,0.02);
  }
  /* Ensure adjacent sections don't add extra gaps */
  .help-split { margin-top: 0; }   /* keep existing padding */
  .join { margin-top: 0; }         /* keep existing padding */

.help-split {
  background: var(--light);
  padding: 5rem 0;
}

.help-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 3rem;
}

.help-image img {
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

.help-content h2 {
  color: var(--purple);
  font-size: 2.4rem;
  margin-bottom: 1rem;
}

.help-content p {
  color: var(--color-text-light);
  margin-bottom: 2rem;
  line-height: 1.7;
  font-size: 1.05rem;
}

.help-actions .btn {
  margin-right: 1rem;
}


/* Join Section */
.join{background:var(--dark-purple);color:#fff;padding:4rem 0;text-align:center}
.join img{width:80px;margin:0 auto 1.5rem;filter:brightness(0) invert(1)}
.join-buttons{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;margin-top:2rem}
.join h2 {color: white;
}
/* Footer */
.footer{background:var(--purple);color:#fff;padding:3rem 0}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2rem;margin-bottom:2rem}
.footer a{opacity:.8}
.footer a:hover{opacity:1;color:var(--green)}
.social-links{display:flex;gap:1rem;margin-top:1rem}
.social-links img{width:22px;filter:brightness(0) invert(1)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.2);padding-top:1rem;display:flex;justify-content:space-between;flex-wrap:wrap}