{\rtf1\ansi\ansicpg1252\cocoartf2822
\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fswiss\fcharset0 Helvetica;}
{\colortbl;\red255\green255\blue255;}
{\*\expandedcolortbl;;}
\margl1440\margr1440\vieww11520\viewh8400\viewkind0
\pard\tx720\tx1440\tx2160\tx2880\tx3600\tx4320\tx5040\tx5760\tx6480\tx7200\tx7920\tx8640\pardirnatural\partightenfactor0

\f0\fs24 \cf0 /* =========================\
   RESCUE A MEAL\
   Main Website Styles\
   ========================= */\
\
\
/* ---------- Basic Reset ---------- */\
\
* \{\
    box-sizing: border-box;\
    margin: 0;\
    padding: 0;\
\}\
\
\
:root \{\
\
    --green: #176b4d;\
    --dark: #10251d;\
    --cream: #f7f4ec;\
    --orange: #f28c38;\
    --muted: #63736c;\
    --white: #ffffff;\
\
\}\
\
\
html \{\
    scroll-behavior: smooth;\
\}\
\
\
body \{\
\
    font-family:\
        Arial,\
        Helvetica,\
        sans-serif;\
\
    color: var(--dark);\
\
    background: var(--cream);\
\
    line-height: 1.6;\
\
\}\
\
\
/* ---------- Navigation ---------- */\
\
.navbar \{\
\
    height: 78px;\
\
    padding: 0 7%;\
\
    display: flex;\
\
    align-items: center;\
\
    justify-content: space-between;\
\
    background: rgba(247, 244, 236, 0.96);\
\
    border-bottom: 1px solid #e5e0d5;\
\
    position: sticky;\
\
    top: 0;\
\
    z-index: 10;\
\
\}\
\
\
.logo \{\
\
    color: var(--dark);\
\
    text-decoration: none;\
\
    font-size: 1.35rem;\
\
    font-weight: 800;\
\
    letter-spacing: -0.04em;\
\
\}\
\
\
.logo span \{\
\
    color: var(--orange);\
\
\}\
\
\
nav \{\
\
    display: flex;\
\
    gap: 28px;\
\
\}\
\
\
nav a \{\
\
    color: var(--dark);\
\
    text-decoration: none;\
\
    font-size: 0.92rem;\
\
    font-weight: 600;\
\
\}\
\
\
nav a:hover \{\
\
    color: var(--green);\
\
\}\
\
\
\
/* ---------- Hero ---------- */\
\
.hero \{\
\
    min-height: 650px;\
\
    padding: 90px 7%;\
\
    display: grid;\
\
    grid-template-columns: 1.3fr 0.7fr;\
\
    gap: 60px;\
\
    align-items: center;\
\
    background:\
\
        radial-gradient(\
            circle at 80% 20%,\
            #dbeee4 0,\
            transparent 28%\
        ),\
\
        var(--cream);\
\
\}\
\
\
.hero-content \{\
\
    max-width: 900px;\
\
\}\
\
\
.eyebrow \{\
\
    color: var(--green);\
\
    font-size: 0.78rem;\
\
    font-weight: 800;\
\
    letter-spacing: 0.14em;\
\
    margin-bottom: 15px;\
\
\}\
\
\
h1 \{\
\
    font-size: clamp(3.5rem, 8vw, 7rem);\
\
    line-height: 0.94;\
\
    letter-spacing: -0.065em;\
\
    max-width: 850px;\
\
\}\
\
\
h1 span \{\
\
    color: var(--green);\
\
    display: block;\
\
\}\
\
\
.hero-text \{\
\
    max-width: 600px;\
\
    margin-top: 28px;\
\
    color: var(--muted);\
\
    font-size: 1.15rem;\
\
\}\
\
\
.buttons \{\
\
    display: flex;\
\
    gap: 14px;\
\
    margin-top: 34px;\
\
    flex-wrap: wrap;\
\
\}\
\
\
.button \{\
\
    display: inline-block;\
\
    padding: 14px 22px;\
\
    border-radius: 999px;\
\
    text-decoration: none;\
\
    font-weight: 800;\
\
    transition:\
        transform 0.2s ease,\
        opacity 0.2s ease;\
\
\}\
\
\
.button:hover \{\
\
    transform: translateY(-2px);\
\
    opacity: 0.9;\
\
\}\
\
\
.primary \{\
\
    background: var(--green);\
\
    color: white;\
\
\}\
\
\
.secondary \{\
\
    border: 1px solid #b9c3bd;\
\
    color: var(--dark);\
\
\}\
\
\
\
/* ---------- Hero Card ---------- */\
\
.hero-card \{\
\
    background: var(--green);\
\
    color: white;\
\
    border-radius: 28px;\
\
    padding: 42px;\
\
    min-height: 330px;\
\
    display: flex;\
\
    flex-direction: column;\
\
    justify-content: center;\
\
    box-shadow:\
        0 25px 60px rgba(23, 107, 77, 0.18);\
\
\}\
\
\
.plate \{\
\
    font-size: 5rem;\
\
    margin-bottom: 20px;\
\
\}\
\
\
.card-title \{\
\
    font-size: 1.7rem;\
\
    font-weight: 800;\
\
    line-height: 1.15;\
\
    margin-bottom: 12px;\
\
\}\
\
\
.hero-card p:last-child \{\
\
    opacity: 0.82;\
\
\}\
\
\
\
/* ---------- Sections ---------- */\
\
.section \{\
\
    padding: 110px 7%;\
\
\}\
\
\
.mission \{\
\
    display: grid;\
\
    grid-template-columns: 0.9fr 1.1fr;\
\
    gap: 100px;\
\
    background: white;\
\
\}\
\
\
h2 \{\
\
    font-size: clamp(2.5rem, 5vw, 4.5rem);\
\
    line-height: 1;\
\
    letter-spacing: -0.055em;\
\
\}\
\
\
.section-text \{\
\
    max-width: 650px;\
\
    color: var(--muted);\
\
    font-size: 1.1rem;\
\
\}\
\
\
.section-text p + p \{\
\
    margin-top: 22px;\
\
\}\
\
\
\
/* ---------- How It Works ---------- */\
\
.how \{\
\
    background: var(--cream);\
\
\}\
\
\
.how > h2 \{\
\
    max-width: 700px;\
\
    margin-bottom: 55px;\
\
\}\
\
\
.steps \{\
\
    display: grid;\
\
    grid-template-columns:\
        repeat(3, 1fr);\
\
    gap: 22px;\
\
\}\
\
\
.step \{\
\
    background: white;\
\
    border-radius: 22px;\
\
    padding: 34px;\
\
    min-height: 250px;\
\
\}\
\
\
.number \{\
\
    color: var(--orange);\
\
    font-size: 0.8rem;\
\
    font-weight: 900;\
\
    margin-bottom: 55px;\
\
\}\
\
\
.step h3 \{\
\
    font-size: 1.35rem;\
\
    margin-bottom: 10px;\
\
\}\
\
\
.step p \{\
\
    color: var(--muted);\
\
\}\
\
\
\
/* ---------- Call To Action ---------- */\
\
.cta \{\
\
    padding: 85px 7%;\
\
    background: var(--orange);\
\
    color: white;\
\
    display: flex;\
\
    align-items: center;\
\
    justify-content: space-between;\
\
    gap: 40px;\
\
\}\
\
\
.cta .eyebrow \{\
\
    color: white;\
\
    opacity: 0.8;\
\
\}\
\
\
.cta h2 \{\
\
    max-width: 700px;\
\
\}\
\
\
.cta p \{\
\
    max-width: 620px;\
\
    margin-top: 18px;\
\
    opacity: 0.9;\
\
\}\
\
\
.button.light \{\
\
    background: white;\
\
    color: var(--dark);\
\
    white-space: nowrap;\
\
\}\
\
\
\
/* ---------- Footer ---------- */\
\
footer \{\
\
    padding: 38px 7%;\
\
    background: var(--dark);\
\
    color: white;\
\
    display: flex;\
\
    align-items: center;\
\
    gap: 30px;\
\
\}\
\
\
footer .logo \{\
\
    color: white;\
\
\}\
\
\
footer p \{\
\
    opacity: 0.65;\
\
\}\
\
\
.copyright \{\
\
    margin-left: auto;\
\
    font-size: 0.85rem;\
\
\}\
\
\
\
/* ---------- Mobile ---------- */\
\
@media (max-width: 800px) \{\
\
    nav \{\
\
        display: none;\
\
    \}\
\
\
    .hero,\
    .mission \{\
\
        grid-template-columns: 1fr;\
\
        gap: 45px;\
\
    \}\
\
\
    .hero \{\
\
        padding-top: 65px;\
\
    \}\
\
\
    .steps \{\
\
        grid-template-columns: 1fr;\
\
    \}\
\
\
    .cta,\
    footer \{\
\
        flex-direction: column;\
\
        align-items: flex-start;\
\
    \}\
\
\
    .copyright \{\
\
        margin-left: 0;\
\
    \}\
\
\}}