/* Refine the foundation's existing typography, colour and spacing. */
/* Community photos: varied silhouettes with a shared foundation-green frame. */
.about-us-img-wrapper,
.our-mission-img-wrapper,
.commitment-img-wrapper,
.do-more-img-wrapper,
.sustainable-image-wrapper {
  --photo-shape: 24% 8% 24% 8% / 28% 10% 28% 10%;
  position: relative;
  isolation: isolate;
  align-self: center;
  height: auto;
  aspect-ratio: 4 / 3;
  overflow: visible;
  border-radius: var(--photo-shape);
  background: #edf3e7;
  box-shadow: 0 18px 36px -24px rgba(26, 62, 30, .4);
}

.about-us-img-wrapper::before,
.our-mission-img-wrapper::before,
.commitment-img-wrapper::before,
.do-more-img-wrapper::before,
.sustainable-image-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid #8cab78;
  border-radius: inherit;
  transform: translate(10px, 12px);
  pointer-events: none;
}

.about-us-img-wrapper::after,
.our-mission-img-wrapper::after,
.commitment-img-wrapper::after {
  content: "";
  position: absolute;
  z-index: -2;
  width: 36%;
  aspect-ratio: 1;
  top: -14px;
  right: -12px;
  border-radius: 50%;
  background: #e5edce;
  pointer-events: none;
}

.about-us-img-wrapper img,
.our-mission-img-wrapper img,
.commitment-img-wrapper img,
.do-more-img-wrapper img,
.sustainable-image-wrapper img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}

.reverse-vision-layout .our-mission-img-wrapper {
  --photo-shape: 28% 28% 28% 28% / 40% 40% 40% 40%;
}

.reverse-vision-layout .our-mission-img-wrapper::before {
  transform: translate(-10px, 12px);
}

.about-us-img-wrapper,
.do-more-img-wrapper {
  --photo-shape: 28% 8% 8% 8%;
}

.commitment-img-wrapper,
.sustainable-image-wrapper {
  --photo-shape: 8% 28% 8% 28%;
}

@media (max-width: 968px) {
  .about-us-img-wrapper,
  .our-mission-img-wrapper,
  .commitment-img-wrapper,
  .do-more-img-wrapper,
  .sustainable-image-wrapper {
    width: calc(100% - 24px);
    max-width: 560px;
    margin-inline: auto;
    margin-block-start: 14px;
    margin-block-end: 18px;
  }
}

body { font-family: var(--DmSans); color: #252525; }
/* Homepage hero inspired by the inset, editorial reference. */
.home-page { background: #fbf8f4; --hero-inset: clamp(14px, 3vw, 44px); }
.home-page #navbar-container {
  position: absolute;
  top: var(--hero-inset);
  left: var(--hero-inset);
  right: var(--hero-inset);
  width: auto;
  height: 100px;
  padding: 18px clamp(24px, 4vw, 64px);
  background: transparent;
  border-bottom: 0;
  border-radius: 28px 28px 0 0;
}
.home-page #navbar-container.hidden { transform: none; }
.home-page .navbar-logo-wrapper { width: 150px; padding: 8px 12px; background: #fff; border-radius: 12px; }
.home-page .navbar-logo-wrapper img { display: block; }
.home-page .nav-anchor-wrapper { gap: clamp(18px, 2.3vw, 34px); }
.home-page .nav-anchor-wrapper a { color: #fff; font-size: 13px; }
.home-page .nav-anchor-wrapper a:hover { color: #e3edb2; }
.home-page .nav-donate-wrapper { width: 150px; height: 44px; background: #fff; color: #203a26; font-size: 12px; font-weight: 600; }
.community-hero {
  position: relative;
  isolation: isolate;
  min-height: 730px;
  margin: var(--hero-inset);
  padding: 180px clamp(24px, 4vw, 64px) 180px;
  overflow: hidden;
  border-radius: 28px;
  background: #17281b;
  color: #fff;
}
.community-hero__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.community-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 22, 14, .9) 0%, rgba(8, 22, 14, .66) 36%, rgba(8, 22, 14, .08) 75%), linear-gradient(180deg, rgba(8, 22, 14, .65), transparent 30%, transparent 65%, rgba(8, 22, 14, .55)); }
.community-hero__content { max-width: 590px; }
.community-hero__eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: #eef2da; }
.community-hero__eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: #ddec9c; }
.community-hero h1 { font-family: var(--DmSans); font-size: clamp(40px, 4.7vw, 68px); font-weight: 500; line-height: 1.06; letter-spacing: -.055em; }
.community-hero h1 em { font-style: normal; color: #e5edb4; }
.community-hero__description { max-width: 365px; margin: 24px 0 28px; font-size: 14px; color: #eceee8; }
.community-hero__cta { display: inline-flex; align-items: center; gap: 28px; min-height: 48px; padding: 12px 20px; border-radius: 100px; background: #fff; color: #203a26; font-size: 13px; font-weight: 600; transition: background .2s, transform .2s; }
.community-hero__cta:hover { background: #e5edb4; transform: translateY(-2px); }
.hero-arrow-icon { display: block; width: 20px; height: 20px; flex-shrink: 0; }
.community-hero__footnote { position: absolute; bottom: 42px; left: clamp(24px, 4vw, 64px); display: flex; align-items: center; gap: 12px; font-size: 11px; color: #e5e9de; }
.community-hero__icon { width: 27px; height: 27px; flex-shrink: 0; color: #e5edb4; }
.hero-volunteer { position: absolute; bottom: 42px; right: clamp(24px, 4vw, 64px); display: grid; grid-template-columns: 155px 1fr; gap: 20px; width: 440px; padding: 10px; background: #edf2bf; color: #23351f; border-radius: 14px; box-shadow: 0 12px 32px #07140d26; transition: background .2s; }
.hero-volunteer:hover { background: #f5f8d8; }
.hero-volunteer > img { width: 100%; height: 100%; min-height: 156px; object-fit: cover; border-radius: 8px; }
.hero-volunteer__content { padding: 10px 14px 10px 0; }
.hero-volunteer__label { font-size: 9px; letter-spacing: .035em; }
.hero-volunteer h2 { margin: 12px 0 8px; font-size: 19px; font-weight: 600; letter-spacing: -.035em; line-height: 1.15; }
.hero-volunteer p { font-size: 11px; }
.hero-volunteer__link { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; font-size: 11px; font-weight: 700; }
.hero-volunteer__link span { font-size: 20px; }
.community-hero a:focus-visible { outline: 3px solid #e5edb4; outline-offset: 5px; }
@media (max-width: 1100px) {
  .community-hero { padding-bottom: 240px; }
  .community-hero__footnote { max-width: 220px; }
}
@media (max-width: 968px) {
  .home-page #navbar-container { padding: 14px 24px; height: 88px; }
  .home-page .toggle-menu { color: #fff; background: #ffffff18; }
  .community-hero { padding-top: 145px; min-height: 780px; }
  .community-hero h1 { font-size: clamp(40px, 6.5vw, 60px); }
  .community-hero__footnote { display: none; }
  .hero-volunteer { left: 24px; right: auto; bottom: 28px; }
}
@media (max-width: 540px) {
  .home-page #navbar-container { padding-inline: 20px; }
  .home-page .navbar-logo-wrapper { width: 130px; }
  .community-hero { border-radius: 22px; padding: 132px 22px 24px; min-height: 0; }
  .community-hero::before { background: linear-gradient(90deg, #08160ee0, #08160e55), linear-gradient(0deg, #08160ef0, transparent 80%); }
  .community-hero__photo { object-position: 60% center; }
  .community-hero h1 { font-size: clamp(32px, 8.7vw, 47px); }
  .community-hero__eyebrow { font-size: 9px; letter-spacing: .07em; }
  .community-hero__description { font-size: 13px; }
  .hero-volunteer { position: relative; left: auto; bottom: auto; width: 100%; margin-top: 42px; grid-template-columns: 32% 1fr; gap: 12px; }
  .hero-volunteer > img { min-height: 150px; }
  .hero-volunteer__content { padding-right: 4px; }
  .hero-volunteer h2 { font-size: 17px; }
}
main p { line-height: 1.75; }
img { max-width: 100%; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 3px solid #29742e; outline-offset: 5px; }
#navbar-container { border-bottom: 1px solid #e6ebe3; }
.nav-anchor-wrapper { gap: clamp(20px, 3vw, 44px); }
.nav-anchor-wrapper a:hover, .nav-anchor-wrapper a[aria-current="page"] { color: var(--primary-color); }
.nav-anchor-wrapper a[aria-current="page"] { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 2px; }
.bread-navigation-wapper { height: clamp(300px, 34vw, 420px); }
.bread-navigation-overlay { background: rgba(10, 26, 12, .24); padding-top: 100px; }
.bread-navigation-overlay h1, .bread-navigation-overlay h2 { font-family: var(--anton-family); font-size: clamp(32px, 4vw, 52px); font-weight: 400; line-height: 1.2; margin-top: 30px; }
.bread-navigation-anchor { margin-top: 16px; }
.hero-carousel { height: min(900px, 100svh); min-height: 620px; }
.slide-description { font-size: clamp(15px, 1.2vw, 18px); line-height: 1.75; }
.slide-title { text-wrap: balance; }
.logo-footer-content p { line-height: 1.8; max-width: 380px; }
.full-footer-container { max-width: 1440px; margin-inline: auto; }
.donate-wrap { max-width: 1280px; margin: 0 auto; padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 64px); scroll-margin-top: 100px; }
.donate-intro { max-width: 640px; margin-bottom: 44px; }
.ngo-eyebrow { color: var(--primary-color); font-size: 12px; font-weight: 700; letter-spacing: .12em; margin-bottom: 14px; }
.ngo-title { font-size: clamp(28px, 3.4vw, 42px); font-weight: 400; color: #222822; line-height: 1.2; margin-bottom: 18px; }
.ngo-subtitle { font-size: 16px; color: #586058; line-height: 1.8; margin-bottom: 0; }
.donation-accounts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.currency-section { min-width: 0; margin-bottom: 0; border-top: 3px solid var(--primary-color); }
.currency-label { gap: 10px; padding: 20px 0; margin-bottom: 0; color: #303d30; font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.currency-dot { width: 7px; height: 7px; background: var(--primary-color); }
.account-card { background: #fff; border: 1px solid #dce3d9; border-radius: 12px; padding: 24px; }
.account-row { flex-direction: column; gap: 7px; padding: 18px 0; border-bottom: 1px solid #edf0eb; }
.row-label { font-size: 12px; color: #626b61; }
.row-value { font-size: 15px; font-weight: 600; color: #252d24; text-align: left; }
.copy-row { width: 100%; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.copy-row .row-value { font-size: 20px; letter-spacing: .035em; font-variant-numeric: tabular-nums; }
.copy-btn { justify-content: center; gap: 6px; min-height: 44px; padding: 8px 12px; background: #edf5e7; border: 1px solid #ceddc5; border-radius: 22px; color: #245c28; font-weight: 600; }
.copy-btn:hover { background: var(--secondary-color); border: 1px solid var(--primary-color); transform: none; }
.copy-btn.copied { background: var(--primary-color); color: #fff; }
.copy-status { min-height: 24px; margin-top: 16px; font-size: 13px; color: #345d32; }
.divider { border-top: 1px solid #dce3d9; margin: 16px 0 24px; }
.note { max-width: 650px; font-size: 14px; line-height: 1.8; color: #586058; text-align: left; }
.note a { color: var(--primary-color); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1050px) {
  .donation-accounts { grid-template-columns: 1fr; gap: 28px; }
  .account-row { flex-direction: row; justify-content: space-between; align-items: center; gap: 20px; }
  .row-value { text-align: right; }
  .copy-row { width: auto; justify-content: flex-end; }
}
@media (max-width: 968px) {
  .hero-carousel { min-height: 580px; }
  .bread-navigation-overlay { padding: 100px 24px 40px; }
}
@media (max-width: 420px) {
  .account-card { padding: 20px; }
  .account-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .copy-row { width: 100%; justify-content: space-between; }
  .row-value { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}