/* =================================================================
   American Armenians for Armenia Charity Inc.
   styles.css — advanced, single-file, no external image folder.
   All artwork is inline SVG / CSS gradients so the site ships as
   HTML + CSS + JS only.
   ================================================================= */

/* ---------- 1. RESET + TOKENS ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
a{color:inherit;text-decoration:none;transition:color .25s ease}

:root{
  --navy-900:#061a33;
  --navy-800:#0b3a67;
  --navy-700:#114b86;
  --navy-600:#1c5fa1;
  --gold-500:#e8b13a;
  --gold-400:#f1c662;
  --gold-300:#f8dd9c;
  --red-500:#c0392b;
  --red-600:#9c2e22;
  --cream:#fbf6ec;
  --sand:#f3eadc;
  --ink:#1c2434;
  --ink-soft:#475065;
  --line:#e6dfd1;
  --bg:#fdfbf6;
  --shadow-sm:0 4px 14px rgba(12,30,60,.08);
  --shadow-md:0 18px 40px -18px rgba(12,30,60,.25);
  --shadow-lg:0 40px 80px -30px rgba(12,30,60,.35);
  --radius:14px;
  --radius-lg:22px;
  --container:1240px;
  --grad-warm:linear-gradient(135deg,#e8b13a 0%,#c0392b 100%);
  --grad-deep:linear-gradient(135deg,#061a33 0%,#0b3a67 55%,#1c5fa1 100%);
}

/* ---------- 2. BASE LAYOUT ---------- */
.container{width:min(var(--container),100% - 2.5rem);margin-inline:auto}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;text-transform:uppercase;letter-spacing:.18em;font-weight:600;font-size:.78rem;color:var(--gold-500);background:rgba(232,177,58,.12);padding:.4rem .85rem;border-radius:99px}
.eyebrow__dot{width:8px;height:8px;border-radius:50%;background:var(--gold-500);box-shadow:0 0 0 4px rgba(232,177,58,.25);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(232,177,58,.25)}50%{box-shadow:0 0 0 8px rgba(232,177,58,.05)}}
.section-eyebrow{display:inline-block;text-transform:uppercase;letter-spacing:.22em;font-weight:700;font-size:.78rem;color:var(--red-500);margin-bottom:.9rem}
.section-title{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:clamp(1.85rem,3.2vw,2.8rem);line-height:1.15;color:var(--navy-900);margin:0 0 1rem;letter-spacing:-.01em}
.section-sub{color:var(--ink-soft);max-width:62ch;margin:0;font-size:1.05rem}
.section-head{margin-bottom:3rem;max-width:780px}
.section-head--center{text-align:center;margin-inline:auto}
.section-head--center .section-sub{margin-inline:auto}
.section-head--row{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1.5rem;margin-bottom:2.5rem;max-width:none}
.lead{font-size:1.08rem;color:var(--ink-soft)}
.grad-text{background:var(--grad-warm);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- 3. BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.5rem;border-radius:99px;font-weight:600;font-size:.95rem;letter-spacing:.01em;transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease,border-color .25s ease;border:2px solid transparent;cursor:pointer;white-space:nowrap}
.btn--primary{background:var(--grad-warm);color:#fff;box-shadow:0 12px 30px -10px rgba(192,57,43,.55)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 20px 40px -12px rgba(192,57,43,.7)}
.btn--accent{background:var(--gold-500);color:var(--navy-900);box-shadow:0 10px 24px -8px rgba(232,177,58,.55)}
.btn--accent:hover{background:var(--gold-400);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--navy-800);border-color:rgba(11,58,103,.25)}
.btn--ghost:hover{background:var(--navy-800);color:#fff;border-color:var(--navy-800)}
.btn--ghost-light{color:#fff;border-color:rgba(255,255,255,.4)}
.btn--ghost-light:hover{background:#fff;color:var(--navy-900);border-color:#fff}
.btn--outline{background:transparent;color:var(--navy-800);border-color:var(--navy-800)}
.btn--outline:hover{background:var(--navy-800);color:#fff}
.btn--lg{padding:1.05rem 1.85rem;font-size:1rem}
.btn--sm{padding:.55rem 1.1rem;font-size:.85rem}

/* ---------- 4. TOPBAR ---------- */
.topbar{background:var(--navy-900);color:#dfe7f3;font-size:.83rem}
.topbar__inner{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem 0;flex-wrap:wrap}
.topbar__left,.topbar__right{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap}
.topbar__item{display:inline-flex;align-items:center;gap:.4rem;color:#dfe7f3}
.topbar__item .ic{width:14px;height:14px;fill:var(--gold-500);flex-shrink:0}
.topbar__socials{display:flex;gap:.4rem}
.topbar__socials a{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.08);transition:background .25s ease}
.topbar__socials a:hover{background:var(--gold-500)}
.topbar__socials svg{width:14px;height:14px;fill:#fff}

/* ---------- 5. HEADER ---------- */
.header{position:sticky;top:0;z-index:100;background:rgba(253,251,246,.92);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line);transition:box-shadow .25s ease,padding .25s ease}
.header.is-scrolled{box-shadow:var(--shadow-sm)}
.header__inner{display:flex;justify-content:space-between;align-items:center;padding:1rem 0;gap:1.5rem}
.brand{display:flex;align-items:center;gap:.85rem}
.brand__logo{width:58px;height:58px;border-radius:50%;background:var(--navy-900);object-fit:cover;box-shadow:0 8px 24px -8px rgba(11,58,103,.5)}
.brand__text{display:flex;flex-direction:column;line-height:1.15}
.brand__name{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:1.18rem;color:var(--navy-900);letter-spacing:.01em}
.brand__tag{font-size:.72rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.18em;margin-top:.15rem}

.nav{display:flex;align-items:center;gap:1.2rem}
.nav__list{display:flex;list-style:none;gap:1.6rem;margin:0;padding:0}
.nav__list a{position:relative;font-weight:500;color:var(--navy-900);padding:.4rem 0;font-size:.96rem}
.nav__list a::after{content:"";position:absolute;left:50%;bottom:-6px;width:0;height:2px;background:var(--gold-500);transition:all .3s ease;transform:translateX(-50%);border-radius:2px}
.nav__list a:hover::after,.nav__list a.active::after{width:24px}
.nav__list a:hover{color:var(--red-500)}
.nav__list a.active{color:var(--red-500)}
.has-sub{position:relative}
.nav__sub{position:absolute;top:calc(100% + 14px);left:-1rem;list-style:none;padding:.75rem 0;margin:0;min-width:230px;background:#fff;border-radius:12px;box-shadow:var(--shadow-md);opacity:0;visibility:hidden;transform:translateY(8px);transition:all .25s ease;border:1px solid var(--line)}
.has-sub:hover .nav__sub,.has-sub:focus-within .nav__sub{opacity:1;visibility:visible;transform:translateY(0)}
.nav__sub li a{display:block;padding:.55rem 1.2rem;font-size:.9rem}
.nav__sub li a::after{display:none}
.nav__sub li a:hover{background:var(--cream);color:var(--navy-800)}
.nav__cta{display:inline-flex}
.nav__toggle{display:none;flex-direction:column;gap:5px;padding:.4rem}
.nav__toggle span{width:24px;height:2px;background:var(--navy-900);border-radius:2px;transition:all .25s ease}

/* ---------- 6. HERO ---------- */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;overflow:hidden;color:#fff;isolation:isolate;padding:5rem 0 6rem}
.hero__bg{position:absolute;inset:0;background:var(--grad-deep);z-index:-3}
.hero__bg::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 420px at 12% 18%,rgba(232,177,58,.22),transparent 60%),radial-gradient(700px 380px at 88% 72%,rgba(192,57,43,.18),transparent 60%)}
/* Inline SVG mountain silhouette */
.hero__layer--mountain{position:absolute;left:0;right:0;bottom:-2px;height:48%;z-index:-2;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 480' preserveAspectRatio='none'><defs><linearGradient id='g1' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%23061a33' stop-opacity='0'/><stop offset='1' stop-color='%23061a33' stop-opacity='.85'/></linearGradient><linearGradient id='g2' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%23114b86'/><stop offset='1' stop-color='%23061a33'/></linearGradient></defs><path fill='url(%23g2)' d='M0,330 L120,260 220,300 360,180 470,250 600,140 720,210 860,100 970,200 1100,150 1220,240 1330,200 1440,260 1440,480 0,480 Z'/><path fill='%23114b86' opacity='.6' d='M0,360 L130,310 250,340 400,270 540,310 680,250 820,300 960,240 1110,310 1260,270 1440,320 1440,480 0,480 Z'/><path fill='url(%23g1)' d='M0,0 L1440,0 1440,480 0,480 Z'/><!-- two snow-cap peaks resembling Mt Ararat --><path fill='%23ffffff' opacity='.18' d='M540,250 L600,140 660,250 Z'/><path fill='%23ffffff' opacity='.12' d='M880,180 L970,200 920,150 Z'/></svg>");background-size:cover;background-position:bottom}
.hero__layer--mist{position:absolute;inset:0;z-index:-1;background:radial-gradient(1200px 600px at 50% 110%,rgba(248,221,156,.18),transparent 60%);pointer-events:none}
.hero__layer--grain{position:absolute;inset:0;pointer-events:none;opacity:.25;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}

.hero__inner{position:relative;display:grid;grid-template-columns:1.4fr 1fr;gap:4rem;align-items:center;width:100%}
.hero__content{max-width:680px}
.hero__title{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(2.4rem,5vw,4.4rem);line-height:1.08;margin:1.4rem 0 1.5rem;letter-spacing:-.015em}
.hero__lede{font-size:1.12rem;color:#dbe6f3;max-width:54ch}
.hero__cta{display:flex;gap:1rem;margin:2.2rem 0 2.8rem;flex-wrap:wrap}
.hero__cta .btn--ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.hero__cta .btn--ghost:hover{background:#fff;color:var(--navy-900);border-color:#fff}
.hero__stats{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;border-top:1px solid rgba(255,255,255,.18);padding-top:1.8rem}
.hero__stats li strong{display:block;font-family:'Cormorant Garamond',serif;font-size:2.2rem;color:var(--gold-300);font-weight:700;line-height:1}
.hero__stats li span{display:block;font-size:.82rem;letter-spacing:.05em;color:#cbd6e5;margin-top:.4rem;text-transform:uppercase}

.hero__card{position:relative;justify-self:end;max-width:380px}
.hero__card-frame{position:relative;padding:1.4rem;border-radius:var(--radius-lg);background:linear-gradient(155deg,rgba(255,255,255,.16),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--shadow-lg);text-align:center}
.hero__emblem{width:140px;height:140px;border-radius:50%;margin:0 auto 1rem;background:var(--navy-900);object-fit:cover;border:3px solid rgba(232,177,58,.65);box-shadow:0 18px 40px -12px rgba(0,0,0,.45)}
.hero__card-text h3{font-family:'Cormorant Garamond',serif;font-size:1.7rem;margin:.4rem 0 .6rem;color:var(--gold-300)}
.hero__card-text p{margin:.4rem 0;color:#e9eef7;font-style:italic;line-height:1.55}
.hero__card-sign{font-style:normal;font-size:.82rem;letter-spacing:.04em;color:var(--gold-400);margin-top:.8rem}
.hero__card-glow{position:absolute;inset:auto -30px -30px auto;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(232,177,58,.6),transparent 70%);filter:blur(40px);z-index:-1;animation:float 8s ease-in-out infinite}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(-12px,-18px)}}

.hero__scroll{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);width:24px;height:38px;border:2px solid rgba(255,255,255,.5);border-radius:14px;display:grid;place-items:center}
.hero__scroll span{width:4px;height:8px;background:#fff;border-radius:4px;animation:scrollDot 1.6s infinite}
@keyframes scrollDot{0%{transform:translateY(-6px);opacity:0}40%{opacity:1}80%{transform:translateY(6px);opacity:0}100%{opacity:0}}

/* ---------- 7. MISSION ---------- */
.mission{padding:7rem 0;background:var(--bg);position:relative}
.mission::before{content:"";position:absolute;left:0;top:-1px;right:0;height:120px;background:linear-gradient(180deg,var(--navy-900),transparent);opacity:0;pointer-events:none}
.mission__grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.checklist{list-style:none;padding:0;margin:1.5rem 0 2rem}
.checklist li{display:flex;align-items:flex-start;gap:.7rem;padding:.5rem 0;color:var(--ink)}
.check{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--gold-500);color:#fff;font-size:.78rem;flex-shrink:0;font-weight:700}

.mission__visual{position:relative;height:560px}
.mission__photo{position:absolute;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden}
/* Photo 1 — Mt Ararat landscape, fully drawn as inline SVG (data URL) */
.mission__photo--1{top:0;left:0;width:74%;height:62%;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='sky' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%23f6b06b'/><stop offset='.4' stop-color='%23f8d28a'/><stop offset='1' stop-color='%23faecca'/></linearGradient><linearGradient id='mtnA' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%23e8d6b4'/><stop offset='.4' stop-color='%23a89a82'/><stop offset='1' stop-color='%23534637'/></linearGradient><linearGradient id='mtnB' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%23c9b69a'/><stop offset='1' stop-color='%233e3326'/></linearGradient><linearGradient id='ground' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%23a4b573'/><stop offset='1' stop-color='%234e5a2c'/></linearGradient></defs><rect width='800' height='600' fill='url(%23sky)'/><circle cx='620' cy='150' r='60' fill='%23ffe8b2' opacity='.85'/><path fill='url(%23mtnB)' d='M0,420 L120,300 230,360 380,180 460,320 540,260 660,380 800,300 800,600 0,600 Z'/><path fill='%23ffffff' opacity='.9' d='M340,210 L380,180 420,210 410,235 350,235 Z'/><path fill='%23ffffff' opacity='.7' d='M510,290 L540,260 570,290 555,310 525,310 Z'/><path fill='url(%23mtnA)' d='M0,480 L100,400 220,440 320,360 430,420 540,380 660,440 800,400 800,600 0,600 Z'/><path fill='url(%23ground)' d='M0,520 C200,480 400,540 800,500 L800,600 0,600 Z'/><!-- Armenian chapel silhouette --><g transform='translate(420,470)'><rect x='-22' y='-30' width='44' height='30' fill='%23362a1d'/><polygon points='-22,-30 22,-30 0,-58' fill='%23362a1d'/><rect x='-6' y='-18' width='12' height='18' fill='%23f3eadc' opacity='.5'/><polygon points='-2,-58 2,-58 2,-72 -2,-72' fill='%23362a1d'/><polygon points='-6,-72 6,-72 0,-80' fill='%23362a1d'/></g><path fill='%23000' opacity='.18' d='M0,540 C200,510 600,560 800,520 L800,600 0,600 Z'/></svg>");background-size:cover;background-position:center}
/* Photo 2 — Volunteers handing out aid, abstract illustration */
.mission__photo--2{bottom:0;right:0;width:62%;height:55%;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='bg' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%230b3a67'/><stop offset='1' stop-color='%23061a33'/></linearGradient><linearGradient id='glow' cx='.3' cy='.3' r='.7'><stop offset='0' stop-color='%23e8b13a' stop-opacity='.6'/><stop offset='1' stop-color='%23e8b13a' stop-opacity='0'/></linearGradient></defs><rect width='800' height='600' fill='url(%23bg)'/><circle cx='240' cy='200' r='280' fill='url(%23glow)'/><!-- volunteers silhouettes --><g fill='%23f3eadc'><!-- person 1 holding box --><circle cx='220' cy='220' r='40'/><rect x='180' y='260' width='80' height='130' rx='14'/><rect x='150' y='300' width='70' height='60' rx='8' fill='%23e8b13a'/><rect x='160' y='310' width='50' height='3' fill='%23c0392b'/><!-- person 2 receiving --><circle cx='460' cy='250' r='34'/><rect x='430' y='285' width='65' height='110' rx='12'/><!-- child --><circle cx='540' cy='320' r='22'/><rect x='523' y='340' width='35' height='70' rx='8'/></g><!-- heart icon --><path d='M620 140 C620 120 645 100 660 130 C675 100 700 120 700 140 C700 175 660 200 660 200 C660 200 620 175 620 140 Z' fill='%23c0392b'/><path d='M0 480 C200 460 400 500 800 470 L800 600 0 600 Z' fill='%23061a33'/></svg>");background-size:cover;background-position:center;border:6px solid var(--bg)}
.mission__badge{position:absolute;left:8%;bottom:6%;background:var(--gold-500);color:var(--navy-900);padding:1rem 1.4rem;border-radius:14px;box-shadow:var(--shadow-md);transform:rotate(-3deg)}
.mission__badge strong{display:block;font-family:'Cormorant Garamond',serif;font-size:1.5rem;line-height:1}
.mission__badge span{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}

/* ---------- 8. PROGRAMS / CARDS ---------- */
.programs{padding:7rem 0;background:linear-gradient(180deg,var(--bg) 0%,var(--cream) 100%)}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.card{background:#fff;border-radius:var(--radius-lg);padding:2rem 1.8rem;box-shadow:var(--shadow-sm);border:1px solid var(--line);transition:transform .35s ease,box-shadow .35s ease;position:relative;overflow:hidden}
.card::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 60%,rgba(232,177,58,.08));opacity:0;transition:opacity .3s ease;pointer-events:none}
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md)}
.card:hover::before{opacity:1}
.card__icon{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;margin-bottom:1.2rem;color:#fff}
.card__icon svg{width:32px;height:32px}
.card__icon--aid{background:linear-gradient(135deg,#c0392b,#e8b13a)}
.card__icon--edu{background:linear-gradient(135deg,#0b3a67,#1c5fa1)}
.card__icon--health{background:linear-gradient(135deg,#9c2e22,#c0392b)}
.card__icon--culture{background:linear-gradient(135deg,#114b86,#e8b13a)}
.card h3{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:1.45rem;margin:0 0 .5rem;color:var(--navy-900)}
.card p{color:var(--ink-soft);font-size:.95rem;margin:0 0 1.2rem}
.card__link{color:var(--red-500);font-weight:600;font-size:.9rem;display:inline-flex;align-items:center;gap:.3rem;transition:gap .25s ease}
.card__link:hover{gap:.55rem}

/* ---------- 9. STORY ---------- */
.story{padding:7rem 0;background:var(--cream);position:relative;overflow:hidden}
.story::before{content:"";position:absolute;right:-100px;top:-100px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(232,177,58,.15),transparent 70%);pointer-events:none}
.story__grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
.story__visual{position:relative}
/* Story photo — children in classroom illustration */
.story__photo{height:480px;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 480' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='w' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%23f8dd9c'/><stop offset='1' stop-color='%23e8b13a'/></linearGradient><linearGradient id='floor' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%23a07346'/><stop offset='1' stop-color='%23553720'/></linearGradient></defs><rect width='600' height='480' fill='url(%23w)'/><rect y='340' width='600' height='140' fill='url(%23floor)'/><!-- blackboard --><rect x='40' y='60' width='280' height='160' rx='8' fill='%23114b86' stroke='%23362a1d' stroke-width='6'/><text x='180' y='150' font-family='Georgia' font-size='44' fill='%23f8dd9c' text-anchor='middle' font-weight='700'>Հ Ա Յ</text><!-- desk --><rect x='370' y='240' width='190' height='12' fill='%23553720'/><rect x='380' y='252' width='12' height='90' fill='%23553720'/><rect x='540' y='252' width='12' height='90' fill='%23553720'/><!-- child 1 --><circle cx='160' cy='280' r='32' fill='%23f3d5a4'/><rect x='128' y='310' width='64' height='80' rx='12' fill='%23c0392b'/><!-- child 2 --><circle cx='240' cy='280' r='30' fill='%23e8c598'/><rect x='212' y='308' width='56' height='80' rx='12' fill='%230b3a67'/><!-- child 3 --><circle cx='460' cy='270' r='30' fill='%23f3d5a4'/><rect x='432' y='298' width='56' height='80' rx='12' fill='%23e8b13a'/><!-- books --><rect x='400' y='225' width='40' height='15' fill='%23c0392b'/><rect x='450' y='225' width='40' height='15' fill='%230b3a67'/></svg>");background-size:cover;background-position:center}
.story__quote{position:absolute;bottom:-30px;right:-30px;max-width:340px;background:#fff;padding:1.6rem;border-radius:var(--radius);box-shadow:var(--shadow-md);border-left:4px solid var(--red-500)}
.story__q{width:32px;height:32px;color:var(--gold-500);margin-bottom:.5rem}
.story__quote p{font-style:italic;font-size:.95rem;margin:0 0 .8rem;color:var(--ink)}
.story__quote span{font-size:.82rem;color:var(--ink-soft);font-weight:600}
.story__metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin:1.8rem 0 2rem;padding:1.4rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.story__metrics strong{display:block;font-family:'Cormorant Garamond',serif;font-size:2rem;color:var(--red-500);line-height:1}
.story__metrics span{display:block;font-size:.78rem;color:var(--ink-soft);margin-top:.3rem;text-transform:uppercase;letter-spacing:.05em}

/* ---------- 10. HOW YOU CAN HELP ---------- */
.help{padding:7rem 0;background:#fff}
.help__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.help__item{background:var(--cream);border-radius:var(--radius-lg);padding:2rem 1.6rem;text-align:left;position:relative;transition:transform .3s ease,box-shadow .3s ease;border:1px solid transparent}
.help__item:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--gold-300)}
.help__num{font-family:'Cormorant Garamond',serif;font-size:2.6rem;font-weight:700;color:var(--gold-500);line-height:1;opacity:.5}
.help__item h3{font-family:'Cormorant Garamond',serif;font-size:1.5rem;margin:.6rem 0 .6rem;color:var(--navy-900)}
.help__item p{color:var(--ink-soft);font-size:.95rem;margin:0 0 1.3rem}

/* ---------- 11. TIMELINE ---------- */
.timeline{padding:7rem 0;background:linear-gradient(180deg,#fff 0%,var(--cream) 100%)}
.timeline__list{list-style:none;padding:0;margin:0;position:relative}
.timeline__list::before{content:"";position:absolute;left:80px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,var(--gold-500),var(--red-500))}
.timeline__item{display:grid;grid-template-columns:160px 1fr;align-items:flex-start;gap:2rem;padding:1.4rem 0;position:relative}
.timeline__item::before{content:"";position:absolute;left:75px;top:1.9rem;width:14px;height:14px;border-radius:50%;background:var(--gold-500);box-shadow:0 0 0 4px rgba(232,177,58,.25)}
.timeline__year{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:2rem;color:var(--navy-900)}
.timeline__body h4{margin:0 0 .4rem;color:var(--navy-800);font-size:1.15rem}
.timeline__body p{margin:0;color:var(--ink-soft)}

/* ---------- 12. NEWS ---------- */
.news{padding:7rem 0;background:#fff}
.news__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem}
.news__card{background:#fff;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--line);transition:transform .3s ease,box-shadow .3s ease;display:flex;flex-direction:column}
.news__card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.news__img{height:230px;background-size:cover;background-position:center}
.news__img--1{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='b' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%23114b86'/><stop offset='1' stop-color='%23061a33'/></linearGradient></defs><rect width='600' height='400' fill='url(%23b)'/><!-- Truck with aid boxes --><rect x='60' y='240' width='300' height='100' rx='12' fill='%23c0392b'/><rect x='360' y='220' width='160' height='120' rx='10' fill='%23e8b13a'/><circle cx='120' cy='350' r='30' fill='%23061a33' stroke='%23f8dd9c' stroke-width='6'/><circle cx='460' cy='350' r='30' fill='%23061a33' stroke='%23f8dd9c' stroke-width='6'/><!-- Box icons --><g transform='translate(150,260)'><rect width='40' height='40' fill='%23f3eadc'/><rect x='18' width='4' height='40' fill='%23c0392b'/><rect y='18' width='40' height='4' fill='%23c0392b'/></g><g transform='translate(220,260)'><rect width='40' height='40' fill='%23f3eadc'/><rect x='18' width='4' height='40' fill='%23c0392b'/><rect y='18' width='40' height='4' fill='%23c0392b'/></g><g transform='translate(290,260)'><rect width='40' height='40' fill='%23f3eadc'/><rect x='18' width='4' height='40' fill='%23c0392b'/><rect y='18' width='40' height='4' fill='%23c0392b'/></g><circle cx='480' cy='120' r='40' fill='%23e8b13a' opacity='.6'/></svg>")}
.news__img--2{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400' preserveAspectRatio='xMidYMid slice'><defs><linearGradient id='lib' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%23f8dd9c'/><stop offset='1' stop-color='%23a07346'/></linearGradient></defs><rect width='600' height='400' fill='url(%23lib)'/><!-- bookshelves --><rect x='40' y='40' width='520' height='240' fill='%23553720'/><g fill='%23f3eadc'><rect x='60' y='60' width='480' height='8'/><rect x='60' y='148' width='480' height='8'/><rect x='60' y='236' width='480' height='8'/></g><g><rect x='70' y='70' width='30' height='75' fill='%23c0392b'/><rect x='105' y='70' width='25' height='75' fill='%230b3a67'/><rect x='135' y='80' width='35' height='65' fill='%23e8b13a'/><rect x='175' y='70' width='28' height='75' fill='%23c0392b'/><rect x='210' y='75' width='32' height='70' fill='%23114b86'/><rect x='250' y='70' width='28' height='75' fill='%23e8b13a'/><rect x='285' y='80' width='40' height='65' fill='%239c2e22'/><rect x='330' y='70' width='28' height='75' fill='%23114b86'/><rect x='365' y='75' width='35' height='70' fill='%23c0392b'/><rect x='405' y='70' width='28' height='75' fill='%23e8b13a'/><rect x='440' y='80' width='38' height='65' fill='%230b3a67'/><rect x='485' y='70' width='30' height='75' fill='%239c2e22'/></g><g><rect x='70' y='160' width='38' height='75' fill='%230b3a67'/><rect x='115' y='170' width='32' height='65' fill='%23e8b13a'/><rect x='155' y='160' width='28' height='75' fill='%23c0392b'/><rect x='190' y='170' width='38' height='65' fill='%23114b86'/><rect x='235' y='160' width='30' height='75' fill='%23e8b13a'/><rect x='275' y='170' width='42' height='65' fill='%23c0392b'/><rect x='325' y='160' width='30' height='75' fill='%23114b86'/><rect x='365' y='170' width='30' height='65' fill='%23e8b13a'/><rect x='405' y='160' width='38' height='75' fill='%239c2e22'/><rect x='450' y='170' width='28' height='65' fill='%230b3a67'/><rect x='485' y='160' width='30' height='75' fill='%23c0392b'/></g><!-- student silhouette --><g transform='translate(260,290)'><circle cx='0' cy='0' r='28' fill='%23f3d5a4'/><rect x='-28' y='28' width='56' height='80' rx='8' fill='%230b3a67'/></g></svg>")}
.news__img--3{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400' preserveAspectRatio='xMidYMid slice'><rect width='600' height='400' fill='%23f3eadc'/><!-- mountain village --><path fill='%23a89a82' d='M0,260 L100,180 200,240 320,140 420,220 540,160 600,220 600,400 0,400 Z'/><path fill='%237a6c54' d='M0,300 L150,240 280,280 400,220 540,260 600,240 600,400 0,400 Z'/><!-- doctor with stethoscope (heart symbol) --><g transform='translate(150,200)'><circle cx='40' cy='40' r='35' fill='%23f3d5a4'/><rect x='10' y='75' width='60' height='90' rx='10' fill='%23ffffff' stroke='%23c0392b' stroke-width='3'/><path d='M30 100 Q40 90 50 100' stroke='%23c0392b' stroke-width='3' fill='none'/><circle cx='40' cy='115' r='6' fill='%23c0392b'/></g><!-- patient/child --><g transform='translate(290,240)'><circle cx='30' cy='30' r='26' fill='%23e8c598'/><rect x='4' y='56' width='52' height='70' rx='10' fill='%23e8b13a'/></g><!-- medical cross --><g transform='translate(440,170)'><rect width='80' height='80' rx='10' fill='%23c0392b'/><rect x='34' y='14' width='12' height='52' fill='%23ffffff'/><rect x='14' y='34' width='52' height='12' fill='%23ffffff'/></g></svg>")}
.news__body{padding:1.4rem 1.6rem 1.6rem;display:flex;flex-direction:column;gap:.6rem}
.news__tag{align-self:flex-start;background:var(--cream);color:var(--red-500);padding:.3rem .75rem;border-radius:99px;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.news__card h3{font-family:'Cormorant Garamond',serif;font-size:1.35rem;margin:.2rem 0;color:var(--navy-900)}
.news__card p{color:var(--ink-soft);font-size:.92rem;margin:0;flex:1}
.news__meta{font-size:.78rem;color:var(--ink-soft);letter-spacing:.04em;margin-top:auto;padding-top:.5rem;border-top:1px dashed var(--line)}

/* ---------- 13. CTA STRIP ---------- */
.cta-strip{padding:5rem 0;background:var(--grad-deep);color:#fff;position:relative;overflow:hidden}
.cta-strip::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 400px at 80% 50%,rgba(232,177,58,.2),transparent 60%);pointer-events:none}
.cta-strip__inner{display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap;position:relative}
.cta-strip h2{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(1.8rem,3vw,2.6rem);margin:0 0 .6rem}
.cta-strip p{color:#dbe6f3;margin:0;max-width:520px}
.cta-strip__actions{display:flex;gap:1rem;flex-wrap:wrap}

/* ---------- 14. FOOTER ---------- */
.footer{background:var(--navy-900);color:#cbd6e5;padding:5rem 0 0}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:3rem;padding-bottom:4rem}
.footer__brand p{font-size:.93rem;line-height:1.7}
.footer__logo{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}
.footer__logo img{width:60px;height:60px;border-radius:50%;background:#fff;padding:2px}
.footer__logo strong{display:block;font-family:'Cormorant Garamond',serif;font-size:1.15rem;color:#fff;letter-spacing:.01em;line-height:1.2}
.footer__logo span{font-size:.75rem;color:var(--gold-400);letter-spacing:.1em;text-transform:uppercase}
.footer__ein{display:inline-block;margin-top:.8rem;padding:.4rem .85rem;background:rgba(232,177,58,.12);color:var(--gold-400);border-radius:99px;font-size:.85rem;letter-spacing:.04em}
.footer__col h4{color:#fff;font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.2rem;margin:0 0 1.2rem;position:relative;padding-bottom:.6rem}
.footer__col h4::after{content:"";position:absolute;left:0;bottom:0;width:30px;height:2px;background:var(--gold-500);border-radius:2px}
.footer__col ul{list-style:none;padding:0;margin:0}
.footer__col ul li{margin-bottom:.55rem}
.footer__col ul a{color:#cbd6e5;font-size:.93rem;transition:color .25s ease,padding-left .25s ease}
.footer__col ul a:hover{color:var(--gold-400);padding-left:6px}
.footer__col address{font-style:normal;font-size:.93rem;line-height:1.6}
.footer__col address p{margin:0 0 .8rem}
.footer__col address a{color:var(--gold-400);word-break:break-all}
.footer__bar{background:#04101f;padding:1.2rem 0;font-size:.82rem}
.footer__bar-inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;color:#7b8aa3}

/* ---------- 15. BACK TO TOP ---------- */
.back-to-top{position:fixed;bottom:1.4rem;right:1.4rem;width:46px;height:46px;border-radius:50%;background:var(--gold-500);color:var(--navy-900);display:grid;place-items:center;box-shadow:var(--shadow-md);opacity:0;visibility:hidden;transform:translateY(20px);transition:all .35s ease;z-index:80}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{background:var(--gold-400);transform:translateY(-4px)}
.back-to-top svg{width:20px;height:20px}

/* ---------- 16. SUB-PAGE: PAGE HEADER ---------- */
.page-hero{position:relative;background:var(--grad-deep);color:#fff;padding:7rem 0 5rem;overflow:hidden;isolation:isolate}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 380px at 12% 18%,rgba(232,177,58,.22),transparent 60%),radial-gradient(700px 380px at 88% 82%,rgba(192,57,43,.22),transparent 60%);z-index:-1}
.page-hero__bg{position:absolute;inset:0;z-index:-2;opacity:.4;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 480' preserveAspectRatio='none'><path fill='%23114b86' opacity='.6' d='M0,340 L120,260 260,320 400,200 540,280 700,180 860,260 1020,200 1160,280 1300,220 1440,300 1440,480 0,480 Z'/><path fill='%23061a33' d='M0,420 L160,360 320,400 480,320 660,380 820,320 980,380 1160,320 1320,380 1440,340 1440,480 0,480 Z'/></svg>");background-size:cover;background-position:bottom}
.page-hero h1{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(2.2rem,4vw,3.6rem);margin:1rem 0 1rem;letter-spacing:-.01em;color:#fff}
.page-hero p{color:#dbe6f3;max-width:60ch;font-size:1.05rem}
.crumbs{display:flex;gap:.5rem;color:#bcc8da;font-size:.86rem;align-items:center}
.crumbs a{color:var(--gold-400)}
.crumbs span{opacity:.5}

/* ---------- 17. RESPONSIVE ---------- */
@media (max-width:1080px){
  .hero__inner{grid-template-columns:1fr;gap:3rem}
  .hero__card{justify-self:center;max-width:420px;width:100%}
  .hero__stats{grid-template-columns:repeat(2,1fr)}
  .mission__grid,.story__grid{grid-template-columns:1fr;gap:3rem}
  .mission__visual{height:520px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .help__grid{grid-template-columns:repeat(2,1fr)}
  .news__grid{grid-template-columns:1fr;}
  .footer__grid{grid-template-columns:1fr 1fr;gap:2.5rem}
}
@media (max-width:780px){
  .topbar__inner{flex-direction:column;align-items:flex-start;gap:.4rem}
  .topbar__right{flex-direction:column;align-items:flex-start;gap:.4rem}
  .brand__name{font-size:1rem}
  .brand__tag{font-size:.65rem}
  .nav__list{position:fixed;inset:74px 0 auto 0;flex-direction:column;background:#fff;padding:1.4rem;gap:.4rem;border-bottom:1px solid var(--line);box-shadow:var(--shadow-md);transform:translateY(-110%);transition:transform .3s ease}
  .nav__list.is-open{transform:translateY(0)}
  .nav__list li a{padding:.7rem .6rem;display:block;border-bottom:1px solid var(--line)}
  .nav__list li a::after{display:none}
  .nav__sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding-left:1rem}
  .nav__cta{display:none}
  .nav__toggle{display:flex}
  .nav__toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav__toggle.is-open span:nth-child(2){opacity:0}
  .nav__toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .hero{padding:3rem 0 5rem;min-height:auto}
  .hero__stats{grid-template-columns:repeat(2,1fr);gap:1.1rem}
  .cards,.help__grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr;gap:2rem}
  .footer__bar-inner{flex-direction:column;text-align:center}
  .section-head--row{flex-direction:column;align-items:flex-start}
  .story__photo{height:380px}
  .story__quote{position:static;margin-top:1.2rem;max-width:none}
  .timeline__list::before{left:30px}
  .timeline__item{grid-template-columns:80px 1fr;gap:1rem}
  .timeline__item::before{left:25px}
  .timeline__year{font-size:1.5rem}
}

/* ---------- 18. REVEAL ANIMATION ---------- */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s ease}
[data-reveal].is-visible{opacity:1;transform:translateY(0)}

/* ---------- 19. FORM ---------- */
.form{background:#fff;padding:2.4rem;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:1px solid var(--line)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form label{display:block;font-size:.85rem;font-weight:600;color:var(--navy-900);margin-bottom:.4rem;letter-spacing:.02em}
.form input,.form textarea,.form select{width:100%;padding:.8rem 1rem;border-radius:10px;border:1px solid var(--line);background:#fff;font:inherit;color:var(--ink);transition:border-color .25s ease,box-shadow .25s ease}
.form input:focus,.form textarea:focus,.form select:focus{outline:0;border-color:var(--gold-500);box-shadow:0 0 0 4px rgba(232,177,58,.18)}
.form .field{margin-bottom:1rem}
.form textarea{min-height:140px;resize:vertical}
@media (max-width:680px){.form .row{grid-template-columns:1fr}}

/* ---------- 20. DONATE PAGE ---------- */
.donate-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:3rem;padding:5rem 0}
.donate-options{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin:1.2rem 0}
.donate-options button{padding:1rem .5rem;border:2px solid var(--line);border-radius:12px;background:#fff;color:var(--navy-900);font-weight:700;font-size:1.05rem;cursor:pointer;transition:all .25s ease}
.donate-options button:hover{border-color:var(--gold-500);color:var(--red-500)}
.donate-options button.is-active{background:var(--gold-500);border-color:var(--gold-500);color:var(--navy-900)}
.donate-side{position:sticky;top:120px;align-self:flex-start;background:linear-gradient(160deg,var(--navy-800),var(--navy-900));color:#fff;padding:2.2rem;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.donate-side h3{font-family:'Cormorant Garamond',serif;color:var(--gold-300);margin-top:0}
.donate-side ul{list-style:none;padding:0;margin:1rem 0}
.donate-side ul li{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:.7rem;font-size:.93rem;color:#dbe6f3}
.donate-side ul li::before{content:"♥";color:var(--red-500);font-size:1rem}
@media (max-width:1080px){.donate-grid{grid-template-columns:1fr}.donate-options{grid-template-columns:repeat(2,1fr)}.donate-side{position:static}}
@media (max-width:600px){.donate-options{grid-template-columns:1fr 1fr}}

/* ---------- 21. ABOUT / VALUES ---------- */
.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;padding:5rem 0}
.value{background:#fff;border-radius:var(--radius-lg);padding:2rem;border:1px solid var(--line);transition:transform .3s ease,box-shadow .3s ease}
.value:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.value__icon{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--gold-500),var(--red-500));color:#fff;margin-bottom:1rem}
.value__icon svg{width:28px;height:28px}
.value h3{font-family:'Cormorant Garamond',serif;font-size:1.4rem;margin:.4rem 0;color:var(--navy-900)}
.value p{color:var(--ink-soft);margin:0}
@media (max-width:980px){.values-grid{grid-template-columns:1fr}}

.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;padding:3rem 0 5rem}
.team-card{background:#fff;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);text-align:center;transition:transform .3s ease,box-shadow .3s ease}
.team-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.team-photo{height:240px;background:linear-gradient(160deg,var(--cream),var(--sand));display:grid;place-items:center}
.team-photo .avatar{width:130px;height:130px;border-radius:50%;background:linear-gradient(135deg,var(--gold-500),var(--red-500));display:grid;place-items:center;font-family:'Cormorant Garamond',serif;font-size:2.6rem;color:#fff;font-weight:700;box-shadow:var(--shadow-md)}
.team-card__body{padding:1.4rem;}
.team-card__body h3{margin:0;font-family:'Cormorant Garamond',serif;font-size:1.3rem;color:var(--navy-900)}
.team-card__body span{color:var(--red-500);font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.team-card__body p{color:var(--ink-soft);font-size:.92rem;margin-top:.7rem}
@media (max-width:980px){.team-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.team-grid{grid-template-columns:1fr}}

/* ---------- 22. CONTACT PAGE ---------- */
.contact-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:3rem;padding:5rem 0}
.contact-info{background:linear-gradient(155deg,var(--cream),#fff);padding:2.4rem;border-radius:var(--radius-lg);border:1px solid var(--line);height:fit-content}
.contact-info h3{font-family:'Cormorant Garamond',serif;font-size:1.6rem;color:var(--navy-900);margin:0 0 1.4rem}
.contact-info ul{list-style:none;padding:0;margin:0}
.contact-info ul li{display:flex;gap:1rem;align-items:flex-start;padding:1rem 0;border-bottom:1px solid var(--line)}
.contact-info ul li:last-child{border-bottom:0}
.contact-info ul li svg{width:22px;height:22px;color:var(--red-500);flex-shrink:0;margin-top:4px}
.contact-info ul li strong{display:block;color:var(--navy-900);font-size:.95rem;margin-bottom:.2rem}
.contact-info ul li span,.contact-info ul li a{color:var(--ink-soft);font-size:.93rem;word-break:break-word}
.contact-info ul li a:hover{color:var(--red-500)}
@media (max-width:980px){.contact-grid{grid-template-columns:1fr}}