.cause-page { background: var(--warm-white); }
.cause-hero { padding: 74px 0 86px; background: radial-gradient(circle at 92% 18%, rgba(246,173,45,.2), transparent 30%), linear-gradient(135deg,#fffaf0,#fffdf8 58%,#edf5e7); }
.cause-hero-grid,.cause-story-grid,.donation-grid { display:grid; grid-template-columns: 1fr 1fr; gap:72px; align-items:center; }
.cause-back { display:inline-flex; gap:9px; align-items:center; margin-bottom:28px; color:var(--forest); font-size:14px; font-weight:800; text-decoration:none; }
.cause-back:hover { color:var(--saffron); }
.cause-hero h1 { max-width:650px; margin:12px 0 20px; color:var(--brown); font-family:Candara,Calibri,Arial,sans-serif; font-size:clamp(3rem,6vw,5.6rem); line-height:1.02; letter-spacing:-.055em; }
.cause-hero h1 em { display:block; color:var(--saffron); }
.cause-lead { max-width:580px; margin:0; color:var(--muted); font-size:18px; line-height:1.8; }
.cause-hero-actions { display:flex; gap:22px; align-items:center; flex-wrap:wrap; margin-top:32px; }
.cause-share { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:14px; font-weight:800; }
.cause-share a { display:grid; width:40px; height:40px; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--forest); background:var(--white); text-decoration:none; transition:.2s ease; }
.cause-share a:hover { color:var(--white); border-color:transparent; transform:translateY(-3px); }
.cause-share a:first-of-type:hover { background:#1877f2; }.cause-share a:last-of-type:hover { background:#1aaf5d; }
.cause-hero-image { position:relative; min-height:480px; border-radius:32px; overflow:hidden; box-shadow:0 28px 75px rgba(9,61,35,.2); }
.cause-hero-image::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(9,61,35,.65)); pointer-events:none; }
.cause-hero-image img { width:100%; height:100%; min-height:480px; object-fit:cover; }
.cause-image-note { position:absolute; z-index:1; right:24px; bottom:24px; left:24px; display:flex; align-items:center; gap:12px; color:#fff; font-weight:800; }
.cause-image-note i { display:grid; width:42px; height:42px; place-items:center; border-radius:13px; color:var(--brown); background:var(--gold); font-size:19px; }
.cause-story { background:#fffdf8; }.cause-story-grid { align-items:start; }.cause-story h2,.cause-section-heading h2,.donation-copy h2 { margin:12px 0 0; color:var(--brown); font-family:Candara,Calibri,Arial,sans-serif; font-size:clamp(2.4rem,4vw,4.2rem); line-height:1.06; letter-spacing:-.045em; }.cause-story h2 em,.cause-section-heading h2 em,.donation-copy h2 em { color:var(--saffron); }.cause-story-copy { color:#51463e; font-size:17px; line-height:1.9; }.cause-story-copy p { margin:0 0 18px; }
.cause-photo-story { background:#f5eee0; }.cause-photo-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:72px; align-items:center; }.cause-photo-frame { position:relative; min-height:430px; margin:0; overflow:hidden; border-radius:28px 28px 28px 6px; box-shadow:0 25px 55px rgba(58,22,9,.16); }.cause-photo-frame::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(58,22,9,.45)); pointer-events:none; }.cause-photo-frame img { width:100%; height:100%; min-height:430px; object-fit:cover; }.cause-photo-badge { position:absolute; z-index:1; bottom:22px; left:22px; display:inline-flex; align-items:center; gap:9px; padding:10px 14px; border:1px solid rgba(255,255,255,.35); border-radius:999px; color:#fff; background:rgba(9,63,36,.78); font-size:13px; font-weight:800; backdrop-filter:blur(8px); }.cause-photo-badge i { color:var(--gold); }.cause-photo-copy h2 { max-width:540px; margin:12px 0 20px; color:var(--brown); font-size:clamp(2.2rem,4vw,3.7rem); line-height:1.08; letter-spacing:-.045em; }.cause-photo-copy p:not(.eyebrow) { max-width:560px; margin:0 0 16px; color:#5f5146; font-size:16px; line-height:1.85; }.cause-photo-copy blockquote { display:flex; gap:12px; align-items:flex-start; margin:25px 0 0; padding:17px 18px; border-left:3px solid var(--saffron); color:var(--forest-deep); background:rgba(255,253,248,.72); font-size:16px; font-weight:800; line-height:1.55; }.cause-photo-copy blockquote i { margin-top:3px; color:var(--saffron); }
.cause-impact { background:#f4f7ed; }.cause-section-heading { margin-bottom:32px; }.cause-impact-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.cause-impact-card { position:relative; min-height:220px; padding:28px; border:1px solid #dbe5d6; border-radius:22px; background:#fff; box-shadow:0 16px 38px rgba(17,68,38,.06); }.cause-impact-card i { color:var(--saffron); font-size:23px; }.cause-impact-number { position:absolute; top:22px; right:24px; color:#c7d6c4; font-family:Georgia,serif; font-size:34px; font-weight:700; }.cause-impact-card h3 { max-width:220px; margin:24px 0 10px; color:var(--brown); font-size:20px; line-height:1.25; }.cause-impact-card p { margin:0; color:var(--muted); font-size:14px; }
.donation-section { background:linear-gradient(135deg,var(--forest-deep),#155f32); color:#fff; }.donation-grid { align-items:start; }.donation-copy h2 { color:#fff; }.donation-copy h2 em { color:var(--gold); }.donation-copy > p:not(.eyebrow) { max-width:520px; color:#d2e1d5; font-size:16px; line-height:1.8; }.donation-trust { display:flex; gap:10px 14px; align-items:center; flex-wrap:wrap; margin-top:26px; color:#e7f2e5; font-size:13px; font-weight:800; }.donation-trust i { color:var(--gold); font-size:18px; }
.donation-side-image { position:relative; max-width:560px; height:360px; margin:30px 0 0; overflow:hidden; border:1px solid rgba(255,255,255,.2); border-radius:24px 24px 24px 5px; box-shadow:0 22px 48px rgba(0,0,0,.2); }
.donation-side-image::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(9,63,36,.42),transparent 65%),linear-gradient(0deg,rgba(9,63,36,.48),transparent 60%); pointer-events:none; }
.donation-side-image img { width:100%; height:100%; object-fit:cover; display:block; }
.donation-side-image figcaption { position:absolute; z-index:1; left:18px; bottom:16px; display:inline-flex; align-items:center; gap:8px; color:#fff; font-size:13px; font-weight:800; }
.donation-side-image figcaption i { color:var(--gold); }
@media (max-width:850px) { .donation-side-image { max-width:none; height:280px; } }
.donation-card { padding:30px; border-radius:25px; color:var(--ink); background:#fffdf8; box-shadow:0 25px 70px rgba(0,0,0,.2); }.donation-card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; color:var(--brown); font-size:20px; font-weight:800; }.donation-card-head i { color:var(--saffron); }.donation-amounts { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }.amount-option { min-height:44px; border:1px solid var(--line); border-radius:10px; color:var(--brown); background:#fff; font-size:13px; font-weight:800; }.amount-option:hover,.amount-option.is-selected { border-color:var(--saffron); color:#fff; background:var(--saffron); }.donation-custom { display:block; margin-top:17px; color:var(--muted); font-size:13px; font-weight:800; }.donation-input-wrap { display:flex; align-items:center; margin-top:7px; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff; }.donation-input-wrap b { padding-left:13px; color:var(--saffron); }.donation-input-wrap input { width:100%; min-height:45px; padding:0 12px; border:0; outline:0; color:var(--brown); font-weight:800; }.donation-fields { display:grid; gap:13px; margin-top:17px; }.donation-fields label { display:grid; gap:6px; color:var(--muted); font-size:13px; font-weight:800; }.donation-fields input { min-height:44px; padding:0 12px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:#fff; }.donation-submit { width:100%; min-height:50px; margin-top:20px; font-size:14px; }.donation-status { min-height:22px; margin:12px 0 0; color:var(--forest); font-size:13px; font-weight:800; }.donation-config-note { margin:8px 0 0; color:#9a4b1b; font-size:13px; line-height:1.5; }
.fundraising-progress { margin:0 -4px 23px; padding:20px 18px 16px; border:1px solid #eee1d0; border-radius:17px; background:linear-gradient(135deg,#fff,#fff8ec); }.fundraising-figures { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }.fundraising-figures strong { color:#050505; font-family:Candara,Calibri,Arial,sans-serif; font-size:clamp(2.2rem,5vw,3.65rem); line-height:1; letter-spacing:-.05em; }.fundraising-figures span { color:var(--muted); font-size:15px; }.fundraising-figures b { color:#c79628; font-size:21px; }.fundraising-track { height:9px; margin-top:19px; overflow:hidden; border-radius:999px; background:#f1ece7; }.fundraising-track span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#56ad61,#198846); box-shadow:0 0 12px rgba(38,145,69,.28); }.fundraising-meta { display:flex; justify-content:space-between; gap:10px; margin-top:9px; color:#8a7b6e; font-size:12px; font-weight:700; }
@media (max-width:850px) { .cause-hero-grid,.cause-story-grid,.cause-photo-grid,.donation-grid { grid-template-columns:1fr; gap:38px; }.cause-hero { padding-top:45px; }.cause-hero-image,.cause-hero-image img,.cause-photo-frame,.cause-photo-frame img { min-height:360px; }.cause-impact-grid { grid-template-columns:1fr; }.donation-copy { order:0; } }
@media (max-width:520px) { .cause-hero h1 { font-size:3rem; }.cause-hero-actions { align-items:stretch; flex-direction:column; }.cause-share { justify-content:flex-start; }.donation-card { padding:22px 18px; }.donation-amounts { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px) { .cause-hero { padding:38px 0 54px; }.cause-hero-grid,.cause-story-grid,.cause-photo-grid,.donation-grid { gap:28px; }.cause-back { margin-bottom:20px; font-size:13px; }.cause-hero h1 { margin:10px 0 14px; font-size:clamp(2.35rem,12vw,3rem); line-height:1.04; overflow-wrap:anywhere; }.cause-lead { font-size:15px; line-height:1.65; overflow-wrap:anywhere; }.cause-hero-actions { gap:14px; margin-top:24px; }.cause-hero-actions .button { width:100%; }.cause-share { gap:8px; font-size:13px; }.cause-share a { width:36px; height:36px; }.cause-hero-image,.cause-hero-image img { min-height:270px; }.cause-hero-image { border-radius:22px 22px 22px 5px; }.cause-image-note { right:14px; bottom:14px; left:14px; gap:9px; font-size:12px; }.cause-image-note i { width:36px; height:36px; border-radius:11px; font-size:16px; }.cause-story h2,.cause-section-heading h2,.donation-copy h2 { font-size:clamp(2rem,10vw,2.75rem); overflow-wrap:anywhere; }.cause-story-copy { font-size:15px; line-height:1.75; overflow-wrap:anywhere; }.cause-photo-frame,.cause-photo-frame img { min-height:260px; }.cause-photo-frame { border-radius:21px 21px 21px 5px; }.cause-photo-badge { right:13px; bottom:13px; left:13px; padding:8px 11px; font-size:12px; }.cause-photo-copy h2 { font-size:clamp(2rem,10vw,2.65rem); overflow-wrap:anywhere; }.cause-photo-copy p:not(.eyebrow) { font-size:14px; line-height:1.7; overflow-wrap:anywhere; }.cause-photo-copy blockquote { margin-top:18px; padding:14px; font-size:14px; }.cause-section-heading { margin-bottom:22px; }.cause-impact-card { min-height:auto; padding:22px; border-radius:18px; }.cause-impact-card h3 { margin-top:19px; font-size:18px; overflow-wrap:anywhere; }.cause-impact-card p { font-size:13px; line-height:1.55; overflow-wrap:anywhere; }.donation-section { padding-top:58px; }.donation-copy > p:not(.eyebrow) { font-size:14px; line-height:1.7; overflow-wrap:anywhere; }.donation-trust { gap:9px 12px; margin-top:20px; font-size:12px; }.donation-side-image { height:230px; margin-top:22px; border-radius:20px 20px 20px 5px; }.donation-card { padding:19px 14px; border-radius:20px; }.donation-card-head { margin-bottom:16px; font-size:17px; overflow-wrap:anywhere; }.fundraising-progress { margin:0 -2px 18px; padding:16px 13px 13px; }.fundraising-figures strong { font-size:2.3rem; }.fundraising-figures span { font-size:13px; }.fundraising-figures b { font-size:17px; }.fundraising-meta { font-size:10px; }.amount-option { min-height:42px; font-size:12px; }.donation-fields { gap:11px; margin-top:14px; }.donation-fields input { min-height:42px; }.donation-submit { min-height:48px; }.donation-status { font-size:12px; overflow-wrap:anywhere; } }