:root {
  --rust:      #C1440E;
  --rust-dark: #9B3009;
  --rust-soft: #E8795A;
  --clay:      #D9762B;
  --sand:      #F6EEE3;
  --sand-mid:  #EADBC8;
  --sand-deep: #E2CDB3;
  --earth:     #3A2A1E;
  --earth-mid: #6E523C;
  --earth-soft:#8A6F58;
  --sage:      #4A7C59;
  --sage-dark: #3A6347;
  --sage-light:#DCEBE0;
  --white:     #FFFCF8;
  --line:      rgba(58,42,30,0.12);
  --line-soft: rgba(58,42,30,0.07);
  --f-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --f-body:'DM Sans', system-ui, -apple-system, sans-serif;
  --r-sm:  6px;  --r-md:  12px;  --r-lg:  20px;  --r-xl:  28px;  --r-pill:100px;
  --shadow-sm:   0 1px 3px rgba(58,42,30,0.06), 0 1px 2px rgba(58,42,30,0.04);
  --shadow-card: 0 4px 30px rgba(58,42,30,0.07), 0 1px 4px rgba(58,42,30,0.05);
  --shadow-hover:0 14px 44px rgba(193,68,14,0.16), 0 4px 12px rgba(58,42,30,0.10);
  --shadow-img:  0 18px 50px rgba(58,42,30,0.20), 0 6px 16px rgba(58,42,30,0.12);
  --max: 1180px;
  --nav-h: 140px;
}

*, *::before, *::after { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
}

html { 
  scroll-behavior: smooth; 
  font-size: 16px; 
  -webkit-text-size-adjust: 100%; 
  scroll-padding-top: calc(var(--nav-h) + 12px); 
}

body { 
  font-family: var(--f-body); 
  background: var(--sand); 
  color: var(--earth); 
  line-height: 1.7; 
  overflow-x: hidden; 
  -webkit-font-smoothing: antialiased; 
  text-rendering: optimizeLegibility; 
}
::selection { 
  background: var(--rust-soft); 
  color: #fff; 
}

img { 
  display: block; 
  max-width: 100%; 
}

a {
  color: inherit; 
}

/* UTILITES */
.container { 
  max-width: var(--max); 
  margin-inline: auto; 
  padding-inline: clamp(1.25rem, 5vw, 2.5rem); 
}

.eyebrow { 
  font-size: 0.74rem; 
  font-weight: 700;
  letter-spacing: 0.2em; 
  text-transform: uppercase; 
  color: var(--rust); 
  display: inline-flex; 
  align-items: center; 
  gap: 0.6rem; 
  margin-bottom: 1rem; 
}

.eyebrow::before { 
  content: ''; 
  width: 22px; 
  height: 2px; 
  background: var(--rust); 
  border-radius: 2px; 
}

.eyebrow.centered { 
  justify-content: center; 
}

.eyebrow.light { 
  color: var(--rust-soft); 
} 
.eyebrow.light::before { 
  background: var(--rust-soft); 
}

.section-title { 
  font-family: var(--f-display); 
  font-size: clamp(1.9rem, 4vw, 2.9rem); 
  font-weight: 700; 
  line-height: 1.14; 
  color: var(--earth); 
  letter-spacing: -0.01em; 
}

.section-title em { 
  font-style: italic; 
  color: var(--rust); 
}

.lead { 
  font-size: clamp(1.02rem, 1.6vw, 1.15rem); 
  color: var(--earth-mid); 
  line-height: 1.8; 
}

.btn { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  gap: 0.55rem; 
  padding: 0.85rem 1.8rem;
  border-radius: var(--r-pill); 
  font-family: var(--f-body); 
  font-size: 0.92rem; 
  font-weight: 600; 
  cursor: pointer; 
  border: 2px solid transparent; 
  text-decoration: none; 
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, border-color 0.2s ease; 
  white-space: nowrap; 
}

.btn svg { 
  width: 16px; 
  height: 16px; 
}

.btn-primary {
  background: var(--rust); 
  color: #fff; 
  border-color: var(--rust); 
}

.btn-primary:hover {
  background: var(--rust-dark); 
  border-color: var(--rust-dark); 
  transform: translateY(-2px); 
  box-shadow: var(--shadow-hover); 
}

.btn-outline { 
  background: transparent; 
  color: var(--earth); 
  border-color: rgba(58,42,30,0.25); 
}

.btn-outline:hover { 
  background: var(--earth); 
  color: var(--white); 
  border-color: var(--earth); 
  transform: translateY(-2px); 
}

.btn-white { 
  background: #fff; 
  color: var(--rust); 
  border-color: #fff; 
}

.btn-white:hover { 
  background: var(--sand); 
  transform: translateY(-2px); 
}

:focus-visible { 
  outline: 3px solid var(--rust); 
  outline-offset: 3px; 
  border-radius: var(--r-sm); 
}

.skip-link { 
  position: absolute; 
  left: 12px; 
  top: -60px; 
  background: var(--rust); 
  color: #fff; 
  padding: 0.6rem 1rem; 
  border-radius: var(--r-sm); 
  z-index: 400; 
  transition: top 0.2s; 
  font-weight: 600; 
  font-size: 0.85rem; 
}

.skip-link:focus { 
  top: 12px; 
}

/* NAV */
nav.site-nav { 
  position: fixed; 
  top: 0; left: 0; 
  right: 0; 
  z-index: 200; 
  background: rgba(246,238,227,0.85); 
  backdrop-filter: blur(18px) saturate(140%); 
  -webkit-backdrop-filter: blur(18px) saturate(140%); 
  border-bottom: 1px solid transparent; 
  transition: box-shadow 0.25s, border-color 0.25s, background 0.25s; 
}

nav.site-nav.scrolled { 
  box-shadow: 0 2px 24px rgba(58,42,30,0.08); 
  border-bottom-color: var(--line); 
  background: rgba(246,238,227,0.94); 
}

.nav-inner { 
  display: flex; 
  align-items: center; 
  justify-content: space-between;
  height: var(--nav-h); 
}

.nav-logo {
  display: flex; 
  align-items: center; 
  gap: 0.85rem; 
  text-decoration: none; 
  flex-shrink: 0; 
}

.logo-chip { 
  width: 118px; 
  height: 118px; 
  border-radius: 50%; 
  background: #fff
  ; box-shadow: 0 3px 14px rgba(58,42,30,0.16); 
  display: flex; align-items: center; 
  justify-content: center; 
  overflow: hidden; 
  flex-shrink: 0; 
  padding: 6px; 
  transition: transform 0.25s ease; 
}

.nav-logo:hover .logo-chip { 
  transform: scale(1.05) rotate(-3deg); 
}

.logo-chip img { 
  width: 100%; 
  height: 100%; 
  object-fit: contain; 
  border-radius: 50%; 
}

.nav-logo-text { 
  font-family: var(--f-display); 
  font-size: 1.18rem; 
  font-weight: 700; 
  color: var(--earth); 
  line-height: 1.05; 
  letter-spacing: -0.01em; 
}

.nav-logo-text span { 
  display: block; 
  font-size: 0.6rem; 
  font-family: var(--f-body); 
  font-weight: 600; 
  letter-spacing: 0.16em; 
  text-transform: uppercase; 
  color: var(--rust); 
  margin-top: 3px; 
}

.nav-links { 
  display: flex; 
  align-items: center; 
  gap: 0.1rem; 
  list-style: none; 
}

.nav-links a { 
  font-size: 0.85rem; 
  font-weight: 500; 
  color: var(--earth-mid); 
  text-decoration: none; 
  padding: 0.45rem 0.7rem; 
  border-radius: var(--r-sm); 
  transition: color 0.2s, background 0.2s; 
}

.nav-links a:hover, .nav-links a.active { 
  color: var(--rust); 
  background: rgba(193,68,14,0.07); 
}

.nav-cta { 
  margin-left: 0.5rem; 
  padding: 0.6rem 1.25rem; 
  font-size: 0.84rem; 
}

.hamburger { 
  display: none; 
  flex-direction: column; 
  gap: 5px; cursor: pointer;
  padding: 0.6rem; 
  background: none; 
  border: none; 
}

.hamburger span { 
  display: block; 
  width: 24px; 
  height: 2px; 
  background: var(--earth); 
  border-radius: 2px; 
  transition: all 0.3s; 
}

.hamburger.open span:nth-child(1) { 
  transform: translateY(7px) rotate(45deg); 
}

.hamburger.open span:nth-child(2) { 
  opacity: 0; 
}

.hamburger.open span:nth-child(3) { 
  transform: translateY(-7px) rotate(-45deg); 
}

.mobile-nav { 
  display: none; 
  flex-direction: column; 
  background: var(--white); 
  border-top: 1px solid var(--line); 
  padding: 1rem 1.25rem 1.5rem; 
  gap: 0.15rem; 
}

.mobile-nav.open { 
  display: flex; 
}

.mobile-nav a { 
  font-size: 1rem; 
  font-weight: 500; 
  color: var(--earth); 
  text-decoration: none; 
  padding: 0.75rem 1rem; 
  border-radius: var(--r-md); 
  transition: background 0.2s; 
}

.mobile-nav a:hover { 
  background: var(--sand); 
}

.mobile-nav .btn { 
  margin-top: 0.75rem; 
}

/* HERO */
.hero { 
  padding-top: var(--nav-h); 
  position: relative; 
  overflow: hidden; 
}

.hero-grid { 
  display: grid; 
  grid-template-columns: 1.05fr 0.95fr; 
  align-items: center; gap: clamp(2rem, 5vw, 4.5rem); 
  min-height: calc(100svh - var(--nav-h)); 
  padding-block: clamp(2.5rem, 6vh, 5rem); 
}

.hero-eyebrow { 
  display: inline-flex; 
  align-items: center; 
  gap: 0.6rem; 
  font-size: 0.76rem; 
  font-weight: 700; 
  letter-spacing: 0.16em; 
  -transform: uppercase; 
  color: var(--rust); 
  margin-bottom: 1.6rem; 
  background: rgba(193,68,14,0.08); 
  padding: 0.45rem 1rem; 
  border-radius: var(--r-pill); 
}

.hero-eyebrow .dot { 
  width: 7px; 
  height: 7px; 
  border-radius: 50%; 
  background: var(--sage); 
  box-shadow: 0 0 0 3px rgba(74,124,89,0.2); 
}

.hero-title { 
  font-family: var(--f-display); 
  font-size: clamp(2.5rem, 5.2vw, 4.1rem); 
  font-weight: 700; line-height: 1.06; 
  color: var(--earth); 
  margin-bottom: 1.5rem;
  letter-spacing: -0.015em; 
}

.hero-title em { 
  font-style: italic; 
  color: var(--rust); 
}

.hero-sub { 
  font-size: clamp(1.02rem, 1.7vw, 1.18rem); 
  color: var(--earth-mid); 
  max-width: 520px; 
  margin-bottom: 2.2rem; 
  line-height: 1.75; 
}

.hero-actions { 
  display: flex; 
  gap: 0.85rem; 
  flex-wrap: wrap; 
  margin-bottom: 2.75rem; 
}

.hero-trust { 
  display: flex; 
  gap: clamp(1.25rem, 3vw, 2.25rem); 
  flex-wrap: wrap; 
  padding-top: 1.75rem; 
  border-top: 1px solid var(--line); 
}

.trust-item { 
  display: flex; 
  flex-direction: column; 
  gap: 0.15rem; 
}

.trust-num { 
  font-family: var(--f-display); 
  font-size: 1.15rem; 
  font-weight: 700; 
  color: var(--earth); 
  line-height: 1.1; 
}

.trust-num span { 
  color: var(--rust); 
}

.trust-label { 
  font-size: 0.76rem; 
  color: var(--earth-soft); 
  font-weight: 500; 
}

.hero-visual { 
  position: relative; 
}

.hero-photo { 
  position: relative; 
  border-radius: var(--r-xl); 
  overflow: hidden; 
  box-shadow: var(--shadow-img); 
  aspect-ratio: 4 / 4.4; 
  background: linear-gradient(135deg, var(--clay), var(--rust-dark)); 
}

.hero-photo img { 
  width: 100%; 
  height: 100%;
  object-fit: cover; 
}

.hero-photo::after { 
  content: ''; 
  position: absolute; 
  inset: 0; 
  background: linear-gradient(to top, rgba(58,42,30,0.55) 0%, transparent 42%); 
  pointer-events: none; 
}

.hero-photo-tag { 
  position: absolute; 
  left: 1.25rem; 
  bottom: 1.25rem; 
  right: 1.25rem; 
  color: #fff; 
  z-index: 2; 
  pointer-events: none; 
}


/* HERO */
.hero { 
  padding-top: var(--nav-h); 
  position: relative; 
  overflow: hidden; 
}

.hero-grid { 
  display: grid; 
  grid-template-columns: 1.05fr 0.95fr; 
  align-items: center; 
  gap: clamp(2rem, 5vw, 4.5rem); 
  min-height: calc(100svh - var(--nav-h)); 
  padding-block: clamp(2.5rem, 6vh, 5rem); 
}

.hero-eyebrow { 
  display: inline-flex; 
  align-items: center; 
  gap: 0.6rem; 
  font-size: 0.76rem; 
  font-weight: 700; 
  letter-spacing: 0.16em; 
  text-transform: uppercase; 
  color: var(--rust); 
  margin-bottom: 1.6rem; 
  background: rgba(193,68,14,0.08); 
  padding: 0.45rem 1rem; 
  border-radius: var(--r-pill); 
}

.hero-eyebrow .dot { 
  width: 7px; 
  height: 7px; 
  border-radius: 50%; 
  background: var(--sage); 
  box-shadow: 0 0 0 3px rgba(74,124,89,0.2);
}

.hero-title { 
  font-family: var(--f-display); 
  font-size: clamp(2.5rem, 5.2vw, 4.1rem); 
  font-weight: 700; 
  line-height: 1.06; 
  color: var(--earth);
  margin-bottom: 1.5rem; 
  letter-spacing: -0.015em; 
}

.hero-title em { 
  font-style: italic; 
  color: var(--rust); 
}

.hero-sub { 
  font-size: clamp(1.02rem, 1.7vw, 1.18rem); 
  color: var(--earth-mid); 
  max-width: 520px; 
  margin-bottom: 2.2rem; 
  line-height: 1.75; 
}

.hero-actions { 
  display: flex; 
  gap: 0.85rem; 
  flex-wrap: wrap; 
  margin-bottom: 2.75rem; 
}

.hero-trust { 
  display: flex; 
  gap: clamp(1.25rem, 3vw, 2.25rem); 
  flex-wrap: wrap; 
  padding-top: 1.75rem; 
  border-top: 1px solid var(--line); 
}

.trust-item { 
  display: flex; 
  flex-direction: column; 
  gap: 0.15rem; 
}

.trust-num { 
  font-family: var(--f-display); 
  font-size: 1.15rem; 
  font-weight: 700; 
  color: var(--earth); 
  line-height: 1.1; 
}

.trust-num span { 
  color: var(--rust); 
}

.trust-label { 
  font-size: 0.76rem;
  color: var(--earth-soft); 
  font-weight: 500; 
}

.hero-visual { 
  position: relative; 
}

.hero-photo { 
  position: relative; 
  border-radius: var(--r-xl); 
  overflow: hidden; 
  box-shadow: var(--shadow-img); 
  aspect-ratio: 4 / 4.4; 
  background: linear-gradient(135deg, var(--clay), var(--rust-dark)); 
}

.hero-photo img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
}

.hero-photo::after {
  content: ''; 
  position: absolute; 
  inset: 0; 
  background: linear-gradient(to top, rgba(58,42,30,0.55) 0%, transparent 42%); 
  pointer-events: none; 
}

.hero-photo-tag { 
  position: absolute; 
  left: 1.25rem; 
  bottom: 1.25rem; 
  right: 1.25rem; 
  color: #fff; 
  z-index: 2;
  pointer-events: none; 
}

.hero-photo-tag .pill { 
  display: inline-block; 
  background: rgba(255,255,255,0.18); 
  backdrop-filter: blur(10px); 
  border: 1px solid rgba(255,255,255,0.3); 
  padding: 0.3rem 0.85rem; 
  border-radius: var(--r-pill); 
  font-size: 0.7rem; font-weight: 600; 
  letter-spacing: 0.08em; 
  text-transform: uppercase; 
  margin-bottom: 0.55rem; 
}

.hero-photo-tag p { 
  font-size: 0.88rem; 
  opacity: 0.92; 
  line-height: 1.45; 
  font-weight: 500; 
}

.hero-blob { 
  position: absolute; 
  width: 340px; 
  height: 340px; 
  border-radius: 50%; 
  pointer-events: none; 
  z-index: -1; 
}

.hero-blob.one { 
  top: -120px; 
  left: -140px; 
  background: radial-gradient(circle, rgba(217,118,43,0.18) 0%, transparent 70%); 
}

.hero-blob.two { 
  bottom: -120px; 
  right: -120px; 
  background: radial-gradient(circle, rgba(74,124,89,0.16) 0%, transparent 70%); 
}


/* SECTION SHELL */
.section { 
  padding-block: clamp(4rem, 9vw, 7.5rem); 
  position: relative; 
}

.section-head {
  max-width: 720px; 
  margin-bottom: clamp(2.5rem, 5vw, 3.75rem); 
}

.section-head.centered { 
  margin-inline: auto; 
  text-align: center; 
}

.section-head .lead { 
  margin-top: 1.1rem; 
}


/* ABOUT */
.about-grid { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: clamp(2rem, 5vw, 4.5rem); 
  align-items: center; 
}

.about-copy h2 { 
  margin-bottom: 1.5rem; 
}

.about-copy p { 
  color: var(--earth-mid); 
  margin-bottom: 1.15rem; 
  font-size: 1rem; 
  line-height: 1.8; }

.about-copy p strong { 
  color: var(--earth); 
  font-weight: 600; 
}

.stat-inline { 
  color: var(--rust); 
  font-weight: 700; 
}

.ubuntu-define { 
  margin: 1.75rem 0; 
  padding: 1.35rem 1.5rem; 
  background: var(--white); 
  border-radius: var(--r-md); 
  border-left: 3px solid var(--sage); 
  box-shadow: var(--shadow-sm); 
}

.ubuntu-define .word { 
  font-family: var(--f-display); 
  font-style: italic; 
  font-size: 1.2rem; 
  color: var(--sage-dark); 
  font-weight: 600; 
}

.ubuntu-define .pron { 
  font-size: 0.82rem; 
  color: var(--earth-soft); 
  margin-left: 0.4rem; 
}

.ubuntu-define p { 
  margin: 0.5rem 0 0; 
  font-size: 0.95rem; 
  color: var(--earth-mid); 
}

.about-visual { 
  position: relative; 
}

.about-photo { 
  border-radius: var(--r-xl); 
  overflow: hidden; 
  box-shadow: var(--shadow-img); 
  aspect-ratio: 5 / 4.2; 
}

.about-photo img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
}

.dual { 
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem; 
  margin-top: 1.75rem;
}

.dual-card { 
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md); 
  padding: 1.25rem; 
  box-shadow: var(--shadow-sm); 
}

.dual-card .ic { 
  width: 40px; 
  height: 40px; 
  border-radius: var(--r-sm); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 1.25rem; 
  margin-bottom: 0.7rem; 
}

.dual-card.kids .ic {
  background: rgba(217,118,43,0.14); 
}

.dual-card.care .ic { 
  background: var(--sage-light); 
}

.dual-card h4 { 
  font-size: 0.95rem; 
  font-weight: 700; 
  color: var(--earth); 
  margin-bottom: 0.3rem; 
}

.dual-card p {
  font-size: 0.84rem; 
  color: var(--earth-mid); 
  line-height: 1.55;
  margin: 0; 
}


/* CREDENTIALS/REGISTRATION */
.credentials { 
  margin-top: clamp(3rem, 6vw, 4.5rem); 
  background: var(--white); 
  border: 1px solid var(--line-soft); 
  border-radius: var(--r-xl); 
  padding: clamp(1.75rem, 4vw, 2.75rem); 
  box-shadow: var(--shadow-card);
  display: grid; grid-template-columns: 1fr 1.15fr;
  gap: clamp(1.75rem, 4vw, 3rem); 
  align-items: center; 
}

.credentials-copy .eyebrow {
  margin-bottom: 0.85rem; 
  }

.credentials-copy h3 {
  font-family: var(--f-display); 
  font-size: clamp(1.4rem, 2.6vw, 1.9rem); 
  font-weight: 700; color: var(--earth); 
  margin-bottom: 0.9rem; 
  line-height: 1.2;
}

.credentials-copy p { 
  font-size: 0.95rem; 
  color: var(--earth-mid); 
  line-height: 1.7; 
  margin-bottom: 0.9rem; 
}

.reg-facts { 
  list-style: none;
  display: flex; 
  flex-direction: column; 
  gap: 0.55rem; 
  margin-top: 1rem; 
}

.reg-facts li { 
  display: flex; 
  align-items: flex-start; 
  gap: 0.6rem; 
  font-size: 0.88rem; 
  color: var(--earth); 
}

.reg-facts li svg { 
  width: 17px; 
  height: 17px; 
  color: var(--sage); 
  flex-shrink: 0; 
  margin-top: 3px; 
}

.reg-facts strong { 
  font-weight: 700;
}

.cert-pair { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 1rem; 
}

.cert-frame { 
  background: var(--sand); 
  border: 1px solid var(--line); 
  border-radius: var(--r-md); 
  padding: 0.55rem; 
  box-shadow: var(--shadow-sm); 
  transition: transform 0.2s ease, box-shadow 0.2s ease; 
}

.cert-frame:hover { 
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);

}

.cert-frame img { 
  width: 100%; 
  border-radius: var(--r-sm); 
  aspect-ratio: 4 / 3; 
  object-fit: cover; 
  object-position: top; 
}

.cert-frame .cap { 
  font-size: 0.66rem; 
  color: var(--earth-mid); 
  font-weight: 600; 
  text-align: center; 
  padding: 0.5rem 0.3rem 0.2rem; 
  letter-spacing: 0.02em; 
  line-height: 1.4; 
}


/* FOUNDER */
#founder { 
  background: var(--white); 
}

.founder-grid { 
  display: grid; 
  grid-template-columns: 0.92fr 1.08fr; 
  gap: clamp(2rem, 5vw, 4rem); 
  align-items: center; 
}

.founder-visual { 
  position: relative; 
}

.founder-photo { 
  border-radius: var(--r-xl); 
  overflow: hidden; 
  box-shadow: var(--shadow-img); 
  background: linear-gradient(160deg, var(--sand-mid), var(--sand-deep)); 
}

.founder-photo img { 
  width: 100%;
  height: auto; 
  display: block;
}

.founder-quote-badge { 
  position: absolute; 
  right: -14px; 
  bottom: 26px; 
  background: var(--rust); 
  color: #fff; 
  border-radius: var(--r-lg); 
  padding: 1rem 1.15rem; 
  max-width: 215px; 
  box-shadow: var(--shadow-hover); 
}

.founder-quote-badge .mark { 
  font-family: var(--f-display); 
  font-size: 2.2rem; 
  line-height: 0.6; 
  opacity: 0.5; 
}

.founder-quote-badge p { 
  font-size: 0.82rem; 
  line-height: 1.45; 
  font-weight: 500; 
  margin-top: 0.2rem; 
}

.founder-copy .section-title { 
  margin-bottom: 1.5rem; 
}

.founder-copy p { 
  color: var(--earth-mid); 
  margin-bottom: 1.1rem; 
  font-size: 1.01rem; 
  line-height: 1.82; 
}

.founder-copy p.intro { 
  font-family: var(--f-display); 
  font-style: italic; 
  font-size: 1.2rem; 
  color: var(--earth); 
  line-height: 1.55; 
}

.founder-sign { 
  display: flex; 
  align-items: center; 
  gap: 0.85rem; 
  margin-top: 1.75rem; 
  flex-wrap: wrap; 
}

.founder-sign .name { 
  font-family: var(--f-display); 
  font-size: 1.05rem; 
  font-weight: 700; 
  color: var(--earth); 
}

.founder-sign .role { 
  font-size: 0.8rem; 
  color: var(--rust); 
  font-weight: 600; 
  text-transform: uppercase; 
  letter-spacing: 0.06em; 
}

.founder-links {
  display: flex; 
  gap: 0.5rem; 
  margin-top: 1.5rem; 
  flex-wrap: wrap; 
  align-items: center; 
}

.social-chip { 
  display: inline-flex; 
  align-items: center; 
  gap: 0.45rem; 
  padding: 0.5rem 0.95rem; 
  border-radius: var(--r-pill); 
  background: var(--sand); 
  border: 1px solid var(--line); 
  color: var(--earth-mid); 
  text-decoration: none; 
  font-size: 0.8rem; 
  font-weight: 600; 
  transition: all 0.2s; 
}

.social-chip svg { 
  width: 15px;
  height: 15px; 
  }

.social-chip:hover {
  background: var(--earth);
  color: #fff;
  border-color: var(--earth); 
  transform: translateY(-2px); 
}

.website-field {
  margin-top: 1.5rem; 
  padding: 0.9rem 1.1rem; 
  background: var(--sand); 
  border: 1px dashed var(--line); 
  border-radius: var(--r-md); 
  display: flex; 
  align-items: center; 
  gap: 0.7rem; 
  font-size: 0.85rem; 
  color: var(--earth-mid); 
}

.website-field svg { 
  width: 18px; 
  height: 18px; 
  color: var(--rust); 
  flex-shrink: 0; 
}

.website-field a { 
  color: var(--rust); 
  font-weight: 600; 
  text-decoration: none; 
}

.website-field a:hover { 
  text-decoration: underline; 
}

/* PROGRAMS */
.programs-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); 
  gap: 1.4rem; 
}

.program-card {
  background: var(--white); 
  border-radius: var(--r-lg); 
  padding: 2rem 1.8rem; 
  position: relative; 
  overflow: hidden; 
  border: 1px solid var(--line-soft); 
  transition: transform 0.25s ease, box-shadow 0.25s ease; 
}

.program-card::before {
  content: ''; 
  position: absolute; 
  top: 0; 
  left: 0;
  right: 0; 
  height: 4px; 
}

.program-card:nth-child(1)::before {
  background: var(--rust); 
}

.program-card:nth-child(2)::before { 
  background: var(--sage); 
}

.program-card:nth-child(3)::before { 
  background: var(--clay); 
}

.program-card:nth-child(4)::before { 
  background: #6B7FD7; 
}

.program-card:hover { 
  transform: translateY(-5px); 
  box-shadow: var(--shadow-hover); 
}

.program-icon { 
  width: 54px; 
  height: 54px; 
  border-radius: var(--r-md); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  margin-bottom: 1.3rem; 
  font-size: 1.6rem; 
}

.program-card:nth-child(1) .program-icon { 
  background: rgba(193,68,14,0.1); 
}

.program-card:nth-child(2) .program-icon { 
  background: rgba(74,124,89,0.1); 
}

.program-card:nth-child(3) .program-icon { 
  background: rgba(217,118,43,0.12); 
}

.program-card:nth-child(4) .program-icon { 
  background: rgba(107,127,215,0.1); 
}

.program-card h3 { 
  font-family: var(--f-display); 
  font-size: 1.18rem; 
  font-weight: 700; 
  color: var(--earth); 
  margin-bottom: 0.65rem; 
}

.program-card p { 
  font-size: 0.9rem; 
  color: var(--earth-mid); 
  line-height: 1.65; 
}

.program-tag { 
  display: inline-block;
  margin-top: 1rem; 
  font-size: 0.72rem; 
  font-weight: 600; 
  letter-spacing: 0.04em; 
  text-transform: uppercase; 
  color: var(--rust); 
  background: rgba(193,68,14,0.07); 
  padding: 0.25rem 0.7rem; 
  border-radius: var(--r-pill); 
}

.program-card:nth-child(2) .program-tag { 
  color: var(--sage-dark); 
  background: rgba(74,124,89,0.1); 
}

/* IMPACT/TRACTION */
#impact { 
  background: linear-gradient(165deg, #3A2A1E 0%, #271A10 100%); 
  color: #fff;
  position: relative; 
  overflow: hidden; 
}

.impact-orb { 
  position: absolute; 
  border-radius: 50%; 
  pointer-events: none; 
}

.impact-orb.one { 
  width: 520px; 
  height: 520px; 
  top: -160px; 
  right: -120px; 
  background: radial-gradient(circle, rgba(193,68,14,0.22) 0%, transparent 70%); 
}

.impact-orb.two { 
  width: 420px; 
  height: 420px; 
  bottom: -140px; 
  left: -100px; 
  background: radial-gradient(circle, rgba(74,124,89,0.18) 0%, transparent 70%); 
}

.impact-head { 
  display: grid; 
  grid-template-columns: 1.3fr 1fr; 
  gap: 2rem; 
  align-items: end; 
  margin-bottom: 2.75rem; 
}

.impact-head .section-title {
  color: #fff; 
}

.impact-head .section-title em { 
  color: var(--rust-soft); 
}

.impact-head p { 
  color: rgba(246,238,227,0.7); 
  font-size: 0.96rem; 
  line-height: 1.7; 
}

.traction-label { 
  font-size: 0.78rem; 
  font-weight: 700; 
  letter-spacing: 0.06em; 
  text-transform: uppercase; 
  color: var(--rust-soft); 
  margin: 0 0 1.1rem; 
  display: flex; 
  align-items: center; 
  gap: 0.6rem; 
}

.traction-label::before {
  content: ''; 
  width: 22px; 
  height: 2px; 
  background: var(--rust-soft); 
  border-radius: 2px; 
}

.metrics { 
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); 
  gap: 1.1rem; 
  margin-bottom: 1.25rem; 
}

.metric { 
  background: rgba(255,255,255,0.05); 
  border: 1px solid rgba(255,255,255,0.1); 
  border-radius: var(--r-md); 
  padding: 1.65rem 1.4rem; 
  backdrop-filter: blur(8px); 
  transition: background 0.2s, transform 0.2s; 
}

.metric:hover { 
  background: rgba(255,255,255,0.09); 
  transform: translateY(-3px);
}

.metric .num { 
  font-family: var(--f-display); 
  font-size: clamp(1.9rem, 3.4vw, 2.6rem); 
  font-weight: 700; color: #fff; 
  line-height: 1; 
  margin-bottom: 0.4rem; 
}

.metric .num span { 
  color: var(--rust-soft); 
}

.metric .lbl { 
  font-size: 0.84rem; 
  color: rgba(246,238,227,0.72); 
  line-height: 1.45; 
}

.metric .src { 
  display: block; 
  font-size: 0.68rem; 
  color: rgba(246,238,227,0.45); 
  margin-top: 0.5rem; 
  letter-spacing: 0.03em; 
}

.metric.proj { 
  border-style: dashed; 
  border-color: rgba(232,121,90,0.4); 
  background: rgba(232,121,90,0.06); 
}

.metric.proj .num { 
  color: var(--rust-soft); 
}

.metric.proj .src { 
  color: rgba(232,121,90,0.75); 
}

.horizon-note { 
  font-size: 0.78rem; 
  color: rgba(246,238,227,0.5); 
  margin: 1rem 0 2.75rem; 
  display: flex; 
  align-items: flex-start; 
  gap: 0.5rem; 
  max-width: 680px; 
}

.horizon-note svg {
  width: 15px; 
  height: 15px; 
  flex-shrink: 0; 
  margin-top: 2px; 
}

.impact-gallery { 
  display: grid; 
  grid-template-columns: 1.6fr 1fr 1fr; 
  grid-auto-rows: 240px; 
  gap: 0.85rem; 
}

.gal { 
  position: relative; 
  overflow: hidden; 
  border-radius: var(--r-md); 
  background: rgba(255,255,255,0.05);
}

.gal img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  transition: transform 0.5s ease; 
}

.gal:hover img { 
  transform: scale(1.05);
}

.gal::after {
  content: ''; 
  position: absolute; 
  inset: 0; 
  background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 55%); 
  pointer-events: none; 
}

.gal .cap { 
  position: absolute; 
  left: 0.9rem; 
  bottom: 0.8rem; 
  right: 0.9rem; 
  color: #fff; 
  font-size: 0.76rem;
  font-weight: 500; 
  z-index: 2; 
  opacity: 0.92; 
  pointer-events: none; 
}

.gal.big {
  grid-row: span 2; 
}

.consent-note { 
  font-size: 0.78rem;
  color: rgba(246,238,227,0.58); 
  margin-top: 1.25rem; 
  display: flex; 
  align-items: center; 
  gap: 0.5rem; 
}

.consent-note svg { 
  width: 15px; 
  height: 15px; 
  flex-shrink: 0; 
  color: var(--sage-light); 
}


/* TRACTION (ICON-REMOVED)*/
.metrics-note { 
  font-size: 0.78rem; 
  color: rgba(246,238,227,0.55); 
  margin-top: 1.25rem; 
  max-width: 700px; 
  line-height: 1.6; 
}

/* subtle hover "pop" on the impact gallery */
.gal { 
  transition: transform 0.32s cubic-bezier(0.22,1,0.36,1), box-shadow 0.32s ease;
}

.gal:hover { 
  transform: translateY(-5px) scale(1.012); 
  box-shadow: 0 18px 44px rgba(0,0,0,0.34);
  z-index: 2; 
}


/* Ubuntu brand logo featured in the About section */
.about-brand { 
  margin-bottom: 1.6rem; 
}

.about-brand-chip { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  width: 132px; 
  height: 132px; 
  border-radius: 50%; 
  background: #fff; 
  box-shadow: 0 10px 34px rgba(58,42,30,0.14), 0 2px 8px rgba(58,42,30,0.08); 
  padding: 11px; 
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease; 
}

.about-brand-chip:hover { 
  transform: translateY(-3px) rotate(-3deg);
  box-shadow: 0 16px 44px rgba(193,68,14,0.18); 
}

.about-brand-chip img { 
  width: 100%; 
  height: 100%; 
  object-fit: contain; 
  border-radius: 50%; 
}

@media (max-width: 560px) { .about-brand-chip { width: 108px; height: 108px; } }

/* CUSTOM CLOVER CURSOR (desktop, opt-in via JS) */
html.uc-on, html.uc-on * { 
  cursor: none !important; 
}

.uc-wrap { 
  position: fixed; 
  top: 0; 
  left: 0; 
  pointer-events: none; 
  z-index: 99999; 
}

#uc-dot, #uc-ring { 
  position: fixed; 
  top: 0; 
  left: 0; 
  pointer-events: none; 
  opacity: 0; 
  transition: opacity 0.25s ease; 
}

#uc-dot { 
  z-index: 100000; 
}

#uc-ring { 
  z-index: 99999; 
}

.uc-wrap.visible #uc-dot, .uc-wrap.visible #uc-ring { 
  opacity: 1; 
}

.uc-clover { 
  display: block; 
  width: 26px; 
  height: 26px; 
  margin: -13px 0 0 -13px; 
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)); 
  transition: transform 0.2s cubic-bezier(0.22,1,0.36,1); 
  transform-origin: center; 
}

.uc-ring-inner { 
  display: block; 
  width: 40px; 
  height: 40px; 
  margin: -20px 0 0 -20px; 
  border-radius: 50%; 
  border: 1.6px solid rgba(74,124,89,0.4); 
  background: rgba(74,124,89,0.05); 
  transition: transform 0.24s cubic-bezier(0.22,1,0.36,1), border-color 0.24s ease, background 0.24s ease; 
  transform-origin: center; 
}

.uc-wrap.hovering .uc-clover { 
  transform: rotate(50deg) scale(1.18); 
}

.uc-wrap.hovering .uc-ring-inner { 
  transform: scale(1.55); 
  border-color: rgba(193,68,14,0.5); 
  background: rgba(193,68,14,0.05); 
}

.uc-wrap.clicking .uc-clover { 
  transform: scale(0.8); 
}

.uc-wrap.clicking .uc-ring-inner { 
  transform: scale(0.85); 
}


@media (prefers-reduced-motion: reduce) {.uc-clover, .uc-ring-inner, #uc-dot, #uc-ring { transition: opacity 0.2s ease !important; }}

/* RESOURCES */
#resources { 
  background: var(--white); 
}
.res-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); 
  gap: 1.3rem; 
}
.res-card { 
  background: var(--sand); 
  
  border: 1px solid var(--line-soft); 
  border-radius: var(--r-lg); 
  padding: 1.65rem 1.6rem; 
  display: flex; 
  flex-direction: column; 
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; 
  text-decoration: none; 
}

.res-card:hover { 
  transform: translateY(-4px); 
  box-shadow: var(--shadow-card); 
  border-color: var(--line); 
}

.res-top { 
  display: flex; 
  align-items: center; 
  gap: 0.65rem; 
  margin-bottom: 1rem; 
}

.res-badge { 
  width: 42px;
  height: 42px; 
  border-radius: var(--r-sm); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 1.2rem; 
  background: rgba(193,68,14,0.1); 
  flex-shrink: 0; 
}

.res-org { 
  font-size: 0.72rem; 
  font-weight: 700; 
  letter-spacing: 0.05em; 
  text-transform: uppercase; 
  color: var(--rust); 
  line-height: 1.3; 
}

.res-card h3 { 
  font-family: var(--f-display); 
  font-size: 1.1rem; 
  font-weight: 700; 
  color: var(--earth); 
  margin-bottom: 0.5rem; 
  line-height: 1.25; 
}

.res-card p { 
  font-size: 0.875rem; 
  color: var(--earth-mid); 
  line-height: 1.6; 
  flex-grow: 1;
}

.res-link { 
  display: inline-flex; 
  align-items: center; 
  gap: 0.35rem; 
  margin-top: 1.1rem; 
  font-size: 0.8rem; 
  font-weight: 600; 
  color: var(--rust); 
}

.res-link svg { 
  width: 14px; 
  height: 14px; 
  transition: transform 0.2s; 
}

.res-card:hover .res-link svg { 
  transform: translate(2px, -2px); 
}

.res-study { 
  margin-top: 1.75rem; 
  background: var(--sage-light); 
  border-radius: var(--r-md); 
  padding: 1.25rem 1.5rem; 
  display: flex; 
  gap: 1rem; 
  align-items: flex-start; 
  border: 1px solid rgba(74,124,89,0.18); 
}

.res-study .ic { 
  font-size: 1.4rem; 
  flex-shrink: 0; 
}

.res-study p { 
  font-size: 0.875rem; 
  color: var(--earth); 
  line-height: 1.6;
  margin: 0; 
}

.res-study a { 
  color: var(--sage-dark); 
  font-weight: 700; 
  text-decoration: none; 
}

.res-study a:hover { 
  text-decoration: underline; 
}

.res-disclaimer { 
  font-size: 0.78rem; 
  color: var(--earth-soft); 
  margin-top: 1.5rem; 
  text-align: center; 
  font-style: italic; 
}


/* NEWS */
#news { 
  background: var(--sand); 
}

.news-grid { 
  display: grid; 
  grid-template-columns: 1.35fr 1fr;
  gap: 1.5rem; 
  align-items: stretch; 
}

.news-feature { 
  background: var(--white); 
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl); 
  padding: clamp(1.75rem, 3.5vw, 2.5rem); 
  box-shadow: var(--shadow-card); 
  display: flex; 
  flex-direction: column; 
}

.news-tag { 
  display: inline-flex; 
  align-items: center; 
  gap: 0.5rem; 
  align-self: flex-start; 
  font-size: 0.7rem; 
  font-weight: 700; 
  letter-spacing: 0.08em; 
  text-transform: uppercase; 
  color: var(--rust); 
  background: rgba(193,68,14,0.09); 
  padding: 0.4rem 0.9rem; 
  border-radius: var(--r-pill); 
  margin-bottom: 1.1rem; 
}

.news-tag.sage { 
  color: var(--sage-dark); 
  background: rgba(74,124,89,0.1); 
}

.news-tag.clay { 
  color: #B45309; 
  background: rgba(217,118,43,0.12); 
}

.news-feature h3 { 
  font-family: var(--f-display); 
  font-size: clamp(1.4rem, 2.6vw, 1.95rem); 
  font-weight: 700; 
  color: var(--earth); 
  line-height: 1.2; 
  margin-bottom: 0.5rem; 
}

.news-date { 
  font-size: 0.76rem; 
  color: var(--earth-soft); 
  font-weight: 500; 
  margin-bottom: 1.1rem; 
}

.news-resources { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 0.5rem; 
  padding: 1rem 1.1rem;
  background: var(--sand); 
  border: 1px solid var(--line);
  border-radius: var(--r-md); 
  margin-bottom: 1.3rem; 
}

.news-resources .rlabel { 
  width: 100%; 
  font-size: 0.68rem; 
  font-weight: 700; 
  letter-spacing: 0.07em; 
  text-transform: uppercase; 
  color: var(--earth-soft); 
  margin-bottom: 0.15rem; 
}

.res-pill { 
  display: inline-flex; 
  align-items: center; 
  gap: 0.35rem; 
  font-size: 0.78rem; 
  font-weight: 600; 
  color: var(--earth); 
  background: var(--white); 
  border: 1px solid var(--line); 
  border-radius: var(--r-pill); 
  padding: 0.4rem 0.85rem; 
  text-decoration: none; 
  transition: all 0.2s; 
}

.res-pill svg { 
  width: 12px; 
  height: 12px; 
  color: var(--rust); 
}

.res-pill:hover { 
  background: var(--earth); 
  color: #fff; 
  border-color: var(--earth); 
  transform: translateY(-1px); 
}

.res-pill:hover svg { 
  color: #fff; 
}

.news-feature p { 
  font-size: 0.92rem; 
  color: var(--earth-mid); 
  line-height: 1.72; 
  margin-bottom: 0.9rem; 
}

.news-feature p strong { 
  color: var(--earth); 
  font-weight: 600; 
}

.news-readmore { 
  display: inline-flex; 
  align-items: center; 
  gap: 0.4rem; 
  margin-top: auto; 
  padding-top: 0.5rem; 
  font-size: 0.85rem; 
  font-weight: 600; 
  color: var(--rust); 
  text-decoration: none; 
}

.news-readmore svg { 
  width: 14px; 
  height: 14px; 
  transition: transform 0.2s; 
}

.news-readmore:hover svg { 
  transform: translate(2px,-2px); 
}

.news-side { 
  display: flex; 
  flex-direction: column; gap: 1.5rem; 
}

.news-card { 
  background: var(--white); 
  border: 1px solid var(--line-soft); 
  border-radius: var(--r-lg); 
  padding: 1.6rem 1.65rem; 
  box-shadow: var(--shadow-sm);  
  display: flex; 
  flex-direction: column; 
  flex: 1; 
}

.news-card h4 { 
  font-family: var(--f-display); 
  font-size: 1.2rem; 
  font-weight: 700;
  color: var(--earth); 
  line-height: 1.22; 
  margin-bottom: 0.5rem; 
}

.news-card p { 
  font-size: 0.875rem; 
  color: var(--earth-mid); 
  line-height: 1.65; 
  margin-bottom: 0.8rem; 
}

.news-card .news-date { 
  margin-bottom: 0.9rem; 
}

.news-card.teaser { 
  background: linear-gradient(160deg, var(--sage-light), #EAF3EC); 
  border-color: rgba(74,124,89,0.2);
}

.news-card.teaser h4 { 
  color: var(--sage-dark); 
}


/* TEAMS */
.team-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); 
  gap: 1.3rem; 
}

.member {
  background: var(--white); 
  border: 1px solid var(--line-soft); 
  border-radius: var(--r-lg); 
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease; 
}

.member:hover { 
  transform: translateY(-4px); 
  box-shadow: var(--shadow-card); 
}

.member-photo {
  aspect-ratio: 1 / 1; 
  overflow: hidden; 
  background: var(--sand-mid); 
  position: relative; 
}

.member-photo img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
}

.member-body { 
  padding: 1.25rem 1.3rem 1.4rem; 
}

.member-name { 
  font-family: var(--f-display); 
  font-size: 1.08rem; 
  font-weight: 700; 
  color: var(--earth); 
  line-height: 1.15; 
}

.member-role { 
  font-size: 0.74rem; 
  font-weight: 600; 
  letter-spacing: 0.04em; 
  text-transform: uppercase; 
  color: var(--rust); 
  margin: 0.3rem 0 0.7rem; 
}

.member-bio { 
  font-size: 0.83rem; 
  color: var(--earth-mid);
  line-height: 1.55; 
  }

.member-socials { 
  display: flex; 
  gap: 0.45rem; 
  margin-top: 1rem; 
  flex-wrap: wrap; 
}

.soc-icon { 
  width: 32px; 
  height: 32px; 
  border-radius: 50%; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  background: var(--sand); 
  border: 1px solid var(--line); 
  color: var(--earth-mid); 
  transition: all 0.2s; 
  text-decoration: none; 
}

.soc-icon svg { 
  width: 14px; 
  height: 14px; 
}

.soc-icon:hover { 
  background: var(--rust); 
  color: #fff; 
  border-color: var(--rust); 
  transform: translateY(-2px); 
}

.volunteer-band {
  margin-top: 1.75rem; 
  display: grid; 
  grid-template-columns: 1.1fr 1.3fr; 
  gap: 0; 
  align-items: stretch; 
  background: var(--white); 
  border: 1px solid var(--line-soft); 
  border-radius: var(--r-xl); 
  overflow: hidden; 
  box-shadow: var(--shadow-sm); 
}

.volunteer-photo { 
  overflow: hidden; 
  min-height: 320px; 
}

.volunteer-photo img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover;
  display: block;
}

.volunteer-copy { 
  padding: clamp(1.75rem, 4vw, 3rem); 
  display: flex; 
  flex-direction: column; 
  justify-content: center;
}

.volunteer-copy .eyebrow { 
  margin-bottom: 0.75rem; 
}

.volunteer-copy h3 { 
  font-family: var(--f-display); 
  font-size: clamp(1.4rem, 2.6vw, 1.9rem); 
  font-weight: 700; 
  color: var(--earth); 
  margin-bottom: 0.85rem; line-height: 1.2; 
}

.volunteer-copy p { 
  font-size: 0.95rem; 
  color: var(--earth-mid); 
  line-height: 1.7; 
}

.volunteer-pill { 
  display: inline-flex; 
  align-items: center; 
  gap: 0.5rem; 
  align-self: flex-start; 
  margin-top: 1.25rem; 
  background: var(--sage-light); 
  color: var(--sage-dark); 
  font-weight: 700; 
  font-size: 0.82rem; 
  padding: 0.5rem 1.1rem; 
  border-radius: var(--r-pill); 
}


/* ROADMAP */
#roadmap { 
  background: var(--sand); 
}

.roadmap-wrap { 
  display: grid; 
  grid-template-columns: 0.7fr 1.3fr; 
  gap: clamp(2rem, 5vw, 4rem); 
  align-items: start; 
}

.roadmap-intro { 
  position: sticky; 
  top: 100px; 
}

.roadmap-intro .section-title { 
  margin-bottom: 1.1rem; 
}

.roadmap-intro p { 
  color: var(--earth-mid); 
  font-size: 0.98rem; 
  line-height: 1.75; 
  margin-bottom: 1rem; 
}

.roadmap-legend { 
  display: flex; 
  gap: 1.25rem; 
  margin-top: 1.5rem; 
  flex-wrap: wrap; 
}

.legend-item { 
  display: flex; 
  align-items: center; 
  gap: 0.5rem; 
  font-size: 0.8rem; 
  color: var(--earth-mid); 
  font-weight: 500; 
}

.legend-dot {
  width: 12px; 
  height: 12px; 
  border-radius: 50%; 
}

.legend-dot.done { 
  background: var(--rust); 
}

.legend-dot.plan { 
  background: var(--sage); 
}

.timeline { 
  position: relative; 
  padding-left: 2rem; 
}

.timeline::before { 
  content: ''; 
  position: absolute; 
  left: 5px; 
  top: 8px; 
  bottom: 8px; 
  width: 2px; 
  background: linear-gradient(to bottom, var(--rust) 0%, var(--rust) 55%, var(--sage) 75%, var(--sage) 100%); 
  border-radius: 2px; 
}

.tl-item { 
  position: relative; 
  padding-bottom: 2.1rem; 
  opacity: 0; 
  transform: translateX(-14px); 
  transition: all 0.55s ease; 
}

.tl-item.visible { 
  opacity: 1; 
  transform: translateX(0); 
}

.tl-item:last-child { 
  padding-bottom: 0; 
}

.tl-dot { 
  position: absolute; 
  left: calc(-2rem + -1px); 
  top: 3px; 
  width: 14px; 
  height: 14px; 
  border-radius: 50%; 
  background: var(--rust); 
  border: 3px solid var(--sand); 
  box-shadow: 0 0 0 3px rgba(193,68,14,0.2); 
}

.tl-dot.plan {
  background: var(--sage); 
  box-shadow: 0 0 0 3px rgba(74,124,89,0.2); 
}

.tl-date { 
  font-size: 0.72rem; 
  font-weight: 700; 
  letter-spacing: 0.08em; 
  text-transform: uppercase; 
  color: var(--rust); 
  margin-bottom: 0.3rem; 
  display: inline-flex; 
  align-items: center; 
  gap: 0.5rem; 
}

.tl-date.plan { 
  color: var(--sage-dark); 

}

.tl-date .chip { 
  font-size: 0.6rem; 
  padding: 0.1rem 0.5rem;
  border-radius: var(--r-pill); 
  background: rgba(193,68,14,0.1); 
  letter-spacing: 0.06em; 
}

.tl-date.plan .chip { 
  background: rgba(74,124,89,0.12); 
}

.tl-title { 
  font-size: 1rem; 
  font-weight: 700; 
  color: var(--earth); 
  margin-bottom: 0.3rem; 
  font-family: var(--f-display); 
}

.tl-desc { 
  font-size: 0.88rem; 
  color: var(--earth-mid); 
  line-height: 1.6; 
}


/* CONTACTS */
#contact { 
  background: linear-gradient(165deg, #3A2A1E 0%, #2B1C12 100%); 
  color: #fff; 
  position: relative; 
  overflow: hidden; 
}

.contact-orb { 
  position: absolute; 
  width: 480px; 
  height: 480px; 
  border-radius: 50%; 
  pointer-events: none; 
  top: -160px; 
  left: -120px; 
  background: radial-gradient(circle, rgba(193,68,14,0.2) 0%, transparent 70%); 
}

.contact-grid { 
  display: grid; 
  grid-template-columns: 1fr 1.1fr; 
  gap: clamp(2.5rem, 5vw, 4.5rem); 
  align-items: start; 
  position: relative; 
  z-index: 2; 
}

.contact-info .section-title { 
  color: #fff;
  margin-bottom: 1.25rem; 

}

.contact-info .section-title em { 
  color: var(--rust-soft); 
}

.contact-info > p { 
  color: rgba(246,238,227,0.75); 
  font-size: 1rem; 
  line-height: 1.75; 
  margin-bottom: 2rem; 
  max-width: 420px; 
}

.ways { 
  display: flex; 
  gap: 0.7rem; 
  flex-wrap: wrap; 
  margin-bottom: 2.25rem; 
}

.way { 
  display: inline-flex; 
  align-items: center; 
  
  gap: 0.5rem; 
  background: rgba(255,255,255,0.08); 
  border: 1px solid rgba(255,255,255,0.16); 
  border-radius: var(--r-pill);
  padding: 0.5rem 1.1rem; 
  font-size: 0.84rem; 
  font-weight: 600; 
}

.way .e { 
  font-size: 1rem; 
}

.contact-detail { 
  display: flex; 
  align-items: flex-start; 
  gap: 0.85rem; 
  margin-bottom: 1.25rem; 
}

.contact-detail .ic { 
  width: 40px; 
  height: 40px; 
  border-radius: var(--r-sm); 
  background: rgba(255,255,255,0.08); 
  display: flex; 
  align-items: center;
  justify-content: center; 
  flex-shrink: 0; 
}

.contact-detail .ic svg { 
  width: 18px; 
  height: 18px; 
  color: var(--rust-soft); 
}

.contact-detail .lbl { 
  font-size: 0.72rem; 
  text-transform: uppercase; 
  letter-spacing: 0.1em;
  color: rgba(246,238,227,0.5); 
  margin-bottom: 0.15rem; 
}

.contact-detail .val { 
  -size: 0.95rem; 
  color: #fff; 
  font-weight: 500; 
  word-break: break-word; 
  text-decoration: none; 
}

.contact-detail a.val:hover { 
  color: var(--rust-soft); 
}

.contact-socials { 
  display: flex; 
  gap: 0.6rem; 
  margin-top: 1.75rem; 
  flex-wrap: wrap; }

.contact-socials .soc-icon { 
  background: rgba(255,255,255,0.08); 
  border-color: rgba(255,255,255,0.16); 
  color: #fff; 
  width: 38px; 
  height: 38px; 
}

.contact-socials .soc-icon svg {
  width: 16px; 
  height: 16px; 
}

.contact-socials .soc-icon:hover { 
  background: var(--rust); 
  border-color: var(--rust); 
}

.contact-card { 
  background: var(--white); 
  border-radius: var(--r-xl); 
  padding: clamp(1.75rem, 4vw, 2.5rem); 
  box-shadow: var(--shadow-img); 
}

.contact-card h3 { 
  font-family: var(--f-display); 
  font-size: 1.3rem; 
  font-weight: 700; 
  color: var(--earth); 
  margin-bottom: 0.4rem; 
}

.contact-card .sub { 
  font-size: 0.88rem; 
  color: var(--earth-mid); 
  margin-bottom: 1.5rem; 
}

.form-row { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 1rem; 
}

.field { 
  margin-bottom: 1.1rem; 
}

.field label { 
  display: block; 
  font-size: 0.8rem; 
  font-weight: 600; 
  color: var(--earth); 
  margin-bottom: 0.4rem;
}

.field input, .field select, .field textarea { 
  width: 100%; 
  padding: 0.8rem 1rem; 
  border: 1.5px solid var(--line); 
  border-radius: var(--r-md); 
  font-family: var(--f-body); 
  font-size: 0.92rem; color: var(--earth); 
  background: var(--sand); 
  transition: border-color 0.2s, box-shadow 0.2s; 
  resize: vertical; 
}

.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; 
  border-color: var(--rust); 
  box-shadow: 0 0 0 3px rgba(193,68,14,0.12); 
  background: #fff; 
}

.field input::placeholder, .field textarea::placeholder { 
  color: var(--earth-soft); 
  opacity: 0.7; 
}

.form-submit {
  width: 100%; 
  margin-top: 0.5rem; 
}

.form-submit[disabled] { 
  opacity: 0.7; 
  cursor: progress; 
}

.form-note { 
  font-size: 0.76rem; 
  color: var(--earth-soft); 
  margin-top: 0.85rem; 
  text-align: center; 
}

.form-error { 
  display: none; 
  font-size: 0.82rem;
  color: var(--rust-dark);
  background: rgba(193,68,14,0.08); 
  border: 1px solid rgba(193,68,14,0.2); 
  border-radius: var(--r-sm); 
  padding: 0.65rem 0.9rem; 
  margin-top: 0.85rem; 
  text-align: center;
}

.form-success { 
  display: none; 
  text-align: center; 
  padding: 2.5rem 1rem; 
  animation: fadeUp 0.5s cubic-bezier(0.22,1,0.36,1); 
}


@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }


.form-success .check { 
  width: 64px; 
  height: 64px; 
  border-radius: 50%;
  background: var(--sage-light); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  margin: 0 auto 1rem; 
}

.form-success .check svg { 
  width: 30px; 
  height: 30px; 
  color: var(--sage); 
}

.form-success h4 { 
  font-family: var(--f-display); 
  font-size: 1.3rem; 
  color: var(--earth); 
  margin-bottom: 0.5rem; 
}

.form-success p { 
  font-size: 0.9rem; 
  color: var(--earth-mid); 
}



/* FOOTER */
footer { 
  background: #271A10; 
  color: rgba(246,238,227,0.72); 
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; 
}

.footer-grid { 
  display: grid; 
  grid-template-columns: 2fr 1fr 1fr 1.3fr; 
  gap: clamp(2rem, 4vw, 3rem); 
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(246,238,227,0.12); 
}

.footer-brand .nav-logo { 
  margin-bottom: 1.1rem; 
}

.footer-brand .logo-chip { 
  width: 56px; 
  height: 56px; 
}

.footer-brand .nav-logo-text { 
  color: #fff; 
}

.footer-brand .nav-logo-text span { 
  color: var(--rust-soft); 
}

.footer-tagline { 
  font-size: 0.9rem; 
  line-height: 1.7; 
  max-width: 320px; 
}

.footer-reg { 
  font-size: 0.76rem; 
  color: rgba(246,238,227,0.5); 
  margin-top: 1.1rem; 
  line-height: 1.6; 
}

.footer-col-title { 
  font-size: 0.74rem; 
  font-weight: 700; 
  letter-spacing: 0.12em; 
  text-transform: uppercase; 
  color: #fff; 
  margin-bottom: 1.1rem; 
}

.footer-links { 
  list-style: none; 
  display: flex; 
  flex-direction: column; 
  gap: 0.6rem; 
}

.footer-links a { 
  font-size: 0.88rem;
  color: rgba(246,238,227,0.72); 
  text-decoration: none; 
  transition: color 0.2s; 
}

.footer-links a:hover { 
  color: var(--rust-soft); 
}

.footer-bottom { 
  display: flex; 
  justify-content: space-between; 
  align-items: center;
  padding-top: 1.75rem; 
  gap: 1rem; 
  flex-wrap: wrap; 
}

.footer-copy, .footer-credit {
  font-size: 0.8rem; 
  color: rgba(246,238,227,0.5); 
}

.footer-credit { 
  display: inline-flex;
  align-items: center; 
  gap: 0.4rem; 
}


/* LIGHTBOX */
.zoomable { 
  cursor: zoom-in;
}

.lightbox { 
  position: fixed; 
  inset: 0; 
  z-index: 500; 
  background: rgba(30,20,12,0.92); 
  backdrop-filter: blur(8px); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  padding: 4vh 4vw; 
  opacity: 0; 
  visibility: hidden; 
  transition: opacity 0.28s ease, visibility 0.28s ease; 
}

.lightbox.open { 
  opacity: 1; 
  visibility: visible; 
}

.lightbox img { 
  max-width: 100%; 
  max-height: 92vh; 
  border-radius: var(--r-md); 
  box-shadow: 0 24px 70px rgba(0,0,0,0.5); 
  transform: scale(0.96); 
  transition: transform 0.28s cubic-bezier(0.22,1,0.36,1); 
  object-fit: contain; 
}

.lightbox.open img { 
  transform: scale(1); 
}

.lightbox-close { 
  position: absolute; 
  top: 22px; 
  right: 26px; 
  width: 46px; 
  height: 46px; 
  border-radius: 50%; 
  background: rgba(255,255,255,0.12); 
  border: 1px solid rgba(255,255,255,0.25); 
  color: #fff; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  cursor: pointer; 
  transition: background 0.2s, transform 0.2s; 
}

.lightbox-close:hover { 
  background: rgba(255,255,255,0.22); 
  transform: rotate(90deg); 
}

.lightbox-close svg { 
  width: 22px; 
  height: 22px; 
}

.lightbox-cap { 
  position: absolute; 
  bottom: 22px; 
  left: 0; 
  right: 0; 
  text-align: center; 
  color: rgba(255,255,255,0.85); 
  font-size: 0.85rem; 
  padding: 0 1rem; 
}


/* REVEAL */
.reveal { 
  opacity: 0; 
  transform: translateY(26px); 
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1); 
}

.reveal.visible { 
  opacity: 1; 
  transform: translateY(0);
}

.reveal.d1 { 
  transition-delay: 0.08s; 
} 

.reveal.d2 { 
  transition-delay: 0.16s; 
} 

.reveal.d3 { 
  transition-delay: 0.24s; 
} 

.reveal.d4 { 
transition-delay: 0.32s; 
}

/* RESPONSIVENESS */
@media (max-width: 980px) {
  .nav-links, .nav-cta { 
    display: none; 
  }

  .hamburger { 
    display: flex; 
  }
  
  :root { 
    --nav-h: 112px; 
  }
  
  .logo-chip { 
    width: 92px; 
    height: 92px; 
    padding: 5px; 
  }
  
  .hero-grid { 
    grid-template-columns: 1fr; 
    gap: 2.5rem; 
    min-height: 0; 
    padding-top: 1rem;
  }
  
  .hero-visual { 
    max-width: 460px; 
    margin-inline: auto; 
    width: 100%; 
  }
  
  .about-grid, .founder-grid, .impact-head, .contact-grid, .roadmap-wrap, .credentials, .news-grid { 
    grid-template-columns: 1fr; 
  }
  
  .founder-grid { 
    gap: 2.5rem; 
  }
  
  .founder-visual {
    max-width: 400px; 
    margin-inline: auto;
    width: 100%; 
  }
  
  .about-visual { 
    max-width: 480px; 
    margin-inline: auto; 
    width: 100%; 
  }
  
  .roadmap-intro { 
    position: static; 
  }
  
  .impact-head { 
    gap: 1rem; 
  }
  
  .impact-gallery { 
    grid-template-columns: 1fr 1fr; 
    grid-auto-rows: 200px; 
  }
  
  .gal.big { 
    grid-row: span 1; 
    grid-column: span 2; 
  }
  
  .volunteer-band { 
    grid-template-columns: 1fr; 
  }
  
  .volunteer-photo {
    min-height: 240px; 
  }
  
  .footer-grid { 
    grid-template-columns: 1fr 1fr; 
  }
  
  .footer-brand { 
    grid-column: span 2; 
  }
}

@media (max-width: 560px) {
  html { 
    font-size: 15px; 
  }
  
  .hero-actions { 
    flex-direction: column; 
    align-items: stretch; 
  }
  
  .hero-actions .btn { 
    width: 100%; 
  }
  
  .dual, .cert-pair, .form-row { 
    grid-template-columns: 1fr; 
  }
  
  .impact-gallery { 
    grid-template-columns: 1fr; 
    grid-auto-rows: 220px; 
  }
  
  .gal.big { 
    grid-column: span 1;
  }
  
  .footer-grid { 
    grid-template-columns: 1fr; 
  }
  
  .footer-brand { 
    grid-column: span 1; 
  }
  
  .founder-quote-badge { 
    right: 0; 
  }
  
  .nav-logo-text { 
    font-size: 1.02rem; 
  }
  
  :root { 
    --nav-h: 94px; 
  }
  
  .logo-chip { 
    width: 74px; 
    height: 74px; 
    padding: 4px; 
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { 
    animation-duration: 0.001ms !important; 
    transition-duration: 0.001ms !important; 
    scroll-behavior: auto !important; 
  }
  
  .reveal, .tl-item { 
    opacity: 1 !important; 
    transform: none !important; 
  }
}
.avatar-fallback { 
  width: 100%; 
  height: 100%; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-family: var(--f-display); 
  font-size: 2.6rem; 
  font-weight: 700; 
  color: #fff; 
  letter-spacing: 0.02em; 
}

.footer-consent { 
  display: flex; 
  align-items: center; 
  gap: 0.55rem; 
  font-size: 0.78rem; 
  color: rgba(246,238,227,0.6); 
  padding: 1.6rem 0 0; 
  margin-top: 1.4rem; 
  border-top: 1px solid rgba(246,238,227,0.12); 
  line-height: 1.5; 
}

.footer-consent svg { 
  width: 16px; 
  height: 16px; 
  flex-shrink: 0; 
  color: var(--sage-light); 
}