/* vietnamese */
@font-face  {
  
  font-family: 'Allura';
  
  font-style: normal;
  
  font-weight: 400;
  
  font-display: swap;
  
  src: url("../fonts/allura-ba2360d9a7ac/allura-d0de618b.woff2") format('woff2');
  
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
  
}

/* latin-ext */
@font-face  {
  
  font-family: 'Allura';
  
  font-style: normal;
  
  font-weight: 400;
  
  font-display: swap;
  
  src: url("../fonts/allura-ba2360d9a7ac/allura-aa435a73.woff2") format('woff2');
  
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
  
}

/* latin */
@font-face  {
  
  font-family: 'Allura';
  
  font-style: normal;
  
  font-weight: 400;
  
  font-display: swap;
  
  src: url("../fonts/allura-ba2360d9a7ac/allura-0ca33f6f.woff2") format('woff2');
  
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  
}

/* cyrillic-ext */
@font-face  {
  
  font-family: 'Manrope';
  
  font-style: normal;
  
  font-weight: 200 800;
  
  font-display: swap;
  
  src: url("../fonts/manrope-76eca2803f7f/manrope-37facb2a.woff2") format('woff2');
  
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  
}

/* cyrillic */
@font-face  {
  
  font-family: 'Manrope';
  
  font-style: normal;
  
  font-weight: 200 800;
  
  font-display: swap;
  
  src: url("../fonts/manrope-76eca2803f7f/manrope-c9a5f13c.woff2") format('woff2');
  
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  
}

/* greek */
@font-face  {
  
  font-family: 'Manrope';
  
  font-style: normal;
  
  font-weight: 200 800;
  
  font-display: swap;
  
  src: url("../fonts/manrope-76eca2803f7f/manrope-f00fa027.woff2") format('woff2');
  
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
  
}

/* vietnamese */
@font-face  {
  
  font-family: 'Manrope';
  
  font-style: normal;
  
  font-weight: 200 800;
  
  font-display: swap;
  
  src: url("../fonts/manrope-76eca2803f7f/manrope-bd6e7fdc.woff2") format('woff2');
  
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
  
}

/* latin-ext */
@font-face  {
  
  font-family: 'Manrope';
  
  font-style: normal;
  
  font-weight: 200 800;
  
  font-display: swap;
  
  src: url("../fonts/manrope-76eca2803f7f/manrope-76dcfc73.woff2") format('woff2');
  
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  
}

/* latin */
@font-face  {
  
  font-family: 'Manrope';
  
  font-style: normal;
  
  font-weight: 200 800;
  
  font-display: swap;
  
  src: url("../fonts/manrope-76eca2803f7f/manrope-81401990.woff2") format('woff2');
  
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  
}


:root {
  --font-display:"Allura";
  --font-sans:"Manrope";
  }


:root {
  --navy:#3e4b32;
  --deep:#263020;
  --gold:#a9bc86;
  --cream:#eff0e7;
  --paper:#fafbf6;
  --green:#53663d;
  --ink:#283322;
  --muted:#626b5c}
* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans),sans-serif}
a {
  text-decoration:none;
  color:inherit}
.site-header {
  position:absolute;
  z-index:20;
  top:0;
  left:0;
  right:0;
  height:94px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 5vw;
  border-bottom:1px solid #ffffff40;
  color:#fff}
.brand img {
  width:240px;
  height:auto;
  filter:none}
.nav {
  display:flex;
  align-items:center;
  gap:28px;
  font-size:13px;
  font-weight:700}
.nav>a:not(.nav-donate) {
  opacity:.86}
.nav>a:hover {
  opacity:1}
.nav-donate {
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 18px;
  border:1px solid #ffffffa6;
  border-radius:999px}
.menu-button {
  display:none;
  color:white;
  background:none;
  border:0}
.hero {
  position:relative;
  min-height:92vh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  color:white}
.hero-image {
  object-fit:cover;
  object-position:center}
.hero-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#202a18eb 0%,#28351e99 48%,#28351e26 76%),linear-gradient(0deg,#1f2a19b8,transparent 52%)}
.hero-content {
  position:relative;
  z-index:2;
  padding:0 5vw 10vh;
  max-width:900px}
.eyebrow,.section-label {
  display:flex;
  align-items:center;
  gap:9px;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:11px;
  font-weight:800;
  color:var(--gold);
  margin-bottom:24px}
.eyebrow.light {
  color:#d6e4bd}
.hero h1,.section h2 {
  font-family:var(--font-display),serif;
  font-weight:600;
  letter-spacing:-.025em}
.hero h1 {
  font-size:clamp(54px,6.3vw,94px);
  line-height:.93;
  margin:0}
.hero-content>p {
  font-size:17px;
  line-height:1.7;
  max-width:650px;
  color:#ffffffc9;
  margin:28px 0}
.hero-actions {
  display:flex;
  gap:13px;
  flex-wrap:wrap}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:16px 22px;
  border-radius:4px;
  font-size:13px;
  font-weight:800;
  transition:.25s}
.button:hover {
  transform:translateY(-2px)}
.button.primary {
  background:var(--gold);
  color:#263020}
.button.glass {
  border:1px solid #ffffff73;
  backdrop-filter:blur(8px)}
.button.dark {
  background:var(--navy);
  color:white}
.hero-caption {
  position:absolute;
  z-index:2;
  right:5vw;
  bottom:10vh;
  width:150px;
  border-left:1px solid #ffffff80;
  padding-left:20px;
  display:flex;
  flex-direction:column;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:9px}
.hero-caption strong {
  font:600 34px var(--font-display);
  letter-spacing:0;
  margin:3px 0}
.section {
  padding:120px 5vw}
.intro {
  display:grid;
  grid-template-columns:.55fr 1.45fr;
  gap:50px}
.intro-copy h2 {
  font-size:clamp(44px,5vw,70px);
  line-height:1;
  margin:0}
.intro-copy h2 em {
  color:var(--green);
  font-weight:500}
.intro-copy>p {
  max-width:700px;
  font-size:17px;
  line-height:1.8;
  color:var(--muted);
  margin:32px 0 55px}
.values {
  grid-column:2;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid #d8d6cf}
.values>div {
  padding:28px 26px 0 0;
  display:grid;
  gap:10px}
.values svg {
  color:var(--gold)}
.values strong {
  font:600 22px var(--font-display)}
.values span {
  font-size:13px;
  line-height:1.65;
  color:var(--muted)}
.projects {
  background:var(--navy);
  color:white}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  margin-bottom:60px}
.section-heading h2,.video-copy h2,.history h2,.campaign h2 {
  font-size:clamp(42px,4.5vw,66px);
  line-height:1.02;
  margin:0}
.section-heading>p {
  max-width:440px;
  color:#d2dac9;
  line-height:1.8}
.project-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-block:1px solid #ffffff29}
.project-card {
  min-height:330px;
  padding:28px;
  border-right:1px solid #ffffff29;
  display:flex;
  flex-direction:column;
  align-items:flex-start}
.project-card:last-child {
  border:0}
.card-index {
  font-size:10px;
  letter-spacing:.16em;
  color:#b6c6a3;
  margin-bottom:55px}
.project-card svg {
  color:var(--gold);
  width:31px;
  height:31px}
.project-card h3 {
  font:600 27px var(--font-display);
  margin:25px 0 10px}
.project-card p {
  color:#d2dac9;
  line-height:1.7;
  font-size:13px}
.video-section {
  background:var(--cream);
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:70px;
  align-items:center}
.video-copy p,.history-title>p,.campaign-copy>p {
  color:var(--muted);
  line-height:1.8;
  margin-top:26px}
.video-frame {
  box-shadow:0 30px 70px #161f242b}
.video-frame video {
  width:100%;
  display:block;
  background:#000;
  aspect-ratio:16/9}
.history {
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:90px}
.history-title {
  position:sticky;
  top:70px;
  align-self:start}
.timeline {
  border-top:1px solid #d7d5ce}
.timeline article {
  display:grid;
  grid-template-columns:110px 1fr;
  gap:25px;
  padding:32px 0;
  border-bottom:1px solid #d7d5ce}
.timeline article>strong {
  font:600 33px var(--font-display);
  color:var(--gold)}
.timeline h3 {
  font:600 25px var(--font-display);
  margin:0 0 8px}
.timeline p {
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.7}
.campaign {
  padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  background:#e3e8d8;
  min-height:600px}
.campaign-image {
  position:relative;
  min-height:520px}
.campaign-image img {
  object-fit:cover}
.campaign-copy {
  padding:9vw 8vw;
  align-self:center}
.campaign-copy .button {
  margin-top:24px}
footer {
  background:var(--deep);
  color:white;
  padding:75px 5vw 25px}
.footer-main {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  align-items:center;
  padding-bottom:60px}
.footer-main>img {
  filter:none;
  width:280px;
  height:auto}
.footer-main>div {
  display:flex;
  flex-direction:column;
  gap:14px}
.footer-main span {
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.17em;
  color:#b5c3a7}
.footer-main a {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px}
.footer-main svg {
  color:var(--gold);
  width:18px}
.footer-bottom {
  border-top:1px solid #ffffff21;
  padding-top:22px;
  display:flex;
  justify-content:space-between;
  color:#b5c3a7;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.08em}

@media(max-width:900px) {
  .site-header {
  height:78px}
.menu-button {
  display:block;
  z-index:30}
.nav {
  display:none;
  position:absolute;
  top:0;
  left:0;
  right:0;
  padding:105px 7vw 35px;
  background:var(--deep);
  flex-direction:column;
  align-items:stretch}
.nav.open {
  display:flex}
.hero {
  min-height:820px}
.hero-content {
  padding-bottom:90px}
.hero-caption {
  display:none}
.intro,.video-section,.history,.campaign {
  grid-template-columns:1fr}
.intro {
  gap:10px}
.values {
  grid-column:1}
.project-grid {
  grid-template-columns:1fr 1fr}
.section-heading {
  align-items:flex-start;
  flex-direction:column}
.history-title {
  position:static}
.campaign-copy {
  padding:80px 7vw}
.footer-main {
  grid-template-columns:1fr;
  gap:40px}
}
@media(max-width:600px) {
  .section {
  padding:82px 6vw}
.hero {
  min-height:760px}
.hero-content {
  padding:0 6vw 70px}
.hero h1 {
  font-size:48px}
.hero-content>p {
  font-size:15px}
.button {
  width:100%}
.values {
  grid-template-columns:1fr}
.values>div {
  padding:25px 0;
  border-bottom:1px solid #d8d6cf}
.project-grid {
  grid-template-columns:1fr}
.project-card {
  min-height:auto;
  border-right:0;
  border-bottom:1px solid #ffffff29}
.card-index {
  margin-bottom:28px}
.video-section {
  gap:38px}
.timeline article {
  grid-template-columns:75px 1fr}
.campaign-image {
  min-height:390px}
.footer-bottom {
  flex-direction:column;
  gap:4px}
.footer-main a {
  font-size:12px}
}

.footer-main .instagram-button {
  width:48px;
  height:48px;
  border:1px solid #a9bc8666;
  border-radius:50%;
  display:grid;
  place-items:center;
  transition:.25s;
  background:#a9bc861a}
.footer-main .instagram-button:hover {
  background:var(--gold);
  transform:translateY(-2px)}
.footer-main .instagram-button svg {
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8}
.footer-main .instagram-button:hover svg {
  color:var(--deep)}
.footer-main .instagram-button .instagram-dot {
  fill:currentColor;
  stroke:none}


/* Moss-green refresh and handwritten display typography. */
.hero h1,.section h2,.project-card h3,.timeline h3,.values strong {
  font-family:var(--font-display),"Brush Script MT",cursive;
  font-weight:400;
  letter-spacing:0;
  }

.hero h1 {
  font-size:clamp(64px,7.2vw,106px);
  line-height:1.02;
  max-width:850px;
  text-wrap:balance;
  }

.hero-content {
  max-width:970px;
  padding-top:160px;
  }

.intro-copy h2 {
  line-height:1.1;
  }
.intro-copy h2 em {
  font-style:normal;
  }

.section-heading h2,.video-copy h2,.history h2,.campaign h2 {
  line-height:1.12;
  font-size:clamp(52px,5.2vw,76px);
  }

.project-card h3 {
  font-size:37px;
  line-height:1.15;
  }
.timeline h3 {
  font-size:35px;
  line-height:1.15;
  }
.values strong {
  font-size:33px;
  line-height:1.2;
  }

.hero-caption strong,.timeline article>strong {
  font-family:var(--font-sans),sans-serif;
  font-weight:600;
  }

.section-label {
  color:#53663d;
  }
.projects .section-label {
  color:#c4d7a5;
  }

.button {
  border-radius:999px;
  }
.button.primary {
  background:#d0dfb7;
  color:#27331f;
  }
.button.dark {
  background:var(--green);
  }

.project-grid {
  gap:16px;
  border:0;
  }
.project-card {
  border:1px solid #ffffff26!important;
  border-radius:16px;
  background:#ffffff05;
  transition:background .2s,transform .2s;
  }
.project-card:hover {
  background:#ffffff0d;
  transform:translateY(-4px);
  }

.video-frame {
  border-radius:18px;
  overflow:hidden;
  }
.nav-donate:hover {
  background:#ffffff15;
  }

a:focus-visible,button:focus-visible {
  outline:3px solid #a9bc86;
  outline-offset:5px;
  }

@media(max-width:600px) {
  .hero h1 {
  font-size:61px;
  line-height:1.04;
  }
.hero-content {
  padding-top:135px;
  }
.hero {
  min-height:800px;
  }
.section-heading h2,.video-copy h2,.history h2,.campaign h2 {
  font-size:53px;
  }
.intro-copy h2 {
  font-size:53px;
  }
.project-card {
  padding:28px;
  }
.hero-content>p {
  max-width:95%;
  }
.timeline article {
  gap:16px;
  }
.timeline article>strong {
  font-size:24px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto;
  }
*,*::before,*::after {
  transition:none!important;
  }
}


/* New OSEAD identity: preserve original green, ivory and gold. */
.site-header {
  height:116px;
  background:linear-gradient(180deg,#263020d9,#26302080);
  }
.brand {
  display:flex;
  align-items:center;
  flex-shrink:0;
  }
.brand img {
  display:block;
  max-height:94px;
  object-fit:contain;
  }
.footer-main>img {
  max-width:100%;
  }
.nav {
  gap:24px;
  }

@media(max-width:1100px) and (min-width:901px) {
  .brand img {
  width:210px;
  }
.nav {
  gap:16px;
  font-size:12px;
  }
.nav-donate {
  padding:12px;
  }
}

@media(max-width:900px) {
  .site-header {
  height:96px;
  }
.brand img {
  width:215px;
  max-height:80px;
  }
}

@media(max-width:600px) {
  .brand img {
  width:195px;
  max-height:76px;
  }
}