:root {
      --green: #155e4d;
      --green-dark: #103f3a;
      --green-light: #53b275;
      --green-soft: #e8f6ed;
      --yellow: #fcd13f;
      --yellow-soft: #fff4bf;
      --blue: #38b1eb;
      --blue-dark: #224359;
      --blue-soft: #e9f8ff;
      --red: #c9455a;
      --red-soft: #fff0ee;
      --cream: #fffdf5;
      --sand: #f4f0df;
      --ink: #1d2c35;
      --muted: #60727b;
      --white: #ffffff;
      --shadow: none;
      --radius-xl: 34px;
      --radius-lg: 24px;
      --radius-md: 16px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background: var(--cream);
      color: var(--ink);
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.6;
    }

    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; }

    .topbar {
      background: var(--green-dark);
      color: rgba(255,255,255,.9);
      font-size: 14px;
      padding: 10px 6vw;
      display: flex;
      justify-content: space-between;
      gap: 20px;
      align-items: center;
    }
    .topbar span { opacity: .9; }
    .topbar a { font-weight: 700; color: var(--yellow); }

    .nav {
      position: sticky;
      top: 0;
      z-index: 10;
      background: var(--cream);
      border-bottom: 2px solid rgba(21,94,77,.12);
      padding: 18px 6vw;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 800;
      color: var(--green-dark);
      letter-spacing: -.02em;
      line-height: 1.1;
      min-width: 250px;
    }
    .brand-mark {
      width: 54px;
      height: 64px;
      border-radius: 0;
      display: block;
      object-fit: contain;
      background: transparent;
      flex: 0 0 auto;
    }
    .menu {
      display: flex;
      align-items: center;
      gap: 24px;
      font-size: 15px;
      color: #28424a;
      font-weight: 700;
    }
    .menu a:hover { color: var(--green); }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      padding: 13px 22px;
      font-weight: 800;
      transition: background-color .2s ease, color .2s ease, border-color .2s ease;
      border: 2px solid transparent;
      cursor: pointer;
      white-space: nowrap;
      box-shadow: none !important;
      appearance: none;
    }
    .btn-primary { background: var(--green); color: #fff; border-color: var(--green); box-shadow: none !important; }
    .btn-primary:hover { transform: none; background: var(--green-dark); border-color: var(--green-dark); }
    .btn-gold { background: var(--yellow); color: #20343a; border: 2px solid var(--yellow); box-shadow: none !important; }
    .btn-gold:hover { transform: none; background: #f4c319; border-color: #f4c319; }
    .btn-ghost { background: #fff; color: var(--green-dark); border: 2px solid rgba(21,94,77,.18); box-shadow: none !important; }
    .btn-ghost:hover { transform: none; background: var(--green-soft); }

    .btn-red {
      background: var(--red);
      color: #fff;
      border-color: var(--red);
      box-shadow: none !important;
    }
    .btn-red:hover {
      background: #b93f3a;
      border-color: #b93f3a;
      transform: none;
    }
    .accent-red {
      color: var(--red);
    }
    .audience-card:nth-child(4) .icon {
      background: var(--red-soft);
      color: var(--red);
    }
.program-card:nth-child(3) .program-meta,
    .resource-card:nth-child(2) h3 {
      color: var(--red);
    }


    .hero {
      position: relative;
      overflow: hidden;
      padding: 82px 6vw 72px;
      background: var(--cream);
    }

    .hero-divider {
      height: 18px;
      background: linear-gradient(90deg, var(--red) 0 18%, var(--yellow) 18% 42%, var(--blue) 42% 66%, var(--green-light) 66% 84%, var(--green) 84% 100%);
      border-top: 2px solid rgba(21,94,77,.08);
      border-bottom: 2px solid rgba(21,94,77,.08);
    }
    .hero-inner {
      max-width: 1220px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.02fr .98fr;
      gap: 52px;
      align-items: center;
    }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 14px;
      border-radius: 999px;
      background: var(--green-soft);
      color: var(--green-dark);
      font-size: 13px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .08em;
      margin-bottom: 22px;
    }
    .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--blue); }
    h1, h2, h3 {
      margin: 0;
      letter-spacing: -.04em;
      line-height: 1.07;
    }
    h1 {
      font-family: "Libre Baskerville", Georgia, serif;
      font-size: clamp(48px, 7vw, 82px);
      color: var(--green-dark);
      max-width: 760px;
    }
    .hero p {
      color: #405761;
      font-size: clamp(18px, 2vw, 22px);
      max-width: 690px;
      margin: 24px 0 34px;
    }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
    .hero-stats {
      margin-top: 38px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      max-width: 660px;
    }
    .stat {
      background: rgba(255,255,255,.72);
      border: 1px solid rgba(21,94,77,.12);
      border-radius: 18px;
      padding: 16px;
    }
    .stat strong { display: block; font-size: 24px; color: var(--green); line-height: 1; }
    .stat span { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); font-weight: 700; }

    .hero-art {
      position: relative;
      min-height: 520px;
    }
    .globe-card {
      position: absolute;
      inset: 20px 0 20px 0;
      border-radius: var(--radius-xl);
      background: #fff;
      overflow: hidden;
      border: 1px solid rgba(21,94,77,.1);
    }
    .map-lines {
      position: absolute;
      inset: 0;
      opacity: .82;
      background:
        linear-gradient(90deg, rgba(21,94,77,.07) 1px, transparent 1px),
        linear-gradient(rgba(21,94,77,.07) 1px, transparent 1px);
      background-size: 42px 42px;
    }
    .circle { position: absolute; border-radius: 50%; border: 2px solid rgba(21,94,77,.18); }
    .c1 { width: 360px; height: 360px; right: 54px; top: 55px; }
    .c2 { width: 240px; height: 240px; right: 112px; top: 115px; border-color: rgba(252,209,63,.55); }
    .c3 { width: 110px; height: 110px; right: 177px; top: 180px; background: rgba(21,94,77,.08); }
    .people-card {
      position: absolute;
      left: 34px;
      bottom: 34px;
      right: 34px;
      background: rgba(255,255,255,.88);
      border: 1px solid rgba(21,94,77,.14);
      border-radius: 26px;
      padding: 22px;
      display: grid;
      grid-template-columns: repeat(3,1fr);
      gap: 14px;
      backdrop-filter: blur(12px);
    }
    .mini-person {
      background: var(--green-soft);
      border-radius: 18px;
      padding: 18px 12px;
      text-align: center;
      min-height: 130px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 10px;
    }
    .avatar {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: var(--blue-soft);
      border: 2px solid rgba(56,177,235,.26);
      position: relative;
      overflow: hidden;
    }
    .avatar:before {
      content: "";
      position: absolute;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--blue);
      left: 14px;
      top: 8px;
    }
    .avatar:after {
      content: "";
      position: absolute;
      width: 46px;
      height: 30px;
      border-radius: 50% 50% 0 0;
      background: var(--green);
      left: 3px;
      top: 32px;
    }
    .mini-person:nth-child(2) .avatar { background: var(--yellow-soft); }
    .mini-person:nth-child(3) .avatar { background: var(--blue-soft); }
    .mini-person b { font-size: 13px; color: var(--green-dark); }
    .flower-accent {
      position: absolute;
      right: 34px;
      top: 34px;
      width: 82px;
      height: 82px;
      border-radius: 50% 50% 46% 54%;
      background: var(--red-soft);
      border: 2px solid rgba(217,75,69,.28);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--red);
      font-size: 34px;
      z-index: 2;
    }

    .floating-note {
      position: absolute;
      top: 42px;
      left: -10px;
      background: var(--green);
      color: #fff;
      border-radius: 22px;
      padding: 18px 20px;
      max-width: 240px;
      font-weight: 800;
    }
    .floating-note small { display: block; opacity: .8; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }

    section { padding: 76px 6vw; }
    .section-inner { max-width: 1220px; margin: 0 auto; }
    .section-head {
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 24px;
      margin-bottom: 32px;
    }
    .section-head h2 {
      font-family: "Libre Baskerville", Georgia, serif;
      font-size: clamp(34px, 4vw, 54px);
      color: var(--green-dark);
      max-width: 720px;
    }
    .section-head p { margin: 0; color: var(--muted); max-width: 430px; font-size: 17px; }

    .audience-grid, .program-grid, .resource-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }
    .audience-card, .program-card, .resource-card, .feature-box {
      background: #fff;
      border: 2px solid rgba(21,94,77,.12);
      border-top: 6px solid var(--green-light);
      border-radius: var(--radius-lg);
      padding: 26px;
    }
    .icon {
      width: 54px;
      height: 54px;
      border-radius: 18px;
      display: grid;
      place-items: center;
      background: var(--green-soft);
      color: var(--green-dark);
      font-size: 25px;
      margin-bottom: 18px;
    }
    .audience-card:nth-child(2) { border-top-color: var(--yellow); }
    .audience-card:nth-child(2) .icon { background: var(--yellow-soft); }
    .audience-card:nth-child(3) { border-top-color: var(--blue); }
    .audience-card:nth-child(3) .icon { background: var(--blue-soft); }
    .audience-card:nth-child(4) { border-top-color: var(--green); }
    .audience-card:nth-child(4) .icon { background: var(--green-soft); }
    .audience-card h3, .program-card h3, .resource-card h3 { font-size: 21px; color: var(--green-dark); margin-bottom: 10px; }
    .audience-card p, .program-card p, .resource-card p { color: var(--muted); margin: 0; font-size: 15px; }

    .mission-band {
      background: var(--green-dark);
      color: #fff;
      position: relative;
      overflow: hidden;
    }
    .mission-band:before {
      content: "";
      position: absolute;
      inset: -30% -10% auto auto;
      width: 540px;
      height: 540px;
      border-radius: 50%;
      background: rgba(252,209,63,.14);
    }
    .mission-layout {
      position: relative;
      max-width: 1220px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: .8fr 1.2fr;
      gap: 54px;
      align-items: center;
    }
    .mission-layout h2 {
      font-family: "Libre Baskerville", Georgia, serif;
      font-size: clamp(34px, 4vw, 54px);
      color: #fff;
    }
    .mission-layout p { font-size: 20px; color: rgba(255,255,255,.82); margin: 22px 0 0; }
    .competency-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }
    .competency {
      padding: 20px;
      border-radius: 20px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.12);
    }
    .competency b { color: var(--yellow); display:block; margin-bottom: 6px; }
    .competency span { color: rgba(255,255,255,.78); font-size: 14px; }

    .programs { background: var(--sand); }
    .program-card {
      position: relative;
      overflow: hidden;
      min-height: 250px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .program-card:after {
      content: "";
      position: absolute;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      right: -38px;
      top: -38px;
      background: rgba(252,209,63,.18);
    }
    .program-meta {
      color: var(--green);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .09em;
      font-weight: 900;
      margin-bottom: 14px;
    }
    .program-link { margin-top: 20px; color: var(--green); font-weight: 900; }

    .resource-card { min-height: 210px; }
    .pill-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
    .pill {
      border: 1px solid rgba(21,94,77,.18);
      background: #fff;
      color: var(--green-dark);
      border-radius: 999px;
      padding: 9px 14px;
      font-weight: 800;
      font-size: 13px;
    }
    .pill.active { background: var(--green); color: #fff; }

    .cta {
      background: var(--cream);
      padding: 78px 6vw;
    }
    .cta-card {
      max-width: 1120px;
      margin: 0 auto;
      background: #fbfcf8;
      border: 2px solid rgba(21,94,77,.12);
      border-radius: var(--radius-xl);
      padding: clamp(34px, 6vw, 64px);
      display: grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 30px;
      align-items: center;
      position: relative;
      overflow: hidden;
    }
    .cta-card:before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 12px;
      background: linear-gradient(90deg, var(--red) 0 22%, var(--yellow) 22% 45%, var(--blue) 45% 68%, var(--green-light) 68% 100%);
    }
    .cta h2 {
      font-family: "Libre Baskerville", Georgia, serif;
      font-size: clamp(34px, 4vw, 56px);
      color: var(--green-dark);
      margin-bottom: 16px;
    }
    .cta p { color: #3b5158; font-size: 19px; margin: 0; }
    .cta-actions { display: grid; grid-template-columns: 1fr; gap: 12px; }
    .cta-actions .btn { min-height: 64px; font-size: 18px; }

    .implementation {
      background: var(--cream);
    }
    .implementation-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }
    .feature-box h3 { font-size: 22px; color: var(--green-dark); margin-bottom: 12px; }
    .feature-box ul { margin: 0; padding-left: 18px; color: var(--muted); }
    .feature-box li { margin: 8px 0; }

    footer {
      background: #103f3a;
      color: rgba(255,255,255,.78);
      padding: 54px 6vw 28px;
    }
    .footer-inner {
      max-width: 1220px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.3fr repeat(3, .7fr);
      gap: 30px;
    }
    footer h4 { color: #fff; margin: 0 0 14px; }
    footer a { display: block; margin: 9px 0; color: rgba(255,255,255,.76); }
    .fineprint { max-width: 1220px; margin: 34px auto 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; }

    @media (max-width: 1050px) {
      .menu { display: none; }
      .hero-inner, .mission-layout, .cta-card { grid-template-columns: 1fr; }
      .hero-art { min-height: 430px; }
      .audience-grid, .program-grid, .resource-grid { grid-template-columns: repeat(2, 1fr); }
      .footer-inner, .implementation-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 650px) {
      .topbar { display: none; }
      .nav { padding: 14px 5vw; }
      .brand { min-width: auto; font-size: 14px; }
      .brand-mark { width: 44px; height: 58px; }
      .nav .btn { display: none; }
      .hero { padding-top: 54px; }
      .hero-stats, .audience-grid, .program-grid, .resource-grid, .competency-grid, .footer-inner, .implementation-grid { grid-template-columns: 1fr; }
      .section-head { display: block; }
      .section-head p { margin-top: 14px; }
      .people-card { grid-template-columns: 1fr; position: relative; left: auto; right: auto; bottom: auto; margin: 190px 20px 20px; }
      .flower-accent {
      position: absolute;
      right: 34px;
      top: 34px;
      width: 82px;
      height: 82px;
      border-radius: 50% 50% 46% 54%;
      background: var(--red-soft);
      border: 2px solid rgba(217,75,69,.28);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--red);
      font-size: 34px;
      z-index: 2;
    }

    .floating-note { left: 20px; right: 20px; max-width: none; }
      .hero-art { min-height: 640px; }
      .globe-card { inset: 0; }
      section { padding: 56px 5vw; }
    }
  
  
    /* Different eyebrow colors for the four resource boxes only */
    .resource-card:nth-child(1) .program-meta {
      color: var(--blue);
    }

    .resource-card:nth-child(2) .program-meta {
      color: var(--red);
    }

    .resource-card:nth-child(3) .program-meta {
      color: var(--green);
    }

    .resource-card:nth-child(4) .program-meta {
      color: #b68a00;
    }

  
    /* Apply varied colors across ALL card eyebrow labels only */
    .program-card h3,
    .resource-card h3 {
      color: var(--green-dark) !important;
    }

    .program-card:nth-child(1) .program-meta,
    .resource-card:nth-child(1) .program-meta {
      color: var(--blue) !important;
    }

    .program-card:nth-child(2) .program-meta,
    .resource-card:nth-child(2) .program-meta {
      color: var(--red) !important;
    }

    .program-card:nth-child(3) .program-meta,
    .resource-card:nth-child(3) .program-meta {
      color: var(--green-light) !important;
    }

    .program-card:nth-child(4) .program-meta,
    .resource-card:nth-child(4) .program-meta {
      color: #b68a00 !important;
    }

  
    /* Program card background circles: one intentional color per card */
    .program-card::after {
      background: rgba(56,177,235,.16) !important; /* blue */
    }

    .program-card:nth-child(2)::after {
      background: rgba(201,69,90,.16) !important; /* red */
    }

    .program-card:nth-child(3)::after {
      background: rgba(83,178,117,.16) !important; /* light green */
    }

    .program-card:nth-child(4)::after {
      background: rgba(252,209,63,.22) !important; /* yellow */
    }

  
    /* Make the hero audience cards visually distinct instead of repeating the same avatar */
    .people-card {
      gap: 18px;
    }

    .mini-person {
      position: relative;
      min-height: 150px;
      border: 2px solid rgba(21,94,77,.08);
      background: #fff;
    }

    .mini-person .avatar {
      display: none;
    }

    .mini-person::before {
      content: "";
      width: 68px;
      height: 68px;
      border-radius: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 34px;
      font-weight: 900;
      margin-bottom: 4px;
      border: 2px solid transparent;
    }

    .mini-person:nth-child(1) {
      background: var(--blue-soft);
    }

    .mini-person:nth-child(1)::before {
      content: "📘";
      background: #fff;
      border-color: rgba(56,177,235,.35);
    }

    .mini-person:nth-child(2) {
      background: var(--yellow-soft);
    }

    .mini-person:nth-child(2)::before {
      content: "🌱";
      background: #fff;
      border-color: rgba(252,209,63,.55);
    }

    .mini-person:nth-child(3) {
      background: var(--green-soft);
    }

    .mini-person:nth-child(3)::before {
      content: "🤝";
      background: #fff;
      border-color: rgba(83,178,117,.38);
    }

    .mini-person b {
      color: var(--green-dark);
      font-size: 16px;
    }

  
    /* Distinct pathway icons for the Clear pathways section */
    .audience-card .icon {
      width: 72px;
      height: 72px;
      border-radius: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      border: 2px solid transparent;
    }

    .audience-card .icon svg {
      width: 42px;
      height: 42px;
      fill: none;
      stroke: currentColor;
      stroke-width: 4;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .audience-card .icon-educators {
      background: var(--blue-soft) !important;
      color: var(--blue);
      border-color: rgba(56,177,235,.35);
    }

    .audience-card .icon-youth {
      background: var(--yellow-soft) !important;
      color: #b68a00;
      border-color: rgba(252,209,63,.55);
      border-radius: 999px;
    }

    .audience-card .icon-partners {
      background: var(--green-soft) !important;
      color: var(--green-light);
      border-color: rgba(83,178,117,.38);
      border-radius: 18px;
    }

    .audience-card .icon-supporters {
      background: var(--red-soft) !important;
      color: var(--red);
      border-color: rgba(201,69,90,.35);
      border-radius: 32px 32px 18px 18px;
    }

  
    /* Separate project approach explainer — intentionally outside the public website mockup */
    .approach-explainer {
      background: #ffffff;
      color: #1d2c35;
      padding: 72px 6vw 86px;
      border-top: 8px solid #e8ece8;
    }

    .approach-explainer .approach-label {
      max-width: 1220px;
      margin: 0 auto 22px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 9px 14px;
      border-radius: 999px;
      background: #f1f4f2;
      color: #46575f;
      border: 1px solid #dbe3df;
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .09em;
    }

    .approach-explainer .section-inner {
      max-width: 1220px;
      margin: 0 auto;
    }

    .approach-explainer .section-head {
      align-items: start;
      border-bottom: 1px solid #e3e8e5;
      padding-bottom: 28px;
      margin-bottom: 34px;
    }

    .approach-explainer .section-head h2 {
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: clamp(34px, 5vw, 58px);
      letter-spacing: -.05em;
      line-height: .98;
      color: #1d2c35;
    }

    .approach-explainer .section-head p {
      color: #52646c;
      font-size: 18px;
      max-width: 540px;
    }

    .approach-explainer .implementation-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .approach-explainer .feature-box {
      background: #f7f8f5;
      border: 1px solid #dfe7e1;
      border-radius: 18px;
      padding: 28px;
      border-top: 0;
      box-shadow: none;
    }

    .approach-explainer .feature-box h3 {
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 20px;
      color: #1d2c35;
      letter-spacing: -.02em;
    }

    .approach-explainer .feature-box ul {
      color: #52646c;
      padding-left: 20px;
    }

    .approach-explainer .feature-box li {
      margin: 10px 0;
    }

    @media (max-width: 1050px) {
      .approach-explainer .implementation-grid {
        grid-template-columns: 1fr;
      }
    }

  
    /* Hero animation: faster spinning circles + heartbeat accent */
    .circle {
      transform-origin: center center;
      will-change: transform;
    }

    .c1,
    .c2 {
      animation-timing-function: linear;
      animation-iteration-count: infinite;
      animation-name: orbit-spin;
    }

    .c1 {
      animation-duration: 14s;
      border-color: rgba(83,178,117,.42);
    }

    .c2 {
      animation-duration: 10s;
      animation-direction: reverse;
      border-color: rgba(252,209,63,.75);
    }

    .c3 {
      animation: center-pulse 4.2s ease-in-out infinite;
      border: 2px solid rgba(83,178,117,.25);
      position: absolute;
    }

    .c1::after,
    .c2::after,
    .c3::after {
      content: "";
      position: absolute;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      box-shadow: 0 0 0 8px rgba(255,255,255,.6);
    }

    .c1 {
      color: rgba(83,178,117,.95);
    }

    .c1::after {
      top: -7px;
      left: 50%;
      margin-left: -6px;
      background: rgba(83,178,117,.95);
    }

    .c2 {
      color: rgba(252,209,63,.95);
    }

    .c2::after {
      right: -7px;
      top: 50%;
      margin-top: -6px;
      background: rgba(252,209,63,.95);
    }

    .c3::after {
      top: 50%;
      left: 50%;
      margin-left: -6px;
      margin-top: -6px;
      background: rgba(201,69,90,.95);
      box-shadow: 0 0 0 6px rgba(255,255,255,.55);
    }

    .flower-accent {
      animation: heart-beat 1.4s ease-in-out infinite;
      transform-origin: center center;
      will-change: transform;
    }

    @keyframes orbit-spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    @keyframes center-pulse {
      0%, 100% { transform: scale(1); opacity: .95; }
      50% { transform: scale(1.08); opacity: 1; }
    }

    @keyframes heart-beat {
      0%, 100% { transform: scale(1); }
      14% { transform: scale(1.08); }
      28% { transform: scale(1); }
      42% { transform: scale(1.14); }
      70% { transform: scale(1); }
    }

    @media (prefers-reduced-motion: reduce) {
      .c1, .c2, .c3, .flower-accent {
        animation: none !important;
      }
    }

  
    /* Interactive hover states for the pathway cards */
    .audience-card {
      position: relative;
      cursor: pointer;
      transition: transform .22s ease, background-color .22s ease, border-color .22s ease;
    }

    .audience-card .icon,
    .audience-card h3,
    .audience-card p {
      transition: transform .22s ease, color .22s ease, background-color .22s ease, border-color .22s ease;
    }

    .audience-card::after {
      content: "Explore →";
      position: absolute;
      right: 24px;
      bottom: 20px;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .02em;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity .22s ease, transform .22s ease, color .22s ease;
      color: var(--green-dark);
    }

    .audience-card:hover {
      transform: translateY(-6px);
      background: #fff;
    }

    .audience-card:hover::after {
      opacity: 1;
      transform: translateY(0);
    }

    .audience-card:hover h3 {
      color: var(--green);
    }

    .audience-card:hover .icon {
      transform: scale(1.06);
    }

    .audience-card:nth-child(1):hover {
      border-color: rgba(56,177,235,.38);
    }
    .audience-card:nth-child(1):hover .icon {
      background: #eef8fe !important;
      border-color: rgba(56,177,235,.55);
    }
    .audience-card:nth-child(1):hover::after {
      color: var(--blue);
    }

    .audience-card:nth-child(2):hover {
      border-color: rgba(252,209,63,.48);
    }
    .audience-card:nth-child(2):hover .icon {
      background: #fff8db !important;
      border-color: rgba(252,209,63,.72);
    }
    .audience-card:nth-child(2):hover::after {
      color: #b68a00;
    }

    .audience-card:nth-child(3):hover {
      border-color: rgba(83,178,117,.38);
    }
    .audience-card:nth-child(3):hover .icon {
      background: #f1faf3 !important;
      border-color: rgba(83,178,117,.55);
    }
    .audience-card:nth-child(3):hover::after {
      color: var(--green-light);
    }

    .audience-card:nth-child(4):hover {
      border-color: rgba(201,69,90,.34);
    }
    .audience-card:nth-child(4):hover .icon {
      background: #fff4f4 !important;
      border-color: rgba(201,69,90,.5);
    }
    .audience-card:nth-child(4):hover::after {
      color: var(--red);
    }

    @media (max-width: 900px) {
      .audience-card::after {
        opacity: 1;
        transform: none;
        position: static;
        display: inline-block;
        margin-top: 14px;
      }
      .audience-card:hover {
        transform: none;
      }
    }

  
    /* Fix pathway card hover link spacing so it does not blend into the body text */
    .audience-card {
      padding-bottom: 82px !important;
    }

    .audience-card::after {
      left: 34px !important;
      right: auto !important;
      bottom: 28px !important;
      display: inline-flex;
      align-items: center;
      width: fit-content;
      padding: 8px 13px;
      border-radius: 999px;
      background: rgba(21,94,77,.06);
      border: 1px solid rgba(21,94,77,.12);
      line-height: 1;
    }

    .audience-card:nth-child(1)::after {
      background: var(--blue-soft);
      border-color: rgba(56,177,235,.28);
    }

    .audience-card:nth-child(2)::after {
      background: var(--yellow-soft);
      border-color: rgba(252,209,63,.42);
    }

    .audience-card:nth-child(3)::after {
      background: var(--green-soft);
      border-color: rgba(83,178,117,.28);
    }

    .audience-card:nth-child(4)::after {
      background: var(--red-soft);
      border-color: rgba(201,69,90,.24);
    }

    @media (max-width: 900px) {
      .audience-card {
        padding-bottom: 34px !important;
      }

      .audience-card::after {
        position: static !important;
        margin-top: 18px !important;
      }
    }

  
    /* Interactive hover states for the Featured programs cards */
    .program-card {
      transition: transform .22s ease, background-color .22s ease, border-color .22s ease;
      cursor: pointer;
    }

    .program-card h3,
    .program-card p,
    .program-card .program-link,
    .program-card::after {
      transition: transform .22s ease, color .22s ease, opacity .22s ease, background-color .22s ease;
    }

    .program-card:hover {
      transform: translateY(-6px);
      background: #ffffff;
      border-color: rgba(21,94,77,.18);
    }

    .program-card:hover h3 {
      color: var(--green);
    }

    .program-card:hover .program-link {
      transform: translateX(3px);
    }

    .program-card:hover::after {
      transform: scale(1.08);
      opacity: .95;
    }

    .program-card:nth-child(1):hover {
      border-color: rgba(56,177,235,.35);
    }

    .program-card:nth-child(2):hover {
      border-color: rgba(201,69,90,.28);
    }

    .program-card:nth-child(3):hover {
      border-color: rgba(83,178,117,.35);
    }

    .program-card:nth-child(4):hover {
      border-color: rgba(252,209,63,.45);
    }

    @media (max-width: 900px) {
      .program-card:hover {
        transform: none;
      }
    }

  
    /* Subtle background movement for the peace education section */
    .mission-band {
      position: relative;
      overflow: hidden;
    }

    .mission-band::before {
      animation: mission-orb-float 18s ease-in-out infinite alternate;
      will-change: transform;
    }

    .mission-band::after {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .18;
      pointer-events: none;
      background:
        radial-gradient(circle at 12% 24%, rgba(255,255,255,.05), transparent 20%),
        radial-gradient(circle at 82% 72%, rgba(252,209,63,.07), transparent 22%),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
      background-size: auto, auto, 46px 46px, 46px 46px;
      animation: mission-grid-drift 24s linear infinite;
      transform: translate3d(0,0,0);
      will-change: background-position, transform;
    }

    .mission-layout,
    .mission-band .section-inner,
    .mission-band .competency-grid,
    .mission-band .eyebrow,
    .mission-band h2,
    .mission-band p {
      position: relative;
      z-index: 1;
    }

    @keyframes mission-orb-float {
      0% { transform: translate3d(0, 0, 0) scale(1); }
      50% { transform: translate3d(-18px, 12px, 0) scale(1.03); }
      100% { transform: translate3d(12px, -10px, 0) scale(1.06); }
    }

    @keyframes mission-grid-drift {
      0% {
        background-position:
          0 0,
          0 0,
          0 0,
          0 0;
      }
      100% {
        background-position:
          18px -10px,
          -16px 12px,
          46px 0,
          0 46px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .mission-band::before,
      .mission-band::after {
        animation: none !important;
      }
    }

  
    /* Interactive hover states for the Resource Library cards */
    .resource-card {
      position: relative;
      cursor: pointer;
      transition: transform .22s ease, background-color .22s ease, border-color .22s ease;
      padding-bottom: 74px;
    }

    .resource-card h3,
    .resource-card p,
    .resource-card .program-meta {
      transition: color .22s ease, transform .22s ease;
    }

    .resource-card::after {
      content: "View resource →";
      position: absolute;
      left: 34px;
      bottom: 26px;
      display: inline-flex;
      align-items: center;
      width: fit-content;
      padding: 8px 13px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 800;
      line-height: 1;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity .22s ease, transform .22s ease, color .22s ease, background-color .22s ease, border-color .22s ease;
      background: rgba(21,94,77,.06);
      border: 1px solid rgba(21,94,77,.12);
      color: var(--green-dark);
    }

    .resource-card:hover {
      transform: translateY(-6px);
      background: #ffffff;
      border-color: rgba(21,94,77,.18);
    }

    .resource-card:hover h3 {
      color: var(--green);
    }

    .resource-card:hover::after {
      opacity: 1;
      transform: translateY(0);
    }

    .resource-card:nth-child(1):hover {
      border-color: rgba(56,177,235,.35);
    }
    .resource-card:nth-child(1)::after {
      background: var(--blue-soft);
      border-color: rgba(56,177,235,.28);
      color: var(--blue);
    }

    .resource-card:nth-child(2):hover {
      border-color: rgba(201,69,90,.28);
    }
    .resource-card:nth-child(2)::after {
      background: var(--red-soft);
      border-color: rgba(201,69,90,.24);
      color: var(--red);
    }

    .resource-card:nth-child(3):hover {
      border-color: rgba(83,178,117,.35);
    }
    .resource-card:nth-child(3)::after {
      background: var(--green-soft);
      border-color: rgba(83,178,117,.28);
      color: var(--green-light);
    }

    .resource-card:nth-child(4):hover {
      border-color: rgba(252,209,63,.45);
    }
    .resource-card:nth-child(4)::after {
      background: var(--yellow-soft);
      border-color: rgba(252,209,63,.42);
      color: #b68a00;
    }

    .pill {
      transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
    }

    .pill:hover {
      transform: translateY(-2px);
      border-color: rgba(21,94,77,.32);
    }

    @media (max-width: 900px) {
      .resource-card {
        padding-bottom: 34px;
      }

      .resource-card:hover,
      .pill:hover {
        transform: none;
      }

      .resource-card::after {
        position: static;
        opacity: 1;
        transform: none;
        margin-top: 18px;
      }
    }

  
    /* Functional resource filters and linked cards */
    .pill {
      font-family: inherit;
      cursor: pointer;
      appearance: none;
    }

    .pill:focus-visible,
    .resource-card:focus-visible {
      outline: 3px solid rgba(56,177,235,.55);
      outline-offset: 4px;
    }

    .resource-card {
      display: block;
      text-decoration: none;
      color: inherit;
    }

    .resource-card.is-hidden {
      display: none !important;
    }

    .resource-card.is-filtered-in {
      animation: resource-filter-in .24s ease both;
    }

    @keyframes resource-filter-in {
      from {
        opacity: 0;
        transform: translateY(8px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .resource-count {
      margin-top: 10px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 700;
    }

  
    /* Hover states for CTA buttons */
    .cta-actions .btn {
      transition: transform .22s ease, background-color .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease;
    }

    .cta-actions .btn:hover {
      transform: translateY(-4px);
    }

    .cta-actions .btn-primary:hover {
      background: var(--green-dark);
      border-color: var(--green-dark);
      box-shadow: 0 10px 22px rgba(16,63,58,.14);
    }

    .cta-actions .btn-ghost:hover {
      background: #ffffff;
      border-color: rgba(21,94,77,.28);
      color: var(--green);
      box-shadow: 0 8px 20px rgba(16,63,58,.08);
    }

    .cta-actions .btn-ghost:nth-child(2):hover {
      border-color: rgba(56,177,235,.35);
      color: var(--blue);
      background: var(--blue-soft);
    }

    .cta-actions .btn-ghost:nth-child(3):hover {
      border-color: rgba(83,178,117,.35);
      color: var(--green);
      background: var(--green-soft);
    }

    .cta-actions .btn-ghost:nth-child(4):hover {
      border-color: rgba(201,69,90,.28);
      color: var(--red);
      background: var(--red-soft);
    }

    .cta-actions .btn:focus-visible {
      outline: 3px solid rgba(56,177,235,.45);
      outline-offset: 4px;
    }

    @media (max-width: 900px) {
      .cta-actions .btn:hover {
        transform: none;
      }
    }

  
    /* Main navigation bottom-line hover */
    .menu a {
      position: relative;
      padding: 8px 0;
      transition: color .2s ease;
    }

    .menu a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 3px;
      border-radius: 999px;
      background: var(--yellow);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform .22s ease;
    }

    .menu a:hover {
      color: var(--green);
    }

    .menu a:hover::after,
    .menu a:focus-visible::after {
      transform: scaleX(1);
    }

    .menu a:nth-child(2)::after { background: var(--blue); }
    .menu a:nth-child(3)::after { background: var(--green-light); }
    .menu a:nth-child(4)::after { background: var(--red); }
    .menu a:nth-child(5)::after { background: var(--yellow); }

    .menu a:focus-visible {
      outline: none;
      color: var(--green);
    }

  
    /* Topbar link bottom-line hover */
    .topbar a {
      position: relative;
      display: inline-block;
      padding: 2px 0 4px;
      transition: color .2s ease;
    }

    .topbar a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 2px;
      border-radius: 999px;
      background: var(--yellow);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform .22s ease;
    }

    .topbar a:hover::after,
    .topbar a:focus-visible::after {
      transform: scaleX(1);
    }

    .topbar a:nth-of-type(2)::after {
      background: var(--blue);
    }

    .topbar a:nth-of-type(3)::after {
      background: var(--green-light);
    }

    .topbar a:hover,
    .topbar a:focus-visible {
      color: #ffffff;
      outline: none;
    }

  
    /* Footer / bottom navigation link hover */
    footer a {
      position: relative;
      display: inline-block;
      padding-bottom: 4px;
      transition: color .2s ease;
    }

    footer a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 2px;
      border-radius: 999px;
      background: var(--yellow);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform .22s ease;
    }

    footer a:hover,
    footer a:focus-visible {
      color: #ffffff;
      outline: none;
    }

    footer a:hover::after,
    footer a:focus-visible::after {
      transform: scaleX(1);
    }

    footer div:nth-child(2) a::after { background: var(--blue); }
    footer div:nth-child(3) a::after { background: var(--green-light); }
    footer div:nth-child(4) a::after { background: var(--red); }

  
    /* Topbar box movement hover for Donate · Become a Member · Contact */
    .topbar a {
      border-radius: 999px;
      padding: 5px 10px;
      margin: 0 -2px;
      transition: transform .22s ease, background-color .22s ease, color .22s ease;
    }

    .topbar a:hover,
    .topbar a:focus-visible {
      transform: translateY(-2px);
      background: rgba(255,255,255,.12);
      color: #ffffff;
      outline: none;
    }

    .topbar a::after {
      display: none !important;
    }

    .topbar a:first-of-type:hover {
      background: rgba(252,209,63,.18);
    }

    .topbar a:nth-of-type(2):hover {
      background: rgba(56,177,235,.18);
    }

    .topbar a:nth-of-type(3):hover {
      background: rgba(83,178,117,.18);
    }

  
    /* Expanded footer with organized bulleted sections */
    .footer-expanded {
      grid-template-columns: 1.45fr repeat(5, 1fr);
      align-items: start;
      gap: 34px;
    }

    .footer-about p {
      margin: 0;
      max-width: 420px;
      color: rgba(255,255,255,.82);
      font-size: 16px;
      line-height: 1.65;
    }

    footer ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    footer li {
      position: relative;
      margin: 10px 0;
      padding-left: 16px;
      color: rgba(255,255,255,.76);
    }

    footer li::before {
      content: "";
      position: absolute;
      left: 0;
      top: .72em;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--yellow);
    }

    .footer-expanded > div:nth-child(3) li::before { background: var(--blue); }
    .footer-expanded > div:nth-child(4) li::before { background: var(--green-light); }
    .footer-expanded > div:nth-child(5) li::before { background: var(--red); }
    .footer-expanded > div:nth-child(6) li::before { background: var(--yellow); }

    footer h4 {
      font-size: 16px;
      letter-spacing: .01em;
      margin-bottom: 16px;
    }

    footer a {
      margin: 0;
      line-height: 1.45;
    }

    @media (max-width: 1150px) {
      .footer-expanded {
        grid-template-columns: 1fr 1fr 1fr;
      }

      .footer-about {
        grid-column: 1 / -1;
      }
    }

    @media (max-width: 700px) {
      .footer-expanded {
        grid-template-columns: 1fr;
      }
    }

  

/* WordPress theme adjustments */
.admin-bar .nav { top: 32px; }
.skip-link { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { left: 18px; top: 18px; width:auto; height:auto; background:#fff; color:#103f3a; padding:12px 16px; z-index:1000; border-radius:12px; }
.nav { gap: 20px; }
.brand img.custom-logo, .brand-mark { width: 54px; height: 64px; object-fit: contain; }
.menu .menu-item-has-children { position: relative; }
.menu ul.sub-menu { position:absolute; top: 100%; left: 0; min-width: 210px; background:#fff; border:2px solid rgba(21,94,77,.12); border-radius: 18px; padding: 12px; display:none; box-shadow: 0 18px 40px rgba(16,63,58,.08); }
.menu li { list-style:none; }
.menu .menu-item-has-children:hover > ul.sub-menu, .menu .menu-item-has-children:focus-within > ul.sub-menu { display:block; }
.menu ul.sub-menu a { display:block; padding:9px 10px; }
.menu ul.sub-menu a::after { display:none; }
.mobile-toggle { display:none; border:2px solid rgba(21,94,77,.18); background:#fff; border-radius:999px; padding:10px 13px; font-weight:900; color:var(--green-dark); }
.egp-content { background: var(--cream); }
.page-hero { padding: 72px 6vw 34px; background: var(--cream); }
.page-hero .section-inner { max-width: 1060px; }
.page-hero h1 { font-size: clamp(44px,6vw,72px); }
.page-hero p { margin: 20px 0 0; color:#405761; font-size: clamp(18px,2vw,22px); max-width: 820px; }
.content-band { padding: 34px 6vw 76px; }
.content-panel { max-width: 1120px; margin: 0 auto; background:#fff; border:2px solid rgba(21,94,77,.12); border-radius: var(--radius-xl); padding: clamp(28px,5vw,56px); }
.content-panel h2 { font-family: "Libre Baskerville", Georgia, serif; font-size: clamp(30px,4vw,48px); color: var(--green-dark); margin: 34px 0 16px; }
.content-panel h2:first-child { margin-top:0; }
.content-panel h3 { font-size: 24px; color: var(--green-dark); margin: 26px 0 10px; }
.content-panel p, .content-panel li { color:#52646c; font-size:17px; }
.content-panel ul, .content-panel ol { padding-left: 24px; }
.split-layout { display:grid; grid-template-columns: .85fr 1.15fr; gap: 28px; align-items:start; }
.callout-card { background: var(--green-soft); border:2px solid rgba(21,94,77,.13); border-radius: 24px; padding: 26px; }
.callout-card.blue { background: var(--blue-soft); border-color: rgba(56,177,235,.28); }
.callout-card.yellow { background: var(--yellow-soft); border-color: rgba(252,209,63,.42); }
.callout-card.red { background: var(--red-soft); border-color: rgba(201,69,90,.24); }
.card-grid-2 { display:grid; grid-template-columns: repeat(2,1fr); gap:18px; margin-top: 22px; }
.card-grid-3 { display:grid; grid-template-columns: repeat(3,1fr); gap:18px; margin-top: 22px; }
.card-grid-4 { display:grid; grid-template-columns: repeat(4,1fr); gap:18px; margin-top: 22px; }
.simple-card { background:#fff; border:2px solid rgba(21,94,77,.12); border-top:6px solid var(--green-light); border-radius:24px; padding:24px; transition: transform .22s ease, border-color .22s ease; }
.simple-card:hover { transform: translateY(-5px); border-color: rgba(21,94,77,.22); }
.simple-card:nth-child(2n) { border-top-color: var(--yellow); }
.simple-card:nth-child(3n) { border-top-color: var(--blue); }
.simple-card:nth-child(4n) { border-top-color: var(--red); }
.simple-card h3 { margin-top:0; }
.team-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:18px; }
.team-card { background:#fff; border:2px solid rgba(21,94,77,.12); border-radius:24px; padding:24px; }
.team-card .role { color: var(--green); text-transform: uppercase; letter-spacing:.08em; font-weight:900; font-size:12px; margin-bottom: 8px; }
.lead-list { display:grid; grid-template-columns: repeat(2,1fr); gap:12px; margin: 22px 0; }
.lead-list li { background:#fbfcf8; border:1px solid rgba(21,94,77,.12); border-radius: 16px; padding: 14px 16px; list-style:none; }
.action-strip { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.contact-card { display:grid; grid-template-columns: .8fr 1.2fr; gap:24px; }
.egp-form { display:grid; gap:14px; }
.egp-form label { color:var(--green-dark); font-weight:800; }
.egp-form input, .egp-form textarea { width:100%; padding:14px 16px; border:2px solid rgba(21,94,77,.14); border-radius:16px; font:inherit; background:#fff; }
.egp-form textarea { min-height: 160px; }
.egp-form input:focus, .egp-form textarea:focus { outline:3px solid rgba(56,177,235,.35); border-color: rgba(56,177,235,.55); }
.project-section-label { margin-top: 36px; color: var(--green); font-size: 13px; text-transform:uppercase; letter-spacing:.1em; font-weight:900; }
.footer-about .brand-footer { display:flex; gap:12px; align-items:center; margin-bottom: 12px; color:#fff; font-weight:900; }
.footer-about img { width:40px; height:50px; object-fit:contain; }
.archive-list article { margin-bottom:24px; padding-bottom:24px; border-bottom:1px solid rgba(21,94,77,.12); }
.post-title { font-family:"Libre Baskerville", Georgia, serif; font-size: clamp(30px,4vw,48px); }
.wp-block-image img { border-radius:24px; }
@media (max-width: 1050px) {
  .mobile-toggle { display:inline-flex; }
  .nav { position: sticky; }
  .nav .menu { display:none; position:absolute; left: 5vw; right: 5vw; top: calc(100% + 8px); background:#fff; border:2px solid rgba(21,94,77,.12); border-radius:24px; padding:18px; flex-direction:column; align-items:stretch; gap:8px; }
  .nav .menu.is-open { display:flex; }
  .menu ul.sub-menu { position:static; display:block; box-shadow:none; border:0; padding:4px 0 4px 16px; }
  .menu a { display:block; }
  .split-layout, .contact-card, .card-grid-2, .card-grid-3, .card-grid-4, .team-grid, .lead-list { grid-template-columns:1fr; }
}
@media (max-width: 782px) { .admin-bar .nav { top: 46px; } }
@media (max-width: 650px) { .brand img.custom-logo, .brand-mark { width:44px;height:58px;} .page-hero { padding-top:48px;} .topbar span:last-child { display:flex; flex-wrap:wrap; gap:5px; } }
.menu-list { display:flex; align-items:center; gap:24px; margin:0; padding:0; }
.menu-list > li { list-style:none; }
.menu-list .sub-menu { margin:0; padding:0; }
@media (max-width:1050px){ .menu-list { flex-direction:column; align-items:stretch; gap:8px; } }