/* ============================================================
   Purposeful Parenting Foundation — Main Stylesheet
   purposefulparentingfoundation.co.za
   ============================================================ */

/* ── RESET & ROOT ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Muted, sophisticated earth palette */
  --dark:        #13110E;       /* deep warm near-black */
  --dark-2:      #1A1814;       /* rich dark brown-charcoal */
  --slate:       #242018;       /* warm dark for cards */
  --slate-light: #302B22;       /* subtle card borders */
  --amber:       #7A4E2D;       /* deep clay / terracotta */
  --amber-light: #9A6645;       /* slightly lighter clay */
  --amber-pale:  #DEC9B0;       /* pale parchment tint */
  --cream:       #F4EFE6;       /* warm parchment background */
  --cream-2:     #EDE5D8;       /* deeper parchment */
  --stone:       #D8CCBC;       /* muted border / divider */
  --muted:       #7A7268;       /* quiet body text */
  --body:        #2E2A24;       /* main readable text */
  --white:       #FDFAF6;       /* warm white */

  --font-head:   'Playfair Display', serif;
  --font-body:   'DM Sans', sans-serif;
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --ease:        0.3s ease;
}

html  { scroll-behavior: smooth; }
body  { font-family: var(--font-body); color: var(--body); background: var(--cream); overflow-x: hidden; }
img   { display: block; max-width: 100%; }
a     { text-decoration: none; }

/* ── TYPOGRAPHY ── */
.eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--amber);
  margin-bottom: 0.75rem;
  display: block;
}

.sec-title {
  font-family: var(--font-head);
  font-size: 2.7rem;
  font-weight: 900;
  line-height: 1.14;
  color: var(--dark);
}
.sec-title span { color: var(--amber); font-style: italic; }

/* ── LAYOUT ── */
.inner   { max-width: 1160px; margin: 0 auto; }
section  { padding: 6rem 4rem; }

/* ── ANIMATIONS ── */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.72s ease, transform 0.72s ease;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

@keyframes pulse   { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.25)} }
@keyframes bounce  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ── BUTTONS ── */
.btn-primary {
  background: var(--amber);
  color: var(--white);
  padding: 0.9rem 2.2rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 6px 24px rgba(200,115,42,.25);
  transition: all var(--ease);
}
.btn-primary:hover { background: var(--amber-light); transform: translateY(-2px); box-shadow: 0 10px 32px rgba(200,115,42,.32); }

.btn-ghost {
  border: 1.5px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.8);
  padding: 0.9rem 2.2rem;
  border-radius: 50px;
  font-weight: 500;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all var(--ease);
}
.btn-ghost:hover { border-color: var(--amber-light); color: var(--amber-light); }

.btn-outline {
  border: 1.5px solid var(--amber);
  color: var(--amber);
  padding: 0.9rem 2.2rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all var(--ease);
}
.btn-outline:hover { background: var(--amber); color: var(--white); }

/* ── NAVIGATION ── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1rem 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(28,31,38,.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(200,115,42,.15);
}
.nav-logo {
  background: #FFFFFF;
  border-radius: 12px;
  padding: 8px 18px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 16px rgba(0,0,0,0.3);
}
.nav-logo img { height: 56px; width: auto; display: block; }

.nav-links { display: flex; gap: 2.5rem; list-style: none; }
.nav-links a {
  color: rgba(255,255,255,.6);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color var(--ease);
}
.nav-links a:hover, .nav-links a.active { color: var(--amber-light); }

.nav-cta {
  background: transparent;
  color: var(--amber-light);
  padding: 0.55rem 1.6rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.85rem;
  border: 1.5px solid var(--amber);
  transition: all var(--ease);
}
.nav-cta:hover { background: var(--amber); color: var(--white); }


/* ═══════════════════════════════
   HERO — text-focused, no photo
═══════════════════════════════ */
.hero {
  min-height: 100vh;
  background: var(--dark);
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 80px;
}

.hero-noise {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 30% 40%, rgba(200,115,42,.06) 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 80% 80%, rgba(46,51,64,.8)    0%, transparent 60%);
  pointer-events: none;
}

.hero-lines {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0px, rgba(255,255,255,.018) 1px, transparent 1px, transparent 90px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.012) 0px, rgba(255,255,255,.012) 1px, transparent 1px, transparent 90px);
  pointer-events: none;
}

.hero-content {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 4rem;
  width: 100%;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(200,115,42,.12);
  border: 1px solid rgba(200,115,42,.3);
  padding: 0.38rem 1.1rem;
  border-radius: 50px;
  color: var(--amber-light);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 2rem;
}
.pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); animation: pulse 2s infinite; }

.hero h1 {
  font-family: var(--font-head);
  font-size: clamp(3rem, 5vw, 5.2rem);
  line-height: 1.06;
  color: var(--white);
  margin-bottom: 1.5rem;
  font-weight: 900;
  max-width: 780px;
}
.hero h1 span { color: var(--amber); font-style: italic; }

.hero-rule {
  width: 56px; height: 3px;
  background: var(--amber);
  border-radius: 2px;
  margin-bottom: 1.5rem;
}

.hero-sub {
  font-size: 1.1rem;
  color: rgba(255,255,255,.5);
  line-height: 1.75;
  margin-bottom: 2.8rem;
  max-width: 560px;
  font-weight: 300;
}

.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 4rem; }

.hero-stats {
  display: flex;
  gap: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255,255,255,.07);
  max-width: 480px;
}
.stat-num   { font-family: var(--font-head); font-size: 1.9rem; font-weight: 700; color: var(--amber-light); display: block; }
.stat-label { font-size: 0.75rem; color: rgba(255,255,255,.38); text-transform: uppercase; letter-spacing: 0.07em; margin-top: 0.1rem; }

.scroll-hint {
  position: absolute; bottom: 2.5rem; left: 4rem;
  display: flex; align-items: center; gap: 0.7rem;
  color: rgba(255,255,255,.25);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.sdot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); opacity: .6; animation: bounce 2s infinite; }


/* ── MARQUEE ── */
.marquee { background: var(--dark-2); padding: 0.9rem 0; overflow: hidden; white-space: nowrap; border-top: 1px solid rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.05); }
.marquee-inner { display: inline-block; animation: marquee 32s linear infinite; }
.marquee-inner span {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,.25);
  margin: 0 2.5rem;
}
.marquee-inner span.dot { color: var(--amber); opacity: .5; }


/* ═══════════════════════════════
   ABOUT — two photos + text
═══════════════════════════════ */
.about { background: var(--cream); }

.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 5rem;
  align-items: center;
}

/* Two stacked/offset photos */
.about-photos {
  position: relative;
  height: 580px;
}

.photo-main {
  position: absolute;
  top: 0; left: 0;
  width: 72%;
  height: 520px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.14);
}
.photo-main img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

.photo-accent {
  position: absolute;
  bottom: 0; right: 0;
  width: 52%;
  height: 340px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,.16);
  border: 4px solid var(--cream);
}
.photo-accent img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

.founder-tag {
  position: absolute;
  bottom: 160px; left: -20px;
  background: var(--dark);
  color: var(--white);
  padding: 1rem 1.5rem;
  border-radius: var(--radius-md);
  border-left: 3px solid var(--amber);
  z-index: 2;
  min-width: 220px;
}
.founder-tag .tag  { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--amber); font-weight: 700; }
.founder-tag .name { font-family: var(--font-head); font-size: 1.05rem; font-weight: 700; margin: 0.2rem 0; }
.founder-tag .role { font-size: 0.75rem; color: rgba(255,255,255,.45); }

.about-body {
  font-size: 1.05rem;
  color: var(--muted);
  line-height: 1.82;
  margin: 1.4rem 0 2rem;
  font-weight: 300;
}

.belief-cards { display: grid; gap: 0.8rem; }
.bcard {
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 1.1rem;
  border: 1px solid var(--stone);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.bcard:hover { border-color: var(--amber-pale); box-shadow: 0 4px 20px rgba(0,0,0,.05); }
.bcard-icon {
  width: 40px; height: 40px;
  border-radius: 9px;
  background: var(--amber-pale);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}
.bcard strong { display: block; font-size: 0.92rem; font-weight: 600; color: var(--dark); margin-bottom: 0.2rem; }
.bcard p      { font-size: 0.83rem; color: var(--muted); line-height: 1.55; }


/* ── BOOK ── */
.book-sec {
  background: var(--dark-2);
  position: relative;
  overflow: hidden;
}
.book-bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 90% 50%, rgba(200,115,42,.04) 0%, transparent 70%);
  pointer-events: none;
}

.book-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 5rem;
  align-items: center;
}

.book-mockup { height: auto; display: flex; align-items: center; justify-content: center; }
.book-img {
  width: 280px;
  height: auto;
  border-radius: 4px 18px 18px 4px;
  box-shadow: 20px 20px 50px rgba(0,0,0,0.5);
  transform: perspective(1000px) rotateY(-12deg) rotateX(2deg);
  transition: transform 0.5s ease;
}
.book-img:hover {
  transform: perspective(1000px) rotateY(-4deg) rotateX(1deg);
}

.book-desc {
  font-size: 1rem;
  color: rgba(255,255,255,.45);
  line-height: 1.82;
  margin: 1.4rem 0;
  font-weight: 300;
}
.book-feats { display: grid; gap: 0.65rem; margin-bottom: 2rem; }
.book-feat  { display: flex; align-items: center; gap: 0.75rem; color: rgba(255,255,255,.6); font-size: 0.9rem; }
.book-feat::before { content: '—'; color: var(--amber); font-size: 0.8rem; flex-shrink: 0; }


/* ── PROGRAMS ── */
.programs-sec { background: var(--cream-2); }

.prog-header { text-align: center; max-width: 560px; margin: 0 auto 4rem; }
.prog-header p { margin-top: 0.9rem; color: var(--muted); font-size: 1rem; line-height: 1.75; }

.prog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }

.prog-card {
  border-radius: 18px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--stone);
  transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.prog-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(0,0,0,.08); border-color: var(--amber-pale); }

.prog-top { height: 180px; display: flex; align-items: center; justify-content: center; font-size: 3rem; }
.c1 { background: linear-gradient(135deg, #1C1F26, #2E3340); }
.c2 { background: linear-gradient(135deg, #7A3E10, #B86824); }
.c3 { background: linear-gradient(135deg, #0D2820, #144D3A); }

.prog-body { padding: 1.6rem; }
.prog-tag   { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--amber); font-weight: 700; margin-bottom: 0.35rem; }
.prog-title { font-family: var(--font-head); font-size: 1.2rem; font-weight: 700; color: var(--dark); margin-bottom: 0.6rem; }
.prog-desc  { font-size: 0.85rem; color: var(--muted); line-height: 1.6; }


/* ── TESTIMONIAL ── */
.testi { background: var(--dark); }

.testi-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 4rem; align-items: center; }

.quote-mark  { font-family: var(--font-head); font-size: 7rem; color: var(--amber); line-height: 0.3; margin-bottom: 1.5rem; display: block; opacity: 0.25; }
.quote-text  { font-family: var(--font-head); font-size: 1.65rem; font-weight: 700; color: rgba(255,255,255,.82); line-height: 1.45; font-style: italic; margin-bottom: 2rem; }
.quote-author strong { display: block; font-size: 0.95rem; color: var(--white); font-weight: 600; }
.quote-author span   { font-size: 0.82rem; color: rgba(255,255,255,.35); }

.impact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.imp-card {
  background: rgba(255,255,255,.04);
  border-radius: var(--radius-md);
  padding: 1.4rem;
  border: 1px solid rgba(255,255,255,.07);
  text-align: center;
}
.imp-num   { font-family: var(--font-head); font-size: 2.2rem; font-weight: 900; color: var(--amber-light); display: block; }
.imp-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,.3); font-weight: 500; margin-top: 0.3rem; }


/* ── MISSION STRIP ── */
.mission {
  background: var(--cream-2);
  padding: 4.5rem 4rem;
  border-top: 1px solid var(--stone);
  border-bottom: 1px solid var(--stone);
}
.mission-inner {
  max-width: 1160px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto;
  gap: 3rem; align-items: center;
}
.mission-text {
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 900;
  color: var(--dark);
  line-height: 1.25;
}
.mission-text em { color: var(--amber); font-style: italic; }


/* ── CONTACT ── */
.contact-sec { background: var(--dark-2); }

.contact-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 5rem; align-items: start; }

.contact-title { font-family: var(--font-head); font-size: 2.5rem; font-weight: 900; color: var(--white); margin-bottom: 0.9rem; }
.contact-desc  { font-size: 0.95rem; color: rgba(255,255,255,.38); line-height: 1.75; margin-bottom: 2.4rem; font-weight: 300; }

.citem { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.4rem; }
.cicon {
  width: 42px; height: 42px;
  border-radius: 9px;
  background: rgba(200,115,42,.12);
  border: 1px solid rgba(200,115,42,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}
.citem strong { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--amber); margin-bottom: 0.18rem; }
.citem span   { font-size: 0.9rem; color: rgba(255,255,255,.55); }

.cform {
  background: rgba(255,255,255,.03);
  border-radius: 18px;
  padding: 2.2rem;
  border: 1px solid rgba(255,255,255,.07);
}
.fg { margin-bottom: 1.1rem; }
.fg input, .fg textarea, .fg select {
  width: 100%;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1.1rem;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.9rem;
  outline: none;
  transition: border var(--ease);
}
.fg input::placeholder, .fg textarea::placeholder { color: rgba(255,255,255,.22); }
.fg input:focus, .fg textarea:focus { border-color: var(--amber); }
.fg textarea { height: 110px; resize: none; }
.fg select   { color: rgba(255,255,255,.45); appearance: none; }

.btn-sub {
  width: 100%;
  background: var(--amber);
  border: none;
  border-radius: 50px;
  padding: 0.95rem;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--ease);
  box-shadow: 0 6px 20px rgba(200,115,42,.2);
}
.btn-sub:hover { background: var(--amber-light); transform: translateY(-2px); }


/* ── FOOTER ── */
footer {
  background: var(--dark);
  padding: 2.4rem 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,.05);
}
.footer-left    { display: flex; align-items: center; gap: 1.4rem; }
.footer-logo {
  background: #FFFFFF;
  border-radius: 10px;
  padding: 7px 15px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
.footer-logo img { height: 46px; width: auto; display: block; }
.fcopy { font-size: 0.8rem; color: rgba(255,255,255,.22); }
.fnpo  { font-size: 0.7rem; color: rgba(255,255,255,.14); margin-top: 0.15rem; }
.flinks { display: flex; gap: 2rem; }
.flinks a { font-size: 0.8rem; color: rgba(255,255,255,.25); transition: color var(--ease); }
.flinks a:hover { color: var(--amber-light); }


/* ── RESPONSIVE ── */
@media (max-width: 960px) {
  nav { padding: 1rem 2rem; }
  .nav-links { display: none; }
  section { padding: 4rem 2rem; }

  .hero-content { padding: 0 2rem; }
  .hero h1 { font-size: 2.6rem; }

  .about-grid, .book-grid, .prog-grid,
  .testi-grid, .contact-grid, .mission-inner { grid-template-columns: 1fr; }

  .about-photos { height: 420px; }
  .photo-main   { width: 80%; height: 380px; }
  .photo-accent { width: 55%; height: 260px; }
  .founder-tag  { bottom: 130px; left: 0; }

  footer { flex-direction: column; gap: 1.4rem; text-align: center; padding: 2rem; }
  .flinks { justify-content: center; }
}

/* LOGO FIX */
.nav-logo{background:#fff!important;border-radius:10px!important;padding:6px 16px!important;display:inline-flex!important;align-items:center!important;box-shadow:0 4px 18px rgba(0,0,0,.4)!important;}
.nav-logo img{height:52px!important;width:auto!important;display:block!important;}
.footer-logo{background:#fff!important;border-radius:10px!important;padding:6px 14px!important;display:inline-flex!important;align-items:center!important;box-shadow:0 4px 14px rgba(0,0,0,.3)!important;}
.footer-logo img{height:46px!important;width:auto!important;display:block!important;}

/* CRISIS SECTION */
.crisis{background:var(--dark);padding:6rem 4rem;position:relative;overflow:hidden;}
.crisis-bg{position:absolute;inset:0;background:radial-gradient(ellipse 60% 60% at 20% 50%,rgba(200,115,42,.05) 0%,transparent 70%);pointer-events:none;}
.crisis-inner{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;}
.crisis-stats{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;}
.crisis-stat{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:18px;padding:2rem;text-align:center;position:relative;overflow:hidden;transition:transform .3s,border-color .3s;}
.crisis-stat:hover{transform:translateY(-4px);border-color:rgba(200,115,42,.3);}
.crisis-stat::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--amber);}
.crisis-stat-num{font-family:var(--font-head);font-size:2.6rem;font-weight:900;color:var(--amber-light);display:block;line-height:1;}
.crisis-stat-label{font-size:0.82rem;color:rgba(255,255,255,.45);margin-top:.5rem;text-transform:uppercase;letter-spacing:.08em;line-height:1.4;}
.crisis-text .sec-title{color:var(--white);margin-bottom:1.2rem;}
.crisis-body{font-size:1.05rem;color:rgba(255,255,255,.5);line-height:1.82;font-weight:300;margin-bottom:2rem;}
.crisis-callout{background:rgba(200,115,42,.1);border-left:3px solid var(--amber);border-radius:0 12px 12px 0;padding:1.2rem 1.5rem;}
.crisis-callout p{font-family:var(--font-head);font-size:1.1rem;font-style:italic;color:rgba(255,255,255,.75);line-height:1.5;}

/* TESTIMONIALS */
.testimonials-sec{background:var(--cream-2);padding:6rem 4rem;}
.testi-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:3.5rem;}
.testi-card{background:var(--white);border-radius:20px;padding:2rem;border:1px solid var(--stone);display:flex;flex-direction:column;gap:1.2rem;transition:transform .3s,box-shadow .3s;}
.testi-card:hover{transform:translateY(-5px);box-shadow:0 20px 50px rgba(0,0,0,.08);}
.testi-stars{display:flex;gap:3px;}
.testi-star{color:var(--amber);font-size:0.9rem;}
.testi-quote{font-size:0.95rem;color:var(--body);line-height:1.7;font-style:italic;flex:1;}
.testi-quote::before{content:'C';font-family:var(--font-head);font-size:2rem;color:var(--amber);opacity:.4;line-height:0;vertical-align:-.4rem;margin-right:.2rem;}
.testi-person{display:flex;align-items:center;gap:.9rem;border-top:1px solid var(--stone);padding-top:1.1rem;}
.testi-avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;color:var(--white);flex-shrink:0;}
.testi-name{font-size:.88rem;font-weight:600;color:var(--dark);}
.testi-location{font-size:.78rem;color:var(--muted);}

/* HOW IT WORKS */
.how-sec{background:var(--dark-2);padding:6rem 4rem;}
.how-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.06);border-radius:20px;overflow:hidden;margin-top:3.5rem;}
.how-step{background:var(--dark-2);padding:2.5rem 1.8rem;text-align:center;position:relative;transition:background .3s;}
.how-step:hover{background:rgba(255,255,255,.03);}
.how-num{font-family:var(--font-head);font-size:3rem;font-weight:900;color:rgba(200,115,42,.2);line-height:1;margin-bottom:1rem;}
.how-icon{font-size:2rem;margin-bottom:1rem;display:block;}
.how-title{font-size:1rem;font-weight:600;color:var(--white);margin-bottom:.6rem;}
.how-desc{font-size:.85rem;color:rgba(255,255,255,.4);line-height:1.6;}
.how-connector{position:absolute;top:50%;right:-1px;width:2px;height:40px;transform:translateY(-50%);background:var(--amber);opacity:.3;}

/* EVENTS */
.events-sec{background:var(--cream);padding:6rem 4rem;}
.events-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:3.5rem;}
.event-card{border-radius:18px;overflow:hidden;border:1px solid var(--stone);background:var(--white);transition:transform .3s,box-shadow .3s;}
.event-card:hover{transform:translateY(-5px);box-shadow:0 20px 50px rgba(0,0,0,.08);}
.event-top{padding:1.8rem;background:var(--dark);position:relative;}
.event-date-box{display:inline-flex;flex-direction:column;align-items:center;background:var(--amber);border-radius:10px;padding:.5rem .9rem;min-width:56px;}
.event-day{font-family:var(--font-head);font-size:1.6rem;font-weight:900;color:var(--white);line-height:1;}
.event-month{font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.8);font-weight:700;}
.event-body{padding:1.5rem;}
.event-tag{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--amber);font-weight:700;margin-bottom:.4rem;}
.event-title{font-family:var(--font-head);font-size:1.15rem;font-weight:700;color:var(--dark);margin-bottom:.6rem;}
.event-meta{display:flex;flex-direction:column;gap:.3rem;margin-bottom:1.1rem;}
.event-meta span{font-size:.83rem;color:var(--muted);display:flex;align-items:center;gap:.4rem;}
.event-cta{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;font-weight:600;color:var(--amber);text-decoration:none;transition:gap .3s;}
.event-cta:hover{gap:.7rem;}

/* DONATE */
.donate-sec{background:linear-gradient(135deg,#13110E 0%,#242018 100%);padding:6rem 4rem;position:relative;overflow:hidden;}
.donate-pattern{position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,rgba(200,115,42,.04) 0px,rgba(200,115,42,.04) 1px,transparent 1px,transparent 30px);pointer-events:none;}
.donate-inner{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;}
.donate-text .sec-title{color:var(--white);}
.donate-body{font-size:1.05rem;color:rgba(255,255,255,.5);line-height:1.82;margin:1.4rem 0 2rem;font-weight:300;}
.donate-amounts{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:2rem;}
.donate-btn-amt{background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.15);border-radius:50px;padding:.6rem 1.4rem;color:rgba(255,255,255,.7);font-size:.9rem;font-weight:500;cursor:pointer;transition:all .3s;}
.donate-btn-amt:hover,.donate-btn-amt.active{background:var(--amber);border-color:var(--amber);color:var(--white);}
.donate-perks{display:grid;gap:.8rem;}
.donate-perk{display:flex;align-items:flex-start;gap:.8rem;color:rgba(255,255,255,.6);font-size:.9rem;}
.donate-perk::before{content:'✓';color:var(--amber);font-weight:700;flex-shrink:0;margin-top:.1rem;}

/* FAQ */
.faq-sec{background:var(--cream-2);padding:6rem 4rem;}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:3.5rem;}
.faq-item{background:var(--white);border-radius:16px;border:1px solid var(--stone);overflow:hidden;}
.faq-q{padding:1.4rem 1.6rem;display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;gap:1rem;}
.faq-q-text{font-size:.95rem;font-weight:600;color:var(--dark);line-height:1.4;}
.faq-icon{width:28px;height:28px;border-radius:50%;background:var(--amber-pale);display:flex;align-items:center;justify-content:center;color:var(--amber);font-size:.85rem;font-weight:700;flex-shrink:0;transition:transform .3s,background .3s;}
.faq-item.open .faq-icon{transform:rotate(45deg);background:var(--amber);color:var(--white);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease,padding .3s;}
.faq-item.open .faq-a{max-height:200px;padding:0 1.6rem 1.4rem;}
.faq-a p{font-size:.88rem;color:var(--muted);line-height:1.7;}

/* NEWSLETTER */
.newsletter-sec{background:var(--amber);padding:4rem;}
.newsletter-inner{max-width:700px;margin:0 auto;text-align:center;}
.newsletter-title{font-family:var(--font-head);font-size:2.2rem;font-weight:900;color:var(--white);margin-bottom:.8rem;}
.newsletter-sub{font-size:1rem;color:rgba(255,255,255,.75);margin-bottom:2rem;}
.newsletter-form{display:flex;gap:.8rem;max-width:500px;margin:0 auto;}
.newsletter-input{flex:1;background:rgba(255,255,255,.25);border:1.5px solid rgba(255,255,255,.4);border-radius:50px;padding:.85rem 1.4rem;color:var(--white);font-family:var(--font-body);font-size:.95rem;outline:none;}
.newsletter-input::placeholder{color:rgba(255,255,255,.6);}
.newsletter-input:focus{border-color:var(--white);}
.btn-newsletter{background:var(--white);color:var(--dark);padding:.85rem 2rem;border-radius:50px;border:none;font-family:var(--font-body);font-size:.95rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:all .3s;}
.btn-newsletter:hover{background:var(--dark);color:var(--white);}

/* RESPONSIVE ADDITIONS */
@media(max-width:960px){
.crisis-inner,.donate-inner,.faq-grid{grid-template-columns:1fr;}
.crisis-stats{grid-template-columns:1fr 1fr;}
.how-steps{grid-template-columns:1fr 1fr;}
.testi-cards,.events-grid{grid-template-columns:1fr;}
.newsletter-form{flex-direction:column;}
.crisis-sec,.donate-sec,.events-sec,.how-sec,.testimonials-sec,.faq-sec,.newsletter-sec{padding:4rem 2rem;}
}