@import url('https://fonts.googleapis.com/css2?family=Lora:wght@500;600;700&family=Source+Sans+3:wght@400;500;600;700;800&display=swap');
:root{
  /* CMMF Phase 2 approved palette */
  --navy:#2A5CA8;      /* Marian Blue: primary, links, headers */
  --navy-d:#16305C;    /* Deep Navy: headings and emphasis */
  --gold:#C9A227;      /* Gold: donate buttons and accents */
  --gold-l:#E6B422;    /* Yellow-Gold: secondary accent */
  --gold-d:#a8871d;
  --ink:#4A4A4A;       /* Warm Gray: body text */
  --dim:#6b7078; --line:#e7ebf0; --bg:#f6f8fb; --white:#fff;
  --blue-l:#EDF3FC; --blue-l2:#D9E5F6;   /* light blue: logo placeholder tiles */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Source Sans 3","Source Sans Pro",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.6}
h1,h2,h3,.statement{font-family:Lora,Georgia,"Times New Roman",serif}
a{color:inherit}
img{max-width:100%}

/* mockup ribbon */
.ribbon{background:var(--gold);color:#4a3900;text-align:center;font-size:12.5px;padding:6px 10px;font-weight:700;letter-spacing:.3px}

/* header / nav */
nav{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 6vw;position:sticky;top:0;
  background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);z-index:20}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;color:var(--navy);letter-spacing:1px;text-decoration:none}
.logo .mark{width:32px;height:32px;border-radius:8px;background:var(--navy);color:var(--gold);display:grid;place-items:center;font-size:15px;font-weight:800}
.logo-img{height:52px;width:auto;display:block}
footer .logo-img{height:60px;background:#fff;border-radius:8px;padding:6px}
.menu{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.menu a{color:var(--ink);text-decoration:none;font-size:14px;font-weight:500;padding:8px 12px;border-radius:7px}
.menu a:hover{background:var(--bg);color:var(--navy)}
.menu a.active{color:var(--navy);font-weight:700}
.menu a.active::after{content:"";display:block;height:2px;background:var(--gold);border-radius:2px;margin-top:3px}
.donate{background:var(--gold)!important;color:#fff!important;padding:10px 20px!important;border-radius:8px;font-weight:700!important;text-transform:uppercase;letter-spacing:1px;font-size:12.5px!important;box-shadow:0 4px 14px rgba(201,162,39,.35)}
.donate:hover{background:var(--gold-d)!important}

/* photo placeholder: branded CMMF logo on light blue until a real photo is supplied */
.photo{position:relative;background:linear-gradient(160deg,var(--blue-l) 0%,var(--blue-l2) 100%);
  display:grid;place-items:center;color:var(--navy);font-size:12px;letter-spacing:.5px;overflow:hidden}
.photo::before{content:"";position:absolute;inset:17% 19%;
  background:url('assets/cmmf-logo-mark.png') no-repeat center;background-size:contain;opacity:.95}
.photo.filled{background-size:cover!important;background-position:center 22%}
.photo.filled::before{content:none}
.photo.anon::after{content:"\2665  gratefully anonymous";position:absolute;bottom:9px;right:12px;
  font-size:10.5px;color:var(--navy-d);opacity:.5}

/* hero */
.hero{position:relative;min-height:74vh;display:flex;align-items:center;padding:0 6vw;color:#fff;
  background:linear-gradient(115deg,rgba(22,48,92,.92) 0 40%,rgba(22,48,92,.55)),
  repeating-linear-gradient(45deg,#2a5195 0 26px,#264b8b 26px 52px)}
.hero .inner{max-width:660px}
.hero .kick{color:var(--gold);font-weight:700;letter-spacing:2px;font-size:13px;text-transform:uppercase;margin-bottom:14px}
.hero h1{font-size:clamp(32px,5vw,52px);line-height:1.08;margin-bottom:18px}
.hero p{font-size:18px;opacity:.92;margin-bottom:30px;max-width:560px}
.hero .row{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-block;text-decoration:none;font-weight:700;padding:13px 24px;border-radius:9px;font-size:13.5px;text-transform:uppercase;letter-spacing:1px}
.btn-gold{background:var(--gold);color:var(--navy-d)}
.btn-gold:hover{background:var(--gold-d)}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5)}
.btn-ghost:hover{border-color:#fff}

/* generic section */
section{padding:76px 6vw}
.center{text-align:center}
.eyebrow{color:var(--gold-d);font-weight:800;letter-spacing:2px;font-size:12.5px;text-transform:uppercase;margin-bottom:10px}
h2.sec{font-size:clamp(26px,3.4vw,34px);color:var(--navy);margin-bottom:14px;line-height:1.15}
.lead{color:var(--dim);max-width:680px;font-size:17px}
.center .lead{margin:0 auto}

/* mission snapshot — statement + 3 highlights */
.mission{background:var(--bg)}
.mission .statement{font-size:clamp(20px,2.6vw,26px);color:var(--navy);font-weight:600;max-width:820px;margin:0 auto 44px;text-align:center;line-height:1.4}
.highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.hl{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px}
.hl .dot{width:40px;height:40px;border-radius:10px;background:#fbf1d3;color:var(--gold-d);display:grid;place-items:center;font-size:20px;margin-bottom:14px}
.hl h3{color:var(--navy);font-size:17px;margin-bottom:6px}
.hl p{color:var(--dim);font-size:14px}

/* featured impact — key numbers */
.impact{background:var(--navy);color:#fff}
.impact .eyebrow{color:var(--gold)}
.impact h2.sec{color:#fff}
.nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px 16px;margin-top:36px;text-align:center;align-items:start;max-width:1000px;margin-left:auto;margin-right:auto}
.nums>div{padding:0 6px}
.nums b{display:block;font-size:clamp(28px,3.4vw,42px);color:var(--gold);font-weight:800;line-height:1.05;white-space:nowrap}
.nums span{color:rgba(255,255,255,.8);font-size:14px;display:block;margin-top:6px}

/* what we do — 3 linking cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px}
.card{display:block;text-decoration:none;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:.2s;background:#fff}
.card:hover{box-shadow:0 16px 40px rgba(22,48,92,.13);transform:translateY(-4px)}
.card .photo{height:150px}
.card .body{padding:22px}
.card h3{color:var(--navy);font-size:19px;margin-bottom:8px}
.card p{color:var(--dim);font-size:14px;margin-bottom:12px}
.card .more{color:var(--gold-d);font-weight:800;font-size:13px}

/* latest projects */
.projects{background:var(--bg)}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px}
.proj{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.proj .photo{height:170px}
.proj .body{padding:20px}
.proj .tag{color:var(--gold-d);font-weight:800;font-size:11.5px;letter-spacing:1px;text-transform:uppercase}
.proj h3{color:var(--navy);font-size:17px;margin:6px 0}
.proj p{color:var(--dim);font-size:14px}

/* donate band */
.band{background:linear-gradient(120deg,var(--gold),var(--gold-l));color:var(--navy-d);text-align:center;padding:64px 6vw}
.band h2{font-size:clamp(26px,3.4vw,34px);margin-bottom:12px}
.band p{font-size:17px;max-width:560px;margin:0 auto 26px;font-weight:500}
.band .btn{background:var(--navy);color:#fff}
.band .btn:hover{background:var(--navy-d)}

/* footer */
footer{background:var(--navy-d);color:rgba(255,255,255,.75);padding:52px 6vw 30px}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:36px;margin-bottom:34px}
footer .logo{color:#fff}
footer .logo .mark{background:var(--gold);color:var(--navy-d)}
footer p{font-size:14px;margin-top:14px;max-width:320px}
footer h4{color:#fff;font-size:13px;letter-spacing:1px;text-transform:uppercase;margin-bottom:14px}
footer ul{list-style:none}
footer li{margin-bottom:9px}
footer a{color:rgba(255,255,255,.75);text-decoration:none;font-size:14px}
footer a:hover{color:var(--gold)}
.fbot{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12.5px;color:rgba(255,255,255,.55)}

/* ---- interior page template ---- */
.pagehead{position:relative;min-height:230px;display:flex;align-items:flex-end;padding:0 6vw 34px;color:#fff;
  background:linear-gradient(180deg,rgba(22,48,92,.55),rgba(22,48,92,.9)),
  repeating-linear-gradient(45deg,#2a5195 0 26px,#264b8b 26px 52px)}
.pagehead .wrap{max-width:820px}
.pagehead .crumb{color:var(--gold);font-size:12.5px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;margin-bottom:8px}
.pagehead h1{font-size:clamp(28px,4vw,42px);line-height:1.1}
.pagehead .sub{margin-top:10px;font-size:17px;opacity:.9}
.intro{padding:56px 6vw 20px}
.intro p{font-size:19px;color:var(--navy);max-width:760px;font-weight:500;line-height:1.55}
.bodywrap{padding:34px 6vw 76px}
.bodysec{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;margin-bottom:56px}
.bodysec:last-child{margin-bottom:0}
.bodysec.reverse .media{order:-1}
.bodysec .media{height:280px;border-radius:16px}
.bodysec h3{color:var(--navy);font-size:23px;margin-bottom:12px}
.bodysec p{color:var(--dim);font-size:15.5px;margin-bottom:12px}
.bodysec ul{color:var(--dim);font-size:15px;padding-left:20px}
.bodysec li{margin-bottom:7px}

/* contact + donate extras */
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;padding:56px 6vw 76px;align-items:start}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:700;color:var(--navy);margin-bottom:6px}
.field input,.field textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:9px;font:inherit;font-size:15px;background:var(--bg)}
.field textarea{min-height:120px;resize:vertical}
.contactcard{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:28px}
.contactcard h3{color:var(--navy);margin-bottom:14px}
.contactcard a{color:var(--gold-d);font-weight:700;text-decoration:none}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:0 6vw 30px}
.tier{display:block;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:16px;padding:26px;
  text-align:center;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
/* highlight follows the cursor: dim the others, lift the hovered one */
.tiers:hover .tier{border-color:var(--line);box-shadow:none;opacity:.72}
.tier:hover,.tier:focus-visible{border-color:var(--gold);box-shadow:0 12px 30px rgba(201,162,39,.18);
  transform:translateY(-4px);opacity:1}
.tier:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
/* default state before any hover: featured tier stays highlighted */
.tiers:not(:hover) .tier.feat{border-color:var(--gold);box-shadow:0 12px 30px rgba(201,162,39,.18)}
.tier b{display:block;font-size:34px;color:var(--navy)}
.tier span{color:var(--dim);font-size:14px;display:block;margin:8px 0 16px}

/* coming soon placeholder */
.coming-soon-wrap{padding:48px 6vw 80px;text-align:center}
.coming-soon{max-width:480px;margin:0 auto;background:var(--bg);border:2px dashed var(--gold);border-radius:18px;padding:48px 36px}
.coming-soon .cs-icon{font-size:36px;margin-bottom:16px}
.coming-soon h2.sec{color:var(--navy-d);margin-bottom:12px}
.coming-soon .lead{color:var(--dim);font-size:15.5px}

/* mobile nav toggle (CSS-only, no JS) */
.navtoggle{display:none}
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;cursor:pointer;padding:10px;border-radius:8px;margin-left:auto}
.hamburger span{display:block;height:2.5px;background:var(--navy);border-radius:2px;transition:.2s}
.navtoggle:checked ~ .hamburger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.navtoggle:checked ~ .hamburger span:nth-child(2){opacity:0}
.navtoggle:checked ~ .hamburger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

@media(max-width:820px){
  .menu{display:none;order:3;width:100%;flex-direction:column;align-items:stretch;gap:0;padding:6px 0 4px}
  .navtoggle:checked ~ .menu{display:flex}
  .hamburger{display:flex}
  nav{flex-wrap:wrap}
  .menu a{padding:13px 4px;border-top:1px solid var(--line);font-size:16px;border-radius:0}
  .menu a.donate{margin-top:8px;border-top:none;border-radius:7px;text-align:center}
  .highlights,.nums,.cards,.pgrid,.tiers{grid-template-columns:1fr}
  .nums{grid-template-columns:1fr 1fr}
  .bodysec,.split,.fgrid{grid-template-columns:1fr}
  .bodysec.reverse .media{order:0}
  .bodysec .media{height:210px}
}