:root{
    --paper: #F6F1E6;
    --paper-deep: #EEE5D2;
    --ink: #201F1B;
    --ink-soft: #57534a;
    --red: #C33F2E;
    --red-deep: #a63426;
    --green: #2F7A4E;
    --teal: #223330;
    --line: rgba(32,31,27,0.14);
    --radius: 3px;
  }

  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }

  body{
    margin:0;
    background: var(--paper);
    color: var(--ink);
    font-family: 'Karla', sans-serif;
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  /* subtle paper grain */
  body::before{
    content:"";
    position: fixed; inset:0;
    pointer-events:none;
    opacity:0.7;
    mix-blend-mode: multiply;
    z-index: 1;
    background-image: url("paper-texture.jpg");
    background-size: cover;
    background-repeat: no-repeat; background-position: center;
  }

  h1,h2,h3{
    font-family: 'Permanent Marker', cursive;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.35;
    margin: 0;
    color: var(--ink);
  }

  a{ color: inherit; }

  .wrap{
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 28px;
  }

  .eyebrow{
    font-family:'Karla', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--red-deep);
  }

  /* ---------- NAV ---------- */
  nav{
    position: sticky; top:0; z-index: 50;
    background: rgba(246,241,230,0.88);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--line);
  }
  nav .wrap{
    display:flex; align-items:center; justify-content:space-between;
    padding-top: 14px; padding-bottom: 14px;
  }
  .nav-logo{ display:flex; align-items:center; gap:10px; }
  .nav-logo img{ height: 34px; width:auto; display:block; }
  .nav-logo span{ font-family:'Permanent Marker',cursive; font-weight:400; font-size:1.25rem; letter-spacing:0.02em; color: var(--ink); }
  .nav-links{ display:flex; align-items:center; gap: 28px; font-size:0.92rem; font-weight:600; }
  .nav-links a{ text-decoration:none; opacity:0.82; transition: opacity 0.2s; }
  .nav-links a:hover{ opacity:1; }
  .nav-donate{
    background: var(--red);
    color: #fdf8ef !important;
    padding: 9px 18px;
    border-radius: var(--radius);
    font-weight:700;
    opacity:1 !important;
  }
  .nav-donate:hover{ background: var(--red-deep); }
  @media (max-width: 700px){
    nav .wrap{ flex-wrap:wrap; gap:8px 16px; }
    .nav-links{ gap:14px; font-size:0.85rem; flex-wrap:wrap; }
    .nav-donate{ padding:7px 13px; }
    .nav-logo img{ height:28px; }
  }

  /* ---------- HERO ---------- */
  header.hero{
    position: relative;
    padding: 86px 0 60px;
    overflow: hidden;
    background-image:
      radial-gradient(ellipse 700px 500px at 85% 15%, rgba(195,63,46,0.10), transparent 60%),
      radial-gradient(ellipse 500px 400px at 10% 90%, rgba(47,122,78,0.08), transparent 60%),
      linear-gradient(rgba(32,31,27,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(32,31,27,0.05) 1px, transparent 1px);
    background-size: auto, auto, 44px 44px, 44px 44px;
  }
  .hero-inner{
    position:relative; z-index:2;
    max-width: 700px;
  }
  .hero-logo{
    width: min(360px, 70vw);
    height:auto;
    margin-bottom: 6px;
    display:block;
  }
  .hero h1{
    font-size: clamp(1.8rem, 4.2vw, 2.7rem);
    font-weight: 400;
    line-height:1.45;
    letter-spacing: 0.01em;
    margin-top: 22px;
    max-width: 15ch;
  }
  .hero h1 em{
    font-style: italic;
    color: var(--red-deep);
  }
  .hero p.lede{
    font-size: 1.08rem;
    color: var(--ink-soft);
    max-width: 46ch;
    margin-top: 18px;
  }
  .hero-ctas{
    display:flex; gap:16px; align-items:center; flex-wrap:wrap;
    margin-top: 32px;
  }
  .hero-trust{
    margin-top: 28px;
    font-size: 0.9rem;
    color: var(--ink-soft);
    max-width: 44ch;
    padding-top: 20px;
    border-top: 1px solid var(--line);
  }
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding: 13px 24px;
    border-radius: var(--radius);
    font-weight:700;
    font-size: 0.98rem;
    text-decoration:none;
    border: 1.5px solid transparent;
    transition: transform 0.15s ease, background 0.2s ease;
  }
  .btn:hover{ transform: translateY(-1px); }
  .btn-primary{ background: var(--red); color:#fdf8ef; }
  .btn-primary:hover{ background: var(--red-deep); }
  .btn-ghost{ border-color: var(--ink); color: var(--ink); }
  .btn-ghost:hover{ background: var(--ink); color: var(--paper); }

  /* decorative birds in hero corner */
  .hero-birds{
    position:absolute; top: 40px; right: -30px;
    width: 260px; opacity: 0.9;
    z-index:1;
    pointer-events:none;
  }
  @media (max-width: 780px){ .hero-birds{ display:none; } }

  /* ---------- FLIGHT PATH SIGNATURE ---------- */
  .flight{
    position: relative;
    padding: 10px 0 78px;
  }
  .flight .wrap{ position:relative; }
  .flight-labels{
    display:flex; justify-content:space-between;
    max-width: 640px;
    font-family:'Permanent Marker',cursive;
    font-weight:400;
    font-size:1.05rem;
  }
  .flight-labels span:first-child{ color: var(--ink); }
  .flight-labels span:last-child{ color: var(--red-deep); }
  .flight svg{ width:100%; max-width:640px; height:auto; display:block; margin-top: 6px; }
  .flight-path{
    fill:none;
    stroke: var(--ink);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 7 8;
    stroke-dashoffset: 900;
    transition: stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1);
  }
  .flight.in-view .flight-path{ stroke-dashoffset: 0; }
  .flight-bird{
    opacity:0;
    transform-origin: center;
    transition: opacity 0.6s ease 1.1s;
  }
  .flight.in-view .flight-bird{ opacity:1; }
  .flight-caption{
    font-size:0.94rem; color: var(--ink-soft); margin-top: 18px; max-width: 46ch;
  }

  /* ---------- SECTION SHELLS ---------- */
  section{ padding: 70px 0; }
  section.alt{ background: var(--paper-deep); }
  .reveal{ opacity:0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
  .reveal.in-view{ opacity:1; transform:none; }

  .section-head{ max-width: 620px; margin-bottom: 40px; }
  .section-head h2{ font-size: clamp(1.9rem,3.6vw,2.5rem); margin-top:10px; letter-spacing:0.01em; }
  .section-head p{ color: var(--ink-soft); margin-top: 12px; font-size:1.02rem; }

  /* ---------- ABOUT ---------- */
  .about-grid{
    display:grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items:start;
  }
  .about-grid p{ margin: 0 0 16px; color: var(--ink-soft); font-size: 1.02rem; }
  .about-grid p:last-child{ margin-bottom:0; }
  .pull{
    border-left: 3px solid var(--red);
    padding: 4px 0 4px 22px;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 1.28rem;
    line-height:1.45;
    color: var(--ink);
  }
  @media (max-width: 820px){
    .about-grid{ grid-template-columns: 1fr; gap: 28px; }
  }

  /* ---------- HOW WE WORK ---------- */
  .steps{
    display:grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
  }
  .step{
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px 24px;
  }
  section.alt .step{ background: var(--paper); }
  .step-num{
    font-family:'Permanent Marker',cursive; font-weight:400; font-size:0.95rem;
    color: var(--green);
    border: 1.5px solid var(--green);
    width: 30px; height:30px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    margin-bottom: 16px;
  }
  .step h3{ font-size:1.12rem; margin-bottom:8px; }
  .step p{ color: var(--ink-soft); font-size:0.96rem; margin:0; }
  @media (max-width: 820px){
    .steps{ grid-template-columns: 1fr; }
  }

  /* ---------- FAMILY STORY ---------- */
  .family-grid{
    display:grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items:center;
  }
  .family-photos img{
    width:100%; height:auto; display:block;
    border-radius: var(--radius);
    object-fit: cover;
  }
  .family-photos > img{ margin-bottom: 14px; max-height: 340px; object-fit: cover; }
  .family-photos-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .family-photos-row img{ height: 180px; }
  .family-text p{ color: var(--ink-soft); font-size:1.02rem; margin: 0 0 16px; }
  .family-text .btn{ margin-top: 6px; }
  @media (max-width: 820px){
    .family-grid{ grid-template-columns: 1fr; gap: 24px; }
    .family-photos > img{ max-height: 280px; }
  }

  /* ---------- MONTHLY GIVING TIERS ---------- */
  .tiers{
    display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
  }
  .tier{
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px 26px;
    display:flex; flex-direction:column;
  }
  .tier-featured{
    border-color: var(--red);
    border-width: 2px;
    position: relative;
  }
  .tier-eyebrow{
    font-family:'Karla', sans-serif;
    font-size: 0.68rem; font-weight:700; letter-spacing:0.14em;
    color: var(--red-deep);
    margin: 0 0 10px;
  }
  .tier-amount{
    font-family:'Permanent Marker', cursive;
    font-size: 2.4rem; font-weight:400;
    margin: 0 0 12px;
    color: var(--ink);
  }
  .tier-amount span{
    font-size: 0.95rem; font-weight: 500; color: var(--ink-soft);
  }
  .tier h3{ font-size: 1.08rem; margin-bottom: 8px; }
  .tier-desc{ color: var(--ink-soft); font-size:0.94rem; margin: 0 0 22px; flex-grow:1; }
  .tier-btn{ width:100%; justify-content:center; }
  .tiers-note{
    text-align:center; margin-top: 26px; font-size:0.85rem; color: var(--ink-soft);
  }
  .tiers-custom{ margin-top: 10px; font-weight:600; }
  .tiers-custom a{ color: var(--red-deep); text-decoration: underline; }
  @media (max-width: 820px){
    .tiers{ grid-template-columns: 1fr; }
  }

  /* ---------- CTA BAND ---------- */
  .cta-band{
    background: var(--teal);
    color: #F3EFE3;
    padding: 66px 0;
    text-align:center;
  }
  .cta-band h2{ color:#F3EFE3; font-size: clamp(1.9rem,4vw,2.6rem); }
  .cta-band p{ color: rgba(243,239,227,0.78); max-width: 46ch; margin: 14px auto 30px; font-size:1.03rem; }
  .cta-band .btn-primary{ background: var(--red); }
  .cta-band .btn-primary:hover{ background: #db5a46; }
  .cta-instagram{
    margin-top: 26px !important; font-size: 0.92rem !important;
    color: rgba(243,239,227,0.7) !important;
  }
  .cta-instagram a{ color: #F3EFE3; font-weight:700; text-decoration: underline; }

  /* ---------- FOOTER ---------- */
  footer{ padding: 46px 0 40px; }
  .footer-top{
    display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:24px;
    padding-bottom: 26px; border-bottom: 1px solid var(--line);
  }
  .footer-brand{ display:flex; align-items:center; gap:10px; }
  .footer-brand img{ height:28px; }
  .footer-brand span{ font-family:'Permanent Marker',cursive; font-weight:700; }
  .footer-links{ display:flex; gap:22px; font-size:0.92rem; font-weight:600; }
  .footer-links a{ text-decoration:none; opacity:0.8; }
  .footer-links a:hover{ opacity:1; }
  .footer-note{
    margin-top: 22px; font-size: 0.85rem; color: var(--ink-soft); max-width: 620px;
  }
  .footer-copy{
    margin-top: 18px; font-size: 0.8rem; color: var(--ink-soft); opacity:0.8;
  }


  .shop-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; max-width:760px; }
  .shop-item{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; }
  .shop-art{ aspect-ratio:4/5; background:var(--teal); color:var(--paper); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:20px; }
  .shop-art img{ width:100%; height:100%; object-fit:cover; }
  .shop-art .art-line{ font-family:'Permanent Marker',cursive; font-size:clamp(1.6rem,4vw,2.3rem); line-height:1.1; }
  .shop-art .art-sub{ font-size:0.8rem; letter-spacing:0.18em; margin-top:10px; opacity:0.8; }
  .shop-body{ padding:20px 22px 24px; display:flex; flex-direction:column; flex-grow:1; }
  .shop-body h3{ font-size:1.05rem; margin-bottom:6px; }
  .shop-price{ font-size:1.5rem; font-weight:700; margin:0 0 16px; }
  .shop-body .btn{ width:100%; justify-content:center; margin-top:auto; }
  @media (max-width:640px){ .shop-grid{ grid-template-columns:1fr; } }

  .relative{ position:relative; z-index:2; }

  /* ---------- SUBPAGES ---------- */
  .page-head{ padding: 70px 0 10px; }
  .page-head h1{ font-size: clamp(2rem,4.6vw,3rem); margin-top:10px; line-height:1.3; max-width: 18ch; }
  .page-head p.lede{ color: var(--ink-soft); font-size:1.08rem; max-width: 52ch; margin-top:16px; }
  nav .nav-links a[aria-current="page"]{ opacity:1; border-bottom:2px solid var(--red); padding-bottom:2px; }
  .explore{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  .explore a{ text-decoration:none; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px; display:block; transition:transform .15s ease, border-color .2s; }
  .explore a:hover{ transform:translateY(-2px); border-color:var(--red); }
  .explore h3{ font-size:1.2rem; margin-bottom:8px; }
  .explore p{ color:var(--ink-soft); font-size:0.95rem; margin:0 0 14px; }
  .explore span{ color:var(--red-deep); font-weight:700; font-size:0.92rem; }
  @media (max-width:820px){ .explore{ grid-template-columns:1fr; } }
  .pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:10px; }
  .pillar{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px; }
  .pillar h3{ font-size:1.1rem; margin-bottom:8px; }
  .pillar p{ color:var(--ink-soft); font-size:0.96rem; margin:0; }
  @media (max-width:820px){ .pillars{ grid-template-columns:1fr; } }
  .events-list{ display:grid; gap:18px; max-width:760px; }
  .event-card{ display:grid; grid-template-columns:96px 1fr; gap:22px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; }
  .event-date{ font-family:'Permanent Marker',cursive; text-align:center; color:var(--red-deep); line-height:1.2; }
  .event-date b{ display:block; font-size:2rem; font-weight:400; color:var(--ink); }
  .event-card h3{ font-size:1.1rem; margin-bottom:6px; }
  .event-card p{ color:var(--ink-soft); font-size:0.95rem; margin:0; }
  .empty-note{ max-width:760px; border:1.5px dashed var(--line); border-radius:var(--radius); padding:28px 26px; color:var(--ink-soft); }
  .empty-note p{ margin:0 0 12px; }
  .empty-note p:last-child{ margin:0; }
  .empty-note a{ color:var(--red-deep); font-weight:700; }
  .prose p{ color:var(--ink-soft); font-size:1.02rem; margin:0 0 16px; max-width:62ch; }
  .shop-art:has(img){ padding:0; }
  .footer-links{ flex-wrap:wrap; gap:10px 20px; }
  .draw-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:44px; align-items:start; }
  .draw-grid img{ width:100%; height:auto; display:block; border-radius:var(--radius); }
  .draw-text p{ color:var(--ink-soft); font-size:1.02rem; margin:0 0 14px; }
  .draw-text h3{ font-size:1.15rem; margin:22px 0 8px; }
  .prize-list{ margin:0 0 14px; padding-left:1.1em; color:var(--ink-soft); font-size:1rem; }
  .prize-list li{ margin-bottom:5px; }
  .prize-list a, .draw-text a.inline{ color:var(--red-deep); font-weight:700; }
  .draw-facts{ display:flex; flex-wrap:wrap; gap:10px 28px; margin:18px 0 22px; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:0.95rem; }
  .draw-facts b{ font-family:'Permanent Marker',cursive; font-weight:400; color:var(--red-deep); display:block; font-size:0.8rem; letter-spacing:0.06em; }
  @media (max-width:820px){ .draw-grid{ grid-template-columns:1fr; gap:24px; } }
  .family-photos .row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
  .family-photos .row2 img{ height:180px; }
  .family-photos > img.wide{ max-height:none; margin-bottom:0; }
  .badges{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
  .badge{ display:inline-flex; align-items:center; gap:6px; background:rgba(47,122,78,0.10); color:var(--green); border:1px solid rgba(47,122,78,0.45); border-radius:999px; padding:5px 12px 5px 9px; font-size:0.8rem; font-weight:700; letter-spacing:0.02em; cursor:help; }
  .badge svg{ width:15px; height:15px; flex:none; }
  .badge-key{ max-width:62ch; margin-top:22px; font-size:0.92rem; color:var(--ink-soft); }
  .badge-key .badges{ margin:0 0 10px; }
  #mohammed .family-text{align-self:start}
  .family-photos .row3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
  .family-photos .row3 video{width:100%;height:auto;max-height:230px;object-fit:cover;border-radius:var(--radius);background:#000;display:block}
  #alaa video.solo{ display:block; width:auto; height:260px; max-width:100%; margin:14px auto 0; border-radius:var(--radius); background:#000; }
  #tareq-student .row2 video{ height:300px; object-fit:contain; }
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:10px}
  .step{background:rgba(255,255,255,.55);border:1px solid rgba(0,0,0,.08);border-radius:var(--radius);padding:22px}
  .step h3{margin:8px 0 8px}
  .step p{margin:0}
  .step-n{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--red-deep);color:#fff;font-weight:700}
  .steps-note{margin-top:22px;max-width:760px}
  @media(max-width:820px){.steps{grid-template-columns:1fr}}
  .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:36px}
  .gallery img{width:100%;height:280px;object-fit:cover;border-radius:var(--radius);display:block}
  @media(max-width:640px){.gallery{grid-template-columns:repeat(2,1fr)}.gallery img{height:200px}}
  .family-photos .row2 video{ width:100%; height:auto; display:block; border-radius:var(--radius); background:#000; }
  .prose h2{ margin:34px 0 12px; font-size:clamp(1.5rem,3vw,2rem); }