/* ==========================================================================
   1. VARIABLES & RESET
   ========================================================================== */
:root {
  --primary: #e5c6a8;
  --dark-bg: #111;
  --light-text: #fff;
  --dark-text: #222;
  --header-height: 80px;
  --footer-height: 80px;
  --transition: 0.3s ease;
}
*, *::before, *::after {
  margin: 0; padding: 0;
  box-sizing: border-box;
}
html { scroll-behavior: smooth; }
body {
  font-family: 'Poppins', sans-serif;
  background: var(--dark-bg);
  color: var(--light-text);
  min-height: 100vh;
  padding-top: var(--header-height);
  padding-bottom: var(--footer-height);
  overflow-x: hidden;
  position: relative;
}
a {
  color: inherit;
  text-decoration: none;
  position: relative;
}
img { display: block; max-width: 100%; height: auto; }

/* ==========================================================================
   2. FIXED HEADER & FOOTER
   ========================================================================== */
header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-height);
  background: var(--dark-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  z-index: 1000;
}
.logo {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 2px;
}
footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--footer-height);
  background: var(--dark-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  z-index: 1000;
}
footer p {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}
footer .social a {
  margin: 0 0.5rem;
  font-weight: 500;
  transition: color var(--transition);
}
footer .social a:hover {
  color: var(--primary);
}

/* ==========================================================================
   3. NAVIGATION & MOBILE MENU
   ========================================================================== */
.nav-list {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}
.nav-list li { position: relative; }
.nav-list a {
  padding: 0.5rem;
  font-weight: 500;
  transition: color var(--transition);
}
.nav-list a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 2px;
  background: var(--primary);
  transition: width var(--transition);
}
.nav-list a:hover::after { width: 100%; }
.btn-donate, .btn {
  background: var(--primary);
  color: var(--dark-bg);
  padding: 0.7rem 1.5rem;
  border-radius: 4px;
  font-weight: 600;
  transition: transform var(--transition), opacity var(--transition);
}
.btn-donate:hover, .btn:hover {
  transform: scale(1.05);
  opacity: 0.9;
}
.hamburger {
  display: none;
  font-size: 1.5rem;
  cursor: pointer;
}
@media (max-width: 768px) {
  .nav-list {
    position: absolute;
    top: var(--header-height);
    right: 2rem;
    flex-direction: column;
    background: var(--dark-bg);
    padding: 1rem;
    border-radius: 8px;
    width: 220px;
    display: none;
  }
  .nav-list.show { display: flex; }
  .hamburger { display: block; }
}

/* ==========================================================================
   4. SCROLL CONTAINER
   ========================================================================== */
[data-scroll-container] {
  overflow: hidden; /* Locomotive Scroll container */
  position: relative;
}

/* ==========================================================================
   5. GLOBAL CONTAINERS & REVEAL UTILITY
   ========================================================================== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   6. HERO SECTION
   ========================================================================== */
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  flex-wrap: wrap;
}
.hero-text, .hero-image {
  opacity: 0;
  transform: translateY(30px);
}
.hero-text.visible, .hero-image.visible {
  opacity: 1;
  transform: none;
}
.hero-text { flex: 1 1 45%; }
.hero-text h1 {
  font-size: 3.5rem;
  line-height: 1.2;
  margin-bottom: 1rem;
}
.hero-text p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}
.hero-image {
  flex: 1 1 50%;
  text-align: center;
}
.hero-image img {
  width: 100%;
  max-width: 600px;
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.3);
}
/* ───────────────────────────────────────────────────────
   BLURRED BACKGROUND HERO
/* ───────────────────────────────────────────────────────
   HERO (with blurred full‑bleed background & taller height)
──────────────────────────────────────────────────────── */
.homepage-hero.blurred-hero {
  position: relative;
  overflow: hidden;
  /* make the section at least 90% of the viewport height */
  min-height: 90vh;
  /* or use a fixed height like height: 800px; */
  padding: 2rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.homepage-hero.blurred-hero .container {
  position: relative;  /* sit on top of the ::before */
  z-index: 1;
  text-align: center;
}

.homepage-hero.blurred-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("images/Homepage.jpg") center/cover no-repeat;
  /* blur + darken */
  filter: blur(3.4px) brightness(0.85);
  /* slight scale so edges don’t peek */
  transform: scale(1.05);
  z-index: 0;
}


/* ==========================================================================
   7. CARD LAYOUT & HOVER
   ========================================================================== */
.card {
  background: var(--light-text);
  color: var(--dark-bg);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 24px rgba(0,0,0,0.25);
}
.card img {
  width: 100%;
  object-fit: cover;
}



/* ==========================================================================
   9. MISSION SECTION
   ========================================================================== */
.mission-section {
  display: flex;
  gap: 4rem;
  flex-wrap: wrap-reverse;
  margin: 3rem 0;
}
.mission-image-large {
  flex: 1 1 55%;
}
.mission-text {
  flex: 1 1 40%;
}
.mission-text h2 {
  font-size: 3rem;
  color: var(--primary);
  margin-bottom: 1rem;
}
.mission-text p {
  margin-bottom: 1rem;
  line-height: 1.6;
  font-size: 1.1rem;
}

/* ==========================================================================
   10. TEAM SECTION (2×2 GRID)
   ========================================================================== */
.team-section {
  text-align: center;
  margin: 3rem 0;
}
.team-section > h1 {
  font-size: clamp(4rem, 7vw, 5rem);
  margin-bottom: 1.5rem;
  line-height: 1.1;
}
.team-section .card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1rem;
}
.team-section .card img {
  height: 180px;
  object-fit: cover;
}
.team-section .card h3,
.team-section .card p {
  padding: 0 1rem;
}

/* ==========================================================================
   11. SERVICES SECTION
   ========================================================================== */
.services-section {
  margin: 3rem 0;
}
.services-section h2 {
  text-align: center;
  font-size: 2.75rem;
  color: var(--primary);
  margin-bottom: 2rem;
}
.services-section ul {
  list-style: disc inside;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ==========================================================================
   12. GET INVOLVED SECTION
   ========================================================================== */
.involved-section {
  margin: 3rem auto;
  max-width: 800px;
}
.involved-section h2 {
  text-align: center;
  color: var(--primary);
  font-size: 2.75rem;
  margin-bottom: 1.5rem;
}
.info-form {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}
.info {
  flex: 1 1 45%;
}
.involved-section .contact-form {
  flex: 1 1 45%;
}
.two-col {
  display: flex;
  gap: 1rem;
}
.two-col label {
  flex: 1;
}
label {
  font-weight: 500;
  display: flex;
  flex-direction: column;
}
input, textarea {
  width: 100%;
  padding: 0.75rem;
  border: none;
  border-radius: 4px;
  margin-top: 0.25rem;
  font-family: inherit;
  font-size: 1rem;
}

/* ==========================================================================
   13. LOGIN SECTION
   ========================================================================== */
.login-section {
  margin: 4rem 0;
}
.login-section h1 {
  text-align: center;
  color: var(--primary);
  font-size: clamp(3rem, 6vw, 5rem);
  margin-bottom: 2rem;
}
.login-form {
  max-width: 400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.login-buttons {
  display: flex;
  gap: 1rem;
}
.btn-cancel {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: transparent;
  border: 2px solid var(--primary);
  border-radius: 4px;
  color: var(--primary);
  font-weight: 600;
  text-align: center;
  transition: background var(--transition), color var(--transition);
}
.btn-cancel:hover {
  background: var(--primary);
  color: var(--dark-bg);
}

/* ==========================================================================
   14. CONTACT SECTION
   ========================================================================== */
.contact-section {
  margin: 4rem 0;
}
.contact-section h1 {
  text-align: center;
  font-size: 3rem;
  margin-bottom: 2rem;
}


.contact-content {
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
}
.contact-info {
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}
.info-list {
  list-style: none;
  margin: 1rem 0;
}
.info-list li {
  margin-bottom: 0.75rem;
  line-height: 1.4;
}
.socials {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.socials a {
  padding: 0.6rem 1rem;
  background: var(--primary);
  color: var(--dark-bg);
  font-weight: 600;
  text-align: center;
  border-radius: 4px;
  transition: transform var(--transition), opacity var(--transition);
}
.socials a:hover {
  transform: scale(1.05);
  opacity: 0.9;
}
.contact-form {
  flex: 1 1 0;
}
.contact-form form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.btn-submit {
  align-self: flex-start;
  padding: 0.75rem 2rem;
  background: var(--primary);
  color: var(--dark-bg);
  border: none;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--transition), opacity var(--transition);
}
.btn-submit:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

/* ==========================================================================
   15. BUTTON TILT & BOUNCE
   ========================================================================== */
.btn-tilt {
  display: inline-block;
  transform-style: preserve-3d;
  perspective: 800px;
  transition: transform 0.3s ease;
}
.btn-tilt:hover {
  transform: perspective(800px) rotateX(4deg) rotateY(4deg) scale(1.03);
}
@keyframes buttonBounce {
  0%,20%,50%,80%,100% { transform: translateY(0); }
  40% { transform: translateY(-8px); }
  60% { transform: translateY(-4px); }
}
.btn-bounce {
  animation: buttonBounce 2s infinite ease;
}
.btn-bounce:hover {
  animation: buttonBounce 0.6s ease;
}

/* ==========================================================================
   16. RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width: 1024px) {
  .hero { flex-direction: column-reverse; }
  .hero-image img, .hero-text { max-width: 90%; }
}
@media (max-width: 900px) {
  .mission-section { flex-direction: column; gap: 2rem; }
}
@media (max-width: 768px) {
  .info-form,
  .contact-content,
  .login-form { flex-direction: column; }
  .contact-info, .contact-form, .team-section .card-grid { width: 100%; }
  .two-col { flex-direction: column; }
}
/* ─── CONTACT IMAGE & SPACING TWEAKS ─── */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;            /* less vertical white space */
  flex: 0 0 260px;      /* fixed sidebar width */
}

.contact-info .contact-img {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
  margin-bottom: 0.75rem;
}

/* tighten up the gap between columns */
.contact-content {
  display: flex;
  gap: 2rem;            /* smaller than before */
  flex-wrap: wrap;
}

/* keep form and sidebar closer on desktop */
@media (min-width: 900px) {
  .contact-content {
    gap: 1.5rem;
  }
}
/* ----- LEFT SIDEBAR LAYOUT ----- */
.contact-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1rem;               /* consistent spacing */
  flex: 0 0 260px;         /* fixed sidebar width */
}

.contact-img {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
}

/* push socials to the very bottom of the column */
.socials {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}

/* style each social link as a pill */
.socials a {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--primary);
  color: var(--dark-bg);
  border-radius: 4px;
  font-weight: 600;
  transition: transform var(--transition), opacity var(--transition);
}
.socials a:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

/* tighten up overall contact layout */
.contact-content {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}
@media (min-width: 900px) {
  .contact-content {
    gap: 1.5rem;
  }
}
/* ==========================================================================
   CONTACT PAGE — CLEANED UP STYLES
   ========================================================================== */
.contact-section {
  margin: 4rem 0;
}
.contact-section h1 {
  text-align: center;
  color: var(--primary);
  font-size: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: 2rem;
}

.contact-content {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* ─── SIDEBAR ─── */
.contact-info {
  flex: 0 0 300px;            /* fixed sidebar width */
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.contact-img {
  width: 100%;
  max-height: 300px;          /* dog photo height limit */
  border-radius: 8px;
  object-fit: cover;
}
.contact-info h2 {
  margin: 0;
  font-size: 1.75rem;
}
.info-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.info-list li {
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

/* push socials to bottom */
.socials {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.socials a {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--primary);
  color: var(--dark-bg);
  border-radius: 4px;
  font-weight: 600;
  text-align: center;
  transition: transform var(--transition), opacity var(--transition);
}
.socials a:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

/* ─── FORM ─── */
.contact-form {
  flex: 1 1 0;
  min-width: 300px;
}
.contact-form form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.two-col {
  display: flex;
  gap: 1rem;
}
.two-col label,
.contact-form label {
  display: flex;
  flex-direction: column;
  font-weight: 500;
}
.contact-form input,
.contact-form textarea {
  margin-top: 0.5rem;
  padding: 0.75rem;
  border: none;
  border-radius: 4px;
  font-family: inherit;
  font-size: 1rem;
}
.btn-submit {
  align-self: flex-start;
  background: var(--primary);
  color: var(--dark-bg);
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--transition), opacity var(--transition);
}
.btn-submit:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

/* ─── RESPONSIVE COLLAPSE ─── */
@media (max-width: 900px) {
  .contact-content {
    flex-direction: column;
    gap: 1.5rem;
  }
  .contact-info,
  .contact-form {
    flex: 1 1 100%;
  }
}
/* ─── TIDY UP SIDEBAR SOCIAL BUTTONS ─── */
.socials {
  display: flex;
  flex-direction: column;
  gap: 1rem;              /* a bit more breathing room */
  margin-top: auto;       /* still push to bottom */
}

.socials a {
  display: block;         /* full‐width pills */
  width: 100%;
  max-width: 260px;       /* match your sidebar width */
  padding: 0.75rem 1.25rem;
  background: var(--primary);
  color: var(--dark-bg);
  border-radius: 999px;   /* fully pill‑shaped */
  font-weight: 600;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: background var(--transition), transform var(--transition);
}

.socials a:hover {
  background: var(--light-text);
  color: var(--dark-bg);
  transform: translateX(4px);  /* subtle slide on hover */
}
/*  ── Make the <a> wrapping each card act like a block ── */
.card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* ==========================================================================
   TEAM BIO SECTIONS
   ========================================================================== */

/* Each bio sits in its own padded “row” and can be jumped to via its ID */
.bio-section {
  /* push content below fixed header & leave bottom gap */
  padding: calc(var(--header-height) + 1rem) 1rem 3rem;
  scroll-margin-top: var(--header-height);
  max-width: 800px;
  margin: 0 auto;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* Highlight briefly when targetted via #anchor */
.bio-section:target {
  animation: highlight 1s ease-in-out forwards;
}
@keyframes highlight {
  from { background: rgba(229,198,168,0.2); }
  to   { background: transparent; }
}

/* Flex wrapper: image + text */
.bio-content {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap; /* stacks on mobile */
}

/* ── IMAGE COLUMN ── */
.bio-img {
  flex: 0 0 300px;  /* fixed width */
}
.bio-img img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* ── TEXT COLUMN ── */
.bio-text {
  flex: 1 1 auto;   /* fill remaining space */
}
.bio-text h2 {
  font-size: 2.25rem;
  color: var(--primary);
  margin-bottom: 0.5rem;
}
.bio-text em {
  display: block;
  font-style: italic;
  color: var(--primary);
  margin-bottom: 1rem;
}
.bio-text p {
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* ── STACK ON NARROW SCREENS ── */
@media (max-width: 768px) {
  .bio-content {
    flex-direction: column;
    gap: 1.5rem;
  }
  .bio-img,
  .bio-text {
    flex: 1 1 auto;
  }
}
/* ==========================================================================
   PROFILE SECTIONS (Meet Our Pups detail panels)
   — clicking a card (href="#name") will smooth‑scroll here, just below the fixed header
   ========================================================================== */
.profile-section {
  /* ensure it never hides under the fixed header */
  scroll-margin-top: var(--header-height);
  /* extra top padding so content isn’t jammed under the header */
  padding-top: calc(var(--header-height) + 1rem);
  margin: 4rem 0;        /* space before/after each profile */
}

/* two‑column layout: image + text */
.profile-content {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;       /* will stack on narrow screens */
  max-width: 1000px;
  margin: 0 auto;        /* center within page */
}

.profile-img {
  flex: 0 0 300px;       /* fixed image column width */
}
.profile-img img {
  width: 100%;
  max-height: 350px;     /* prevent runaway size */
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

.profile-text {
  flex: 1 1 calc(100% - 300px);
}
.profile-text h2 {
  font-size: 2.5rem;
  color: var(--primary);
  margin-bottom: 0.5rem;
}
.profile-text em {
  display: block;
  margin-bottom: 1rem;
  font-style: italic;
  color: #ddd;
}
.profile-text p {
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* brief highlight animation when landed via its anchor */
.profile-section:target {
  animation: highlight 1s ease-in-out forwards;
}
@keyframes highlight {
  from { background: rgba(229,198,168,0.2); }
  to   { background: transparent; }
}

/* stack image above text on small screens */
@media (max-width: 768px) {
  .profile-content {
    flex-direction: column;
  }
  .profile-img,
  .profile-text {
    flex: 1 1 100%;
  }
}




/* ==========================================================================
   TEAM SECTION — STATIC 2×2 GRID (NO CAROUSEL)
   ========================================================================== */
.team-section .card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 900px;
  margin: 2rem auto 4rem;   /* center and space top/bottom */
  overflow: visible;        /* ensure nothing is clipped */
  animation: none !important; /* kill any leftover scrolling animation */
}

/* make each card a regular flex‑column box */
.team-section .card {
  display: flex;
  flex-direction: column;
  background: var(--light-text);
  color: var(--dark-bg);
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  overflow: hidden;
  text-decoration: none;
}

/* fixed image height so cards stay consistent */
.team-section .card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  flex-shrink: 0;
}

/* card text padding */
.team-section .card h3,
.team-section .card p {
  margin: 0 1rem;
}

/* title sits just above the bottom padding */
.team-section .card h3 {
  margin-top: 1rem;
  font-size: 1.25rem;
}

/* smaller description text */
.team-section .card p {
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
  font-weight: 400;
}

/* collapse to one column on narrow screens */
@media (max-width: 768px) {
  .team-section .card-grid {
    grid-template-columns: 1fr;
  }
}
/* TEAM SECTION — STATIC 2×2 GRID */
.team-section .team-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 900px;
  margin: 2rem auto 4rem;
  overflow: visible;
  animation: none;
}

@media (max-width: 768px) {
  .team-section .team-card-grid {
    grid-template-columns: 1fr;
  }
}
/* ── EVENTS HERO ── */
.events-hero {
  display: flex; flex-wrap: wrap-reverse;
  align-items: center;
  padding: 2rem 1rem;
}
.events-hero .hero-text {
  flex: 1 1 320px;
  padding: 1rem;
}
.events-hero .hero-text h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}
.events-hero .hero-text p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}
.events-hero .hero-image {
  flex: 1 1 320px;
  text-align: center;
  padding: 1rem;
}
.events-hero .hero-image img {
  max-width: 100%;
  border-radius: 8px;
}

/* ── EVENTS CARD GRID ── */
.events-list {
  background: var(--primary);
  color: var(--dark-bg);
  padding: 3rem 1rem;
}
.events-list h2 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 2rem;
}
.events-list .card-grid,
.pups .card-grid {
  display: grid;
  grid-template-columns: repeat(auto‑fit, minmax(280px, 1fr));
  gap: 1.5rem;
  overflow-x: visible;
  white-space: normal;
}

.events-list .card {
  width: 280px;
  background: var(--light-bg);
  color: var(--text-dark);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  text-decoration: none;
  transition: transform var(--transition),
              box-shadow var(--transition);
}
.events-list .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.events-list .card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.events-list .card-body {
  padding: 1rem;
}
.events-list .card-body h3 {
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}
.events-list .card-body p {
  font-size: 0.95rem;
  opacity: 0.75;
}

/* ── EVENT DETAIL PANELS ── */
.event-detail {
  background: var(--dark-bg);
  color: var(--text-light);
  padding: calc(var(--header-height) + 2rem) 1rem 3rem;
}
.event-detail h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}
.event-detail p {
  margin-bottom: 0.75rem;
  line-height: 1.5;
}
.btn-back {
  display: inline-block;
  margin-top: 1rem;
  color: var(--primary);
  text-decoration: none;
  transition: opacity var(--transition);
}
.btn-back:hover {
  opacity: 0.8;
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .events-hero { flex-direction: column; }
  .events-list .card { width: 100%; max-width: 400px; }
}
/* ── SERVICES SECTION ───────────────────────────────────────────── */
.services-section {
  padding: 4rem 1rem;
}
.services-section h1 {
  text-align: center;
  font-size: 3rem;
  color: var(--primary);
  margin-bottom: 2rem;
}

/* grid of cards, responsive */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

/* card base */
.service-card {
  background: var(--light-text);
  color: var(--dark-bg);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.1);
  transition: transform var(--transition), box-shadow var(--transition);
  cursor: default;
}

/* hover effect */
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

/* small screens: one column */
@media (max-width: 600px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
}
/* ==========================================================================
   Services Section
   ========================================================================== */
.services-section {
  max-width: 1200px;          /* cap the overall width */
  margin: 0 auto;             /* center on the page */
  padding: 4rem 1rem;         /* breathing room top/bottom and sides */
  text-align: center;         /* center the heading */
}

.services-section h1 {
  font-size: 3rem;
  margin-bottom: 2rem;
  color: var(--light-text);
}

/* grid of cards */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  align-items: stretch;       /* make all cards the same height */
}

/* individual card styling */
.service-card {
  background: var(--light-bg);
  border-radius: 8px;
  padding: 2rem 1.5rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background-color 0.3s ease;
  text-align: left;
}

/* give each card a subtle accent color */
.service-card:nth-child(1) { --card-accent: rgba(229,198,168,0.2); }
.service-card:nth-child(2) { --card-accent: rgba(168,229,198,0.2); }
.service-card:nth-child(3) { --card-accent: rgba(198,168,229,0.2); }
.service-card:nth-child(4) { --card-accent: rgba(229,168,198,0.2); }
.service-card:nth-child(5) { --card-accent: rgba(198,229,168,0.2); }

/* apply accent on hover */
.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
  background-color: var(--card-accent);
}

/* card title & body */
.service-card h3 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  color: var(--primary);
}

.service-card p {
  margin: 0;
  line-height: 1.5;
  color: var(--dark-bg);
}

/* responsive tweaks */
@media (max-width: 600px) {
  .services-section h1 {
    font-size: 2.25rem;
  }
  .service-card {
    padding: 1.5rem 1rem;
  }
}
/* center the section title */
.services-section h1 {
  text-align: center;
  margin-bottom: 2rem;
}

/* enforce a nice responsive grid */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto 4rem;
}

/* base card styling (applies to all service-card, including Events) */
.service-card {
  background-color: var(--light-text);
  color: var(--dark-bg);
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: 
    transform 0.3s ease, 
    box-shadow 0.3s ease, 
    background-color 0.3s ease;
}

/* hover state for every card */
.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
  /* optional accent if you want a little color change: */
  /* background-color: rgba(229,198,168,0.2); */
}

/* ensure your headings inside cards look tight */
.service-card h3 {
  margin-bottom: 0.75rem;
}
/* ――― About “Background” Section ――― */
.about-background {
  text-align: center;                /* center the heading & paragraphs */
  max-width: 800px;                  /* cap the width for easy reading */
  margin: 4rem auto;                 /* vertical spacing + center block */
  padding: 0 1rem;                   /* small side padding on mobile */
}
.about-background h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: var(--primary);
}
.about-background p {
  line-height: 1.6;
  margin-bottom: 1rem;
  color: #ddd;
}

/* ――― Team Grid ――― */
.team-section h2 {
  text-align: center;
  margin-bottom: 2rem;
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto 4rem;              /* center + space below */
}
.team-grid .card {
  padding: 1.5rem;
  border-radius: 8px;
  background: var(--light-text);
  color: var(--dark-bg);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.team-grid .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.25);
}

/* ensure your container class centers content too: */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}
/* ── FORCE 4‑COLUMN LAYOUT FOR TEAM CARDS ── */
.team-section .team-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(250px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;     /* center the whole grid */
}

/* collapse to one column on small screens */
@media (max-width: 768px) {
  .team-section .team-grid {
    grid-template-columns: 1fr !important;
  }
}
/* ── TEAM SECTION — FORCE 4‑COLUMN GRID ── */
.team-section .team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* exactly 4 columns */
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* single‑column on narrow screens */
@media (max-width: 768px) {
  .team-section .team-grid {
    grid-template-columns: 1fr;
  }
}
/* ── TEAM SECTION — FORCE 4‑COLUMN GRID WITH FIXED‑HEIGHT CARDS ── */
.team-section .team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);  /* always 4 columns */
  gap: 2rem;
  max-width: 1200px;                      /* adjust to whatever max you like */
  margin: 0 auto;                         /* center the grid */
}

.team-section .team-grid .card {
  background: var(--light-text);
  color: var(--dark-bg);
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 240px;        /* fixed height for all cards */
  text-align: center;
}

/* collapse to one column on narrow screens, let height be auto */
@media (max-width: 768px) {
  .team-section .team-grid {
    grid-template-columns: 1fr;
  }
  .team-section .team-grid .card {
    height: auto;
  }
}
/* ── TEAM SECTION — BIGGER CARDS + PHOTO AREA ── */
.team-section .team-grid {
  display: grid;
  /* flexible 4‑column layout that shrinks to fit */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2.5rem;            /* more breathing room */
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem 0;
}

.team-section .team-grid .card {
  background: var(--light-text);
  color: var(--dark-bg);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem;
  /* make all cards the same minimum height */
  min-height: 360px;
}

/* if you include an <img> in each card, this reserves its space */
.team-section .team-grid .card img {
  width: 100%;
  max-height: 160px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 1rem;
}

/* card title & role spacing */
.team-section .team-grid .card h3 {
  margin: 0.5rem 0 0.25rem;
  font-size: 1.25rem;
}
.team-section .team-grid .card p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
}

/* MOBILE: stack into one or two columns */
@media (max-width: 768px) {
  .team-section .team-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
  }
  .team-section .team-grid .card {
    min-height: auto;
  }
}
/* ── MEET THE TEAM (static 4‑column grid) ── */
.team-section {
  padding: 4rem 0;
}
.team-section h2 {
  text-align: center;
  margin-bottom: 2rem;
}

/* strictly target team‑grid only */
.team-section .team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  max-width: 1280px;    /* or whatever fits your design */
  margin: 0 auto;       /* center it */
  justify-items: center;/* center each card in its cell */
}

/* force the cards to be full‑width of the grid cell */
.team-section .team-grid .card-link {
  display: block;
  width: 100%;
  text-decoration: none;
}

/* style each card */
.team-section .team-grid .card {
  background: var(--light-text);
  color: var(--dark-bg);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  padding: 1.5rem;
  text-align: center;
  /* fixed height so all match */
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* hover lift */
.team-section .team-grid .card-link:hover .card {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.2);
}

/* make room for a headshot if you like */
.team-section .team-grid .card img {
  width: 100%;
  max-height: 140px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 1rem;
}

/* MOBILE: collapse to 2 columns, then 1 */
@media (max-width: 1024px) {
  .team-section .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .team-section .team-grid {
    grid-template-columns: 1fr;
  }
}

/* ensure the pups carousel animation only lives on .pups */


/* ── kill the horizontal scroll & wrap cards into rows ── */
.pups .card-grid {
  display: grid;
  grid-template-columns: repeat(auto‑fit, minmax(280px, 1fr));
  gap: 1.5rem;
  overflow-x: visible;   /* don’t allow sideways scrolling */
  white-space: normal;    /* ensure items can wrap */
}


.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.2);
}
/* ————————————————————————————————
/* ── OUR STORY TWO‑COLUMN LAYOUT ── */
.our-story {
  padding: 4rem 1rem;
  max-width: 1100px;
  margin: 4rem auto;
  color: var(--light-text);
}
.our-story h2 {
  font-size: 3rem;
  color: var(--primary);
  text-align: center;
  margin-bottom: 2rem;
  opacity: 0;
  transform: translateY(-20px);
}
.reveal.visible .our-story h2 {
  animation: fadeSlideDown 0.8s ease-out forwards;
}

.story-content {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap-reverse;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible .story-content {
  opacity: 1;
  transform: none;
}

.story-text {
  flex: 1 1 350px;
  font-size: 1.125rem;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
}

.story-image {
  flex: 1 1 300px;
  text-align: center;
}
.story-image img {
  width: 100%;
  max-width: 400px;
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.3);
}

/* Animations */
@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* MOBILE */
@media (max-width: 768px) {
  .story-content {
    flex-direction: column;
    gap: 1.5rem;
  }
  .story-text {
    text-align: center;
  }
}
/* ─── Our Story Section ─── */
.our-story {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  max-width: 1200px;
  margin: 4rem auto;
  padding: 2rem 1rem;
  background: var(--dark-bg);
}

/* Image column */
.our-story .story-img {
  flex: 0 0 40%;
  max-width: 400px;
}
.our-story .story-img img {
  width: 100%;
  display: block;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 8px 16px rgba(0,0,0,0.3);
}

/* Text column */
.our-story .story-text {
  flex: 1;
  color: var(--light-text);
  text-align: right;
}

/* Heading */
.our-story h2 {
  font-size: clamp(2.5rem, 6vw, 3rem);
  color: var(--primary);
  margin-bottom: 1rem;
  /* keep the h2 centered between both columns */
  text-align: center;
}

/* Paragraphs */
.our-story .story-text p {
  font-size: 1.125rem;
  line-height: 1.7;
  margin-bottom: 1rem;
  max-width: 600px;
  margin-left: auto;   /* push the text block to the right */
}

/* Responsive: stack on narrow screens */
@media (max-width: 768px) {
  .our-story {
    flex-direction: column-reverse;
    text-align: center;
  }
  .our-story .story-text p {
    margin-left: 0;
  }
  .our-story .story-img {
    max-width: 100%;
    margin-bottom: 1.5rem;
  }
}
/* ── Our Work — Bigger Cards ── */
.work-section {
  padding: 4rem 1rem;
}

.work-section h2 {
  text-align: center;
  font-size: clamp(3rem, 6vw, 5rem);
  margin-bottom: 2.5rem;
  color: var(--light-text);
}

/* force a responsive 3‑column layout that scales up */
.work-section .work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 2.5rem;
  max-width: 1200px;
  margin: 0 auto 4rem;
  padding: 0 1rem;
}

/* enlarge the cards */
.work-section .card {
  background: var(--light-text);
  color: var(--dark-bg);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  padding: 2rem 1.5rem;
  min-height: 300px;             /* make them taller */
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Bigger title inside each card */
.work-section .card h3 {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
  color: var(--primary);
}

/* Slightly larger body copy */
.work-section .card p {
  font-size: 1.125rem;
  line-height: 1.6;
}

/* hover lift */
.work-section .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.2);
}

/* collapse gracefully on small screens */
@media (max-width: 600px) {
  .work-section .work-grid {
    grid-template-columns: 1fr;
  }
}
/* ──────────────────────────────────────────────────────────────────── */
/*                         HERO COMPONENT                             */
/* ──────────────────────────────────────────────────────────────────── */
.hero {
  padding: 4rem 1rem;
}
.hero__inner {
  display: flex;
  align-items: center;
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}
/* text block */
.hero__text {
  flex: 1 1 400px;
  color: var(--light-text);
}
.hero__text h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  margin-bottom: 1rem;
}
.hero__text p {
  font-size: 1.125rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
/* button in hero */
.btn-hero {
  display: inline-block;
  background: var(--primary);
  color: var(--dark-bg);
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-weight: 600;
  transition: transform var(--transition), opacity var(--transition);
}
.btn-hero:hover {
  transform: scale(1.05);
  opacity: 0.9;
}
/* image block */
.hero__image {
  flex: 1 1 400px;
  text-align: center;
}
.hero__image img {
  width: 100%;
  max-width: 500px;
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.3);
}

/* ── MODIFIERS for alternating layout ── */
.hero--left .hero__text  { order: 1; }
.hero--left .hero__image { order: 2; }
.hero--right .hero__text  { order: 2; }
.hero--right .hero__image { order: 1; }

/* Responsive collapse */
@media (max-width: 768px) {
  .hero__inner { flex-direction: column-reverse; text-align: center; }
  .hero--right .hero__inner { flex-direction: column-reverse; }
  .hero__text, .hero__image { order: unset; }
}
.contact-section {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  padding-block: 4rem;
  align-items: flex-start;
}

.contact-content {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  width: 100%;
}

.contact-form, .contact-info {
  flex: 1 1 45%;
  min-width: 300px;
}

.contact-form form {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.contact-form label {
  display: flex;
  flex-direction: column;
  font-size: 0.95rem;
  font-weight: 500;
}

.contact-form input,
.contact-form textarea {
  font-family: inherit;
  font-size: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border: none;
  background: #fff;
  color: #000;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.contact-form .two-col {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.contact-form .two-col label {
  flex: 1 1 48%;
}

.btn-submit {
  align-self: flex-start;
  padding: 0.75rem 1.5rem;
  background-color: var(--primary);
  color: white;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.btn-submit:hover {
  background-color: #d49e6a;
}

/* Optional: center form better on small screens */
@media (max-width: 768px) {
  .contact-content {
    flex-direction: column;
  }

  .contact-form, .contact-info {
    flex: 1 1 100%;
  }

  .btn-submit {
    width: 100%;
  }
}
.footer-contact {
  margin-top: 4rem;
  padding: 4rem 0;
  border-top: 1px solid #333;
}

.footer-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: flex-start;
}

.footer-contact form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-contact label {
  font-weight: 500;
  display: flex;
  flex-direction: column;
  font-size: 0.95rem;
}

.footer-contact input,
.footer-contact textarea {
  font-family: inherit;
  font-size: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  border: none;
  background-color: #fff;
  color: #000;
}

.footer-contact .two-col {
  display: flex;
  gap: 1rem;
}

.footer-contact .two-col label {
  flex: 1;
}

.footer-contact-text h1 {
  font-size: 2.25rem;
  margin-bottom: 1rem;
}

.footer-contact-text p {
  font-size: 1rem;
  line-height: 1.7;
  color: #ccc;
}

.footer-contact .btn-submit {
  background-color: #e3b18d;
  color: #000;
  padding: 0.75rem 1.5rem;
  border-radius: 5px;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.footer-contact .btn-submit:hover {
  background-color: #d59d75;
}

@media (max-width: 900px) {
  .footer-contact-grid {
    grid-template-columns: 1fr;
  }

  .footer-contact-text {
    order: -1;
  }

  .footer-contact .btn-submit {
    width: 100%;
  }
}
.footer-contact-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.footer-contact-text h1 {
  font-size: 2.25rem;
  margin-bottom: 1rem;
}

.footer-contact-text p {
  font-size: 1rem;
  line-height: 1.7;
  color: #ccc;
  margin-bottom: 1.5rem;
}

.footer-contact-text .btn-submit {
  width: fit-content;
  padding: 0.75rem 1.5rem;
  background-color: #e3b18d;
  color: #000;
  font-weight: 600;
  border: none;
  border-radius: 5px;
  transition: transform 0.2s ease, background-color 0.3s ease;
  cursor: pointer;
}

.footer-contact-text .btn-submit:hover {
  background-color: #d59d75;
  transform: translateY(-3px);
}
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}
.our-story {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 2rem;
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

.story-img img {
  max-width: 100%;
  width: 500px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.story-text {
  max-width: 800px;
}

.story-text h2 {
  font-size: 3rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 1rem;
}

.story-text p {
  font-size: 1.125rem;
  color: #ccc;
  line-height: 1.75;
}
.our-story {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  padding: 4rem 2rem;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.story-img img {
  max-width: 100%;
  width: 450px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.story-text {
  max-width: 600px;
}

.story-text h2 {
  font-size: 2.8rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 1rem;
}

.story-text p {
  font-size: 1.125rem;
  color: #ccc;
  line-height: 1.75;
}

/* 👉 Desktop view: side-by-side layout */
@media (min-width: 768px) {
  .our-story {
    flex-direction: row;
    text-align: left;
  }

  .story-img, .story-text {
    flex: 1;
  }

  .story-text h2,
  .story-text p {
    text-align: left;
  }
}
.story-text h2 {
  font-size: 2.8rem;
  font-weight: 800;
  color: #fff; /* ensure it's visible on dark background */
  margin-bottom: 1rem;
  text-align: center;
}
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}
.our-story {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  text-align: center;
  padding: 3rem 1rem;
}

.story-img img {
  width: 100%;
  max-width: 500px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.story-text {
  max-width: 600px;
}

.story-text h2 {
  font-size: 2.8rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 1rem;
  text-align: center;
}

.story-text p {
  font-size: 1.125rem;
  color: #ccc;
  line-height: 1.75;
  text-align: center;
}

/* 🖥 Desktop view: side-by-side layout */
@media (min-width: 768px) {
  .our-story {
    flex-direction: row;
    align-items: center;
    text-align: left;
  }

  .story-text h2,
  .story-text p {
    text-align: left;
  }

  .story-img, .story-text {
    flex: 1;
  }
}

/* Reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}
html {
  scroll-behavior: smooth;
}

.scroll-down-link {
  display: block;
  text-align: center;
  font-size: 1.5rem;
  margin: 2rem auto;
  color: #fff;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.scroll-down-link:hover {
  opacity: 0.7;
}
.scroll-down-link {
  display: block;
  text-align: center;
  font-size: 1.2rem;
  color: #fff;
  margin: 2rem 0 -1rem;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.scroll-down-link:hover {
  opacity: 0.6;
}

#how-we-help h2 {
  text-align: center;
  font-size: 2.4rem;
  margin-bottom: 2rem;
  color: var(--primary);
}
/* Section Title Style Fix */
.section-title {
  font-size: 2.5rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 1.5rem;
  color: #fff;
}

/* Responsive Fix */
@media (min-width: 768px) {
  .section-title {
    text-align: left;
  }
}
/* OUR STORY SECTION STYLES */

.our-story {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  margin-top: 3rem;
  padding: 2rem;
  background-color: #1a1a1a; /* Dark background for contrast */
  border-radius: 12px;
  overflow: hidden;
}

.story-img img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.story-text {
  max-width: 700px;
  padding: 1rem;
  color: #ccc;
  text-align: center;
}

.story-text h2 {
  font-size: 2.5rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 1rem;
  text-align: center;
  z-index: 2;
  position: relative;
}

.story-text p {
  font-size: 1.125rem;
  line-height: 1.75;
  color: #ccc;
}

/* RESPONSIVE STYLES */
@media (min-width: 768px) {
  .our-story {
    flex-direction: row;
    text-align: left;
  }

  .story-text,
  .story-img {
    flex: 1;
  }

  .story-text h2,
  .story-text p {
    text-align: left;
  }
}
/* ========== Base ========== */
body {
  font-family: 'Poppins', sans-serif;
  background-color: #111;
  color: white;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

/* ========== Header ========== */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #111;
  position: sticky;
  top: 0;
  z-index: 999;
}

.logo {
  font-weight: 700;
  font-size: 1.2rem;
  color: white;
}

.nav-list {
  display: flex;
  list-style: none;
  gap: 2rem;
  margin: 0;
  padding: 0;
}

.nav-list li a {
  color: white;
  font-weight: 400;
  transition: color 0.3s ease;
}

.nav-list li a:hover,
.nav-list li a.active {
  color: #eac3a2;
}

.btn-donate {
  background-color: #eac3a2;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  color: #111;
  transition: background-color 0.3s ease;
}

.btn-donate:hover {
  background-color: #f5d1ab;
}

/* ========== Hero Section ========== */
.team-hero {
  text-align: center;
  padding: 4rem 2rem 1rem;
}

.team-hero h1 {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}

.team-hero p {
  font-size: 1.2rem;
  color: #ccc;
}

/* ========== Team Grid ========== */
.team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  padding: 3rem 2rem 4rem;
}

.card {
  background-color: white;
  color: black;
  border-radius: 1rem;
  padding: 1rem;
  text-align: center;
  width: 260px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

.card img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 1rem 1rem 0 0;
}

.card h3 {
  margin: 1rem 0 0.5rem;
  font-size: 1.2rem;
  font-weight: 700;
}

.card p {
  font-size: 0.95rem;
  color: #444;
}

/* ========== Values Section ========== */
.values-section {
  text-align: center;
  padding: 4rem 2rem 6rem;
  background-color: #121212;
}

.values-section h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
  color: white;
}

.value-item {
  margin: 1.2rem auto;
  max-width: 750px;
  font-size: 1rem;
  color: #ccc;
  line-height: 1.6;
}

.value-item strong {
  display: inline-block;
  width: 120px;
  color: #fff;
  font-weight: 600;
  text-align: right;
  margin-right: 12px;
}

/* ========== Footer ========== */
footer {
  background-color: #111;
  text-align: center;
  padding: 3rem 1rem 2rem;
  border-top: 1px solid #222;
}

footer p {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: #aaa;
}

footer .social a {
  margin: 0 0.75rem;
  color: #eac3a2;
  font-weight: 500;
  transition: color 0.3s ease;
}

footer .social a:hover {
  color: #fff;
}

/* ========== Responsive ========== */
@media (max-width: 768px) {
  .team-grid {
    flex-direction: column;
    align-items: center;
  }

  .value-item strong {
    display: block;
    margin: 0 0 0.5rem 0;
    text-align: center;
  }
}
.team-grid-horizontal {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 2rem;
  text-align: center;
}
/* --- Contact heading override --- */
.contact-section h1 {
  color: #fff !important;          /* make it white */
  text-align: center;               /* center the text */
  width: fit-content;               /* shrink to text width */
  margin: 0 auto 2rem;              /* center block itself */
}
.footer-contact-text h1 { color: #fff !important; text-align: center; margin: 0 auto 1rem; }
/* === tighten space above Contact Us === */
.contact-section {
  margin-top: 1.25rem !important;   /* was 4rem */
  padding-top: 0 !important;
}
.contact-section h1 {
  margin-top: 0 !important;
  color: #fff !important;
  text-align: center;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
/* ── Get Involved: heading color & centering ── */
.involved-section h2 {
  color: var(--light-text) !important;   /* white instead of peach */
  text-align: center !important;         /* center under the nav */
  margin: calc(var(--header-height) + 1rem) auto 2rem !important;
}

/* ── Get Involved: constrain and center the whole section ── */
.involved-section {
  max-width: 1200px;    /* same max-width as hero/our-work */
  margin: 0 auto 4rem;  /* center on page */
  padding: 0 1rem;
}

/* ── Get Involved: two-column form & info ── */
.info-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  align-items: start;
}

/* make sure each half takes full width of its grid cell */
.info,
.involved-section .contact-form {
  width: 100%;
}
/* =======================
   GET INVOLVED – FORM RESET
   ======================= */

/* Keep the two-column split, but don't let the form span full width */
.gi-grid{
  grid-template-columns: minmax(320px,400px) auto;
  gap: 3rem;
}

/* Restore original, narrower form look */
.gi-form{
  max-width: 560px;      /* tweak to taste */
  margin-left: auto;     /* pushes it to the right column edge */
  display: block;
}

/* Kill flex rules inherited from generic .contact-form */
.involved-section .contact-form{
  flex: initial;
  width: auto;
}

/* Two first-name / last-name fields side by side */
.gi-form .two-col{
  display: flex;
  gap: 1rem;
}

/* Inputs back to normal width inside our set container */
.gi-form input,
.gi-form textarea{
  width: 100%;
  background: #fff;
  color: #000;
  border: none;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Submit button consistent with the rest */
.gi-form .btn-submit{
  background: var(--primary);
  color: var(--dark-bg);
  border: none;
  border-radius: 6px;
  padding: 0.75rem 1.6rem;
  margin-top: .5rem;
  transition: transform var(--transition), opacity var(--transition);
}
.gi-form .btn-submit:hover{
  transform: translateY(-2px);
  opacity: .9;
}

/* Mobile: full-width stack */
@media (max-width: 900px){
  .gi-grid{ grid-template-columns: 1fr; gap: 2rem; }
  .gi-form{ max-width: 100%; margin: 0; }
  .gi-form .two-col{ flex-direction: column; }
}
/* ================================
   GET INVOLVED – LAYOUT & STYLES
   (scoped so it won't touch other pages)
   ================================ */

.involved-section { margin: 4rem 0 6rem; }
.gi-title{
  text-align:center;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  color: var(--light-text);
  margin-bottom: 2rem;
}

.gi-grid{
  display: grid;
  grid-template-columns: minmax(320px, 420px) 1fr;
  gap: 3rem;
  align-items: flex-start;
}

/* LEFT CARD */
.gi-card{
  background: var(--light-text);
  color: var(--dark-text);
  padding: 2rem 2.25rem;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
  line-height: 1.55;
}
.gi-card h3{
  margin: 0 0 .6rem;
  font-size: 1.15rem;
  color: var(--primary);
}
.gi-list{
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}
.gi-list li{
  margin-bottom: .65rem;
  display: flex;
  gap: .5rem;
}
.gi-list li::before{
  content: "✓";
  color: var(--primary);
  font-weight: 700;
  margin-top: .15rem;
}
.gi-cta{
  margin-top: 1.25rem;
  font-weight: 500;
  color: var(--dark-text);
}

/* FORM AREA */
.gi-form{
  max-width: 560px;
  margin-left: auto;
  display: block;
}
.gi-form .two-col{
  display: flex;
  gap: 1rem;
}
.gi-form label{
  display: flex;
  flex-direction: column;
  font-weight: 500;
  font-size: .95rem;
}
.gi-form input,
.gi-form textarea{
  width: 100%;
  margin-top: .45rem;
  background: #fff;
  color: #000;
  border: none;
  border-radius: 6px;
  padding: .75rem 1rem;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  font-family: inherit;
  font-size: 1rem;
}

.gi-form .btn-submit{
  align-self: flex-start;
  background: var(--primary);
  color: var(--dark-bg);
  border: none;
  border-radius: 6px;
  padding: .75rem 1.6rem;
  margin-top: .6rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--transition), opacity var(--transition);
}
.gi-form .btn-submit:hover{
  transform: translateY(-2px);
  opacity: .9;
}

/* Mobile */
@media (max-width: 900px){
  .gi-grid{ grid-template-columns: 1fr; gap: 2rem; }
  .gi-form{ max-width: 100%; margin: 0; }
  .gi-form .two-col{ flex-direction: column; }
}
/* ====== GET INVOLVED – FINAL FIXES (override) ====== */

/* Center the whole two‑column block and keep it narrow */
.gi-grid{
  max-width: 1100px;
  margin: 0 auto;              /* centers */
  padding: 0 1rem;
  display: grid;
  grid-template-columns: 360px 1fr;  /* left copy, right form */
  gap: 2.75rem;
  align-items: flex-start;
}

/* Left panel */
.gi-card{
  background: var(--light-text);
  color: var(--dark-text);
  padding: 2rem 2.25rem;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
  line-height: 1.55;
  max-width: 420px;
}

/* Make bullets line up nicely */
.gi-list{
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}
.gi-list li{
  margin-bottom: .65rem;
  position: relative;
  padding-left: 1.35rem;
}
.gi-list li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.15rem;
  color: var(--primary);
  font-weight: 700;
}

/* Keep the form exactly like your other forms */
.gi-form{
  max-width: 560px;
  margin: 0;                    /* kill the auto-right gap */
}
.gi-form .two-col{
  display: flex;
  gap: 1rem;
}
.gi-form label{
  display: flex;
  flex-direction: column;
  font-weight: 500;
  font-size: .95rem;
}
.gi-form input,
.gi-form textarea{
  margin-top: .45rem;
  background: #fff;
  color: #000;
  border: none;
  border-radius: 6px;
  padding: .75rem 1rem;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  font-family: inherit;
  font-size: 1rem;
}
.gi-form .btn-submit{
  align-self: flex-start;
  background: var(--primary);
  color: var(--dark-bg);
  border: none;
  border-radius: 6px;
  padding: .75rem 1.6rem;
  margin-top: .6rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--transition), opacity var(--transition);
}
.gi-form .btn-submit:hover{
  transform: translateY(-2px);
  opacity: .9;
}

/* Mobile stack */
@media (max-width: 900px){
  .gi-grid{
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .gi-form .two-col{ flex-direction: column; }
}
/* ===== GET INVOLVED — SIMPLE LEFT COLUMN, SAME FORM ===== */

/* Layout stays centered */
.gi-grid{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 3rem;
  align-items: flex-start;
}

/* Simple copy block (no card) */
.gi-copy{
  max-width: 420px;
  padding: 0;
  border-left: 4px solid var(--primary);
  padding-left: 1.4rem;
  color: var(--light-text);
  line-height: 1.6;
}

.gi-copy .lead{
  font-size: 1.05rem;
  margin-bottom: 1rem;
  color: #ddd;
}

.gi-steps{
  list-style: none;
  margin: 1.25rem 0 1.5rem;
  padding: 0;
}
.gi-steps li{
  position: relative;
  margin-bottom: .9rem;
  padding-left: 1.4rem;
}
.gi-steps li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.15rem;
  color: var(--primary);
  font-weight: 700;
}
.gi-steps li span{
  color: var(--primary);
  font-weight: 600;
}

.cta-line{
  margin-top: 1.25rem;
  font-size: .95rem;
  color: #ccc;
}

/* Keep your form styling consistent */
.gi-form{
  max-width: 560px;
}
.gi-form .two-col{
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.gi-form label{
  display: flex;
  flex-direction: column;
  font-weight: 500;
  font-size: .95rem;
}
.gi-form input,
.gi-form textarea{
  margin-top: .45rem;
  background: #fff;
  color: #000;
  border: none;
  border-radius: 6px;
  padding: .75rem 1rem;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  font-family: inherit;
  font-size: 1rem;
}
.gi-form .btn-submit{
  align-self: flex-start;
  background: var(--primary);
  color: var(--dark-bg);
  border: none;
  border-radius: 6px;
  padding: .75rem 1.6rem;
  margin-top: .6rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--transition), opacity var(--transition);
}
.gi-form .btn-submit:hover{
  transform: translateY(-2px);
  opacity: .9;
}

/* Mobile stack */
@media (max-width: 900px){
  .gi-grid{
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .gi-copy{
    border-left: none;
    border-top: 4px solid var(--primary);
    padding-left: 0;
    padding-top: 1.25rem;
  }
  .gi-form .two-col{ flex-direction: column; }
}
/* ── GET INVOLVED LAYOUT FIXES ───────────────────────────────────── */
.involved-section.container{
  /* pull content below fixed header & give bottom room */
  padding: calc(var(--header-height) + 1.5rem) 1rem 5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.involved-section h2{
  text-align: center;
  font-size: clamp(2.5rem, 6vw, 4rem);
  margin-bottom: 2.5rem;
  color: var(--light-text);
}

/* centered 2‑column grid */
.gi-grid{
  max-width: 1050px;
  margin: 0 auto;               /* center the grid block */
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 1fr;
  gap: 3rem;
  align-items: start;
}

/* left copy: simple vertical rule for accent */
.gi-copy{
  border-left: 4px solid var(--primary);
  padding-left: 1.25rem;
  max-width: 520px;
}
.gi-copy .lead{
  margin-bottom: 1.5rem;
  line-height: 1.55;
}
.gi-steps{
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}
.gi-steps li{
  margin-bottom: 0.9rem;
  line-height: 1.45;
  position: relative;
  padding-left: 1.4rem;
}
.gi-steps li::before{
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--primary);
  font-size: 0.95rem;
}
.gi-steps span{
  font-weight: 600;
}
.cta-line{
  margin-top: 1rem;
  opacity: 0.85;
}

/* keep your original form styling */
.gi-form{
  width: 100%;
}

/* mobile: stack nicely */
@media (max-width: 900px){
  .gi-grid{
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .gi-copy{
    border-left: none;
    padding-left: 0;
  }
}
/* ── GET INVOLVED vertical spacing fix ───────────────────────────── */
#get-involved {                 /* give the section an id if you don't have one */
  padding-top: 2rem !important; /* was calc(var(--header-height)+1.5rem) */
  padding-bottom: 3.5rem !important;  /* tighten footer gap */
}

/* tighten heading-to-content gap */
#get-involved h2{
  margin-bottom: 1.75rem;
}

/* slightly closer columns */
#get-involved .gi-grid{
  gap: 2rem;
}

/* kill any accidental top/bottom margins in first/last text blocks */
#get-involved .gi-copy > *:first-child{ margin-top: 0; }
#get-involved .gi-copy > *:last-child{  margin-bottom: 0; }

/* mobile tweak */
@media (max-width: 900px){
  #get-involved { padding-top: 1.25rem !important; padding-bottom: 3rem !important; }
}
/* ===== GET INVOLVED spacing fix ===== */
#get-involved.involved-section{
  margin: 0 auto 3rem !important;      /* was 3–4rem top & bottom */
  padding-top: 0 !important;           /* body already has header padding */
  padding-bottom: 2.5rem !important;   /* tighten above footer */
}

#get-involved h2{
  margin: 0 0 1.5rem !important;       /* shrink gap under the title */
}

/* column gap & stray margins */
#get-involved .gi-grid{ gap: 2rem !important; }
#get-involved .gi-copy > *:first-child{ margin-top: 0 !important; }
#get-involved .gi-copy > *:last-child{  margin-bottom: 0 !important; }

@media (max-width: 900px){
  #get-involved.involved-section{
    margin: 0 auto 2.5rem !important;
    padding-bottom: 2rem !important;
  }
}
/* ===== TEAM BRIDGE SECTION ===== */
.team-bridge{
  max-width: 900px;
  margin: 4rem auto 3rem;
  padding: 0 1rem;
}
.team-bridge .bridge-copy{
  border-left: 4px solid var(--primary);
  padding-left: 1.5rem;
}
.team-bridge h2{
  font-size: 2.25rem;
  margin-bottom: 1rem;
  color: var(--light-text);
}
.team-bridge p{
  color: #ddd;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}
.bridge-list{
  list-style: none;
  padding: 0;
  margin: 0;
}
.bridge-list li{
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.65rem;
  line-height: 1.55;
}
.bridge-list li::before{
  content: "✓";
  color: var(--primary);
  position: absolute;
  left: 0;
  top: 0;
}
/* default team photos */
.team-section .card img{
  width: 100%;
  height: 180px;
  object-fit: cover;
}
/* second team card's img */
.team-section .card:nth-child(2) img{
  height: auto !important;
  max-height: 210px;
  object-fit: contain !important;
  background:#fff;
  padding:6px;
}
/* ─── Get Involved: put Age in the same row and make it small ─── */
.name-row{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  align-items:flex-end;
}
.name-row label{
  flex:1 1 0;                 /* first & last name stretch */
}
.name-row label.age{
  flex:0 0 110px;             /* fixed narrow age field */
  max-width:110px;
}

/* mobile: stack all three full width */
@media (max-width:768px){
  .name-row label,
  .name-row label.age{
    flex:1 1 100%;
    max-width:none;
  }
}
/* ── Opt‑in checkbox style ── */
.optin{
  display:flex;
  gap:.6rem;
  align-items:flex-start;
  font-size:.9rem;
  line-height:1.45;
  color: var(--light-text);
  margin-top:.5rem;
}
.optin input{
  width:18px;
  height:18px;
  accent-color: var(--primary);   /* modern browsers */
  cursor:pointer;
  margin-top:2px;
}
.optin span{
  cursor:pointer;
}

/* mobile tweak */
@media (max-width:768px){
  .optin{ font-size:.95rem; }
}
/* --- Fix "Why We Started" title not showing --- */
.our-story.reveal,
.our-story .section-title {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}
/* prettier section headlines */
.fancy-title{
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 1.25rem;
  color: var(--light-text);
  position: relative;
  padding-left: 2.75rem;          /* room for the paw */
}
.fancy-title span{
  color: var(--primary);          /* highlight first word */
}

/* paw icon + underline bar */
.fancy-title::before{
  content: "🐾";
  position: absolute;
  left: 0;
  top: -0.15rem;
  font-size: 1.9rem;
  line-height: 1;
  opacity: .9;
}
.fancy-title::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 72px;
  height: 4px;
  background: var(--primary);
  border-radius: 3px;
}
/* ───────── WHY BLOCK ───────── */
.why-block{
  max-width: 1000px;
  margin: 6rem auto 5rem;
  background: rgba(255,255,255,0.03);
  border-radius: 16px;
  padding: 3rem 3.5rem 2.75rem;
  box-shadow: 0 8px 28px rgba(0,0,0,.25);
  position: relative;
}
.why-block::before{
  content:"";
  position:absolute;
  left:0;
  top:2.5rem;
  width:4px;
  height: calc(100% - 5rem);
  background: var(--primary);
  border-radius:2px;
}

.section-heading{
  font-size: clamp(2.3rem, 5vw, 3.4rem);
  font-weight: 800;
  margin: 0 0 1.25rem;
  line-height: 1.1;
  color: var(--light-text);
}
.section-heading span{
  color: var(--primary);
}

.lede{
  font-size: 1.05rem;
  line-height: 1.65;
  color: #ddd;
  margin-bottom: 1.5rem;
  max-width: 780px;
}

.why-list{
  list-style: none;
  margin: 0 0 2.2rem 0;
  padding: 0;
}
.why-list li{
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.9rem;
  line-height: 1.55;
}
.why-list li::before{
  content: "✔";
  position: absolute;
  left: 0;
  top: .1rem;
  color: var(--primary);
  font-size: 1.1rem;
}

/* little stat row */
.impact-row{
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.impact-item{
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  text-align: center;
  flex: 0 0 140px;
}
.impact-item .num{
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1;
}
.impact-item small{
  display: block;
  margin-top: 0.25rem;
  font-size: .8rem;
  letter-spacing: .5px;
  opacity: .8;
}

/* ───────── VALUES BLOCK ───────── */
.values-block{
  max-width: 1100px;
  margin: 5rem auto 6rem;
  text-align: center;
}
.values-block .section-heading{
  margin-bottom: 2.5rem;
}
.values-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap: 2rem;
}
.value-card{
  background: var(--light-text);
  color: var(--dark-bg);
  border-radius: 14px;
  padding: 2rem 1.75rem 2.25rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  transition: transform .25s ease, box-shadow .25s ease;
}
.value-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 14px 32px rgba(0,0,0,.28);
}
.value-card .emoji{
  font-size: 2rem;
  display: block;
  margin-bottom: .75rem;
}
.value-card h3{
  margin: 0 0 .5rem;
  color: var(--dark-bg);
  font-size: 1.25rem;
  font-weight: 700;
}
.value-card p{
  margin: 0;
  line-height: 1.55;
  color: #333;
}

/* mobile tweaks */
@media (max-width: 700px){
  .why-block{
    padding: 2.25rem 1.5rem 2rem;
  }
  .why-block::before{
    top:1.8rem;
    height: calc(100% - 3.6rem);
  }
  .impact-item{
    flex: 1 1 100px;
  }
}
/* ───────── NEW Get Involved layout ───────── */
.gi-hero{
  margin: 5rem auto 6rem;
  max-width: 1050px;
  text-align: left;
}
.gi-hero .section-heading{
  margin-bottom: 1.25rem;
}
.gi-hero .lede{
  margin-bottom: 1.75rem;
  color:#ddd;
  font-size:1.05rem;
  line-height:1.6;
  max-width: 760px;
}
.gi-steps{
  list-style:none;
  padding:0;
  margin:0 0 2.5rem;
}
.gi-steps li{
  margin-bottom:.9rem;
  padding-left:1.6rem;
  position:relative;
  line-height:1.55;
}
.gi-steps li::before{
  content:"✔";
  position:absolute;
  left:0;
  top:.05rem;
  color:var(--primary);
}
.gi-steps span{
  font-weight:600;
  color:var(--primary);
}

.cta-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:2rem;
  margin-bottom:2.5rem;
}
.cta-card{
  background: rgba(255,255,255,0.05);
  border-radius:14px;
  padding:1.75rem 1.5rem 2rem;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
  color:var(--light-text);
  text-decoration:none;
  transition:transform .25s ease, box-shadow .25s ease;
  display:flex;
  flex-direction:column;
  gap:.6rem;
}
.cta-card h3{
  margin:0;
  font-size:1.35rem;
  color:var(--primary);
}
.cta-card p{
  margin:0 0 1rem;
  line-height:1.55;
  color:#ddd;
}
.cta-card:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 32px rgba(0,0,0,.28);
}
.btn-ghost{
  display:inline-block;
  background:var(--light-text);
  color:var(--dark-bg);
  padding:.6rem 1rem;
  border-radius:6px;
  font-weight:600;
}

/* stats row reuse */
.impact-row{ display:flex; gap:2rem; flex-wrap:wrap; margin-top:1rem;}
/* already defined earlier; keep if not */

/* ───────── Form pages ───────── */
.form-hero{
  margin: 5rem auto 2rem;
  max-width: 900px;
  text-align:center;
}
.form-section{
  margin: 0 auto 6rem;
  max-width: 950px;
}
.big-form{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
}
.form-row{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}
.form-row.two > label{ flex:1 1 48%; }
.form-row.three > label{ flex:1 1 30%; min-width:140px; }
.check-group{
  border:1px solid rgba(255,255,255,.08);
  padding:1rem 1.25rem 1rem;
  border-radius:8px;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.check-group legend{
  padding:0 .25rem;
  font-weight:600;
  margin-bottom:.5rem;
  color:var(--primary);
}
.check-group label{
  font-weight:400;
  display:flex;
  gap:.5rem;
  align-items:flex-start;
}
.optin{
  display:flex;
  gap:.65rem;
  align-items:flex-start;
  font-size:.9rem;
  line-height:1.4;
}
.optin input{ margin-top:.2rem; }

/* small button style */
.btn-ghost, .btn-submit{
  cursor:pointer;
}

/* responsive tweaks */
@media(max-width:768px){
  .gi-hero{ text-align:left; }
  .cta-grid{ gap:1.25rem; }
  .form-hero{ margin-top:4rem; }
}
/* ── NAV DROPDOWN ───────────────────────────────────── */
.has-dd { position: relative; }
.has-dd > a::after{
  content:"";
  border: 4px solid transparent;
  border-top-color: var(--light-text);
  margin-left: .35rem;
  display: inline-block;
  transform: translateY(-1px);
}
.has-dd > .dropdown{
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: var(--dark-bg);
  border: 1px solid rgba(255,255,255,.06);
  padding: .5rem 0;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
  z-index: 1200;
}
.has-dd:hover > .dropdown,
.has-dd:focus-within > .dropdown{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.dropdown a{
  display: block;
  padding: .6rem 1rem;
  color: var(--light-text);
  font-weight: 500;
  transition: background var(--transition), color var(--transition);
}
.dropdown a:hover{
  background: var(--primary);
  color: var(--dark-bg);
}

/* Mobile: show dropdown when parent gets .open (set via JS) */
@media (max-width: 768px){
  .has-dd > .dropdown{
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    border: none;
    box-shadow: none;
    padding: 0 0 .5rem 1rem;
    display: none;
  }
  .has-dd.open > .dropdown{ display: block; }
}
/* 1) Dropdown: show instantly, no fade/slide/rotate */
.has-dd .caret { transition: none !important; transform: none !important; }
.nav-list .dropdown {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* If you used display/opacity combo, just switch to display logic */
.nav-list .dropdown { display: none; }
.has-dd:hover .dropdown,
.has-dd.open .dropdown { display: block; }

/* 2) Kill scroll reveal animations globally */
.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
.reveal.visible { opacity: 1 !important; transform: none !important; }

/* 3) Kill button bounce/tilt */
.btn-bounce { animation: none !important; }
.btn-tilt:hover { transform: none !important; }
/* kill the tiny square under the dropdown trigger */
.nav-list li.has-dd > a::after {
  display: none !important;
}
/* Let the submenu escape the header box */
header, nav, .nav-list { overflow: visible; }

/* Position dropdown correctly and above everything */
.nav-list li.has-dd { position: relative; }
.nav-list li.has-dd .dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--dark-bg);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  min-width: 180px;
  padding: 4px 0;
  z-index: 2000;
  display: none;              /* hidden by default */
}

/* Show on hover (or keep your JS toggle) */
.nav-list li.has-dd:hover .dropdown,
.nav-list li.has-dd:focus-within .dropdown {
  display: block;
}

/* Remove the underline pseudo‑element for this link and submenu links */
.nav-list li.has-dd > a::after,
.nav-list li.has-dd .dropdown a::after {
  display: none !important;
}

/* Dropdown item styling */
.nav-list li.has-dd .dropdown li a {
  display: block;
  padding: 0.65rem 1rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.nav-list li.has-dd .dropdown li a:hover {
  background: var(--primary);
  color: var(--dark-bg);
}
/* =========================
   THEME VARIABLES
   Dark is default (what you have now).
   Light overrides live under [data-theme="light"].
   ========================= */
:root {
  --bg: var(--dark-bg);       /* alias so we can swap easier */
  --text: var(--light-text);
  --card-bg: var(--light-text);
  --card-text: var(--dark-bg);
  --border-faint: rgba(255,255,255,.06);
  --shadow-strong: 0 12px 32px rgba(0,0,0,.45);
}

/* Light theme overrides */
:root[data-theme="light"] {
  --dark-bg: #ffffff;
  --light-text: #111111;
  --dark-text: #222222;
  --bg: #ffffff;
  --text: #111111;
  --card-bg: #f7f7f7;
  --card-text: #111111;
  --border-faint: rgba(0,0,0,.08);
  --shadow-strong: 0 12px 28px rgba(0,0,0,.18);
  --primary: #c99367;               /* optional: tweak accent if needed */
}

/* Global swaps */
body {
  background: var(--bg) !important;
  color: var(--text) !important;
  transition: background .3s ease, color .3s ease;
}
header, footer { background: var(--bg) !important; }
.nav-list a:hover,
.nav-list a.active { color: var(--primary) !important; }

/* Cards & light surfaces */
.card,
.service-card,
.value-card,
.team-section .card,
.pups .card,
.work-section .card,
.gi-card,
.cta-card {
  background: var(--card-bg) !important;
  color: var(--card-text) !important;
  box-shadow: 0 8px 16px rgba(0,0,0,.12);
}

/* Inputs & textareas */
input, textarea {
  background: var(--card-bg) !important;
  color: var(--card-text) !important;
}

/* Dropdown */
.nav-list li.has-dd .dropdown {
  background: var(--bg) !important;
  border: 1px solid var(--border-faint) !important;
  box-shadow: var(--shadow-strong);
}
.nav-list li.has-dd .dropdown li a {
  color: var(--text) !important;
}
.nav-list li.has-dd .dropdown li a:hover {
  background: var(--primary) !important;
  color: var(--dark-bg) !important;
}

/* Left-rule blocks (Why/bridge/gi-copy etc.) */
.gi-copy,
.team-bridge .bridge-copy,
.why-block::before {
  border-color: var(--primary) !important;
}
.why-block,
.values-block,
.why-block,
.values-block,
.why-block,
.why-block li::before {
  color: var(--text);
}

/* Buttons already use var(--primary); just ensure text contrast */
.btn-donate, .btn, .btn-submit, .btn-hero, .btn-ghost {
  color: var(--dark-bg) !important;
}

/* Theme toggle button */
.theme-toggle{
  background: transparent;
  border: 2px solid var(--primary);
  color: var(--primary);
  border-radius: 999px;
  padding: .35rem .65rem;
  margin-right: 1rem;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  display: flex;
  gap: .25rem;
  align-items: center;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.theme-toggle:hover{
  background: var(--primary);
  color: var(--dark-bg);
}

/* show only the correct icon */
.icon-sun{ display: none; }
:root[data-theme="light"] .icon-sun{ display: inline; }
:root[data-theme="light"] .icon-moon{ display: none; }
/* ================= THEME TOKENS ================= */
:root[data-theme="dark"]{
  --bg: #111;
  --text: #fff;
  --muted: #ccc;
  --surface: #1a1a1a;
  --card-bg: #fff;
  --card-text: #111;
  --primary: #e5c6a8;
  --primary-text: #111;
}
:root[data-theme="light"]{
  --bg: #fff;
  --text: #111;
  --muted: #555;
  --surface: #f7f7f7;
  --card-bg: #fff;     /* keep cards white in both if you like */
  --card-text: #111;
  --primary: #d8a476;  /* tweak for light mode */
  --primary-text: #111;
}

/* ====== apply vars to core elements ====== */
body{ background: var(--bg); color: var(--text); }
header, footer{ background: var(--bg); color: var(--text); }
.nav-list a{ color: var(--text); }
.nav-list a:hover,
.nav-list a.active{ color: var(--primary); }
.nav-list a::after{ background: var(--primary); } /* underline bar */

.btn, .btn-donate, .btn-submit,
.btn-hero, .btn-ghost{
  background: var(--primary);
  color: var(--primary-text);
}
.btn:hover, .btn-donate:hover, .btn-submit:hover,
.btn-hero:hover, .btn-ghost:hover{
  opacity:.9;
  transform: translateY(-2px);
}

/* cards/text that used hard-coded colors */
.card{ background: var(--card-bg); color: var(--card-text); }
.gi-copy, .lede, .story-text p, .value-item, .why-list li,
.cta-card p{ color: var(--muted); }

/* ─────────────────────────────────────────────────────────────
   GLOBAL RESET FOR HEADER / NAV OVERFLOW
───────────────────────────────────────────────────────────── */
header, nav, .nav-list {
  overflow: visible;
  z-index: 1000;
}

/* ─────────────────────────────────────────────────────────────
   NORMAL “Donate” BUTTON (never full‑width)
───────────────────────────────────────────────────────────── */
.btn-donate {
  display: inline-block;
  width: auto;
}

/* ─────────────────────────────────────────────────────────────
   MOBILE (≤768px): SLIDING DRAWER NAV + INLINE DONATE
───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* 1) show the hamburger */
  .hamburger {
    display: block;
    position: relative;
    z-index: 2001;
  }

  /* 2) turn the nav-list into a side drawer off‑canvas */
  nav .nav-list {
    position: fixed;
    top: var(--header-height);
    left: -100%;
    width: 80%;
    max-width: 280px;
    height: calc(100% - var(--header-height));
    background: var(--dark-bg);
    flex-direction: column;
    padding: 2rem 1.5rem;
    gap: 1.5rem;
    transition: left 0.3s ease;
    box-shadow: 4px 0 12px rgba(0,0,0,0.3);
    z-index: 2000;
  }
  /* when “.show” gets toggled on by your JS */
  nav .nav-list.show {
    left: 0;
  }

  /* 3) style each link in the drawer */
  nav .nav-list li {
    margin: 0;
  }
  nav .nav-list li + li {
    margin-top: 1rem;
  }
  nav .nav-list a {
    font-size: 1.2rem;
    padding: 0.5rem 0;
    display: block;
    line-height: 1.3;
  }

  /* 4) keep the Donate button inline in the header,
        not floating over the page */
  .btn-donate {
    position: static !important;
    margin-left: auto !important;
    width: auto;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    z-index: 2001;
  }
}

/* ─────────────────────────────────────────────────────────────
   EXTRA COMPACT DONATE ON VERY SMALL PHONES (≤400px)
───────────────────────────────────────────────────────────── */
@media (max-width: 400px) {
  .btn-donate {
    padding: 0.3rem 0.6rem;
    font-size: 0.85rem;
  }
}
/* ────────────────────────────────────────────────────────
   OUR WORK — GLOBAL SECTION SPACING
───────────────────────────────────────────────────────── */
.our-work-section {
  margin: 4rem auto;
  padding: 0 1rem;
  max-width: 1200px;
}
.our-work-section .fancy-title {
  text-align: left;
  margin-bottom: 1.5rem;
}
.our-work-section .fancy-title::before,
.our-work-section .fancy-title::after {
  /* disable the paw & underline you added earlier */
  display: none !important;
}


/* ────────────────────────────────────────────────────────
   1) IMPACT AT A GLANCE
───────────────────────────────────────────────────────── */
#impact .impact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap: 2rem;
  text-align: center;
}
#impact .impact-item {
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  padding: 2rem 1rem;
}
#impact .impact-item .num {
  display: block;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.25rem;
}


/* ────────────────────────────────────────────────────────
   2) ANNUAL CAMPAIGN
───────────────────────────────────────────────────────── */
#campaign .campaign-content {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
}
#campaign .campaign-content > div {
  flex: 1 1 300px;
}
#campaign .campaign-content img {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 8px 16px rgba(0,0,0,0.3);
}


/* ────────────────────────────────────────────────────────
   3) HOW WE WORK PROCESS
───────────────────────────────────────────────────────── */
#process .process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap: 2rem;
  margin-top: 2rem;
}
#process .process-step {
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
}
#process .process-step .emoji {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
#process .process-step h3 {
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}


/* ────────────────────────────────────────────────────────
   4) RESOURCES & TOOLKITS
───────────────────────────────────────────────────────── */
#resources .resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap: 2rem;
  margin-top: 2rem;
}
#resources .cta-card {
  background: #fff;
  color: #111;
  border-radius: 8px;
  padding: 1.75rem;
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
  transition: transform .2s ease, box-shadow .2s ease;
}
#resources .cta-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.3);
}


/* ────────────────────────────────────────────────────────
   5) FAQs LIST
───────────────────────────────────────────────────────── */
#faq .why-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}
#faq .why-list li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}
#faq .why-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0.15rem;
  color: var(--primary);
}

/* ────────────────────────────────────────────────────────
   RESPONSIVE TWEAKS
───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #process .process-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px,1fr));
  }
  #resources .resource-grid {
    grid-template-columns: 1fr;
  }
}
/*────────────────────────────────────
  HERO CTA
────────────────────────────────────*/
.hero-cta {
  position: relative;
  background: url('images/hero-bg.jpg') center/cover no-repeat;
  min-height: 70vh;
  display: flex;
  align-items: center;
  color: var(--light-text);
}
.hero-cta .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
}
.hero-content {
  position: relative;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
  z-index: 1;
}
.hero-content h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  margin-bottom: 1rem;
}
.hero-content p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}
.btn-primary {
  background: var(--primary);
  color: var(--dark-bg);
  padding: .75rem 1.5rem;
  border-radius: 6px;
  font-weight: 600;
  transition: opacity .2s ease;
}
.btn-primary:hover {
  opacity: .9;
}

/*────────────────────────────────────
  SPLIT IMAGE + TEXT
────────────────────────────────────*/
.split-section {
  display: flex;
  align-items: center;
  gap: 3rem;
  margin: 4rem auto;
}
.split-section .split-image img {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
}
.split-text h2 {
  font-size: 2.5rem;
  color: var(--primary);
  margin-bottom: 1rem;
}
.split-text p {
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.btn-secondary {
  background: transparent;
  border: 2px solid var(--primary);
  color: var(--primary);
  padding: .6rem 1.25rem;
  border-radius: 6px;
  font-weight: 600;
  transition: background .2s ease, color .2s ease;
}
.btn-secondary:hover {
  background: var(--primary);
  color: var(--dark-bg);
}

/*────────────────────────────────────
  INFO BANDS
────────────────────────────────────*/
.info-bands .band {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 1.5rem;
}
.band--light {
  background: #f5f5f5;
}
.band--alt {
  background: #fde4d9;
}
.band-text h3 {
  margin: 0 0 .5rem;
  font-size: 1.4rem;
  color: var(--dark-text);
}
.band-text p {
  margin: 0;
  line-height: 1.5;
}
.band-cta a {
  min-width: 120px;
}

/*────────────────────────────────────
  FEATURE SECTION
────────────────────────────────────*/
.feature-section {
  display: flex;
  align-items: center;
  gap: 3rem;
  margin: 4rem auto;
}
.feature-text h2 {
  font-size: 2.25rem;
  margin-bottom: 1rem;
}
.feature-list {
  list-style: none;
  margin: 1rem 0 1.5rem;
  padding: 0;
}
.feature-list li {
  margin-bottom: .75rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.feature-image img {
  width: 100%;
  border-radius: 8px;
}

/*────────────────────────────────────
  NEWS GRID
────────────────────────────────────*/
.news-section h2 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 2rem;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
  gap: 2rem;
}
.card {
  background: var(--light-text);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}
.card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.card h3 {
  margin: 1rem;
  font-size: 1.25rem;
}
.card p {
  margin: 0 1rem 1rem;
  color: #555;
}
.card .read-more {
  display: block;
  margin: 0 1rem 1rem;
  font-weight: 600;
  color: var(--primary);
}

/*────────────────────────────────────
  RESPONSIVE
────────────────────────────────────*/
@media (max-width: 900px) {
  .split-section,
  .feature-section {
    flex-direction: column;
    text-align: center;
  }
  .split-image, .feature-image { width: 100%; }
  .split-text, .feature-text { width: 100%; }
}
/* ─── Quick‑link cards grid ───────────────────────────────────────── */
.info-cards .card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin: 3rem 0;
}
.info-cards .info-card {
  display: block;
  background: var(--light-text);
  color: var(--dark-bg);
  border-radius: 8px;
  padding: 1.25rem 1rem;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.info-cards .info-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.info-cards .info-card h3 {
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
  color: var(--primary);
}
.info-cards .info-card p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  opacity: 0.88;
}
/* ensure it animates in with your reveal utility */
.info-cards.reveal { opacity: 0; transform: translateY(20px); }
.info-cards.reveal.visible {
  opacity: 1; transform: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* ─── Tweak the "Our Story" strip to give it more breathing room ─── */
.split-section {
  padding: 4rem 0;
}
.split-section .split-image,
.split-section .split-text {
  flex: 1;
}
/* ── PUPS GRID: no more sideways scroll ── */
.pups .card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  overflow-x: visible;   /* no horizontal scrollbar */
  white-space: normal;    /* allow wrapping */
}

/* if you have a similar grid in News & Events */
.events-list .card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  overflow-x: visible;
  white-space: normal;
}
/* ─── LINK SECTIONS (alternating card + text rows) ─── */
.link-sections {
  margin: 4rem 0;
}

.link-block {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 3rem;
}
.link-block.reverse {
  flex-direction: row-reverse;
}

/* The little “card” on one side */
.link-card {
  background: var(--light-text);
  color: var(--dark-bg);
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
  padding: 1.5rem;
  flex: 0 0 280px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.link-card h3 {
  margin: 0;
  font-size: 1.5rem;
  color: var(--primary);
}
.link-card p {
  flex: 1;
  font-size: 0.95rem;
  line-height: 1.4;
  opacity: 0.85;
}
.btn-link {
  margin-top: auto;
  align-self: flex-start;
  background: var(--primary);
  color: var(--dark-bg);
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--transition), opacity var(--transition);
}
.btn-link:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

/* The big explanatory text on the other side */
.link-text {
  flex: 1;
}
.link-text p {
  line-height: 1.6;
  font-size: 1rem;
  color: #ddd;
}

/* STACK on mobile */
@media (max-width: 768px) {
  .link-block,
  .link-block.reverse {
    flex-direction: column;
  }

  .link-card {
    width: 100%;
    flex: none;
  }
}
/* ── FEATURE SECTION REFINEMENTS ── */
.features {
  padding: 6rem 1rem;                /* more top & bottom space */
  max-width: 1200px;
  margin: 0 auto;
}

.feature-row {
  display: flex;
  align-items: center;               /* vertically center card & text */
  justify-content: space-between;
  gap: 4rem;                         /* wider gap between columns */
  margin-bottom: 5rem;               /* more space between rows */
  flex-wrap: wrap;                   /* stack on mobile */
}

.feature-row:nth-child(even) {
  flex-direction: row-reverse;       /* alternate left/right */
}

.feature-card,
.feature-desc {
  flex: 1 1 45%;                     /* each takes about half */
  max-width: 500px;                  /* cap width so lines don’t get too long */
}

.feature-card {
  background: #fff;
  padding: 2.5rem;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.feature-card h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--primary);
  font-size: 1.75rem;
}

.feature-card p {
  margin-bottom: 1.5rem;
  line-height: 1.6;
  color: #333;
  font-size: 1rem;
}

.btn-link {
  display: inline-block;
  background: var(--primary);
  color: var(--dark-bg);
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-weight: 600;
  transition: background 0.3s ease;
}

.btn-link:hover {
  background: #cfa17c;               /* slightly darker accent on hover */
}

.feature-desc p {
  color: #ddd;
  font-size: 1.1rem;
  line-height: 1.7;
}

/* Mobile breakpoint */
@media (max-width: 768px) {
  .feature-row {
    flex-direction: column !important;  /* stack card/text */
    gap: 2rem;
  }
  .feature-card,
  .feature-desc {
    max-width: 100%;
    flex: 1 1 100%;
  }
}
/* ── 1) SECTION DIVIDER ───────────────────────────────────── */
.section-divider {
  /* widen or shrink as you like */
  width: 60%;
  margin: 6rem auto;          /* big gap above & below */
  border: none;
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* ── 2) FEATURE BLOCK SPACING ─────────────────────────────── */
.feature-block {
  margin: 4rem 0;             /* space above & below all four rows */
  display: flex;
  flex-direction: column;
  gap: 3rem;                  /* space between each feature-row */
}

/* optional: add some padding inside each row */
.feature-row {
  align-items: center;
  padding: 2rem 0;
}
.feature-row.reverse {
  flex-direction: row-reverse;
}

/* ── 3) IMPACT & PROCESS GRIDS ───────────────────────────── */
.impact-glance .container,
.process-steps .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.impact-grid,
.process-grid {
  display: grid;
  gap: 2rem;
  width: 100%;
  max-width: 1000px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  justify-items: center;      /* center each card/stat */
}

/* ── 4) CTA BANNER & NEWSLETTER ──────────────────────────── */
.cta-banner .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 3rem 1rem;
}

.newsletter-signup .container {
  text-align: center;
  padding: 3rem 1rem 4rem;
}

.newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 1.5rem;
  max-width: 500px;
}

.newsletter-form input {
  flex: 1 1 200px;
}

/* ── 5) FOOTER CLEANUP ───────────────────────────────────── */
footer {
  text-align: center;
  padding: 2rem 1rem;
  background: var(--dark-bg);
}

footer p {
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}

footer .social {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
}

footer .social a {
  font-weight: 500;
  transition: color var(--transition);
}
/* ───────────────────────────────────────────────────────
   1) RE‑STYLE THE <HR> AS A SECTION DIVIDER
──────────────────────────────────────────────────────── */
main > hr {
  margin: 6rem auto !important;       /* big gap above & below */
  width: 80% !important;              /* shorten the line */
  border: none;
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* ───────────────────────────────────────────────────────
   2) ALTERNATING FEATURE ROWS
──────────────────────────────────────────────────────── */
.feature-block.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 4rem 0;              /* space above & below all rows */
}

/* tighten up <hr> spacing to create a clear break */
main > hr {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.1);
  margin: 4rem 0;
}

.feature-row {
  display: flex;
  align-items: center;
  gap: 2rem;                   /* gutter between columns */
  margin: 3rem 0;              /* vertical breathing room */
  flex-direction: row;
}

/* Remove any manual .reverse classes – this next rule handles flipping */
.feature-block.container > .feature-row:nth-of-type(even) {
  flex-direction: row-reverse;
}

/* force each side to share available space evenly */
.feature-card,
.feature-text {
  flex: 1;
  max-width: 540px;            /* Optional: limit extreme widths */
}

/* tighten and pace copy for readability */
.feature-text p {
  max-width: 28rem;
  line-height: 1.6;
}

/* MOBILE: stack vertically and center text */
@media (max-width: 768px) {
  .feature-row {
    flex-direction: column !important;
    text-align: center;
  }
  .feature-card,
  .feature-text {
    max-width: 100%;
  }
}

/* ───────────────────────────────────────────────────────
   5) FOOTER CLEANUP
──────────────────────────────────────────────────────── */
footer {
  padding: 3rem 1rem;
  text-align: center;
}
footer p {
  margin: 0;
}
footer .social {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1rem;
}

/* ───────────────────────────────────────────────────────
   4) CTA BANNER & NEWSLETTER ALIGNMENT
──────────────────────────────────────────────────────── */
.cta-banner .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 4rem 1rem;
}

#newsletter {
  padding: 4rem 1rem;
  text-align: center;
}

.newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin: 1.5rem auto 0;
  max-width: 500px;
}

.newsletter-form input {
  flex: 1 1 240px;
  min-width: 240px;
}
/* ───────────────────────────────────────────────────────
   HORIZONTAL BREAK SPACING
──────────────────────────────────────────────────────── */
main > hr {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.1);
  margin: 6rem 0;             /* extra space above & below */
}

/* ───────────────────────────────────────────────────────
   ALTERNATING FEATURE ROWS
──────────────────────────────────────────────────────── */
.feature-block.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;            /* side‑padding for small screens */
}

.feature-block.container > .feature-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  margin: 4rem 0;              /* vertical breathing room */
  flex-direction: row;         /* default card on left, text on right */
}

/* flip every even row */
.feature-block.container > .feature-row:nth-of-type(even) {
  flex-direction: row-reverse;
}

/* force equal widths & cap line‑length */
.feature-block.container .feature-card,
.feature-block.container .feature-text {
  flex: 1;
  max-width: 540px;
}

.feature-block.container .feature-text p {
  max-width: 28rem;
  line-height: 1.6;
}

/* stack on mobile */
@media (max-width: 768px) {
  .feature-block.container > .feature-row {
    flex-direction: column !important;
    text-align: center;
  }
  .feature-block.container .feature-card,
  .feature-block.container .feature-text {
    max-width: 100%;
  }
}

/* ───────────────────────────────────────────────────────
   CTA BANNER
──────────────────────────────────────────────────────── */
.cta-banner .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 4rem 1rem;
  text-align: center;
}

/* ───────────────────────────────────────────────────────
   NEWSLETTER SIGNUP
──────────────────────────────────────────────────────── */
.newsletter-signup {
  padding: 4rem 1rem;
  text-align: center;
}

.newsletter-signup .newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  max-width: 500px;
  margin: 1.5rem auto 0;
}

/* ───────────────────────────────────────────────────────
   FOOTER
──────────────────────────────────────────────────────── */
footer {
  padding: 4rem 1rem;
  text-align: center;
}

footer .social {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 1rem;
}
/* ───────────────────────────────────────────────────────
   Alternating Feature Rows
──────────────────────────────────────────────────────── */
.feature-block {
  max-width: 1100px;
  margin: 0 auto;
  padding: 4rem 1rem;            /* space above & below */
}

.feature-row {
  display: flex;
  align-items: center;
  gap: 2rem;                     /* gutter between columns */
  margin-bottom: 3rem;           /* space between rows */
  flex-direction: row;           /* default L→R */
}

/* flip when you add .reverse */
.feature-row.reverse {
  flex-direction: row-reverse;
}

/* equal widths for card & text columns */
.feature-card,
.feature-text {
  flex: 1;
  max-width: 540px;              /* prevent super-wide columns */
}

/* card styling */
.feature-card {
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
}

/* text column styling (on dark bg) */
.feature-text p {
  color: #eee;
  line-height: 1.6;
  max-width: 28rem;
}

/* kill bottom margin on last row */
.feature-row:last-child {
  margin-bottom: 0;
}

/* ───────────────────────────────────────────────────────
   Responsive: stack on narrow screens
──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .feature-row {
    flex-direction: column !important;
    text-align: center;
  }
  .feature-card,
  .feature-text {
    max-width: 100%;
  }
}
/*────────────────────────────────────────
  1) SPACE OUT THE FEATURE BLOCK
────────────────────────────────────────*/
main > hr.section-divider {
  /* give the divider more bottom‑margin, so the first card sits further down */
  margin-bottom: 4rem;
}

.feature-block.container {
  /* also bump the entire group down a touch */
  margin-top: 2rem;
}

/*────────────────────────────────────────
  2) PUSH IMPACT AT A GLANCE DOWN
────────────────────────────────────────*/
#impact {
  /* add some top‑margin so your “Impact at a Glance” header has its own space */
  margin-top: 6rem;
}

/*────────────────────────────────────────
  3) CENTER THE NEWSLETTER FORM
────────────────────────────────────────*/
#newsletter .newsletter-form {
  display: flex;
  justify-content: center;  /* horizontally center input + button */
  align-items: center;
  gap: 1rem;
  max-width: 600px;
  margin: 1.5rem auto 0;     /* auto‑center the whole form, add a little top space */
}

#newsletter .newsletter-form input {
  /* give the input a fixed width so it and the button “hug” each other centrally */
  flex: none;
  width: 300px;
}
/* give all section titles consistent spacing */
.section-title {
  /* tweak this value until it matches your “Impact” spacing */
  margin: 0 0 2.5rem;  
}

/* bump the process‑grid down a bit */
#process .process-grid {
  margin-top: 2.5rem;  /* match the section‑title’s bottom margin */
}
/* ─────────────────────────────────────────────────────────
   CTA BANNER (Ready to Be a Hero…) 
───────────────────────────────────────────────────────── */
.cta-banner {
  padding: 6rem 1rem;                   /* more breathing room above & below */
}
.cta-banner .container {
  display: flex;
  flex-direction: column;
  align-items: center;                  /* center everything */
  gap: 1.5rem;                          /* space between heading & buttons */
}
.cta-banner h2 {
  margin: 0;                            /* remove default heading margins */
}
.cta-banner .btn-hero,
.cta-banner .btn-donate {
  min-width: 200px;                     /* uniform button width */
  font-size: 1rem;
}

/* ─────────────────────────────────────────────────────────
   NEWSLETTER SIGNUP (Stay in the Loop) 
───────────────────────────────────────────────────────── */
.newsletter-signup {
  padding: 6rem 1rem;                   /* match CTA banner padding */
}
.newsletter-signup .container {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;                   /* center heading & text */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;                          /* vertical gap between elements */
}
.newsletter-signup .section-title {
  margin: 0;                            /* flush up against top of section */
}
.newsletter-signup p {
  margin: 0;                            /* flush up against heading */
}
.newsletter-signup .newsletter-form {
  display: flex;
  gap: 1rem;
  width: 100%;
  max-width: 500px;
  justify-content: center;              /* center the form controls */
}
.newsletter-signup .newsletter-form input {
  flex: 1;                              /* stretch the input */
  padding: 0.75rem 1rem;
}
.newsletter-signup .newsletter-form button {
  padding: 0.75rem 1.5rem;
}

/* ─────────────────────────────────────────────────────────
   UNIVERSAL HR / DIVIDER SPACING 
───────────────────────────────────────────────────────── */
.section-divider,
main > hr {
  margin: 4rem 0;                       /* consistent top/bottom space around your <hr> */
}
/* 1. Reduce the vertical gap inside the CTA banner */
.cta-banner .container {
  gap: 1rem;               /* was 1.5rem */
  padding-bottom: 6rem;  /* was 4rem—bring newsletter section up */
}

/* 2. Bring the newsletter section closer to the CTA */
.newsletter-signup {
  padding-top: 2.5rem;     /* was 6rem—pull it up */
}

/* 3. Tweak the <hr> under the newsletter (if you’re using one) */
.section-divider,
main > hr {
  margin-top: 2rem;        /* was 4rem above the next section */
  margin-bottom: 2rem;     /* was 4rem below the previous section */
}
/* 1) TIGHTEN CTA BANNER PADDING & MARGINS */
.cta-banner {
  /* keep top padding for breathing room, shrink bottom */
  padding: 3rem 1rem 1.5rem;
  margin-bottom: 0;             /* remove any extra bottom margin */
}

.cta-banner .container h2 {
  margin-bottom: 0.75rem;       /* less gap beneath the heading */
}

.cta-banner .btn-hero,
.cta-banner .btn-donate {
  display: block;               /* stack them cleanly */
  margin: 0.5rem auto;          /* small top/bottom gap and center */
}

/* 2) BRING NEWSLETTER UP CLOSER */
#newsletter {
  /* shrink top padding so it pulls up under the CTA */
  padding: 1.5rem 1rem 4rem;
  margin-top: 0;                /* remove any extra top margin */
}

/* 3) OPTIONAL: ADJUST THE <HR> IF YOU’RE USING ONE */
main > hr.section-divider {
  margin-top: 1rem;             /* smaller gutter above newsletter */
  margin-bottom: 1rem;          /* smaller gutter below newsletter */
}
/* ───────────────────────────────────────────────────────
   TIGHTEN GAP BETWEEN SECTION TITLES & THEIR GRIDS
──────────────────────────────────────────────────────── */

/* Give both section titles a predictable bottom margin */
.section-title {
  margin-bottom: 1.5rem;
}

/* Make sure the grids sit flush against that title margin */
.impact-grid,
.process-grid {
  margin-top: 0;
}

/* If you still need more breathing room around the whole section: */
/* (optional—tweak to taste) */
#impact,
#process {
  padding-top: 3rem;    /* pulls the title up a bit */
  padding-bottom: 3rem; /* evens out bottom spacing */
}
/* ───────────────────────────────────────────────────────
   MORE SPACE BELOW THE FOOTER
──────────────────────────────────────────────────────── */

/* Option A: Just pad out the footer itself */
footer {
  padding-top: 3rem;    /* keep your existing top padding */
  padding-bottom: 4rem; /* increase bottom padding */
}

/* Option B: Guarantee every page has room under the footer */
body {
  padding-bottom: 7rem; /* or more, as you like */
}

/* (You can use both if you want an even bigger gap) */
/* ───────────────────────────────────────────────────────
   Center all “fancy-title” section headings
──────────────────────────────────────────────────────── */
.our-work-section .fancy-title {
  text-align: center;        /* center the text */
  margin-left: auto;         /* ensure auto horizontal margins */
  margin-right: auto;
  margin-bottom: 2rem;       /* a little breathing room below */
  max-width: 800px;           /* optional: limit the line‐length */
  width: 100%;
}

/* if you’d like extra space above each section too: */
.our-work-section {
  padding-top: 4rem;
}
/* ① Pull in the divider’s bottom‐margin */
hr.section-divider {
  margin: 1.5rem 0 1.5rem !important; /* top/bottom margins */
}

/* ② Reduce the top padding for all .our-work-section blocks */
.our-work-section {
  padding-top: 1.5rem !important;
}

/* ③ Tweak the title spacing inside those sections */
.our-work-section .fancy-title {
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
}
/* ───────────────────────────────────────────────────────
   TIGHTEN HERO DIVIDER + SECTION TOP PADDING
──────────────────────────────────────────────────────── */

/* 1) Shrink the <hr> under the hero */
main > hr.section-divider {
  margin: 2rem 0 1rem !important;    /* less top & bottom space */
}

/* 2) Reduce the top‑padding on each .our-work-section */
.our-work-section.container {
  padding-top: 1.5rem !important;    /* pull sections up closer */
}

/* 3) Kill any stray title margins in those sections */
.our-work-section .fancy-title {
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
}
/* ───────────────────────────────────────────────────────
   TIGHTEN OUR‑WORK SECTIONS (IMPACT, CAMPAIGN, ETC.)
──────────────────────────────────────────────────────── */

/* 1) Center all .fancy-title headings and remove excess top/bottom margins */
.our-work-section .fancy-title {
  text-align: center;
  margin: 0;               /* kill default margins */
  padding-top: 1rem;       /* small pad above title */
  padding-bottom: 0.5rem;  /* small pad below title */
}

/* 2) Pull up the grid/text under each title so the gap matches the title padding */
.our-work-section .impact-grid,
.our-work-section .campaign-content,
.our-work-section .process-grid,
.our-work-section .resource-grid,
.our-work-section .why-list {
  margin-top: 0.5rem;      /* match the bottom padding of the title */
}

/* 3) Reduce the section’s top padding so sections sit closer under your <hr> */
.our-work-section.container {
  padding-top: 2rem;       /* adjust to taste (was 4rem) */
  padding-bottom: 3rem;    /* optional: keep bottom breathing room */
}
/* ───────────────────────────────────────────────────────
   OVERRIDES FOR OUR‑WORK SECTIONS
   (Paste at the very bottom of styles.css)
──────────────────────────────────────────────────────── */

/* 1) Reset and center the fancier headings */
.our-work-section .fancy-title {
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 2) Reduce the top padding on each our‑work section */
.our-work-section.container {
  /* container adds padding by default—override it here */
  padding-top: 1.5rem !important;    /* pull it up under the divider */
  padding-bottom: 3rem !important;   /* keep some breathing room below */
}

/* 3) Give exactly 1rem between the heading and the content that follows */
.our-work-section .fancy-title + * {
  margin-top: 1rem !important;
}

/* 4) If you want special tweaks per section, you can target by ID: */
/*
#impact.our-work-section.container { padding-top: 1rem !important; }
#campaign.our-work-section.container { padding-top: 1rem !important; }
*/
/* ───────────────────────────────────────────────────────
   OUR‑WORK SECTION: TIGHTEN SPACING & CENTER TITLES
   (Paste this at the very end of styles.css)
──────────────────────────────────────────────────────── */

/* 1) Center all fancy titles & give them a small bottom margin */
.our-work-section .fancy-title {
  text-align: center !important;
  margin: 0 0 0.5rem !important;
  padding: 0 !important;
}

/* 2) Reduce the top padding on each “our-work” section */
#impact.our-work-section,
#campaign.our-work-section,
#process.our-work-section,
#resources.our-work-section,
#faq.our-work-section {
  padding-top: 2rem !important;    /* was 4rem */
  padding-bottom: 2rem !important; /* you can tweak this too */
}

/* 3) Give exactly 1rem between a title and its content */
#impact .fancy-title + .impact-grid,
#campaign .fancy-title + .campaign-content,
#process .fancy-title + .process-grid,
#resources .fancy-title + .lede,
#resources .fancy-title + .resource-grid,
#faq .fancy-title + .why-list {
  margin-top: 1rem !important;
}

/* 4) Footer bottom‑padding so it never hugs the window edge */
footer {
  padding: 2rem 1rem !important;  /* up from 1.5rem or whatever */
}

/* 5) Alternating feature rows (homepage “About / Our Work / …”) */
.feature-block > .feature-row {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin: 3rem 0;
  flex-direction: row;            /* default */
}
.feature-block > .feature-row:nth-of-type(even) {
  flex-direction: row-reverse !important;
}

/* force equal widths on card/text columns */
.feature-row .feature-card,
.feature-row .feature-text {
  flex: 1;
}

/* tighten up text line‑length */
.feature-text p {
  max-width: 28rem;
  line-height: 1.6;
}

/* stack on mobile */
@media (max-width: 768px) {
  .feature-row {
    flex-direction: column !important;
    text-align: center;
  }
  .feature-text p {
    max-width: 100%;
  }
}
/* ───────────────────────────────────────────────────────
   FEATURE CARD REFINEMENTS
──────────────────────────────────────────────────────── */
.feature-card {
  background: #fff;                          /* white on dark */
  border-radius: 1rem;                       /* softer corners */
  padding: 2rem;                             /* generous inner spacing */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);  /* gentle depth */
  transition: transform 0.25s ease, 
              box-shadow 0.25s ease;
}

.feature-card:hover {
  transform: translateY(-5px);               
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.25);
}

.feature-card h2 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  color: #111;
}

.feature-card p {
  margin: 0 0 1.5rem;
  line-height: 1.6;
  color: #333;
}

.feature-card .btn-hero {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  text-decoration: none;
}

/* if you have icons at the top, center them nicely: */
.feature-card .emoji,
.feature-card img {
  display: block;
  margin: 0 auto 1rem;
  max-width: 3rem;
}
/* ───────────────────────────────────────────────────────
   OVERRIDE: CENTER ALL OUR‑WORK SECTION TITLES
──────────────────────────────────────────────────────── */
.our-work-section .fancy-title {
  display: block !important;           /* make sure it's a block */
  width: 100% !important;              /* span the full container */
  margin: 0 0 1rem !important;         /* reset top/bottom space */
  text-align: center !important;       /* force centering */
}
/* ───────────────────────────────────────────────────────
   OUR‑WORK: CENTER TITLES & TIGHTEN SPACING
   (Place at the very end of styles.css)
──────────────────────────────────────────────────────── */

/* 1) Center all section titles */
.our-work-section .fancy-title {
  display: block !important;      /* ensure it spans full width */
  margin: 0 auto 0.75rem !important;  /* 0 top, auto left/right, .75rem bottom */
  text-align: center !important;  /* force the text to center */
}

/* 2) Pull those sections up under the <hr> */
.our-work-section.container {
  padding-top: 1.5rem !important;    /* was 4rem or similar */
  padding-bottom: 3rem !important;   /* keep bottom breathing room */
}

/* 3) Uniform gap between a title and its content */
.our-work-section .fancy-title + * {
  margin-top: 1rem !important;
}
/* ───────────────────────────────────────────────────────
   FORCE BOTH GRIDS TO SIT IN THE MIDDLE
──────────────────────────────────────────────────────── */

/* 1) Center the Impact grid within its container */
#impact .impact-grid {
  max-width: 900px !important;       /* make the grid narrower than full‑width */
  margin: 0 auto !important;         /* auto‑center it */
  justify-items: center !important;  /* center each card in its cell */
}

/* 2) Center the Annual Campaign two‑col grid */
#campaign .campaign-content.two-col {
  max-width: 900px !important;
  margin: 0 auto !important;
  justify-items: center !important;  /* center content in each column */
}

/* ───────────────────────────────────────────────────────
   ENSURE EACH CARD & COLUMN’S CONTENT IS CENTERED
──────────────────────────────────────────────────────── */

/* Impact cards: center icon, number, label */
#impact .impact-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Campaign columns: center image/text */
#campaign .campaign-content.two-col > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
/* ───────────────────────────────────────────────────────
   CENTER ALL OUR-WORK GRIDS & CONTENT
──────────────────────────────────────────────────────── */

/* 1. Narrow & center each grid inside its .container */
#impact .impact-grid,
#process .process-grid,
#resources .resource-grid {
  max-width: 900px !important;
  margin: 0 auto !important;
  justify-items: center !important;  /* for CSS‑grid children */
}

/* 2. Force “How We Work” steps to center their content */
#process .process-grid .process-step {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

/* 3. Center the Resources & Toolkits cards */
#resources .resource-grid .cta-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

/* 4. Tweak the Annual Campaign two‑column layout */
#campaign .campaign-content.two-col {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  justify-content: center !important;
  align-items: center !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  gap: 2rem !important; /* spacing between text & image */
}

/* 4a. Ensure the text block and image block inside the campaign each center their inner content */
#campaign .campaign-content.two-col > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

/* ───────────────────────────────────────────────────────
   EXTRA: Make sure download button in Campaign is centered
──────────────────────────────────────────────────────── */
#campaign .btn-ghost {
  margin: 1.5rem auto 0 !important;
  display: inline-block !important;
}

/* ───────────────────────────────────────────────────────
   LOWER CACHE PRIORITY FOR THE OLD OVERRIDES
   (so none of your previous hacks win)
──────────────────────────────────────────────────────── */
/* you can leave this empty; it just forces your file to reload */