/* ================================================================
   ROOTS OF GOOD FOUNDATION
   A donation platform. Authentic identity — warm, rooted, human.
   Rounded forms (donation-site DNA) + our own visual voice.
   ================================================================ */

/* ── 0. PALETTE — warm earth, friendly, trustworthy ────────── */
:root {
  --blue:        #8B5A3C;   /* legacy name; now our primary warm brown */
  --blue-dark:   #5C3D26;   /* deep walnut */
  --blue-light:  #F7EFE1;   /* warm cream wash */

  --orange:      #D4A574;   /* soft amber — secondary/accent */
  --orange-dark: #B8894A;   /* warm ochre */
  --orange-light:#FBF1DE;

  --green:       #8BA373;   /* warm sage — success */
  --green-dark:  #6B8456;
  --green-light: #EEF1E3;

  --root:        #8B5A3C;
  --root-dark:   #5C3D26;
  --root-deep:   #2D1B0F;
  --bark:        #3E2817;
  --clay:        #D4A574;
  --clay-dark:   #B8894A;
  --sage:        #8BA373;
  --leaf:        #9BAE7E;

  --ink:     #2D1B0F;
  --ink2:    #3E2817;
  --ink3:    #5C3D26;
  --slate:   #6B5A4B;
  --muted:   #8F7D6E;
  --subtle:  #B5A99C;
  --line:    #E8DAC5;
  --line-soft:#F0E4D0;
  --surface: #F7EFE1;
  --paper:   #FDF8F0;
  --cream:   #F0E4D0;
  --white:   #FFFFFF;

  --font-head: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;

  --accent:       var(--root);
  --accent-dark:  var(--root-dark);
  --accent-light: var(--blue-light);

  /* Rounded donation-site DNA */
  --r-xs: 8px;
  --r-sm: 12px;
  --r:    18px;
  --r-lg: 24px;
  --r-xl: 32px;
  --pill: 999px;

  --s-xs: 0 1px 2px rgba(92,61,38,.06);
  --s-sm: 0 2px 6px rgba(92,61,38,.08), 0 1px 3px rgba(92,61,38,.05);
  --s:    0 4px 14px rgba(92,61,38,.10), 0 2px 6px rgba(92,61,38,.06);
  --s-md: 0 8px 24px rgba(92,61,38,.12), 0 4px 10px rgba(92,61,38,.07);
  --s-lg: 0 14px 40px rgba(92,61,38,.14), 0 6px 16px rgba(92,61,38,.08);
  --s-warm: 0 10px 30px rgba(212,165,116,.28);
}

body {
  background: var(--paper) !important;
  color: var(--ink) !important;
}

/* ── 1. NAV — centered logo, warm paper, pill donate ───────── */
nav {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 24px !important;
  height: 88px !important;
  min-height: 0 !important;
  padding: 0 36px !important;
  border-bottom: 1px solid var(--line) !important;
  background: var(--paper) !important;
  box-shadow: 0 1px 0 var(--line-soft) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
}
nav .nav-links { display: none !important; }

/* Mobile menu — logo item at top of hamburger drawer */
.mob-logo-item {
  list-style: none !important;
  padding: 14px 0 12px !important;
  border-bottom: 1px solid var(--line) !important;
  margin-bottom: 4px !important;
  display: flex !important;
  justify-content: center !important;
}
.mob-logo-item a { display: flex; align-items: center; }
.mob-logo-item img { width: 150px !important; height: auto !important; display: block !important; }

/* Hamburger — soft rounded, warm */
nav .hamburger {
  order: 1 !important;
  justify-self: start !important;
  align-self: center !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  cursor: pointer !important;
  padding: 12px !important;
  border: 1.5px solid var(--line) !important;
  border-radius: 14px !important;
  background: var(--paper) !important;
  width: 48px !important;
  height: 48px !important;
  align-items: center !important;
  justify-content: center !important;
  transition: border-color .2s, background .2s !important;
  position: static !important;
  transform: none !important;
}
nav .hamburger:hover {
  border-color: var(--root) !important;
  background: var(--blue-light) !important;
}
nav .hamburger span {
  display: block !important;
  width: 18px !important;
  height: 2px !important;
  background: var(--ink2) !important;
  border-radius: 2px !important;
}

/* Logo — centered */
nav .logo {
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  order: 2 !important;
  justify-self: center !important;
  display: flex !important;
  align-items: center !important;
  background: none !important;
  width: auto !important;
  height: auto !important;
}
nav .logo img,
nav .logo-img {
  display: block !important;
  height: 88px !important;
  width: auto !important;
}
nav .logo::before,
nav .logo::after { display: none !important; }

nav .nav-actions {
  order: 3 !important;
  justify-self: end !important;
  align-self: center !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.nav-search-wrap, .btn-signin { display: none !important; }
nav .nav-trigger { height: 88px !important; }
.filter-bar    { top: 88px !important; background: var(--paper) !important; border-bottom: 1px solid var(--line) !important; padding: 16px 36px !important; }
.breadcrumb    { border-bottom: 1px solid var(--line) !important; background: var(--paper) !important; }

/* ── 2. SIDEBAR — warm drawer ──────────────────────────────── */
.gg-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(45,27,15,.55);
  z-index: 1998;
  opacity: 0;
  transition: opacity .3s;
  backdrop-filter: blur(2px);
}
.gg-sidebar-overlay.open { display: block; opacity: 1; }
.gg-sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 320px;
  background: var(--paper);
  z-index: 1999;
  box-shadow: 16px 0 60px rgba(45,27,15,.16);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
  border-right: 1px solid var(--line);
}
.gg-sidebar.open { transform: translateX(0); }
@media (max-width: 768px) {
  .gg-sidebar {
    left: auto; right: 0; width: 86vw;
    box-shadow: -16px 0 60px rgba(45,27,15,.16);
    transform: translateX(100%);
    border-right: none;
    border-left: 1px solid var(--line);
  }
  .gg-sidebar.open { transform: translateX(0); }
}
.gg-sb-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  flex-shrink: 0;
}
.gg-sb-logo img {
  display: block;
  width: 140px;
  height: auto;
}
.gg-sb-close {
  width: 40px; height: 40px;
  border-radius: 14px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--ink2);
  transition: background .2s, color .2s, border-color .2s;
  flex-shrink: 0;
}
.gg-sb-close:hover { background: var(--root); color: var(--paper); border-color: var(--root); }

.gg-sb-nav { flex: 1; padding: 12px 0 24px; display: flex; flex-direction: column; }
.gg-sb-section { padding: 6px 0 16px; border-bottom: 1px dashed var(--line); margin: 0 22px; }
.gg-sb-section:last-child { border-bottom: none; }
.gg-sb-section-title {
  font-size: .7rem;
  font-weight: 700;
  color: var(--clay-dark);
  text-transform: uppercase;
  letter-spacing: .2em;
  padding: 16px 0 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.gg-sb-section-title::before {
  content: '';
  width: 14px; height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238B5A3C'><path d='M12 2c-3 4-3 8 0 11 3-3 3-7 0-11z'/></svg>") no-repeat center / contain;
  flex-shrink: 0;
}
.gg-sb-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  color: var(--ink2);
  font-family: var(--font-head);
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  transition: background .18s, color .18s;
}
.gg-sb-link::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--line);
  flex-shrink: 0;
  transition: background .18s, transform .18s;
}
.gg-sb-link:hover { background: var(--blue-light) !important; color: var(--root-dark) !important; }
.gg-sb-link:hover::before { background: var(--root) !important; transform: scale(1.4); }

.gg-sb-footer { display: none; }
@media (max-width: 768px) {
  .gg-sb-footer {
    display: block;
    padding: 22px;
    border-top: 1px solid var(--line);
    flex-shrink: 0;
    background: var(--surface);
  }
}
.gg-sb-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  border-radius: var(--pill);
  background: var(--root);
  color: var(--paper);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .92rem;
  text-decoration: none;
  transition: background .2s, transform .14s, box-shadow .2s;
  box-shadow: 0 6px 18px rgba(139,90,60,.32);
}
.gg-sb-cta:hover { background: var(--root-dark); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(139,90,60,.42); }

/* ── 3. HERO (INDEX) — warm sanctuary, redesigned ──────────── */
.hero {
  background:
    radial-gradient(ellipse at 20% 30%, rgba(212,165,116,.28) 0%, transparent 48%),
    radial-gradient(ellipse at 80% 70%, rgba(155,174,126,.22) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(139,90,60,.10) 0%, transparent 60%),
    linear-gradient(180deg, var(--paper) 0%, var(--surface) 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 100px 5% 120px !important;
  min-height: 640px !important;
  position: relative !important;
  overflow: hidden !important;
  border-bottom: none !important;
}
.hero::after { display: none !important; content: none !important; }
.hero-bg { display: none !important; }
.hero-illus, .cta-illus-img, img.hero-illus, .hero-mobile-illus {
  display: none !important;
}

/* Hero center card — full width, centered */
.hero-card {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
.hero-center {
  max-width: 760px !important;
  margin: 0 auto !important;
  text-align: center !important;
  padding: 0 20px !important;
}
.hero-eyebrow { display: none !important; }
.hero-eyebrow::before { display: none !important; content: none !important; }
.hero h1, .hero-h1, .hero-center h1 {
  font-family: var(--font-head) !important;
  font-weight: 800 !important;
  font-size: clamp(2.4rem, 5.4vw, 4.4rem) !important;
  letter-spacing: -.035em !important;
  line-height: 1.03 !important;
  color: var(--ink) !important;
  margin: 0 !important;
}
.hero-h1 em, .hero h1 em {
  font-style: italic !important;
  font-weight: 800 !important;
  color: var(--root) !important;
  position: relative !important;
  display: inline-block !important;
}
.hero-h1 em::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; right: 0 !important; bottom: -.08em !important;
  height: .18em !important;
  background: var(--clay) !important;
  border-radius: var(--pill) !important;
  opacity: .45 !important;
  z-index: -1 !important;
}
.hero p, .hero-sub, .hero-center p {
  font-size: 1.08rem !important;
  line-height: 1.7 !important;
  color: var(--slate) !important;
  max-width: 560px !important;
  margin: 26px auto 0 !important;
}

/* Hero scattered photo cards — warm, rounded, softer */
.hero-side { display: none !important; }
.hf-card {
  border-radius: 18px !important;
  overflow: hidden !important;
  background: var(--paper) !important;
  border: 3px solid var(--paper) !important;
  box-shadow: 0 12px 32px rgba(92,61,38,.14), 0 4px 10px rgba(92,61,38,.08) !important;
  position: relative !important;
  transition: transform .3s cubic-bezier(.4,0,.2,1) !important;
}
.hf-card:hover {
  transform: translateY(-6px) rotate(0deg) !important;
}
.hf-card::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, transparent 50%, rgba(45,27,15,.35) 100%) !important;
  pointer-events: none !important;
  border-radius: 15px !important;
}
.hf-label {
  position: absolute !important;
  bottom: 12px !important;
  left: 12px !important;
  padding: 5px 12px !important;
  border-radius: var(--pill) !important;
  background: var(--paper) !important;
  color: var(--ink2) !important;
  font-family: var(--font-head) !important;
  font-size: .66rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .14em !important;
  z-index: 2 !important;
  box-shadow: 0 2px 8px rgba(45,27,15,.18) !important;
}
/* Natural slight rotations — sanctuary imperfection */
.hf-tl { transform: rotate(-3deg); }
.hf-ml { transform: rotate(2deg); margin-left: 28px; }
.hf-bl { transform: rotate(-2deg); }
.hf-tr { transform: rotate(3deg); }
.hf-mr { transform: rotate(-2deg); margin-right: 28px; }
.hf-br { transform: rotate(2deg); }

.hero-center::after { display: none !important; content: none !important; }

/* ── 4. OTHER HEROES (page headers) ────────────────────────── */
.page-header {
  background:
    radial-gradient(ellipse at 20% 30%, rgba(212,165,116,.22) 0%, transparent 48%),
    radial-gradient(ellipse at 80% 70%, rgba(155,174,126,.18) 0%, transparent 50%),
    linear-gradient(180deg, var(--paper) 0%, var(--surface) 100%) !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 80px 5% 88px !important;
  position: relative;
  overflow: hidden;
  text-align: center !important;
}
.page-header::before { display: none !important; }
.page-header::after {
  content: '' !important;
  position: absolute !important;
  left: 0; right: 0; bottom: -1px !important;
  height: 48px !important;
  background: radial-gradient(ellipse 65% 100% at 50% 0%, var(--paper) 50%, transparent 51%) !important;
  pointer-events: none !important;
}
.page-title {
  color: var(--ink) !important;
  font-family: var(--font-head) !important;
  font-weight: 800 !important;
  font-size: clamp(2.2rem, 4.8vw, 3.6rem) !important;
  letter-spacing: -.035em !important;
  line-height: 1.05 !important;
  margin: 0 auto !important;
  max-width: 820px !important;
}
.page-desc {
  color: var(--slate) !important;
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
  max-width: 620px !important;
  margin: 24px auto 0 !important;
}
.page-tag,
body .page-header .page-tag,
body .about-hero .page-tag,
body .np-hero .page-tag,
body .hero-dark .page-tag,
body .hero-banner .page-tag {
  color: var(--root-dark) !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .24em !important;
  margin-bottom: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 8px 20px !important;
  background: var(--paper) !important;
  border: 1.5px solid var(--clay) !important;
  border-radius: var(--pill) !important;
  box-shadow: 0 4px 14px rgba(212,165,116,.22) !important;
}
body .page-tag::before,
body .page-header .page-tag::before,
body .about-hero .page-tag::before,
body .np-hero .page-tag::before,
body .hero-dark .page-tag::before,
body .hero-banner .page-tag::before,
.page-tag::before {
  content: '' !important;
  width: 12px; height: 12px !important;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238B5A3C'><path d='M12 2c-3 4-3 8 0 11 3-3 3-7 0-11zm0 12c-2 3-5 3-8 2 2 3 5 4 8 2zm0 0c2 3 5 3 8 2-2 3-5 4-8 2z'/></svg>") no-repeat center / contain !important;
  flex-shrink: 0 !important;
}
.page-header-icon { display: none !important; }

/* Events / Causes hero — warm brown gradient */
body .events-hero,
body .causes-hero,
body section.events-hero,
body section.causes-hero {
  background:
    radial-gradient(ellipse at 15% 20%, rgba(212,165,116,.22) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 80%, rgba(184,137,74,.20) 0%, transparent 55%),
    linear-gradient(135deg, #4A2C1A 0%, #6B4226 55%, #B8894A 100%) !important;
  padding: 72px 5% 72px !important;
  color: #fff !important;
}
body .events-hero h1, body .causes-hero h1 { color: #fff !important; }
body .events-hero p, body .causes-hero p { color: rgba(255,255,255,.86) !important; }
body .events-hero-eyebrow, body .causes-hero-eyebrow {
  color: rgba(255,255,255,.8) !important;
  background: rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  border-radius: var(--pill) !important;
  padding: 6px 18px !important;
  display: inline-flex !important;
  font-size: .7rem !important;
  letter-spacing: .22em !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  backdrop-filter: blur(6px) !important;
}
body .events-hero-stat strong, body .causes-hero-stat strong {
  color: #fff !important;
  font-family: var(--font-head) !important;
  font-weight: 800 !important;
}
body .events-hero-stat span, body .causes-hero-stat span {
  color: rgba(255,255,255,.75) !important;
}

.about-hero, .np-hero, .hero-dark, .hero-banner {
  background:
    radial-gradient(ellipse at 20% 30%, rgba(212,165,116,.26) 0%, transparent 48%),
    radial-gradient(ellipse at 80% 70%, rgba(155,174,126,.22) 0%, transparent 50%),
    linear-gradient(180deg, var(--paper) 0%, var(--surface) 100%) !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 84px 5% 92px !important;
  position: relative !important;
  text-align: center !important;
  overflow: hidden !important;
}
.about-hero::before, .np-hero::before { display: none !important; }
.about-hero::after, .np-hero::after, .hero-dark::after, .hero-banner::after,
.page-header::after, .events-hero::after, .causes-hero::after {
  display: none !important;
  content: none !important;
}
.about-hero h1, .np-hero h1, .hero-dark h1, .hero-banner h1 {
  color: var(--ink) !important;
  font-family: var(--font-head) !important;
  font-weight: 800 !important;
  font-size: clamp(2.2rem, 4.8vw, 3.6rem) !important;
  letter-spacing: -.035em !important;
  line-height: 1.05 !important;
  max-width: 820px !important;
  margin: 0 auto !important;
}
.about-hero p, .np-hero p, .hero-dark p, .hero-banner p {
  color: var(--slate) !important;
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
  max-width: 620px !important;
  margin: 24px auto 0 !important;
}
.about-hero-tag, .np-tag,
body .about-hero .about-hero-tag,
body .np-hero .np-tag,
body .page-header .about-hero-tag,
body .page-header .np-tag,
body .about-hero .about-tag,
body .contact-header .page-tag {
  color: var(--root-dark) !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .24em !important;
  margin-bottom: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 8px 20px !important;
  background: var(--paper) !important;
  border: 1.5px solid var(--clay) !important;
  border-radius: var(--pill) !important;
  box-shadow: 0 4px 14px rgba(212,165,116,.22) !important;
  width: auto !important;
}
.about-hero-tag::before, .np-tag::before {
  content: '' !important;
  width: 12px; height: 12px !important;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238B5A3C'><path d='M12 2c-3 4-3 8 0 11 3-3 3-7 0-11zm0 12c-2 3-5 3-8 2 2 3 5 4 8 2zm0 0c2 3 5 3 8 2-2 3-5 4-8 2z'/></svg>") no-repeat center / contain !important;
  flex-shrink: 0 !important;
}
.about-hero-stats {
  background: var(--paper) !important;
  border: 1.5px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  max-width: 700px !important;
  margin: 40px auto 0 !important;
  padding: 0 !important;
  box-shadow: 0 8px 24px rgba(92,61,38,.08) !important;
  overflow: hidden !important;
}
.ahs-item {
  padding: 20px 16px !important;
  border-right: 1px solid var(--line) !important;
}
.ahs-item:last-child { border-right: none !important; }
.ahs-item strong, .ahs-item .ahs-val, .ahs-item .ahs-num,
body .about-hero-stats .ahs-num {
  font-family: var(--font-head) !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  letter-spacing: -.02em !important;
  font-size: 1.6rem !important;
}
.ahs-item span, .ahs-item .ahs-lbl, .ahs-item .ahs-label,
body .about-hero-stats .ahs-label {
  color: var(--muted) !important;
  font-size: .62rem !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}

/* ── 5. CAMPAIGN CARDS — donation site DNA, warmed ─────────── */
.cc {
  border-radius: 18px !important;
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  display: flex !important;
  flex-direction: column !important;
  transition: box-shadow .28s, transform .28s, border-color .28s !important;
  overflow: hidden !important;
  box-shadow: var(--s-xs) !important;
}
.cc:hover {
  box-shadow: 0 18px 40px rgba(92,61,38,.14), 0 6px 14px rgba(212,165,116,.18) !important;
  transform: translateY(-5px) !important;
  border-color: var(--clay) !important;
}
.cc-img {
  height: 200px !important;
  position: relative !important;
  overflow: hidden !important;
}
.cc-img::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  height: 60px !important;
  background: linear-gradient(to top, rgba(45,27,15,.28) 0%, transparent 100%) !important;
  pointer-events: none !important;
}
.cc-img-label {
  position: absolute !important;
  top: 12px !important;
  bottom: auto !important;
  left: 12px !important;
  border-radius: var(--pill) !important;
  font-family: var(--font-head) !important;
  font-size: .64rem !important;
  padding: 5px 12px !important;
  backdrop-filter: blur(8px) !important;
  background: rgba(253,248,240,.92) !important;
  color: var(--ink2) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .14em !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(45,27,15,.16) !important;
}
.cc-heart {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1.5px solid transparent !important;
  box-shadow: 0 2px 8px rgba(45,27,15,.14) !important;
  background: rgba(253,248,240,.96) !important;
  transition: background .2s, transform .2s, border-color .2s !important;
}
.cc-heart:hover { background: var(--paper) !important; border-color: var(--clay) !important; transform: scale(1.08) !important; color: var(--root) !important; }
.cc-bar-wrap {
  height: 6px !important;
  margin-bottom: 14px !important;
  background: var(--cream) !important;
  border-radius: var(--pill) !important;
  overflow: hidden !important;
}
.cc-bar {
  background: linear-gradient(90deg, var(--root) 0%, var(--clay) 100%) !important;
  border-radius: var(--pill) !important;
  box-shadow: 0 0 8px rgba(212,165,116,.5) !important;
}
.cc-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  padding: 20px 22px 22px !important;
}
.cc-cat {
  font-family: var(--font-head) !important;
  font-size: .64rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .2em !important;
  color: var(--clay-dark) !important;
  margin-bottom: 8px !important;
}
.cc-title {
  flex: 1 !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: 1.08rem !important;
  line-height: 1.3 !important;
  letter-spacing: -.01em !important;
  color: var(--ink) !important;
}
.cc-urgent {
  background: linear-gradient(135deg, #FCE7C2, #F5D59A) !important;
  border: 1px solid var(--clay) !important;
  color: var(--root-dark) !important;
  border-radius: var(--pill) !important;
  font-size: .6rem !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
}
.skeleton { border-radius: 18px !important; background: var(--cream) !important; }

/* ── 5b. DISCOVER FEATURED (index) ─────────────────────────── */
.dc-featured, .dcf, .dc-small, .dcs {
  border-radius: 20px !important;
  overflow: hidden !important;
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--s-xs) !important;
  transition: transform .28s, box-shadow .28s, border-color .28s !important;
}
.dc-featured:hover, .dcf:hover, .dc-small:hover, .dcs:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 18px 40px rgba(92,61,38,.14) !important;
  border-color: var(--clay) !important;
}
.dcf-body, .dcs-body {
  background: var(--paper) !important;
  border-top: 1px solid var(--line) !important;
}
.dcf-org strong, .dcs-org strong { color: var(--root) !important; }
.dcf-bar-wrap, .dcs-bar-wrap { background: var(--cream) !important; border-radius: var(--pill) !important; }
.dcf-bar, .dcs-bar { background: linear-gradient(90deg, var(--root), var(--clay)) !important; border-radius: var(--pill) !important; }

/* Discover controls */
.discover-section {
  background: var(--paper) !important;
  border-top: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
}
.discover-title {
  font-family: var(--font-head) !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
  color: var(--ink) !important;
}
.discover-filter-btn {
  border-radius: var(--pill) !important;
  border: 1.5px solid var(--line) !important;
  background: var(--paper) !important;
  color: var(--ink2) !important;
  font-weight: 600 !important;
  transition: all .18s !important;
}
.discover-filter-btn:hover { border-color: var(--root) !important; color: var(--root) !important; background: var(--blue-light) !important; }
.discover-filter-box {
  border-radius: 14px !important;
  border: 1px solid var(--line) !important;
  background: var(--paper) !important;
  box-shadow: var(--s-lg) !important;
}
.disc-cat-opt { border-radius: 10px !important; }
.disc-cat-opt:hover { background: var(--surface) !important; color: var(--ink) !important; }
.disc-cat-opt.active { background: var(--blue-light) !important; color: var(--root-dark) !important; }
.disc-arrow {
  border-radius: 50% !important;
  border: 1.5px solid var(--line) !important;
  background: var(--paper) !important;
  color: var(--ink2) !important;
  transition: all .18s !important;
}
.disc-arrow:hover { border-color: var(--root) !important; background: var(--blue-light) !important; color: var(--root) !important; }

/* Urgent section */
.urgent-section {
  background: var(--surface) !important;
  border-top: 1px solid var(--line) !important;
  padding: 80px 5% !important;
}
.urgent-section::before { display: none !important; }
.urgent-badge {
  background: var(--paper) !important;
  border: 1.5px solid var(--clay) !important;
  color: var(--root-dark) !important;
  border-radius: var(--pill) !important;
  padding: 6px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 14px rgba(212,165,116,.22) !important;
}
.sec-title {
  font-family: var(--font-head) !important;
  font-weight: 800 !important;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem) !important;
  letter-spacing: -.03em !important;
  color: var(--ink) !important;
  margin-top: 10px !important;
}
.sub-desc { color: var(--slate) !important; font-size: 1rem !important; }

/* ── 6. BLOG / ARTICLE CARDS ───────────────────────────────── */
.blog-card, .article-card, .blog-item, .ac-card {
  border-radius: 18px !important;
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  overflow: hidden !important;
  transition: box-shadow .22s, transform .22s, border-color .22s !important;
}
.blog-card:hover, .article-card:hover, .blog-item:hover, .ac-card:hover {
  box-shadow: 0 14px 36px rgba(92,61,38,.14) !important;
  transform: translateY(-4px) !important;
  border-color: var(--clay) !important;
}
.blog-tag, .ac-tag, .article-cat {
  background: var(--blue-light) !important;
  color: var(--root-dark) !important;
  border-radius: var(--pill) !important;
  font-family: var(--font-head) !important;
  font-size: .62rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .14em !important;
  padding: 5px 12px !important;
  border: 1px solid var(--cream) !important;
}
.ac-img { border-radius: 18px 18px 0 0 !important; }

/* ── 7. BUTTONS — warm pill, donation-site DNA ─────────────── */
.btn-cta, .btn-primary {
  background: var(--root) !important;
  color: var(--paper) !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: var(--pill) !important;
  padding: 13px 26px !important;
  font-size: .92rem !important;
  letter-spacing: .01em !important;
  box-shadow: 0 6px 18px rgba(139,90,60,.32) !important;
  transition: transform .16s, box-shadow .18s, background .2s !important;
  cursor: pointer !important;
}
.btn-cta:hover, .btn-primary:hover {
  background: var(--root-dark) !important;
  color: var(--paper) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 26px rgba(139,90,60,.42) !important;
}
.btn-donate, .btn-lift, .btn-submit, .btn-continue, .btn-next, .btn-send {
  background: linear-gradient(135deg, var(--root) 0%, var(--root-dark) 100%) !important;
  color: var(--paper) !important;
  border: none !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  border-radius: var(--pill) !important;
  padding: 14px 28px !important;
  font-size: .95rem !important;
  box-shadow: 0 8px 22px rgba(139,90,60,.36) !important;
  transition: transform .16s, box-shadow .18s !important;
}
.btn-donate:hover, .btn-lift:hover, .btn-submit:hover, .btn-continue:hover, .btn-next:hover {
  background: linear-gradient(135deg, var(--root-dark), #3E2817) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(139,90,60,.48) !important;
}
.btn-more {
  color: var(--root) !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  padding: 6px 0 !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.btn-more:hover { color: var(--root-dark) !important; gap: 10px !important; }
.car-sum-btn {
  background: var(--clay) !important;
  color: var(--ink) !important;
  border-radius: var(--pill) !important;
  font-weight: 700 !important;
}
.car-sum-btn:hover { background: var(--clay-dark) !important; color: var(--paper) !important; }

.see-more {
  color: var(--root) !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: .88rem !important;
}
.see-more:hover { color: var(--root-dark) !important; }

/* CTA illustration section (index) — replace green illustration with warm gradient */
.cta-illus, section.cta-illus {
  background:
    radial-gradient(ellipse at 20% 30%, rgba(212,165,116,.18) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(212,165,116,.12) 0%, transparent 50%),
    linear-gradient(160deg, #FDF8F0 0%, #F2E8D5 60%, #EAD9BC 100%) !important;
  padding: 80px 5% !important;
}
.cta-illus-inner {
  background: transparent !important;
  min-height: 320px !important;
  position: relative !important;
}
.cta-illus, section.cta-illus {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
.cta-illus-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}
.cta-illus-overlay {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}
.cta-illus-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: 580px !important;
}
.cta-illus-tag {
  background: rgba(139,90,60,.10) !important;
  color: var(--root) !important;
  border-radius: var(--pill) !important;
  padding: 6px 18px !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  font-size: .68rem !important;
  border: 1px solid rgba(139,90,60,.25) !important;
  backdrop-filter: blur(6px) !important;
}
.cta-illus-title {
  font-family: var(--font-head) !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  letter-spacing: -.03em !important;
  font-size: clamp(2rem, 4vw, 3.2rem) !important;
  line-height: 1.05 !important;
}
.cta-illus-title em {
  color: var(--clay) !important;
  font-style: italic !important;
}
.cta-illus-sub {
  color: var(--ink2) !important;
  font-size: 1rem !important;
  max-width: 460px !important;
  margin: 0 auto !important;
}
.cta-illus-btn {
  background: var(--root) !important;
  color: var(--paper) !important;
  border-radius: var(--pill) !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 22px rgba(139,90,60,.28) !important;
  padding: 14px 32px !important;
  font-size: 1rem !important;
}
.cta-illus-btn:hover {
  background: var(--blue-dark) !important;
  color: var(--paper) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(46,22,8,.45) !important;
}

/* ── 8. FILTER CHIPS — pill style, warm ────────────────────── */
.chip {
  border-radius: var(--pill) !important;
  background: var(--paper) !important;
  border: 1.5px solid var(--line) !important;
  color: var(--ink2) !important;
  font-family: var(--font-head) !important;
  font-weight: 600 !important;
  font-size: .88rem !important;
  padding: 9px 18px !important;
  transition: all .18s !important;
}
.chip:hover {
  border-color: var(--root) !important;
  color: var(--root-dark) !important;
  background: var(--blue-light) !important;
}
.chip.active {
  background: var(--root) !important;
  border-color: var(--root) !important;
  color: var(--paper) !important;
}
.nav-search-cat {
  border-radius: var(--pill) !important;
  background: var(--paper) !important;
  border: 1.5px solid var(--line) !important;
}
.nav-search-cat:hover  { border-color: var(--root) !important; color: var(--root-dark) !important; background: var(--blue-light) !important; }
.nav-search-cat.active { background: var(--root) !important; border-color: var(--root) !important; color: var(--paper) !important; }
.nav-search-go { background: var(--root) !important; border-radius: var(--pill) !important; }
.nav-search-go:hover { background: var(--root-dark) !important; }

/* ── 9. CONTENT SIDEBAR ────────────────────────────────────── */
.sidebar {
  background: var(--paper) !important;
  border-radius: 18px !important;
  border: 1px solid var(--line) !important;
  padding: 20px !important;
  box-shadow: var(--s-xs) !important;
}
.sidebar-option {
  border-radius: 12px !important;
  transition: all .16s !important;
}
.sidebar-option:hover { background: var(--blue-light) !important; color: var(--root-dark) !important; }
.sidebar-option.active { background: var(--blue-light) !important; color: var(--root-dark) !important; font-weight: 700 !important; }

/* ── 10. SECTION PRIMITIVES ────────────────────────────────── */
.sec-tag {
  color: var(--root-dark) !important;
  font-family: var(--font-head) !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 16px !important;
  background: var(--blue-light) !important;
  border: 1px solid var(--cream) !important;
  border-radius: var(--pill) !important;
}
.sec-tag::before {
  content: '' !important;
  width: 10px; height: 10px !important;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238B5A3C'><path d='M12 2c-3 4-3 8 0 11 3-3 3-7 0-11z'/></svg>") no-repeat center / contain !important;
}

/* ── 11. FEATURE CARDS ─────────────────────────────────────── */
.value-card, .help-card, .event-card, .cause-card,
.nonprofit-card, .solution-card, .most-loved-card,
.trending-card, .contact-card, .plan-card, .partner-card,
.guarantee-box, .info-card {
  border-radius: 18px !important;
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  transition: box-shadow .24s, transform .24s, border-color .24s !important;
  box-shadow: var(--s-xs) !important;
}
.value-card:hover, .help-card:hover, .contact-card:hover,
.cause-card:hover, .nonprofit-card:hover, .solution-card:hover,
.event-card:hover {
  border-color: var(--clay) !important;
  box-shadow: 0 14px 36px rgba(92,61,38,.14) !important;
  transform: translateY(-4px) !important;
}
.value-icon-wrap, .help-icon-wrap, .contact-icon-wrap {
  background: var(--blue-light) !important;
  color: var(--root) !important;
  border-radius: 16px !important;
  border: 1px solid var(--cream) !important;
  width: 56px !important;
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 18px !important;
}

/* How-card numbers — soft circle with warm accent */
.how-num, .how-card .how-num, .how-grid .how-num {
  background: linear-gradient(135deg, var(--root), var(--root-dark)) !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  color: var(--paper) !important;
  font-family: var(--font-head) !important;
  font-weight: 800 !important;
  font-size: 1.15rem !important;
  box-shadow: 0 6px 18px rgba(139,90,60,.32) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
}

/* ── 12. MISSION / VISUAL BLOCK ────────────────────────────── */
.mission-visual {
  background:
    radial-gradient(circle at 30% 30%, rgba(212,165,116,.25) 0%, transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(155,174,126,.18) 0%, transparent 55%),
    linear-gradient(135deg, var(--root-deep) 0%, var(--bark) 60%, var(--root) 100%) !important;
  border-radius: 24px !important;
  color: var(--paper) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* ── 13. DONATE CARD / SIDEBAR — warm receipt ──────────────── */
.donate-card {
  border-radius: 22px !important;
  overflow: hidden !important;
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 12px 36px rgba(92,61,38,.14) !important;
}
.sidebar-card {
  border-radius: 18px !important;
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--s-sm) !important;
}
.donate-card-header {
  background: linear-gradient(135deg, var(--root-deep) 0%, var(--root) 100%) !important;
  color: var(--paper) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  position: relative !important;
}
.donate-card-header::after {
  content: '' !important;
  position: absolute !important;
  left: 0; right: 0; bottom: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--clay), var(--sage), var(--clay)) !important;
}
.raised-amount { color: var(--ink) !important; font-weight: 800 !important; font-family: var(--font-head) !important; letter-spacing: -.02em !important; }
.amt-btn {
  border-radius: 14px !important;
  background: var(--paper) !important;
  border: 1.5px solid var(--line) !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  transition: all .18s !important;
}
.amt-btn:hover { border-color: var(--root) !important; color: var(--root) !important; background: var(--blue-light) !important; }
.amt-btn.active { background: var(--root) !important; border-color: var(--root) !important; color: var(--paper) !important; box-shadow: 0 4px 12px rgba(139,90,60,.26) !important; }

/* ── 14. PROGRESS BAR (wizard) ─────────────────────────────── */
.ps.done .ps-circle { background: var(--root) !important; border-color: var(--root) !important; color: var(--paper) !important; }
.ps.active .ps-circle { border-color: var(--root) !important; color: var(--root) !important; background: var(--paper) !important; box-shadow: 0 0 0 5px var(--blue-light) !important; }
.ps.done .ps-line { background: var(--root) !important; }
.ps-label.active { color: var(--root) !important; font-weight: 700 !important; }
.progress-bar-fill { background: linear-gradient(90deg, var(--root), var(--clay)) !important; border-radius: var(--pill) !important; }
.progress-header, .form-card, .step-card {
  border-radius: 20px !important;
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--s-xs) !important;
}

/* ── 15. FORMS ─────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="url"],
textarea,
select,
.filter-search {
  background: var(--paper) !important;
  border: 1.5px solid var(--line) !important;
  border-radius: 12px !important;
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
  padding: 12px 16px !important;
  transition: border-color .18s, box-shadow .18s !important;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus,
.filter-search:focus {
  border-color: var(--root) !important;
  box-shadow: 0 0 0 4px rgba(139,90,60,.15) !important;
  outline: none !important;
}
.filter-search {
  border-radius: var(--pill) !important;
  padding: 12px 18px !important;
}

/* ── 16. TABS ──────────────────────────────────────────────── */
.tab:hover  { color: var(--root) !important; }
.tab.active { color: var(--root) !important; border-bottom-color: var(--root) !important; }

/* ── 17. FAQs ──────────────────────────────────────────────── */
.faq-item {
  border-radius: 14px !important;
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  transition: border-color .2s, box-shadow .2s !important;
}
.faq-item.open { border-color: var(--clay) !important; box-shadow: 0 8px 24px rgba(212,165,116,.16) !important; }
.faq-q { color: var(--ink) !important; font-family: var(--font-head) !important; font-weight: 700 !important; }
.faq-icon { color: var(--root) !important; }

/* ── 18. DROPDOWN ──────────────────────────────────────────── */
.dropdown {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-top: 3px solid var(--root) !important;
  border-radius: 0 0 16px 16px !important;
  box-shadow: 0 14px 36px rgba(92,61,38,.14) !important;
}
.dropdown a { border-radius: 10px !important; }
.dropdown a:hover { background: var(--blue-light) !important; color: var(--root-dark) !important; }
.dropdown a:hover::before { background: var(--root) !important; }
.dropdown a.active { background: var(--blue-light) !important; color: var(--root-dark) !important; }
.dropdown a.active::before { background: var(--root) !important; }

/* ── 19. EVENTS ────────────────────────────────────────────── */
.event-card { border-radius: 18px !important; }
.event-date-badge {
  background: linear-gradient(135deg, var(--root), var(--root-dark)) !important;
  color: var(--paper) !important;
  border-radius: 14px !important;
  font-family: var(--font-head) !important;
  box-shadow: 0 4px 14px rgba(139,90,60,.28) !important;
}

/* ── 20. CAUSES ────────────────────────────────────────────── */
.cause-card { border-radius: 18px !important; overflow: hidden !important; }
.cause-icon { color: var(--root) !important; }

/* ── 21. MOST LOVED ────────────────────────────────────────── */
.most-loved-card { border-radius: 18px !important; }
.ml-badge {
  background: linear-gradient(135deg, var(--clay), var(--clay-dark)) !important;
  color: var(--paper) !important;
  border-radius: var(--pill) !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  font-size: .6rem !important;
  padding: 5px 12px !important;
  box-shadow: 0 4px 12px rgba(212,165,116,.36) !important;
  border: none !important;
}

/* ── 22. STATS ─────────────────────────────────────────────── */
.stat-box {
  border-radius: 16px !important;
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--s-xs) !important;
}
.stat-box-val {
  color: var(--root) !important;
  font-family: var(--font-head) !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
}

/* ── 23. CTA BANNER ────────────────────────────────────────── */
.cta-banner, .cta-wrap {
  background:
    radial-gradient(circle at 20% 30%, rgba(212,165,116,.28) 0%, transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(155,174,126,.20) 0%, transparent 55%),
    linear-gradient(135deg, var(--root-deep) 0%, var(--bark) 60%, var(--root) 100%) !important;
  border-radius: 28px !important;
  color: var(--paper) !important;
  position: relative !important;
  overflow: hidden !important;
  border: none !important;
}

/* ── 24. BLOG LAYOUT ───────────────────────────────────────── */
.blog-featured {
  border-radius: 22px !important;
  overflow: hidden !important;
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--s-sm) !important;
}
.blog-cat-tag {
  background: var(--blue-light) !important;
  color: var(--root-dark) !important;
  border-radius: var(--pill) !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  font-size: .62rem !important;
  padding: 5px 12px !important;
  border: 1px solid var(--cream) !important;
}

/* ── 25. STORY / SHARE ─────────────────────────────────────── */
.prot-badge-inner {
  background: var(--blue-light) !important;
  color: var(--root-dark) !important;
  border-radius: 14px !important;
  border: 1px solid var(--cream) !important;
}
.sico {
  border-radius: 12px !important;
  border: 1.5px solid var(--line) !important;
  transition: all .18s !important;
}
.sico:hover { border-color: var(--root) !important; background: var(--blue-light) !important; color: var(--root) !important; }
.btn-reagir.reacted { border-color: var(--root) !important; color: var(--root) !important; background: var(--blue-light) !important; }
.react-total { color: var(--root) !important; font-weight: 800 !important; }

/* ── 26. PAYMENT PAGES ─────────────────────────────────────── */
.payment-success-icon, .success-icon { color: var(--green-dark) !important; }
.payment-fail-icon, .fail-icon       { color: #B04545 !important; }

/* ── 27. SECTION BACKGROUNDS ───────────────────────────────── */
.trending-wrap { background: var(--paper) !important; border-top: 1px solid var(--line) !important; }
.trending-wrap::before { display: none !important; }
.values-section { background: var(--surface) !important; }
.how-wrap { background: var(--paper) !important; }
.how-wrap::after { display: none !important; }

/* ── 28. FOOTER — warm espresso with sanctuary feel ────────── */
footer {
  background: var(--root-deep) !important;
  color: rgba(253,248,240,.55) !important;
  padding: 0 !important;
  position: relative !important;
}
footer::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--clay) 0%, var(--sage) 50%, var(--clay) 100%) !important;
}

.footer-cta-strip {
  background:
    radial-gradient(circle at 20% 50%, rgba(212,165,116,.22) 0%, transparent 60%),
    linear-gradient(135deg, var(--bark) 0%, var(--root) 60%, var(--root-dark) 100%) !important;
  padding: 52px 5% !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 28px !important;
  flex-wrap: wrap !important;
  border-bottom: 1px solid rgba(253,248,240,.08) !important;
  position: relative !important;
}
.footer-cta-strip h3 {
  font-family: var(--font-head) !important;
  font-size: clamp(1.3rem, 2.6vw, 2rem) !important;
  font-weight: 800 !important;
  color: var(--paper) !important;
  letter-spacing: -.028em !important;
}
.footer-cta-strip p {
  font-size: .95rem !important;
  color: rgba(253,248,240,.72) !important;
  margin-top: 8px !important;
}
.footer-cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 16px 34px !important;
  border-radius: var(--pill) !important;
  background: var(--clay) !important;
  color: var(--ink) !important;
  font-family: var(--font-head) !important;
  font-size: .95rem !important;
  font-weight: 800 !important;
  border: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: transform .18s, background .2s, box-shadow .18s !important;
  box-shadow: 0 8px 24px rgba(212,165,116,.38) !important;
}
.footer-cta-btn:hover { background: var(--paper) !important; color: var(--root-dark) !important; transform: translateY(-2px) !important; box-shadow: 0 12px 30px rgba(253,248,240,.28) !important; }

.footer-main { padding: 56px 5% 32px !important; }
.footer-grid {
  display: grid !important;
  grid-template-columns: 1.8fr 1fr 1fr 1fr !important;
  gap: 52px !important;
  margin-bottom: 40px !important;
  align-items: start !important;
}
.footer-brand { position: relative !important; }
.footer-brand::before { display: none !important; }
.footer-brand > img {
  display: block !important;
  width: 200px !important;
  height: auto !important;
  background: none !important;
  margin-bottom: 18px !important;
  opacity: .96 !important;
  filter: brightness(1.1) !important;
}
.footer-brand-desc,
.footer-brand p {
  font-size: .9rem !important;
  line-height: 1.75 !important;
  color: rgba(253,248,240,.55) !important;
  margin: 0 0 20px !important;
  max-width: 300px !important;
}
.footer-col h4 {
  font-family: var(--font-head) !important;
  font-size: .66rem !important;
  font-weight: 700 !important;
  color: var(--clay) !important;
  text-transform: uppercase !important;
  letter-spacing: .24em !important;
  margin-bottom: 20px !important;
}
.footer-col ul { list-style: none !important; }
.footer-col li { margin-bottom: 12px !important; }
.footer-col a {
  color: rgba(253,248,240,.72) !important;
  font-family: var(--font-head) !important;
  font-size: .9rem !important;
  font-weight: 500 !important;
  transition: color .18s, padding-left .18s !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
}
.footer-col a::before {
  content: '' !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: rgba(253,248,240,.3) !important;
  flex-shrink: 0 !important;
  transition: background .18s, transform .18s !important;
}
.footer-col a:hover { color: var(--paper) !important; padding-left: 3px !important; }
.footer-col a:hover::before { background: var(--clay) !important; transform: scale(1.6); }

.footer-brand-meta {
  font-size: .72rem !important;
  color: rgba(253,248,240,.4) !important;
  margin: 10px 0 4px !important;
  letter-spacing: .04em !important;
  line-height: 1.6 !important;
}

.footer-bottom {
  border-top: 1px solid rgba(253,248,240,.1) !important;
  padding: 24px 5% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: .78rem !important;
  color: rgba(253,248,240,.5) !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.footer-bottom-links { display: flex !important; gap: 22px !important; flex-wrap: wrap !important; }
.footer-bottom-links a {
  color: rgba(253,248,240,.5) !important;
  font-size: .78rem !important;
  transition: color .18s !important;
  text-decoration: none !important;
}
.footer-bottom-links a:hover { color: var(--paper) !important; }
.footer-social { display: none !important; }

/* ── 29. NONPROFIT PAGES ───────────────────────────────────── */
.np-feature-card, .feat-card {
  border-radius: 18px !important;
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
}
.np-stat-val { color: var(--root) !important; font-family: var(--font-head) !important; font-weight: 800 !important; letter-spacing: -.02em !important; }
.plan-card {
  border-radius: 20px !important;
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  transition: all .22s !important;
}
.plan-card:hover { border-color: var(--root) !important; box-shadow: 0 14px 36px rgba(92,61,38,.14) !important; transform: translateY(-3px) !important; }
.plan-btn {
  background: var(--root) !important;
  color: var(--paper) !important;
  border-radius: var(--pill) !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 18px rgba(139,90,60,.32) !important;
}
.plan-btn:hover { background: var(--root-dark) !important; transform: translateY(-2px) !important; box-shadow: 0 10px 26px rgba(139,90,60,.42) !important; }
.plan-btn.featured { background: var(--clay) !important; color: var(--ink) !important; box-shadow: 0 6px 18px rgba(212,165,116,.38) !important; }
.plan-btn.featured:hover { background: var(--clay-dark) !important; color: var(--paper) !important; }

/* ── 30. HELP CENTER ───────────────────────────────────────── */
.help-search-btn, .search-go {
  background: var(--root) !important;
  color: var(--paper) !important;
  border-radius: var(--pill) !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
}
.help-search-btn:hover, .search-go:hover { background: var(--root-dark) !important; }

/* ── 31. CONTACT ───────────────────────────────────────────── */
.contact-form-submit {
  background: var(--root) !important;
  color: var(--paper) !important;
  border-radius: var(--pill) !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 18px rgba(139,90,60,.32) !important;
  transition: transform .18s, background .2s, box-shadow .18s !important;
}
.contact-form-submit:hover { background: var(--root-dark) !important; transform: translateY(-2px) !important; box-shadow: 0 10px 26px rgba(139,90,60,.42) !important; }

/* ── 32. CAROUSEL / CAMP DETAIL ────────────────────────────── */
.car-wrap { border-radius: 18px !important; }
.camp-wrap, .page-wrap { max-width: 1080px !important; }

/* ── 33. RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 1100px) {
  .footer-grid { gap: 36px !important; }
}
@media (max-width: 900px) {
  .footer-cta-strip { flex-direction: column; align-items: flex-start; gap: 16px; padding: 40px 5%; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
  .page-header { padding: 56px 5% 64px !important; }
  .hero { padding: 56px 5% 100px !important; min-height: auto !important; }
  .hero h1, .hero-h1 { font-size: clamp(2rem, 7vw, 3rem) !important; }
}
@media (max-width: 768px) {
  .cta-illus { display: none !important; }

  nav {
    display: flex !important;
    grid-template-columns: unset !important;
    height: 72px !important;
    min-height: 72px !important;
    padding: 0 4% !important;
    justify-content: space-between !important;
  }
  nav .logo {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    justify-self: unset !important;
  }
  nav .logo-img { height: 60px !important; }
  nav .nav-links { display: none !important; }
  nav .nav-actions { display: none !important; }
  nav .hamburger { display: flex !important; margin-left: auto !important; width: 44px !important; height: 44px !important; }
  .filter-bar { top: 72px !important; }

  .hero-side { display: none !important; }
  .hero { min-height: auto !important; padding: 44px 5% 80px !important; }
  .hero-center { max-width: 100% !important; text-align: center; }

  .section, .trending-wrap, .urgent-section, .values-section, .how-wrap { padding: 56px 5% !important; }
  .dcf-grid, .dcs-grid { grid-template-columns: 1fr !important; }
  .discover-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .footer-main { padding: 40px 5% 28px !important; }
  .footer-cta-strip { padding: 32px 5% !important; }
  .footer-bottom { flex-direction: column; gap: 10px; font-size: .72rem !important; align-items: flex-start !important; }
  .footer-cta-strip { display: none !important; }
  .discover-grid { grid-template-columns: 1fr !important; }
  .hero-center::after { font-size: .58rem !important; letter-spacing: .18em !important; }
  .ahs-item { flex: 1 1 50% !important; }
}