/* Eaglestone Africa Foundation — compiled stylesheet */
*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:var(--border)}
html{line-height:1.5;-webkit-text-size-adjust:100%;tab-size:4;font-family:var(--font-plus-jakarta-sans),ui-sans-serif,system-ui,sans-serif}
body{margin:0;line-height:inherit}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}
a{color:inherit;text-decoration:inherit}
b,strong{font-weight:bolder}
button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}
button,select{text-transform:none}
button,[type='button'],[type='submit']{-webkit-appearance:button;background-color:transparent;background-image:none}
button,[role="button"]{cursor:pointer}
blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}
ol,ul,menu{list-style:none;margin:0;padding:0}
textarea{resize:vertical}
input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}
img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}
img,video{max-width:100%;height:auto}
[hidden]{display:none}


:root {
  --background: #FAF8F3;
  --foreground: #1A1008;
  --primary: #A65017;
  --primary-foreground: #FFFFFF;
  --secondary: #082F1A;
  --secondary-foreground: #FFFFFF;
  --accent: #C8691F;
  --accent-foreground: #FFFFFF;
  --muted: #F0EBE3;
  --muted-foreground: #6B5744;
  --card: #FFFFFF;
  --card-foreground: #1A1008;
  --border: #E8DDD0;
  --input: #E8DDD0;
  --ring: #A65017;
  --radius: 1rem;
  --font-sans: var(--font-plus-jakarta-sans), sans-serif;
}

  * {
    box-sizing: border-box;
    border-color: var(--border);
  }

  body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
  }

  html {
    scroll-behavior: smooth;
  }

  h1, h2, h3, h4, h5, h6, p {
    margin: 0;
  }

  .text-hero-xl {
    font-size: clamp(2.8rem, 9vw, 7.5rem);
    line-height: 0.92;
    letter-spacing: -0.04em;
    font-weight: 900;
  }

  .text-hero-md {
    font-size: clamp(2rem, 5vw, 4.5rem);
    line-height: 0.95;
    letter-spacing: -0.03em;
    font-weight: 800;
  }

  .text-section-title {
    font-size: clamp(1.8rem, 4vw, 3.5rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    font-weight: 800;
  }

  .outline-text-primary {
    -webkit-text-stroke: 2px var(--primary);
    color: transparent;
  }

  .outline-text-white {
    -webkit-text-stroke: 2px #FFFFFF;
    color: transparent;
  }

  .blob-green {
    background: radial-gradient(circle, #082F1A 0%, #0D4A28 60%, transparent 100%);
    filter: blur(80px);
    opacity: 0.15;
  }

  .blob-copper {
    background: radial-gradient(circle, #A65017 0%, #C8691F 60%, transparent 100%);
    filter: blur(80px);
    opacity: 0.12;
  }

  .creative-card {
    background: var(--card);
    border-radius: 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    position: relative;
  }

  .creative-card:hover {
    transform: scale(1.02);
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.12);
  }

  .overlap-img {
    border: 8px solid var(--background);
    border-radius: 40px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
  }

  .phase-connector {
    width: 2px;
    background: linear-gradient(to bottom, var(--primary), var(--secondary));
  }

  .stat-card-large {
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--primary);
  }

  .section-label {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--primary);
  }

  .animate-on-scroll {
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .fade-up {
    opacity: 0;
    transform: translateY(32px);
  }

  .fade-up.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .stagger-1 { transition-delay: 80ms; }
  .stagger-2 { transition-delay: 160ms; }
  .stagger-3 { transition-delay: 240ms; }
  .stagger-4 { transition-delay: 320ms; }
  .stagger-5 { transition-delay: 400ms; }
  .stagger-6 { transition-delay: 480ms; }

  .nav-link {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    transition: color 0.2s ease;
  }

  .nav-link:hover {
    color: var(--primary);
  }

  .nav-link-active {
    color: var(--primary);
  }

  .staff-nav-link svg {
    display: inline-block;
    vertical-align: -1px;
    margin-right: 0.4rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .staff-nav-link:hover svg {
    transform: rotate(-12deg) scale(1.1);
  }

  .card-hover-lift {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .card-hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 60px -12px rgba(166, 80, 23, 0.18);
  }

  .gradient-copper-green {
    background: linear-gradient(135deg, #A65017 0%, #6B3510 40%, #082F1A 100%);
  }

  .gradient-green-dark {
    background: linear-gradient(135deg, #082F1A 0%, #0D4A28 50%, #0A3B20 100%);
  }

  .text-balance {
    text-wrap: balance;
  }
.-bottom-6{bottom:-1.5rem}
.-left-6{left:-1.5rem}
.-right-4{right:-1rem}
.-space-x-2 > :not([hidden]) ~ :not([hidden]){margin-left:-0.5rem}
.-translate-x-1\/2{--tw-tx:-50%;translate:var(--tw-tx,0) var(--tw-ty,0)}
.-translate-y-1\/2{--tw-ty:-50%;translate:var(--tw-tx,0) var(--tw-ty,0)}
.absolute{position:absolute}
.aspect-\[4\/3\]{aspect-ratio:4/3}
.backdrop-blur-md{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.backdrop-blur-xl{backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.bg-background{background-color:var(--background)}
.bg-gray-200{background-color:#e5e7eb}
.bg-green-100{background-color:#dcfce7}
.bg-muted{background-color:var(--muted)}
.bg-primary{background-color:var(--primary)}
.bg-red-100{background-color:#fee2e2}
.bg-secondary{background-color:var(--secondary)}
.bg-transparent{background-color:transparent}
.bg-white{background-color:#ffffff}
.bg-white\/10{background-color:color-mix(in srgb, #ffffff 10%, transparent)}
.bg-white\/30{background-color:color-mix(in srgb, #ffffff 30%, transparent)}
.bg-white\/95{background-color:color-mix(in srgb, #ffffff 95%, transparent)}
.bg-yellow-100{background-color:#fef9c3}
.block{display:block}
.blur{filter:blur(8px)}
.blur-3xl{filter:blur(64px)}
.border{border-width:1px}
.border-2{border-width:2px}
.border-\[10px\]{border-width:10px}
.border-\[8px\]{border-width:8px}
.border-b{border-bottom-width:1px}
.border-border{border-color:var(--border)}
.border-l-2{border-left-width:2px}
.border-t{border-top-width:1px}
.border-white{border-color:#ffffff}
.border-white\/10{border-color:color-mix(in srgb, #ffffff 10%, transparent)}
.border-white\/20{border-color:color-mix(in srgb, #ffffff 20%, transparent)}
.border-white\/30{border-color:color-mix(in srgb, #ffffff 30%, transparent)}
.border-y{border-top-width:1px;border-bottom-width:1px}
.bottom-0{bottom:0px}
.bottom-16{bottom:4rem}
.bottom-40{bottom:10rem}
.cursor-default{cursor:default}
.cursor-pointer{cursor:pointer}
.duration-200{transition-duration:200ms}
.duration-300{transition-duration:300ms}
.fixed{position:fixed}
.flex{display:flex}
.flex-1{flex:1 1 0%}
.flex-col{flex-direction:column}
.flex-shrink-0{flex-shrink:0}
.flex-wrap{flex-wrap:wrap}
.font-black{font-weight:900}
.font-bold{font-weight:700}
.font-extrabold{font-weight:800}
.font-medium{font-weight:500}
.font-sans{font-family:var(--font-plus-jakarta-sans), sans-serif}
.font-semibold{font-weight:600}
.gap-1{gap:0.25rem}
.gap-1\.5{gap:0.375rem}
.gap-12{gap:3rem}
.gap-16{gap:4rem}
.gap-2{gap:0.5rem}
.gap-2\.5{gap:0.625rem}
.gap-3{gap:0.75rem}
.gap-4{gap:1rem}
.gap-5{gap:1.25rem}
.gap-6{gap:1.5rem}
.gap-8{gap:2rem}
.grid{display:grid}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.h-1{height:0.25rem}
.h-1\.5{height:0.375rem}
.h-10{height:2.5rem}
.h-11{height:2.75rem}
.h-12{height:3rem}
.h-14{height:3.5rem}
.h-20{height:5rem}
.h-24{height:6rem}
.h-4{height:1rem}
.h-5{height:1.25rem}
.h-6{height:1.5rem}
.h-64{height:16rem}
.h-7{height:1.75rem}
.h-8{height:2rem}
.h-80{height:20rem}
.h-96{height:24rem}
.h-\[520px\]{height:520px}
.h-full{height:100%}
.hidden{display:none}
.inline-block{display:inline-block}
.inline-flex{display:inline-flex}
.inset-0{inset:0px}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.leading-relaxed{line-height:1.625}
.leading-snug{line-height:1.375}
.leading-tight{line-height:1.25}
.left-0{left:0px}
.left-1\/2{left:50%}
.left-4{left:1rem}
.max-w-2xl{max-width:42rem}
.max-w-3xl{max-width:48rem}
.max-w-4xl{max-width:56rem}
.max-w-7xl{max-width:80rem}
.max-w-lg{max-width:32rem}
.max-w-md{max-width:28rem}
.max-w-sm{max-width:24rem}
.mb-0\.5{margin-bottom:0.125rem}
.mb-1{margin-bottom:0.25rem}
.mb-10{margin-bottom:2.5rem}
.mb-12{margin-bottom:3rem}
.mb-16{margin-bottom:4rem}
.mb-2{margin-bottom:0.5rem}
.mb-3{margin-bottom:0.75rem}
.mb-4{margin-bottom:1rem}
.mb-6{margin-bottom:1.5rem}
.mb-8{margin-bottom:2rem}
.min-h-\[50vh\]{min-height:50vh}
.min-h-\[55vh\]{min-height:55vh}
.min-h-\[60vh\]{min-height:60vh}
.min-h-screen{min-height:100vh}
.mix-blend-multiply{mix-blend-mode:multiply}
.mix-blend-screen{mix-blend-mode:screen}
.ml-1\.5{margin-left:0.375rem}
.ml-4{margin-left:1rem}
.mt-0\.5{margin-top:0.125rem}
.mt-1{margin-top:0.25rem}
.mt-1\.5{margin-top:0.375rem}
.mt-10{margin-top:2.5rem}
.mt-14{margin-top:3.5rem}
.mt-2{margin-top:0.5rem}
.mt-3{margin-top:0.75rem}
.mt-4{margin-top:1rem}
.mt-6{margin-top:1.5rem}
.mt-8{margin-top:2rem}
.mx-auto{margin-left:auto;margin-right:auto}
.object-cover{object-fit:cover}
.opacity-10{opacity:0.1}
.opacity-20{opacity:0.2}
.opacity-60{opacity:0.6}
.opacity-70{opacity:0.7}
.opacity-80{opacity:0.8}
.outline-none{outline:2px solid transparent;outline-offset:2px}
.overflow-hidden{overflow:hidden}
.overflow-y-auto{overflow-y:auto}
.p-10{padding:2.5rem}
.p-4{padding:1rem}
.p-5{padding:1.25rem}
.p-6{padding:1.5rem}
.p-8{padding:2rem}
.pb-12{padding-bottom:3rem}
.pl-2{padding-left:0.5rem}
.pl-4{padding-left:1rem}
.placeholder-white\/40::placeholder{color:color-mix(in srgb, #ffffff 40%, transparent)}
.pointer-events-none{pointer-events:none}
.pr-5{padding-right:1.25rem}
.pt-16{padding-top:4rem}
.pt-20{padding-top:5rem}
.pt-24{padding-top:6rem}
.px-3{padding-left:0.75rem;padding-right:0.75rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.px-8{padding-left:2rem;padding-right:2rem}
.py-1{padding-top:0.25rem;padding-bottom:0.25rem}
.py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem}
.py-12{padding-top:3rem;padding-bottom:3rem}
.py-14{padding-top:3.5rem;padding-bottom:3.5rem}
.py-16{padding-top:4rem;padding-bottom:4rem}
.py-2{padding-top:0.5rem;padding-bottom:0.5rem}
.py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem}
.py-24{padding-top:6rem;padding-bottom:6rem}
.py-28{padding-top:7rem;padding-bottom:7rem}
.py-3{padding-top:0.75rem;padding-bottom:0.75rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.relative{position:relative}
.resize-none{resize:none}
.right-0{right:0px}
.right-\[-16px\]{right:-16px}
.rotate-180{rotate:180deg}
.rounded-2xl{border-radius:calc(var(--radius) * 2.5)}
.rounded-3xl{border-radius:calc(var(--radius) * 3)}
.rounded-4xl{border-radius:2.5rem}
.rounded-5xl{border-radius:3rem}
.rounded-full{border-radius:9999px}
.rounded-lg{border-radius:calc(var(--radius) * 1.5)}
.shadow-2xl{box-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25)}
.shadow-card{box-shadow:0 10px 40px rgba(0,0,0,0.04)}
.shadow-card-hover{box-shadow:0 40px 80px -20px rgba(0,0,0,0.12)}
.shadow-deep{box-shadow:0 100px 150px -30px rgba(0,0,0,0.15)}
.shadow-sm{box-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05)}
.shrink-0{flex-shrink:0}
.space-y-10 > :not([hidden]) ~ :not([hidden]){margin-top:2.5rem}
.space-y-3 > :not([hidden]) ~ :not([hidden]){margin-top:0.75rem}
.space-y-4 > :not([hidden]) ~ :not([hidden]){margin-top:1rem}
.space-y-5 > :not([hidden]) ~ :not([hidden]){margin-top:1.25rem}
.space-y-8 > :not([hidden]) ~ :not([hidden]){margin-top:2rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-5xl{font-size:3rem;line-height:1}
.text-6xl{font-size:3.75rem;line-height:1}
.text-9xl{font-size:8rem;line-height:1}
.text-base{font-size:1rem;line-height:1.5rem}
.text-center{text-align:center}
.text-foreground{color:var(--foreground)}
.text-green-700{color:#15803d}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-muted-foreground{color:var(--muted-foreground)}
.text-primary{color:var(--primary)}
.text-primary-foreground{color:var(--primary-foreground)}
.text-red-700{color:#b91c1c}
.text-sm{font-size:0.875rem;line-height:1.25rem}
.text-white{color:#ffffff}
.text-white\/20{color:color-mix(in srgb, #ffffff 20%, transparent)}
.text-white\/40{color:color-mix(in srgb, #ffffff 40%, transparent)}
.text-white\/50{color:color-mix(in srgb, #ffffff 50%, transparent)}
.text-white\/60{color:color-mix(in srgb, #ffffff 60%, transparent)}
.text-white\/70{color:color-mix(in srgb, #ffffff 70%, transparent)}
.text-white\/80{color:color-mix(in srgb, #ffffff 80%, transparent)}
.text-white\/85{color:color-mix(in srgb, #ffffff 85%, transparent)}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-xs{font-size:0.75rem;line-height:1rem}
.text-yellow-700{color:#a16207}
.top-0{top:0px}
.top-1\/2{top:50%}
.top-20{top:5rem}
.top-8{top:2rem}
.top-full{top:100%}
.tracking-tight{letter-spacing:-0.025em}
.tracking-wider{letter-spacing:0.05em}
.tracking-widest{letter-spacing:0.1em}
.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}
.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}
.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}
.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}
.uppercase{text-transform:uppercase}
.w-1{width:0.25rem}
.w-1\.5{width:0.375rem}
.w-11{width:2.75rem}
.w-12{width:3rem}
.w-14{width:3.5rem}
.w-20{width:5rem}
.w-4{width:1rem}
.w-5{width:1.25rem}
.w-56{width:14rem}
.w-6{width:1.5rem}
.w-7{width:1.75rem}
.w-72{width:18rem}
.w-8{width:2rem}
.w-80{width:20rem}
.w-96{width:24rem}
.w-full{width:100%}
.whitespace-nowrap{white-space:nowrap}
.z-0{z-index:0}
.z-10{z-index:10}
.z-20{z-index:20}
.z-30{z-index:30}
.z-40{z-index:40}
.z-50{z-index:50}
.active\:scale-95:active{scale:0.95}
.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}
.focus\:ring-2:focus{box-shadow:0 0 0 2px var(--tw-ring-color, rgb(59 130 246 / 0.5))}
.group:hover .group-hover\:bg-white{background-color:#ffffff}
.group:hover .group-hover\:scale-105{scale:1.05}
.group:hover .group-hover\:text-primary{color:var(--primary)}
.group:hover .group-hover\:underline{text-decoration-line:underline}
.hover\:bg-accent:hover{background-color:var(--accent)}
.hover\:bg-border:hover{background-color:var(--border)}
.hover\:bg-muted:hover{background-color:var(--muted)}
.hover\:bg-primary\/90:hover{background-color:color-mix(in srgb, var(--primary) 90%, transparent)}
.hover\:bg-white\/10:hover{background-color:color-mix(in srgb, #ffffff 10%, transparent)}
.hover\:bg-white\/90:hover{background-color:color-mix(in srgb, #ffffff 90%, transparent)}
.hover\:border-white\/60:hover{border-color:color-mix(in srgb, #ffffff 60%, transparent)}
.hover\:opacity-80:hover{opacity:0.8}
.hover\:opacity-90:hover{opacity:0.9}
.hover\:scale-110:hover{scale:1.1}
.hover\:shadow-copper:hover{box-shadow:0 24px 60px -12px rgba(166,80,23,0.25)}
.hover\:text-accent-foreground:hover{color:var(--accent-foreground)}
.hover\:text-white:hover{color:#ffffff}
.hover\:text-white\/70:hover{color:color-mix(in srgb, #ffffff 70%, transparent)}
.placeholder\:text-muted-foreground::placeholder{color:var(--muted-foreground)}
@media (min-width:640px){
.sm\:block{display:block}
.sm\:flex-row{flex-direction:row}
.sm\:gap-3{gap:0.75rem}
.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sm\:inline{display:inline}
.sm\:inline-flex{display:inline-flex}
.sm\:text-left{text-align:left}
}
@media (min-width:768px){
.md\:block{display:block}
.md\:col-span-2{grid-column:span 2 / span 2}
.md\:flex-row{flex-direction:row}
.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.md\:text-base{font-size:1rem;line-height:1.5rem}
}
@media (min-width:1024px){
.lg\:block{display:block}
.lg\:col-span-1{grid-column:span 1 / span 1}
.lg\:col-span-2{grid-column:span 2 / span 2}
.lg\:col-span-3{grid-column:span 3 / span 3}
.lg\:col-span-5{grid-column:span 5 / span 5}
.lg\:col-span-7{grid-column:span 7 / span 7}
.lg\:flex{display:flex}
.lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.lg\:hidden{display:none}
.lg\:pb-16{padding-bottom:4rem}
.lg\:pr-2{padding-right:0.5rem}
.lg\:pt-20{padding-top:5rem}
.lg\:text-4xl{font-size:2.25rem;line-height:2.5rem}
}
@media (min-width:1280px){
.xl\:gap-6{gap:1.5rem}
.xl\:inline{display:inline}
.xl\:pr-5{padding-right:1.25rem}
}
body{font-family:var(--font-plus-jakarta-sans),sans-serif}