/* =========================================
   ROOT VARIABLES
========================================= */

:root {

    --olive: #66733E;
    --sage: #A8AF7A;
    --gold: #C5B06B;

    --ivory: #F8F4EA;
    --charcoal: #1D1D1D;

    --white: #FFFFFF;

    --container: 1280px;

    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 32px;

    --shadow-sm:
        0 10px 30px rgba(0,0,0,.05);

    --shadow-md:
        0 20px 60px rgba(0,0,0,.08);

    --shadow-lg:
        0 30px 80px rgba(0,0,0,.12);

    --transition:
        300ms ease;

}

/* =========================================
   RESET
========================================= */

*,
*::before,
*::after {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

}

body {

    font-family: 'Manrope', sans-serif;

    background: var(--ivory);
    color: var(--charcoal);

    line-height: 1.7;

    overflow-x: hidden;

}

img {

    max-width: 100%;
    display: block;

}

a {

    text-decoration: none;
    color: inherit;

}

button {

    font-family: inherit;
    cursor: pointer;

}

/* =========================================
   TYPOGRAPHY
========================================= */

h1,
h2,
h3,
h4 {

    font-family:
        'Cormorant Garamond',
        serif;

    font-weight: 600;

    line-height: 1.05;

}

h1 {

    font-size:
        clamp(4rem, 8vw, 9rem);

}

h2 {

    font-size:
        clamp(2.8rem, 5vw, 5rem);

}

h3 {

    font-size: 2rem;

}

p {

    font-size: 1.1rem;
    color: rgba(29,29,29,.8);

}

/* =========================================
   CONTAINER
========================================= */

.container {

    width: min(92%, var(--container));
    margin-inline: auto;

}

/* =========================================
   BUTTONS
========================================= */

.btn {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding:
        1rem 2rem;

    border-radius: 999px;

    transition:
        var(--transition);

    font-weight: 600;

}

.btn-primary {

    background: var(--olive);
    color: white;

}

.btn-primary:hover {

    transform:
        translateY(-2px);

    background:
        #5d6839;

}

.btn-secondary {

    border:
        1px solid rgba(255,255,255,.4);

    color: white;

    backdrop-filter:
        blur(10px);

}

.btn-secondary:hover {

    background:
        rgba(255,255,255,.1);

}

/* =========================================
   LOADER
========================================= */

#loader {

    position: fixed;
    inset: 0;

    background:
        var(--ivory);

    z-index: 9999;

    display: flex;
    justify-content: center;
    align-items: center;

}

.loader-logo img {

    width: 240px;

}

/* =========================================
   HEADER
========================================= */

#header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 500;

    padding: 0rem;

}

#header .container {

    display: flex;
    justify-content: space-between;
    align-items: center;

}

.logo img {

    height: 200px;

}

#desktop-nav {

    display: flex;
    gap: 5rem;

}

#desktop-nav a {

    color: white;
    font-size: 24px;
    font-weight: 500;

    position: relative;

}

#desktop-nav a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -4px;

    width: 0;
    height: 1px;

    background: white;

    transition: .3s;

}

#desktop-nav a:hover::after {

    width: 100%;

}

.header-actions {

    display: flex;
    align-items: center;
    gap: 1rem;

}

#language-switch {

    background: transparent;
    border: none;
    color: white;
    font-weight: 700;

}

/* =========================================
   HERO
========================================= */

#hero {

    height: 100vh;

    position: relative;

    overflow: hidden;

}

#hero video {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

}

.hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.35),
            rgba(0,0,0,.75)
        );

}

.hero-content {

    position: relative;

    z-index: 5;

    height: 100%;

    max-width: 1100px;

    margin: auto;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    text-align: center;

    color: white;

}

.eyebrow {

    text-transform: uppercase;

    letter-spacing: 4px;

    margin-bottom: 2rem;

    opacity: .8;

}

.hero-content p {

    color:
        rgba(255,255,255,.85);

    max-width: 700px;

    margin-top: 0rem;

    margin-bottom: 1rem;

}

.hero-buttons {

    display: flex;
    gap: 1rem;

}

/* =========================================
   MISSION
========================================= */

#mission {

    padding:
        10rem 0;

}

.mission-grid {

    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 6rem;

    align-items: center;

}

.mission-text p {

    font-size: 1.25rem;

}

.mission-text p{
    white-space: pre-line;
}

.pillar-grid {

    margin-top: 8rem;

    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 2rem;

}

.pillar-card {

    background: white;

    padding: 3rem;

    border-radius:
        var(--radius-md);

    box-shadow:
        var(--shadow-sm);

}

.pillar-card h3 {

    margin-bottom: 1rem;

}

/* =========================================
   IMPACT
========================================= */

#impact {

    background:
        var(--olive);

    color: white;

    padding:
        10rem 0;

}

#impact h2 {

    text-align: center;

}

.stats-grid {

    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 2rem;

    margin-top: 5rem;

}

.stat {

    text-align: center;

}

.stat span {

    display: block;

    font-size: 4rem;

    font-weight: 700;

}

.stat p {

    color:
        rgba(255,255,255,.75);

}

.impact-map {

    margin-top: 6rem;

}

/* =========================================
   STORY
========================================= */

#story {

    padding:
        10rem 0;

}

#story h2 {

    text-align: center;

}

.story-cards {

    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 2rem;

    margin-top: 5rem;

}

.story-card {

    background: white;

    min-height: 420px;

    padding: 2rem;

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-md);

}

.story-card span {

    font-size: 3rem;

    color: var(--olive);

    font-weight: 700;

}

/* =========================================
   DONATE
========================================= */

#donate {

    position: relative;

    padding:
        10rem 0;

    background:
        #f2ede0;

}

.donate-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 5rem;

    align-items: center;

}

.donate-image img {

    border-radius:
        var(--radius-lg);

}

.donate-buttons{

    display:flex;

    gap:1rem;

    flex-wrap:wrap;

    margin-top:2rem;

}

.donation-options {

    display: flex;
    flex-wrap: wrap;

    gap: 1rem;

    margin:
        2rem 0;

}

.donation-options button {

    padding:
        1rem 1.5rem;

    border-radius: 999px;

    border:
        1px solid rgba(0,0,0,.15);

    background: white;

}

.trust-signals {

    margin-top: 2rem;

    display: grid;

    gap: .8rem;

}

/* =========================================
   CONTACT
========================================= */

#contact {

    padding:
        10rem 0;

}

.contact-intro {

    text-align: center;

    margin-bottom: 4rem;

}

#contact-form {

    max-width: 800px;

    margin: auto;

    display: grid;
    gap: 1.5rem;

}

#contact-form input,
#contact-form textarea {

    padding:
        1.25rem;

    border:
        1px solid rgba(0,0,0,.1);

    border-radius:
        var(--radius-sm);

    background:
        white;

    font-size: 1rem;

}

#contact-form textarea {

    resize: vertical;

}

.hidden-field{

    position:absolute;

    left:-9999px;

}

.checkbox-label{

    display:flex;

    align-items:flex-start;

    gap:12px;

    font-size:.95rem;

    line-height:1.6;

}

.checkbox-label input{

    margin-top:4px;

    accent-color:var(--olive);

}

#form-message{

    display:none;

    margin-top:20px;

    padding:16px;

    border-radius:10px;

    font-weight:600;

}

#form-message.success{

    background:#eaf6e7;

    color:#2f6b2f;

    border:1px solid #bfdab7;

}

#form-message.error{

    background:#fdeaea;

    color:#8d2424;

    border:1px solid #efb7b7;

}

/* =========================================
   FOOTER
========================================= */

footer {

    background:
        var(--charcoal);

    color: white;

    padding:
        6rem 0 2rem;

}

.footer-grid {

    display: grid;

    grid-template-columns:
        2fr 1fr 1fr;

    gap: 3rem;

}

.footer-grid h4 {

    margin-bottom: 1rem;

}

.footer-grid a {

    display: block;

    margin-bottom: .8rem;

    opacity: .8;

}

.footer-bottom {

    margin-top: 4rem;

    text-align: center;

    opacity: .6;

}

.footer-logo-video{

    display:block;

    width:100%;

    max-width:640px;

    height:auto;

    margin-inline:auto;

}

/* =========================================
   MOBILE MENU
========================================= */

#mobile-menu {

    display: none;

}

#mobile-menu-button {

    display: none;

}