@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Oswald:wght@200;300;400;500&family=Roboto+Condensed:wght@300;400;600&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --steel: #a8b3c6;
  --steel-dark: #8e9bb2;
  --footer: #8f9bb1;
  --navy: #1f3a6b;
  --navy2: #2c5085;
  --maroon: #8a2230;
  --maroon-deep: #6e1417;
  --teal: #135b66;
  --mission-blue: #6f88c9;
  --page-bg: #e7e7e6;
}

body {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  color: #333;
  background: var(--page-bg);
  line-height: 1.4;
}

img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }

/* ---------- Header ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 8px 20px;
  background: linear-gradient(180deg, #fefefe 0%, #edf1f5 100%);
  border-top: 2px solid #b6c4d8;
  border-bottom: 1px solid #c9d2df;
}
.brand { flex: 0 0 auto; display: inline-flex; align-items: center; }
.brand img { display: block; width: 202px; height: auto; }
.nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  font-size: 17px;
  font-weight: 500;
  white-space: nowrap;
}
.nav a {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  color: #171717;
  padding: 4px 0;
}
.nav a.active { color: #173c7a; font-weight: 700; }
.nav a:hover { color: #173c7a; }
.nav-item { position: relative; }
.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #eef0f2;
  min-width: 210px;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  border: 1px solid #d3d7dc;
  z-index: 50;
  padding: 6px 0;
}
.nav-item:hover .dropdown { display: block; }
.nav .dropdown a {
  display: block;
  padding: 11px 18px;
  font-size: 15px;
  color: #2f2f2f;
  white-space: nowrap;
  text-align: left;
}
.nav .dropdown a:hover { background: #dfe3e8; color: var(--maroon); text-decoration: underline; }
.donate {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  padding: 13px 18px;
  border-radius: 8px;
  border: 1px solid rgba(98, 0, 0, 0.28);
  background: linear-gradient(180deg, #d92a20 0%, #b10909 100%);
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 3px 10px rgba(133, 0, 0, 0.25);
}
.donate:hover { filter: brightness(1.03); }

/* Mobile menu controls — hidden on desktop, shown in the drawer media query */
.nav-toggle, .nav-overlay, .submenu-toggle { display: none; }

/* ---------- Generic page ---------- */
.page { max-width: 1500px; margin: 0 auto; }
.section { padding: 50px 60px; }
h1.page-title {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  color: var(--ink-blue, var(--navy));
  font-size: clamp(2rem, 4.5vw, 3rem);
  margin-bottom: 18px;
  line-height: 1.1;
}
h2.block-title {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  color: var(--navy);
  font-size: 38px;
  text-align: center;
  margin-bottom: 30px;
}
.maroon-text {
  color: var(--maroon);
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
  font-size: 21px;
}
.maroon-text p { margin-bottom: 18px; }

/* ---------- Footer ---------- */
.footer {
  background: var(--footer);
  color: #fff;
  padding: 30px 60px 10px;
}
.footer-grid {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px;
}
.footer h3 {
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  font-size: 22px;
  margin-bottom: 14px;
}
.footer-info { display: flex; gap: 30px; align-items: flex-start; }
.footer-addr { font-size: 13px; color: #d7dde6; line-height: 1.6; }
.socials { display: flex; gap: 10px; margin-top: 4px; }
.socials a {
  width: 38px; height: 38px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: bold; font-size: 18px;
}
.socials a svg { width: 20px; height: 20px; display: block; }
.socials .ig { background: #e1306c; }
.socials .fb { background: #3b5998; }
.footer-hours { text-align: right; font-size: 15px; line-height: 1.7; }
.footer-hours .open { color: #f4f6f9; font-weight: 600; }
.copyright {
  text-align: center;
  font-size: 11px;
  font-style: italic;
  color: #dfe4ec;
  padding: 24px 0 8px;
}

/* ---------- About page (v2 — stacked, no overlap) ---------- */
.about-page,
.about-page.about-v2 {
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: transparent;
  padding-bottom: 8px;
}

.about-v2-mission {
  background: linear-gradient(135deg, #1a3d7a 0%, #2d5aa8 55%, #4a72b8 100%);
  border-radius: 14px;
  padding: 40px 36px;
  text-align: center;
  color: #fff;
}

.about-v2-eyebrow {
  margin: 0 0 16px;
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

.about-v2-mission-copy {
  max-width: 52ch;
  margin: 0 auto;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.1rem, 2.4vw, 1.45rem);
  line-height: 1.55;
}

.about-v2-mission-copy p + p {
  margin-top: 18px;
}

.about-v2-photos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.about-v2-photo-card {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.about-v2-photo-card img {
  display: block;
  width: 100%;
  height: 320px;
  object-fit: cover;
  object-position: center;
}

.about-v2-story {
  padding: 36px 40px;
  background: #fff;
  border-radius: 14px;
}

.about-v2-story-title {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--ink-blue);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  margin: 0 0 28px;
  line-height: 1.1;
  text-align: center;
}

.about-v2-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 36px;
  align-items: center;
}

.about-v2-story-photo {
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.about-v2-story-text {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: #33405c;
  min-width: 0;
}

.about-v2-story-text p + p {
  margin-top: 14px;
}

.about-v2-fine-print {
  padding: 28px 36px;
  background: #fff;
  border-radius: 14px;
  border-left: 4px solid var(--accent-red);
}

.about-v2-fine-print-body {
  font-size: 15px;
  line-height: 1.55;
  color: #33405c;
}

.about-v2-fine-print-body p {
  margin-bottom: 12px;
}

/* ---------- Cards (Pet Services / Adoption) ---------- */
.card-row { display: flex; gap: 26px; padding: 10px 60px 60px; flex-wrap: wrap; }
.card { flex: 1; min-width: 200px; }
.card .card-img {
  border: 6px solid #cdd6c9;
  border-radius: 8px;
  height: 210px; object-fit: cover; width: 100%;
}
.card h4 {
  font-family: 'Quicksand', sans-serif;
  font-style: italic;
  color: var(--teal);
  font-size: 22px;
  margin: 14px 0 10px;
}
.card p { font-family: 'Oswald', sans-serif; font-weight: 300; color: #333; font-size: 16px; }

/* ---------- Get Involved help bar ---------- */
.help-section { background: #c6cfdd; padding: 50px 60px; }
.help-row { display: flex; max-width: 1100px; margin: 0 auto; }
.help-tile {
  flex: 1;
  background: var(--teal);
  color: #fff;
  text-align: center;
  padding: 28px 14px;
  border-right: 2px solid #c6cfdd;
}
.help-tile:nth-child(2) { background: #cfd6df; color: var(--teal); }
.help-tile:nth-child(4) { background: #f2f2f0; color: var(--teal); }
.help-tile .t {
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 1px;
}
.help-tile .s { font-family: 'Quicksand', sans-serif; font-style: italic; font-size: 16px; margin-top: 8px; }
.thanks {
  background: var(--steel);
  text-align: center;
  padding: 40px;
  color: var(--maroon);
  font-family: 'Quicksand', sans-serif;
  font-size: 26px;
  line-height: 1.5;
}

/* ---------- Buttons ---------- */
.btn-outline {
  display: inline-block;
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--teal);
  border: 2px solid var(--navy2);
  padding: 14px 30px;
  font-size: 22px;
}
.intro-flex { display: flex; gap: 40px; align-items: flex-start; }

/* ---------- Wellness ---------- */
.wellness-top { background: #f6f6e6; padding: 40px 60px; display: flex; gap: 40px; }
.wellness-top .w-img { width: 38%; }
.wellness-grid-wrap { background: #a9bda9; padding: 50px 60px; }
.well-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-width: 1200px; margin: 0 auto; }
.well-cell { background: #8a9bb8; color: #fff; }
.well-cell img { height: 230px; width: 100%; object-fit: cover; }
.well-cell h4 {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  color: var(--navy);
  text-align: center;
  text-decoration: underline;
  padding: 16px 8px 0;
  font-size: 22px;
}
.well-cell p { padding: 16px 18px 22px; text-align: center; font-size: 16px; }

/* ---------- Community Impact (home) ---------- */
.ci-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 20px 60px; }
.ci-col { text-align: center; }
.ci-col img { height: 220px; width: 100%; object-fit: cover; }
.ci-col .body { padding: 24px 18px; }
.ci-col:nth-child(1) .body { background: #6e1417; color: #fff; }
.ci-col:nth-child(2) .body { background: #e9eaec; }
.ci-col:nth-child(3) .body { background: #b9c2d2; }
.ci-col h3 { font-family: 'Quicksand', sans-serif; font-size: 28px; color: var(--maroon); margin-bottom: 14px; }
.ci-col:nth-child(1) h3 { color: #fff; }
.ci-col .desc { font-size: 16px; margin-bottom: 20px; }
.ci-btn {
  display: inline-block;
  background: linear-gradient(#7a1a1d, #4d0e10);
  color: #fff; padding: 10px 34px; border-radius: 20px;
  font-family: 'Quicksand', sans-serif;
}
.ci-actions { display: grid; grid-template-columns: repeat(4,1fr); background: #9aa6bb; }
.ci-actions div { text-align: center; padding: 22px; border-right: 1px solid #c6cfdd; color: #fff; }
.ci-actions .big { font-family: 'Quicksand', sans-serif; font-size: 26px; }
.ci-actions .small { font-size: 13px; letter-spacing: 1px; margin-top: 6px; }
.sponsors { background: #c6cfdd; padding: 40px 60px; }
.sponsors h2 {
  font-family: 'Quicksand', sans-serif; color: var(--navy);
  text-align: center; font-size: 36px; margin-bottom: 24px;
}
.sponsor-cols { display: flex; gap: 24px; max-width: 1100px; margin: 0 auto; }
.sponsor-panel { flex: 1; background: #b6c0d2; padding: 18px; border-radius: 4px; }
.panel-label {
  display: inline-block; background: #f6f6e6; color: #2c3e2c;
  font-family: 'Quicksand', sans-serif; font-style: italic; font-weight: 600;
  padding: 4px 14px; margin-bottom: 16px; font-size: 18px;
}
.sponsor-logos { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.sponsor-logos span {
  font-family: 'Quicksand', sans-serif; font-weight: 700;
  color: #555; font-size: 20px; padding: 10px 16px; background: #fff; border-radius: 6px;
}
.edu { padding: 50px 60px; text-align: center; }
.edu h2 { font-family: Georgia, serif; font-size: 40px; color: #333; margin-bottom: 24px; }
.edu p { max-width: 760px; margin: 0 auto; color: var(--navy2); font-size: 19px; }

/* ---------- Tails & Treasures page ---------- */
.tt { max-width: 1080px; margin: 0 auto; padding: 36px 30px 56px; text-align: center; }
.tt h1 { font-family: 'Quicksand', sans-serif; font-weight: 700; color: var(--navy); font-size: 50px; }
.tt .lead {
  color: var(--maroon); font-style: italic; font-family: 'Quicksand', sans-serif;
  font-weight: 500; font-size: 27px; max-width: 880px; margin: 16px auto 0; line-height: 1.4;
}
.tt hr.rule { border: none; border-top: 3px solid var(--mission-blue); max-width: 560px; margin: 36px auto; }
.tt h2 { font-family: 'Quicksand', sans-serif; font-weight: 700; color: var(--navy); font-size: 36px; margin-bottom: 18px; }
.tt .amount {
  font-family: 'Quicksand', sans-serif; font-weight: 700; color: #f0c33c;
  font-size: 92px; line-height: 1; display: inline-flex; align-items: center; gap: 14px;
}
.tt .amount .ico { font-size: 54px; }
.tt .stats {
  display: flex; justify-content: center; gap: 90px; flex-wrap: wrap;
  font-family: 'Quicksand', sans-serif; font-weight: 600; font-size: 36px; margin-top: 30px;
}
.tt .stats .bids { color: var(--maroon); }
.tt .stats .items { color: #8a8a3a; }
.tt h3 { font-family: 'Quicksand', sans-serif; font-style: italic; font-weight: 600; color: var(--navy); font-size: 33px; }
.tt a.shoplink { color: var(--maroon); font-weight: 700; text-decoration: underline; font-size: 26px; word-break: break-all; display: inline-block; margin: 16px 0; }
.tt .steel { color: #4a6a8a; font-style: italic; font-family: 'Quicksand', sans-serif; }
.tt .steel.big { font-size: 26px; }
.tt p { color: #4a6a8a; font-size: 19px; margin: 8px 0; }
.tt .note { color: var(--maroon); font-style: italic; font-size: 18px; }
.tt .wheel { display: block; margin: 26px auto; max-width: 340px; border-radius: 50%; }
.tt .spon-label { font-family: 'Quicksand', sans-serif; font-style: italic; font-weight: 700; font-size: 32px; text-shadow: 1px 1px 0 #fff; margin: 16px 0 10px; }
.tt .spon-label.event, .tt .spon-label.prem { color: var(--teal); }
.tt .spon-label.comm { color: var(--maroon); }
.tt .spon-logos { display: flex; justify-content: center; gap: 50px; align-items: center; flex-wrap: wrap; margin: 10px 0 26px; }
.tt .spon-logos span { font-family: 'Quicksand', sans-serif; font-weight: 700; color: #555; font-size: 20px; }
.tt .toby { display: inline-flex; flex-direction: column; align-items: center; }
.tt .toby img { width: 130px; height: 130px; object-fit: cover; border-radius: 50%; }
.tt .toby small { color: #6a8a3a; font-weight: 700; letter-spacing: 1px; margin-top: 6px; }
.tt .closing { color: #4a6a8a; font-style: italic; font-size: 18px; line-height: 1.5; margin-top: 18px; }

/* ---------- Empty the Shelters page (legacy layout — premium overrides below) ---------- */
.ets-title { text-align: center; color: var(--navy); font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 46px; padding: 26px 20px 18px; }

.ets-body .label { font-size: 19px; margin: 14px 0 4px; }
.ets-body ul { margin: 0 0 8px 22px; }
.ets-body li { margin: 7px 0; line-height: 1.4; }
.ets-body ul ul { list-style: circle; margin: 6px 0 6px 26px; }
.pets-head { color: var(--ink-blue); font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: clamp(1.5rem, 3vw, 2rem); padding: 32px 0 20px; text-align: center; margin: 0; }
.pet-filters { display: flex; gap: 10px; justify-content: stretch; margin: 0; }
.pet-filters select { padding: 4px 8px; font-family: 'Roboto Condensed', sans-serif; }
.pet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 20px; max-width: none; margin: 0; padding: 0; }
.pet { text-align: left; }
.pet img { width: 100%; height: 200px; object-fit: cover; }
.pet a.name { color: var(--ink-blue); text-decoration: none; font-weight: 700; display: block; margin: 0; }
.pet a.name:hover { color: var(--accent-red); text-decoration: underline; }
.pet .meta { font-family: 'Roboto Condensed', Arial, sans-serif; font-size: 13px; color: #5a6678; }
.ets-thanks { text-align: center; padding: 44px 30px; }
.ets-thanks .row { display: flex; align-items: center; justify-content: center; gap: 30px; flex-wrap: wrap; }
.ets-thanks .script { font-family: 'Segoe Script', 'Brush Script MT', cursive; color: #5a78b0; font-size: 36px; }
.ets-thanks a { color: var(--maroon); text-decoration: underline; font-weight: 700; font-size: 22px; }
.ets-thanks p { color: var(--navy2); font-size: 20px; margin-top: 20px; line-height: 1.5; }

/* ---------- Events page ---------- */
.events-title { background: #fbeee6; text-align: center; padding: 28px 20px; }
.events-title h1 {
  font-family: 'Quicksand', sans-serif; font-weight: 700;
  color: var(--navy); font-size: 64px; letter-spacing: 1px;
}
.events-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 8px 30px 40px; max-width: 1500px; margin: 0 auto;
}
.ev-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px 36px; min-height: 320px;
}
.ev-blue { background: #e7f1fb; }
.ev-white { background: #ffffff; }
.ev-img { padding: 0; }
.ev-img img { width: 100%; height: 100%; object-fit: cover; }
.ev-cell h3 {
  font-family: 'Quicksand', sans-serif; font-weight: 700;
  color: var(--navy); font-size: 34px; line-height: 1.2; margin-bottom: 28px;
}
.ev-cell .dates { color: var(--navy2); font-size: 24px; line-height: 1.4; }
.ev-cell .desc { color: #333; font-size: 18px; margin-top: 16px; line-height: 1.45; }
.ev-cell .ital { font-style: italic; color: var(--navy2); font-size: 22px; }

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
  .topbar { flex-wrap: nowrap; align-items: center; gap: 10px; padding: 12px 16px; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    order: 0; background: none; border: none; font-size: 28px; line-height: 1;
    color: #1f3a6b; cursor: pointer; padding: 2px 6px; margin-right: 2px;
  }
  .brand { order: 1; flex: 1 1 auto; min-width: 0; }
  .donate { order: 2; flex: 0 0 auto; margin-left: auto; white-space: nowrap; }

  /* Off-canvas drawer */
  .nav-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 998; }
  body.nav-open { overflow: hidden; }
  body.nav-open .nav-overlay { display: block; }
  .nav {
    position: fixed; top: 0; left: 0; height: 100vh; width: 82%; max-width: 330px;
    background: #fff; flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; padding: 62px 0 24px; transform: translateX(-100%); transition: transform .28s ease;
    box-shadow: 2px 0 28px rgba(0,0,0,.2); overflow-y: auto; z-index: 999;
  }
  body.nav-open .nav { transform: translateX(0); }
  .nav > a, .nav-item { width: 100%; border-bottom: 1px solid #eef0f3; }
  .nav > a, .nav-item > a { display: block; padding: 14px 22px; font-size: 16px; }
  .nav-item { position: relative; }
  .submenu-toggle {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 50%; right: 14px; transform: translateY(-50%);
    width: 34px; height: 34px; border-radius: 50%;
    background: #eef2f9; border: 1px solid #d8e0ec; color: #2c5085;
    font-size: 13px; line-height: 1; cursor: pointer;
    transition: transform .2s ease, background .2s ease; z-index: 2;
  }
  .submenu-toggle:hover { background: #e1e9f6; }
  .nav-item.open > .submenu-toggle { transform: translateY(-50%) rotate(180deg); background: #2c5085; color: #fff; border-color: #2c5085; }
  .dropdown, .dropdown-flyout {
    position: static !important; transform: none !important; display: none !important;
    background: #f5f7fa; box-shadow: none; border: none; min-width: 0; padding: 0;
  }
  .nav-item.open > .dropdown { display: block !important; }
  .nav .dropdown a { display: block; text-align: left; padding: 12px 22px 12px 38px; font-size: 15px; border-top: 1px solid #eaedf1; }
  .section { padding: 40px 30px; }
  h1.page-title { font-size: 40px; }
  h2.block-title { font-size: 32px; }

  .card-row { gap: 18px; }
  .card { flex: 1 1 45%; }
  .well-grid { grid-template-columns: repeat(2, 1fr); }
  .ci-three { grid-template-columns: 1fr; }
  .events-title h1 { font-size: 48px; }
}

/* ---------- Phone ---------- */
@media (max-width: 640px) {
  .topbar { padding: 10px 14px; }
  .brand { gap: 7px; }
  .brand .logo-icons { font-size: 10px; }
  .brand .logo-mark { font-size: 18px; }
  .brand-text .l1, .brand-text .l2 { font-size: 12px; }
  .donate { font-size: 12px; padding: 9px 12px; }

  .section { padding: 28px 18px; }
  h1.page-title { font-size: 32px; }
  h2.block-title { font-size: 26px; }
  .maroon-text { font-size: 18px; }

  /* About */
  .about-v2-photos { grid-template-columns: 1fr; gap: 20px; }
  .about-v2-photo-card img { height: 260px; }
  .about-v2-story-grid { grid-template-columns: 1fr; gap: 24px; }
  .about-v2-story,
  .about-v2-fine-print,
  .about-v2-mission { padding: 24px 20px; }

  /* Cards */
  .card-row { padding: 10px 18px 36px; }
  .card { flex: 1 1 100%; }
  .card .card-img { height: 240px; }

  /* Get Involved */
  .help-section { padding: 32px 18px; }
  .help-row { flex-direction: column; }
  .help-tile { border-right: none; border-bottom: 2px solid #c6cfdd; }
  .thanks { font-size: 20px; padding: 30px 18px; }

  /* Adoption intro */
  .intro-flex { flex-direction: column; gap: 18px; }
  .btn-outline { font-size: 18px; padding: 12px 22px; }

  /* Wellness */
  .wellness-top { flex-direction: column; gap: 22px; padding: 28px 18px; }
  .wellness-top > div { width: 100% !important; }
  .wellness-grid-wrap { padding: 30px 18px; }
  .well-grid { grid-template-columns: 1fr; }

  /* Community Impact home */
  .ci-three { padding: 14px 18px; gap: 14px; }
  .ci-actions { grid-template-columns: repeat(2, 1fr); }
  .ci-actions div { min-width: 0; padding: 16px 10px; border-bottom: 1px solid #c6cfdd; }
  .ci-actions .big { font-size: 19px; overflow-wrap: break-word; }
  .ci-actions .small { font-size: 11px; letter-spacing: .4px; }
  .sponsors { padding: 30px 18px; }
  .sponsor-cols { flex-direction: column; gap: 16px; }
  .edu { padding: 32px 18px; }
  .edu h2 { font-size: 28px; }
  section[style*="display:flex"] { flex-direction: column !important; gap: 20px !important; padding: 28px 18px !important; }
  section[style*="display:flex"] > img { width: 100% !important; }
  section[style*="display:flex"] > div { padding: 30px !important; }

  /* Empty the Shelters */
  .ets-title { font-size: 30px; padding: 18px 14px; }
  .ets-hero { width: 100%; }
  .ets-band { width: 100%; }
  .ets-band h2 { font-size: 30px; }
  .ets-body { padding: 22px 18px; font-size: 17px; }
  .pets-head { padding: 6px 18px 0; }
  .pet-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .pet-filters { flex-wrap: wrap; }

  /* Events */
  .events-title { padding: 20px 14px; }
  .events-title h1 { font-size: 30px; }
  .events-grid { grid-template-columns: 1fr; padding: 8px 16px 30px; }
  .ev-cell { min-height: 0; padding: 30px 22px; }
  .ev-img { min-height: 240px; }
  .ev-cell h3 { font-size: 26px; margin-bottom: 18px; }
  .ev-cell .dates { font-size: 20px; }
  .ev-cell .ital { font-size: 18px; }

  /* Tails & Treasures */
  .tt { padding: 24px 16px 40px; }
  .tt h1 { font-size: 28px; }
  .tt .lead { font-size: 18px; }
  .tt h2 { font-size: 24px; }
  .tt .amount { font-size: 46px; gap: 8px; }
  .tt .amount .ico { font-size: 28px; }
  .tt .stats { gap: 18px; font-size: 22px; }
  .tt h3 { font-size: 22px; }
  .tt a.shoplink { font-size: 16px; }
  .tt .steel.big { font-size: 20px; }
  .tt .spon-label { font-size: 24px; }
  .tt .spon-logos { gap: 22px; }
  .tt .wheel { max-width: 260px; }

  /* Footer */
  .footer { padding: 26px 18px 10px; }
  .footer-grid { flex-direction: column; gap: 22px; }
  .footer-hours { text-align: left; }

  /* prevent any stray horizontal overflow on phones */
  html, body { overflow-x: hidden; }
}

/* ---------- CMS: nested flyout sub-sub menus + footer links ---------- */
.dropdown-sub { position: relative; }
.dropdown-sub > a.has-sub { display: block; }
.dropdown-flyout { top: 0; left: 100%; transform: none; }
.dropdown-sub:hover > .dropdown-flyout { display: block; }
.footer-links { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 14px; }
.footer-links a { color: #dfe4ec; font-size: 14px; text-decoration: underline; }
.footer-links a:hover { color: #fff; }
@media (max-width: 640px) {
  .dropdown-flyout { position: static; left: 0; }
}

/* ---------- Wellness Clinic Prices page ---------- */
.clinic { padding: 30px 60px 60px; }
.clinic h1 { font-family: 'Quicksand', sans-serif; font-weight: 700; color: var(--navy); text-align: center; font-size: 46px; margin-bottom: 34px; }
.price-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; max-width: 1300px; margin: 0 auto; }
.price-col h2 { font-family: 'Quicksand', sans-serif; font-weight: 700; font-style: italic; color: #3a6ea5; font-size: 30px; margin-bottom: 14px; }
.price-row { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 7px 0; }
.price-name { font-family: Georgia, serif; color: #2a2a38; font-size: 19px; }
.price-val { font-family: Georgia, serif; font-style: italic; color: var(--teal); font-size: 19px; white-space: nowrap; }
.bubble { background: #a9d4d9; border: 2px solid #5fa8b0; border-radius: 16px; padding: 14px 20px; color: #1f3a4a; font-size: 15px; text-align: center; line-height: 1.4; margin: 26px 0 0 auto; max-width: 340px; }
.protected { max-width: 1000px; margin: 44px auto 0; }
.protected h2 { font-family: Georgia, serif; font-weight: 700; color: var(--maroon); font-size: 30px; margin-bottom: 12px; }
.protected ul { margin: 0 0 14px 22px; color: #333; font-size: 18px; }
.protected li { margin: 7px 0; }
.protected .sub { font-style: italic; color: var(--maroon); font-size: 18px; }
.free-vax { text-align: center; margin: 32px 0; }
.free-vax-btn { display: inline-block; background: #6b3fa0; color: #fff; padding: 14px 32px; border-radius: 6px; font-family: 'Quicksand', sans-serif; line-height: 1.1; }
.free-vax-btn .t { font-size: 24px; font-weight: 600; }
.free-vax-btn .s { font-size: 13px; margin-top: 4px; }
.clinic hr { border: none; border-top: 3px solid var(--mission-blue); max-width: 560px; margin: 34px auto 0; }
@media (max-width: 640px) {
  .clinic { padding: 24px 18px 40px; }
  .clinic h1 { font-size: 30px; margin-bottom: 22px; }
  .price-cols { grid-template-columns: 1fr; gap: 30px; }
  .price-col h2 { font-size: 26px; }
  .price-name, .price-val { font-size: 17px; }
  .bubble { max-width: 100%; margin: 22px 0 0; }
  .protected h2 { font-size: 26px; }
  .protected ul { font-size: 17px; }
}

/* Spay/Neuter Surgical Procedures section (Wellness Clinic page) */
.surgical { max-width: 1300px; margin: 4px auto 0; }
.surgical h2 { font-family: 'Quicksand', sans-serif; font-weight: 700; font-style: italic; color: #3a6ea5; font-size: 30px; margin-bottom: 18px; }
.surgical-cols { display: grid; grid-template-columns: 1.05fr .95fr; gap: 50px; align-items: start; }
.surgical-prices .price-row { padding: 10px 0; align-items: flex-start; }
.surgical-prices .price-name { font-size: 21px; padding-left: 28px; }
.surgical-prices .price-val { font-size: 24px; }
.surgical-prices .sub-row .price-name { padding-left: 48px; }
.surgical-prices .sub-row strong { font-weight: 700; }
.surgical-prices .sub-row small { display: block; font-family: Georgia, serif; font-size: 13px; color: #555; margin-top: 2px; }
.receive h3 { font-family: 'Quicksand', sans-serif; font-weight: 700; font-style: italic; color: #3a6ea5; font-size: 24px; margin-bottom: 12px; }
.receive ul { margin: 0 0 0 22px; }
.receive li { font-family: Georgia, serif; font-size: 18px; margin: 7px 0; color: #7a1f2b; }
@media (max-width: 640px) {
  .surgical-cols { grid-template-columns: 1fr; gap: 26px; }
  .surgical h2 { font-size: 26px; }
  .surgical-prices .price-name { font-size: 18px; padding-left: 14px; }
  .surgical-prices .price-val { font-size: 20px; }
  .surgical-prices .sub-row .price-name { padding-left: 24px; }
  .receive li { font-size: 17px; }
}

/* ---------- Wellness subpages (legacy — overridden by premium WPC block below) ---------- */

/* ---------- Spay/Neuter Program page ---------- */
.snp-page { padding-bottom: 40px; }
.snp-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 700;
  color: var(--navy2);
  font-size: 48px;
  padding: 28px 60px 18px;
}
.snp-top {
  display: grid;
  grid-template-columns: 200px 1fr 300px;
  gap: 28px;
  align-items: start;
  padding: 0 60px 24px;
}
.snp-top img { width: 100%; height: 200px; object-fit: cover; border-radius: 2px; }
.snp-mission { color: var(--maroon); font-family: Georgia, serif; font-size: 17px; line-height: 1.55; }
.snp-mission strong { display: block; font-size: 18px; margin-bottom: 8px; }
.snp-mission ul { margin: 8px 0 18px 18px; }
.snp-mission li { margin: 4px 0; }
.snp-contact-btn {
  display: inline-block;
  background: linear-gradient(180deg, #8aa4c8 0%, #6f88b8 100%);
  color: var(--navy);
  border: 2px solid var(--navy2);
  border-radius: 28px;
  padding: 12px 28px;
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  font-size: 18px;
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
}
.snp-contact-btn:hover { background: linear-gradient(180deg, #7a96bc 0%, #5f7aa8 100%); }
.snp-stat-box {
  background: var(--navy2);
  color: #fff;
  border: 3px solid #fff;
  border-radius: 4px;
  padding: 22px 20px;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.snp-tagline {
  text-align: center;
  color: #666;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 17px;
  padding: 10px 60px 30px;
}
.snp-split {
  display: flex;
  gap: 40px;
  align-items: center;
  padding: 30px 60px;
}
.snp-split img { width: 42%; flex-shrink: 0; object-fit: cover; border-radius: 2px; }
.snp-split .maroon-text { flex: 1; font-size: 17px; }
.snp-band {
  display: flex;
  gap: 36px;
  align-items: center;
  padding: 36px 60px;
  background: linear-gradient(180deg, #c6d4e8 0%, #e8edf5 60%, #fff 100%);
}
.snp-band img { width: 180px; height: 180px; flex-shrink: 0; object-fit: cover; border-radius: 2px; }
.snp-band .maroon-text { flex: 1; font-size: 17px; }
.snp-bottom { padding: 36px 60px 20px; }
.snp-bottom h2 {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 700;
  color: var(--navy2);
  font-size: 28px;
  text-align: center;
  margin-bottom: 22px;
}
.snp-bottom h3 {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 700;
  color: var(--navy2);
  font-size: 22px;
  margin-bottom: 16px;
}
.snp-bottom p {
  color: var(--navy2);
  font-family: Georgia, serif;
  font-size: 17px;
  line-height: 1.55;
  margin-bottom: 14px;
}
.snp-bottom .snp-closing {
  text-align: center;
  font-style: italic;
  margin-top: 24px;
  color: #4a5a72;
}
@media (max-width: 900px) {
  .snp-top { grid-template-columns: 1fr 1fr; }
  .snp-stat-box { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .snp-title { font-size: 32px; padding: 22px 18px 14px; }
  .snp-top { grid-template-columns: 1fr; padding: 0 18px 20px; gap: 20px; }
  .snp-top img { height: 220px; }
  .snp-tagline { padding: 10px 18px 24px; }
  .snp-split { flex-direction: column; padding: 24px 18px; gap: 22px; }
  .snp-split img { width: 100%; }
  .snp-band { flex-direction: column; padding: 28px 18px; gap: 22px; }
  .snp-band img { width: 100%; height: 220px; }
  .snp-bottom { padding: 28px 18px 16px; }
  .snp-bottom h2 { font-size: 22px; }
}

/* ---------- Spay-Neuter Assistance — Community Cats page ---------- */
.tnr-page { padding-bottom: 40px; }
.tnr-alert {
  color: var(--maroon);
  font-family: Georgia, serif;
  font-size: 17px;
  line-height: 1.5;
  padding: 24px 60px 10px;
}
.tnr-alert a { color: var(--maroon); text-decoration: underline; }
.tnr-intro {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  padding: 10px 60px 30px;
}
.tnr-intro-text { flex: 1; }
.tnr-intro-text h1 {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  color: var(--navy2);
  font-size: 34px;
  line-height: 1.2;
  margin-bottom: 18px;
}
.tnr-intro-text p {
  color: var(--navy2);
  font-family: Georgia, serif;
  font-size: 17px;
  line-height: 1.55;
  margin-bottom: 14px;
}
.tnr-intro-text a { color: var(--navy2); text-decoration: underline; }
.tnr-intro-img { width: 34%; max-width: 320px; flex-shrink: 0; object-fit: cover; border-radius: 2px; }
.tnr-body { padding: 10px 60px 30px; color: var(--navy2); font-family: Georgia, serif; font-size: 17px; line-height: 1.55; }
.tnr-body h2 {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--navy2);
  margin: 22px 0 10px;
}
.tnr-body blockquote {
  font-style: italic;
  margin: 10px 0 16px;
  padding-left: 0;
  border: none;
}
.tnr-body blockquote cite { display: block; font-style: normal; margin-top: 6px; }
.tnr-body p { margin-bottom: 14px; }
.tnr-body ul { margin: 8px 0 16px 22px; }
.tnr-body li { margin: 6px 0; }
.tnr-help {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  padding: 10px 60px 36px;
}
.tnr-help-text { flex: 1; color: var(--navy2); font-family: Georgia, serif; font-size: 17px; line-height: 1.55; }
.tnr-help-text p { margin-bottom: 14px; }
.tnr-help-text a { color: var(--navy2); text-decoration: underline; }
.tnr-script {
  font-family: 'Segoe Script', 'Brush Script MT', cursive;
  font-weight: 700;
  font-size: 28px;
  color: #222;
  margin-bottom: 16px;
  line-height: 1.3;
}
.tnr-help-text h3 {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--navy2);
  margin: 22px 0 10px;
}
.tnr-help-img { width: 28%; max-width: 260px; flex-shrink: 0; object-fit: cover; border-radius: 2px; min-height: 320px; }
@media (max-width: 640px) {
  .tnr-alert { padding: 20px 18px 8px; font-size: 16px; }
  .tnr-intro { flex-direction: column; padding: 10px 18px 24px; gap: 20px; }
  .tnr-intro-img { width: 100%; max-width: none; }
  .tnr-intro-text h1 { font-size: 26px; }
  .tnr-body { padding: 10px 18px 24px; }
  .tnr-help { flex-direction: column; padding: 10px 18px 28px; gap: 20px; }
  .tnr-help-img { width: 100%; max-width: none; min-height: 240px; }
  .tnr-script { font-size: 24px; }
}

/* ---------- Adopt Cats & Dogs page ---------- */
.adopt-ready-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 30px 60px 10px;
}
.adopt-ready-row {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  padding: 10px 60px 36px;
}
.adopt-ready-row img { width: 42%; object-fit: cover; border-radius: 2px; }
.adopt-ready-text {
  flex: 1;
  color: var(--navy2);
  font-family: Georgia, serif;
  font-size: 17px;
  line-height: 1.55;
}
.pet-listing-panel {
  background: transparent;
  border: none;
  max-width: none;
  margin: 0;
  max-height: none;
  overflow: visible;
  padding: 0;
  box-shadow: none;
}
.pet-photo-link { display: block; }
.pet-photo-link img { width: 100%; }
.pet .name { display: block; }
.pet-grid-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: #666;
  font-family: Georgia, serif;
  padding: 40px 20px;
}
.pet.is-hidden { display: none; }
@media (max-width: 640px) {
  .adopt-ready-header { padding: 24px 18px 8px; }
  .adopt-ready-row { flex-direction: column; padding: 10px 18px 28px; gap: 22px; }
  .adopt-ready-row img { width: 100%; }
  .pet-listing-panel { margin: 0; max-height: none; }
}

/* ---------- Adoption Policies & Procedures page ---------- */
.adopt-policies-page { padding-bottom: 50px; }
.adopt-policies-top {
  display: flex;
  gap: 36px;
  align-items: flex-start;
  padding: 30px 60px 20px;
}
.adopt-policies-image {
  width: 38%;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 2px;
}
.adopt-policies-notice { flex: 1; padding-top: 6px; }
.adopt-policies-note {
  color: var(--navy2);
  font-family: Georgia, serif;
  font-size: 17px;
  line-height: 1.55;
}
.adopt-policies-note a { color: var(--navy2); text-decoration: underline; }
.adopt-safety-note {
  text-align: center;
  color: var(--maroon);
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.45;
  padding: 10px 60px 28px;
  max-width: 900px;
  margin: 0 auto;
}
.adopt-policies-body {
  padding: 10px 60px 20px;
  text-align: center;
}
.adopt-policies-body h1 {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  color: var(--navy2);
  font-size: 38px;
  margin-bottom: 14px;
}
.adopt-policies-body h2 {
  font-family: Georgia, serif;
  font-weight: 400;
  font-style: italic;
  color: var(--navy2);
  font-size: 20px;
  margin-bottom: 28px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.adopt-policy-list {
  list-style: none;
  max-width: 820px;
  margin: 0 auto;
  text-align: left;
  padding: 0;
}
.adopt-policy-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 16px;
  color: var(--maroon);
  font-family: Georgia, serif;
  font-size: 17px;
  line-height: 1.55;
}
.adopt-policy-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  background: var(--maroon);
}
@media (max-width: 640px) {
  .adopt-policies-top { flex-direction: column; padding: 24px 18px 16px; gap: 22px; }
  .adopt-policies-image { width: 100%; }
  .adopt-safety-note { padding: 10px 18px 22px; font-size: 16px; }
  .adopt-policies-body { padding: 10px 18px 16px; }
  .adopt-policies-body h1 { font-size: 28px; }
  .adopt-policies-body h2 { font-size: 18px; }
  .adopt-policy-list li { font-size: 16px; }
}

/* ---------- Dog and Cat Adoption Tips page ---------- */
.adopt-tips-page {
  padding: 36px 60px 50px;
  max-width: 1100px;
}
.adopt-tips-intro {
  color: var(--navy2);
  font-family: Georgia, serif;
  font-size: 18px;
  line-height: 1.55;
  margin: 18px 0 28px;
  max-width: 820px;
}
.adopt-tips-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.adopt-tips-links li { margin-bottom: 14px; }
.adopt-tips-links a {
  color: #333;
  font-family: Georgia, serif;
  font-size: 18px;
  text-decoration: underline;
}
.adopt-tips-links a:hover { color: var(--maroon); }
@media (max-width: 640px) {
  .adopt-tips-page { padding: 28px 18px 40px; }
  .adopt-tips-intro { font-size: 17px; }
  .adopt-tips-links a { font-size: 17px; }
}

/* ---------- Barn Cat Program page ---------- */
.barn-cats-page { padding-bottom: 50px; }
.barn-cats-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 36px 50px 30px;
  flex-wrap: wrap;
}
.barn-cats-side {
  width: 28%;
  max-width: 320px;
  min-width: 200px;
  object-fit: cover;
  border-radius: 2px;
}
.barn-cats-center {
  flex: 1;
  min-width: 280px;
  max-width: 520px;
  text-align: center;
}
.barn-cats-center h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  color: var(--navy2);
  font-size: 48px;
  margin-bottom: 18px;
}
.barn-cats-alert {
  color: var(--maroon);
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.45;
}
.barn-cats-alert a { color: var(--maroon); text-decoration: underline; }
.barn-cats-body {
  padding: 10px 60px 40px;
  max-width: 1100px;
  margin: 0 auto;
  color: var(--teal);
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 18px;
  line-height: 1.55;
}
.barn-cats-body > p { margin-bottom: 28px; }
.barn-cats-body h2 {
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 14px;
  color: var(--teal);
}
.barn-cats-list {
  margin: 0 0 0 22px;
  padding: 0;
}
.barn-cats-list > li { margin-bottom: 14px; }
.barn-cats-list ul {
  margin: 10px 0 0 22px;
  list-style: disc;
}
.barn-cats-list ul li { margin-bottom: 8px; }
@media (max-width: 640px) {
  .barn-cats-hero { padding: 28px 18px 22px; gap: 20px; }
  .barn-cats-side { width: 100%; max-width: none; }
  .barn-cats-center h1 { font-size: 36px; }
  .barn-cats-alert { font-size: 16px; }
  .barn-cats-body { padding: 10px 18px 32px; font-size: 17px; }
}

/* ---------- Outdoor Cat Tips page ---------- */
.outdoor-cats-page { padding: 30px 20px 50px; }
.outdoor-cats-credit {
  text-align: center;
  color: var(--navy2);
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 18px;
  margin-bottom: 18px;
}
.outdoor-cats-brand { text-align: center; margin-bottom: 28px; }
.outdoor-cats-logo-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 10px;
  border: 3px solid #111;
  border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23000' d='M18 24c0-8 6-14 14-14s14 6 14 14v4c5 2 8 7 8 13v14H10V41c0-6 3-11 8-13v-4zm10 30h8v6h-8v-6zm16 0h8v6h-8v-6z'/%3E%3C/svg%3E") center/52px no-repeat;
}
.outdoor-cats-logo-text {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 40px;
  font-weight: 700;
  color: #111;
  line-height: 1.1;
}
.outdoor-cats-wrap {
  background: #dce8f4;
  max-width: 980px;
  margin: 0 auto;
  padding: 36px 50px 32px;
}
.outdoor-cats-wrap h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  color: var(--navy2);
  font-size: 32px;
  line-height: 1.25;
  margin-bottom: 28px;
  text-align: center;
}
.outdoor-cats-wrap h2 {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  color: var(--navy2);
  font-size: 22px;
  margin: 28px 0 12px;
}
.outdoor-cats-wrap h3 {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  color: var(--navy2);
  font-size: 18px;
  margin: 20px 0 8px;
}
.outdoor-cats-wrap p {
  color: #333;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 17px;
  line-height: 1.55;
  margin-bottom: 12px;
}
.outdoor-cats-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}
.outdoor-cats-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 12px;
  color: #333;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 17px;
  line-height: 1.5;
}
.outdoor-cats-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  background: var(--navy2);
}
.outdoor-cats-copy {
  text-align: center;
  font-size: 14px !important;
  color: #555 !important;
  margin-top: 32px !important;
  padding-top: 16px;
  border-top: 1px solid #b8c9da;
}
@media (max-width: 640px) {
  .outdoor-cats-page { padding: 24px 14px 40px; }
  .outdoor-cats-logo-text { font-size: 30px; }
  .outdoor-cats-wrap { padding: 28px 20px 24px; }
  .outdoor-cats-wrap h1 { font-size: 26px; }
  .outdoor-cats-wrap h2 { font-size: 20px; }
  .outdoor-cats-wrap h3 { font-size: 17px; }
  .outdoor-cats-wrap p,
  .outdoor-cats-list li { font-size: 16px; }
}

/* ---------- Surrendering Animals page ---------- */
.surrender-page {
  padding: 40px 60px 50px;
  background: #fff;
}
.surrender-layout {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  max-width: 1100px;
  margin: 0 auto;
}
.surrender-photo {
  flex: 0 0 300px;
  width: 300px;
  height: 400px;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid #d1d8e0;
}
.surrender-content { flex: 1; min-width: 0; padding-top: 8px; }
.surrender-content h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 700;
  color: var(--navy2);
  font-size: 34px;
  line-height: 1.2;
  margin-bottom: 24px;
}
.surrender-intro {
  color: var(--maroon);
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-size: 19px;
  line-height: 1.55;
  margin-bottom: 20px;
}
.surrender-intro a {
  color: var(--maroon);
  text-decoration: underline;
}
.surrender-notice {
  color: var(--navy2);
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.55;
}
.surrender-notice a {
  color: var(--navy2);
  text-decoration: underline;
}
@media (max-width: 768px) {
  .surrender-page { padding: 28px 18px 40px; }
  .surrender-layout { flex-direction: column; align-items: center; gap: 28px; }
  .surrender-photo { flex: none; width: min(280px, 100%); height: 360px; }
  .surrender-content { padding-top: 0; }
  .surrender-content h1 { font-size: 28px; }
  .surrender-intro,
  .surrender-notice { font-size: 17px; }
}

/* ---------- Stray Animal Help page ---------- */
.stray-page {
  padding: 36px 60px 50px;
  background: #fff;
  max-width: 1100px;
  margin: 0 auto;
}
.stray-page h1 {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-weight: 700;
  color: var(--navy2);
  font-size: 36px;
  line-height: 1.2;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--maroon);
}
.stray-alert {
  color: var(--maroon);
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.55;
  margin-bottom: 28px;
}
.stray-alert a {
  color: var(--maroon);
  text-decoration: underline;
}
.stray-panel {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  background: #b0bccd;
  border-radius: 6px;
  padding: 28px 32px;
  margin-bottom: 24px;
}
.stray-panel:last-child { margin-bottom: 0; }
.stray-photo {
  flex: 0 0 200px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
}
.stray-panel-body { flex: 1; min-width: 0; }
.stray-panel-body h2 {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-weight: 700;
  color: var(--maroon);
  font-size: 24px;
  margin-bottom: 14px;
}
.stray-panel-body p {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  color: #333;
  font-size: 18px;
  line-height: 1.55;
  margin-bottom: 14px;
}
.stray-panel-body p:last-child { margin-bottom: 0; }
.stray-panel-body a {
  color: var(--navy2);
  text-decoration: underline;
}
@media (max-width: 768px) {
  .stray-page { padding: 28px 18px 40px; }
  .stray-page h1 { font-size: 28px; }
  .stray-alert { font-size: 17px; }
  .stray-panel {
    flex-direction: column;
    align-items: center;
    padding: 24px 20px;
    gap: 20px;
  }
  .stray-photo { flex: none; }
  .stray-panel-body h2 { font-size: 22px; }
  .stray-panel-body p { font-size: 17px; }
}

/* ---------- Courtesy Posts & Rehoming Pets page ---------- */
.rehome-page {
  padding: 36px 60px 50px;
  background: #fff;
  max-width: 1100px;
  margin: 0 auto;
}
.rehome-page h1,
.rehome-page h2 {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-weight: 700;
  color: #6b8ba4;
  line-height: 1.25;
}
.rehome-page h1 {
  font-size: 34px;
  margin-bottom: 28px;
}
.rehome-page h2 {
  font-size: 28px;
  margin: 32px 0 18px;
}
.rehome-intro {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  margin-bottom: 24px;
}
.rehome-intro-img {
  flex: 0 0 320px;
  width: 320px;
  max-width: 100%;
  border-radius: 4px;
  object-fit: cover;
}
.rehome-intro-text,
.rehome-body {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  color: var(--maroon);
  font-size: 19px;
  line-height: 1.55;
}
.rehome-intro-text { flex: 1; min-width: 0; }
.rehome-intro-text p,
.rehome-body p,
.rehome-warning {
  margin-bottom: 16px;
}
.rehome-warning {
  color: var(--maroon);
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-size: 19px;
  line-height: 1.55;
}
.rehome-infographic-link {
  display: block;
  max-width: 420px;
  margin: 24px auto 0;
  color: inherit;
}
.rehome-infographic-link:hover .rehome-infographic {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
.rehome-infographic {
  background: linear-gradient(180deg, #f3b5a0 0%, #e8a090 100%);
  border-radius: 8px;
  padding: 28px 24px 32px;
  text-align: center;
  transition: box-shadow 0.2s ease;
}
.rehome-infographic-brands {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.rehome-brand-aap { text-align: left; }
.rehome-brand-petco { text-align: right; font-size: 12px; }
.rehome-infographic h3 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: 26px;
  color: #1a3b6e;
  line-height: 1.2;
  margin-bottom: 10px;
}
.rehome-infographic-tag {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #1a3b6e;
  margin-bottom: 22px !important;
}
.rehome-infographic-how {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #1a3b6e;
  margin-bottom: 20px !important;
}
.rehome-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
.rehome-steps li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 18px;
}
.rehome-steps li:last-child { margin-bottom: 0; }
.rehome-step-num {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  color: #1a3b6e;
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 44px;
  text-align: center;
}
.rehome-steps strong {
  display: block;
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #1a3b6e;
  margin-bottom: 4px;
}
.rehome-steps p {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: #333;
  margin: 0 !important;
}
@media (max-width: 768px) {
  .rehome-page { padding: 28px 18px 40px; }
  .rehome-page h1 { font-size: 26px; }
  .rehome-page h2 { font-size: 22px; }
  .rehome-intro { flex-direction: column; gap: 20px; }
  .rehome-intro-img { flex: none; width: 100%; }
  .rehome-intro-text,
  .rehome-body,
  .rehome-warning { font-size: 17px; }
  .rehome-infographic { padding: 22px 18px 26px; }
  .rehome-infographic h3 { font-size: 22px; }
}

/* ---------- Ways to Give page ---------- */
.give-page { padding-bottom: 0; background: #a9b8c9; }
.give-hero {
  position: relative;
  padding: 22px 60px 0;
  margin-bottom: 0;
}
.give-hero-img {
  width: 100%;
  display: block;
  max-height: 560px;
  object-fit: cover;
  border-radius: 4px;
}
.give-hero-title {
  position: absolute;
  left: 90px;
  top: 36px;
  max-width: 360px;
  background: #fff;
  border: 3px solid #8e9bb2;
  border-radius: 18px;
  padding: 22px 28px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}
.give-hero-title h1 {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  color: var(--navy2);
  font-size: 38px;
  line-height: 1.1;
  margin-bottom: 12px;
}
.give-hero-title p {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  color: var(--navy2);
  font-size: 16px;
  line-height: 1.45;
}
.give-hero-info {
  position: absolute;
  right: 90px;
  bottom: -40px;
  max-width: 520px;
  background: #dce8f4;
  border: 3px solid #8e9bb2;
  border-radius: 18px;
  padding: 22px 28px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15);
}
.give-hero-info p {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  color: var(--maroon);
  font-size: 17px;
  line-height: 1.55;
  margin-bottom: 14px;
}
.give-hero-info p:last-child { margin-bottom: 0; }
.give-mail {
  text-align: right;
  font-weight: 600;
}
.give-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  padding: 70px 60px 40px;
  background: #fff;
}
.give-card {
  background: #f6f3eb;
  border: 2px solid #8b6f47;
  border-radius: 4px;
  padding: 28px 24px 24px;
  text-align: center;
}
.give-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.give-icon-heart {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23c62828' d='M32 54S8 38 8 22c0-8 6-14 14-14 5 0 9 2 10 6 1-4 5-6 10-6 8 0 14 6 14 14 0 16-24 32-24 32z'/%3E%3Ccircle fill='%23fff' cx='32' cy='24' r='6'/%3E%3Cpath fill='%23c62828' d='M29 24c0-2 1-3 3-3s3 1 3 3-1 3-3 3-3-1-3-3z'/%3E%3C/svg%3E");
}
.give-icon-hands {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%232c5085' d='M10 40c0-8 8-16 16-16h4v-8c0-4 3-7 7-7s7 3 7 7v20c0 6-5 11-11 11H18c-4 0-8-4-8-8z'/%3E%3Cpath fill='%234a7ab5' d='M54 40c0-8-8-16-16-16h-4v-8c0-4-3-7-7-7s-7 3-7 7v20c0 6 5 11 11 11h16c4 0 8-4 8-8z'/%3E%3Cpath fill='%23c62828' d='M28 30h8v12h-8z'/%3E%3C/svg%3E");
}
.give-icon-crypto {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle fill='%232c5085' cx='22' cy='32' r='16'/%3E%3Ctext x='22' y='38' text-anchor='middle' fill='%23fff' font-size='18' font-family='Arial' font-weight='700'%3E%24%3C/text%3E%3Ccircle fill='%234a7ab5' cx='42' cy='32' r='16'/%3E%3Ctext x='42' y='38' text-anchor='middle' fill='%23fff' font-size='16' font-family='Arial' font-weight='700'%3EB%3C/text%3E%3C/svg%3E");
}
.give-icon-tribute {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect fill='%23f5f5f5' x='14' y='10' width='36' height='44' rx='2' stroke='%238b6f47' stroke-width='2'/%3E%3Cpath fill='%232c5085' d='M32 22c-4 0-7 3-7 7s3 7 7 7 7-3 7-7-3-7-7-7z'/%3E%3Crect fill='%23dce8f4' x='18' y='42' width='28' height='6'/%3E%3C/svg%3E");
}
.give-icon-fund {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect fill='%232c5085' x='12' y='36' width='10' height='16'/%3E%3Crect fill='%234a7ab5' x='26' y='28' width='10' height='24'/%3E%3Crect fill='%236a82b6' x='40' y='18' width='10' height='34'/%3E%3Cpath fill='%232c5085' d='M14 18l18-10 18 10' stroke='%232c5085' stroke-width='3' fill='none'/%3E%3C/svg%3E");
}
.give-icon-balloons {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cellipse fill='%23e53935' cx='20' cy='24' rx='10' ry='14'/%3E%3Cellipse fill='%234caf50' cx='34' cy='20' rx='10' ry='14'/%3E%3Cellipse fill='%232196f3' cx='46' cy='28' rx='10' ry='14'/%3E%3Cpath stroke='%23666' stroke-width='2' d='M20 38v10M34 34v14M46 42v8'/%3E%3C/svg%3E");
}
.give-card h2 {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
}
.give-card h2 a {
  color: var(--navy2);
  text-decoration: underline;
}
.give-card p {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  color: var(--maroon);
  font-size: 17px;
  line-height: 1.5;
}
.give-band img {
  width: 100%;
  display: block;
  max-height: 380px;
  object-fit: cover;
}
@media (max-width: 900px) {
  .give-hero { padding: 16px 16px 0; }
  .give-hero-title,
  .give-hero-info {
    position: static;
    max-width: none;
    margin: 16px 0 0;
  }
  .give-hero-info { margin-bottom: 0; }
  .give-mail { text-align: left; }
  .give-grid {
    grid-template-columns: 1fr;
    padding: 28px 18px 32px;
    gap: 20px;
  }
}

/* ---------- Foster Families page ---------- */
.foster-page {
  padding: 40px 60px 50px;
  background: #fff;
  max-width: 1100px;
  margin: 0 auto;
}
.foster-page h1 {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-weight: 700;
  color: var(--navy2);
  font-size: 36px;
  line-height: 1.2;
  margin-bottom: 28px;
}
.foster-layout {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}
.foster-left {
  flex: 0 0 340px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.foster-photo {
  width: 100%;
  display: block;
  border-radius: 4px;
  object-fit: cover;
}
.foster-btn {
  display: block;
  text-align: center;
  background: linear-gradient(#7a1a1d, #4d0e10);
  color: #fff;
  padding: 16px 24px;
  border-radius: 24px;
  font-family: 'Quicksand', sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
}
.foster-btn:hover {
  background: linear-gradient(#6e1417, #3d0b0d);
  color: #fff;
}
.foster-body {
  flex: 1;
  min-width: 0;
  padding-top: 4px;
}
.foster-body p {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  color: var(--maroon);
  font-size: 19px;
  line-height: 1.55;
  margin-bottom: 20px;
}
.foster-body p:last-child { margin-bottom: 0; }
@media (max-width: 768px) {
  .foster-page { padding: 28px 18px 40px; }
  .foster-page h1 { font-size: 28px; }
  .foster-layout { flex-direction: column; gap: 24px; }
  .foster-left { flex: none; width: 100%; }
  .foster-body p { font-size: 17px; }
}

/* ---------- Foster Family Information page ---------- */
.foster-info-page {
  background: #fff;
  padding-bottom: 50px;
}
.foster-info-wrap {
  display: flex;
  align-items: stretch;
  gap: 0;
  max-width: 1200px;
  margin: 0 auto;
}
.foster-info-main {
  flex: 1;
  min-width: 0;
  padding: 36px 40px 40px 60px;
}
.foster-info-main h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  color: var(--maroon);
  font-size: 38px;
  line-height: 1.15;
  margin-bottom: 28px;
}
.foster-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 28px;
}
.foster-info-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  margin-bottom: 14px;
  border-radius: 2px;
}
.foster-info-card h2 {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-weight: 700;
  color: #6b5b4a;
  font-size: 22px;
  margin-bottom: 10px;
}
.foster-info-card p {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  color: var(--maroon);
  font-size: 17px;
  line-height: 1.55;
}
.foster-info-sidebar {
  flex: 0 0 320px;
  background: #e4e8ed;
  padding: 36px 32px 40px;
}
.foster-info-sidebar h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 700;
  color: var(--navy2);
  font-size: 26px;
  line-height: 1.2;
  margin-bottom: 16px;
}
.foster-info-sidebar h2 + .foster-info-list {
  margin-bottom: 28px;
}
.foster-info-sidebar h3 {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-weight: 700;
  color: var(--maroon);
  font-size: 18px;
  margin: 18px 0 10px;
}
.foster-info-list {
  list-style: disc;
  margin: 0 0 8px 20px;
  padding: 0;
}
.foster-info-list li {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  color: var(--maroon);
  font-size: 17px;
  line-height: 1.5;
  margin-bottom: 8px;
}
@media (max-width: 960px) {
  .foster-info-wrap { flex-direction: column; }
  .foster-info-main { padding: 28px 18px 24px; }
  .foster-info-sidebar { flex: none; padding: 28px 24px 36px; }
  .foster-info-main h1 { font-size: 30px; }
  .foster-info-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- Volunteer page ---------- */
.volunteer-page {
  background: #f8f6e8;
  padding-bottom: 50px;
}
.volunteer-hero {
  padding: 36px 60px 28px;
  max-width: 1100px;
  margin: 0 auto;
}
.volunteer-hero h1 {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-weight: 700;
  color: var(--navy2);
  font-size: 42px;
  line-height: 1.1;
  margin-bottom: 8px;
}
.volunteer-tagline {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-weight: 700;
  color: #5c4a3a;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.volunteer-hero-row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.volunteer-hero-left { flex: 1; min-width: 0; }
.volunteer-intro {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  color: var(--teal);
  font-size: 18px;
  line-height: 1.55;
  margin-bottom: 14px;
}
.volunteer-app-btn {
  display: inline-block;
  margin-top: 8px;
  background: linear-gradient(#7a1a1d, #4d0e10);
  color: #fff;
  padding: 14px 34px;
  border-radius: 28px;
  font-family: 'Quicksand', sans-serif;
  font-size: 22px;
  font-weight: 600;
}
.volunteer-app-btn:hover {
  background: linear-gradient(#6e1417, #3d0b0d);
  color: #fff;
}
.volunteer-ask-box {
  flex: 0 0 300px;
  background: var(--navy2);
  color: #fff;
  border-radius: 16px;
  padding: 22px 24px;
}
.volunteer-ask-box p {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  margin: 0;
}
.volunteer-tabs {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 60px;
}
.volunteer-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  background: #d8dde5;
  border: 1px solid #b8c0cc;
  border-bottom: none;
}
.volunteer-tab {
  appearance: none;
  border: none;
  background: transparent;
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #444;
  padding: 14px 22px;
  cursor: pointer;
  border-top: 4px solid transparent;
}
.volunteer-tab.is-active {
  background: #fff;
  color: #222;
  border-top-color: #b8c0cc;
}
.volunteer-panels {
  background: #fff;
  border: 1px solid #b8c0cc;
  padding: 28px 32px;
}
/* Editor: all tab panels visible. Live site: only one when .is-tabbed is set by site.js */
.volunteer-panels .volunteer-panel {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid #dde3ea;
}
.volunteer-panels .volunteer-panel:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.volunteer-tabs.is-tabbed .volunteer-panel {
  display: none;
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.volunteer-tabs.is-tabbed .volunteer-panel.is-active {
  display: flex;
}
.volunteer-panel-img {
  flex: 0 0 300px;
  width: 300px;
  max-width: 100%;
  object-fit: cover;
  border-radius: 2px;
}
.volunteer-panel-body { flex: 1; min-width: 0; }
.volunteer-panel-body h2 {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-weight: 700;
  color: #555;
  font-size: 20px;
  line-height: 1.35;
  margin-bottom: 16px;
}
.volunteer-panel-body p {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  color: #444;
  font-size: 17px;
  line-height: 1.55;
  margin-bottom: 14px;
}
.volunteer-panel-body p:last-child { margin-bottom: 0; }
.volunteer-panel-body a { color: var(--navy2); text-decoration: underline; }
.volunteer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.volunteer-links li {
  margin-bottom: 12px;
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.45;
}
.volunteer-links a {
  color: var(--navy2);
  text-decoration: underline;
}
@media (max-width: 768px) {
  .volunteer-hero { padding: 28px 18px 20px; }
  .volunteer-hero h1 { font-size: 32px; }
  .volunteer-hero-row { flex-direction: column; }
  .volunteer-ask-box { flex: none; width: 100%; }
  .volunteer-tabs { padding: 0 18px; }
  .volunteer-tab { font-size: 15px; padding: 12px 14px; }
  .volunteer-panels { padding: 22px 18px; }
  .volunteer-panel.is-active { flex-direction: column; }
  .volunteer-panel-img { flex: none; width: 100%; }
}

/* ---------- Become a Constant Companion page ---------- */
.companion-page {
  padding: 40px 60px 60px;
  background: #f5f5f3;
  max-width: 1100px;
  margin: 0 auto;
}
.companion-page h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  color: var(--navy2);
  font-size: 40px;
  line-height: 1.2;
  max-width: 520px;
  margin-bottom: 0;
  padding-bottom: 14px;
  border-bottom: 3px solid #8aa4c8;
}
.companion-body {
  padding-top: 28px;
  max-width: 920px;
}
.companion-body p {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  color: var(--maroon);
  font-size: 19px;
  line-height: 1.55;
  margin-bottom: 18px;
}
.companion-thanks {
  margin-top: 8px;
  margin-bottom: 28px !important;
}
.companion-monthly-btn {
  display: inline-block;
  background: linear-gradient(180deg, #8aa4c8 0%, #6f88b8 100%);
  color: #fff;
  padding: 14px 36px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 4px 5px 10px rgba(0, 0, 0, 0.22);
  border: 1px solid #5f7aa8;
}
.companion-monthly-btn:hover {
  background: linear-gradient(180deg, #7a96bc 0%, #5f7aa8 100%);
  color: #fff;
}
.companion-heart {
  color: var(--maroon);
  margin-left: 6px;
}
@media (max-width: 768px) {
  .companion-page { padding: 28px 18px 40px; }
  .companion-page h1 { font-size: 30px; max-width: none; }
  .companion-body p { font-size: 17px; }
  .companion-monthly-btn { font-size: 19px; padding: 12px 28px; }
}

/* ---------- Celebrating Lives: In Honor & Memory page ---------- */
.honor-page {
  padding-bottom: 50px;
  background: #fff;
}
.honor-hero {
  display: flex;
  align-items: stretch;
  min-height: 380px;
}
.honor-hero-image {
  position: relative;
  flex: 0 0 48%;
  max-width: 48%;
}
.honor-hero-image img {
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
  display: block;
}
.honor-donate-btn {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 2;
  display: inline-block;
  background: #a8c9b8;
  color: var(--maroon);
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-weight: 700;
  font-size: 20px;
  padding: 14px 28px;
  border-radius: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.honor-donate-btn:hover {
  background: #97bba8;
  color: var(--maroon);
}
.honor-hero-text {
  flex: 1;
  background: #d9c9a8;
  padding: 48px 44px 40px;
}
.honor-hero-text h1 {
  margin-bottom: 24px;
  line-height: 1.15;
}
.honor-script {
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 700;
  color: var(--navy2);
  font-size: 48px;
}
.honor-subtitle {
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  color: var(--navy2);
  font-size: 34px;
  margin-top: 4px;
}
.honor-hero-text p {
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--navy2);
  font-size: 17px;
  line-height: 1.55;
  margin-bottom: 16px;
}
.honor-hero-text p:last-child { margin-bottom: 0; }
.honor-columns-section {
  background: linear-gradient(180deg, #e8eef5 0%, #f0e8f0 100%);
  padding: 0 0 40px;
}
.honor-column-headers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #c5d6e8;
  padding: 16px 40px;
  gap: 20px;
}
.honor-column-headers h2 {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-weight: 700;
  color: var(--navy2);
  font-size: 22px;
  text-align: center;
  margin: 0;
}
.honor-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  padding: 32px 40px 0;
  max-width: 1100px;
  margin: 0 auto;
}
.honor-card {
  padding: 0;
  background: transparent;
  border: none;
  min-height: 0;
}
.honor-poem-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}
@media (max-width: 900px) {
  .honor-hero { flex-direction: column; }
  .honor-hero-image { flex: none; max-width: none; width: 100%; }
  .honor-hero-image img { min-height: 280px; }
  .honor-hero-text { padding: 32px 24px; }
  .honor-script { font-size: 36px; }
  .honor-subtitle { font-size: 26px; }
  .honor-column-headers,
  .honor-columns { grid-template-columns: 1fr; padding-left: 18px; padding-right: 18px; }
}

/* ---------- Employment Opportunities page ---------- */
.employment-page {
  background: #fff;
  padding: 36px 60px 50px;
}
.employment-wrap {
  max-width: 900px;
}
.employment-page h1 {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-weight: 700;
  color: var(--navy2);
  font-size: 42px;
  line-height: 1.15;
  margin-bottom: 8px;
}
.employment-role {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-weight: 700;
  color: var(--navy2);
  font-size: 28px;
  line-height: 1.25;
  margin-bottom: 22px;
}
.employment-intro {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  color: var(--maroon);
  font-size: 18px;
  line-height: 1.55;
  margin-bottom: 14px;
}
.employment-meta {
  margin: 24px 0 32px;
  padding: 0;
}
.employment-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 8px;
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-size: 18px;
  line-height: 1.45;
}
.employment-meta dt {
  color: var(--teal);
  font-weight: 700;
  margin: 0;
}
.employment-meta dd {
  color: var(--teal);
  margin: 0;
}
.employment-section {
  margin-bottom: 28px;
}
.employment-section h2 {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-weight: 700;
  color: var(--navy2);
  font-size: 24px;
  margin-bottom: 16px;
}
.employment-section h3 {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-weight: 700;
  color: #555;
  font-size: 18px;
  margin: 20px 0 10px;
}
.employment-subhead {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-weight: 700;
  color: #555;
  font-size: 18px;
  margin: 16px 0 10px;
}
.employment-lead {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  color: #333;
  font-size: 17px;
  margin-bottom: 10px;
}
.employment-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}
.employment-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  color: #333;
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
}
.employment-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  background: var(--maroon);
}
.employment-responsibilities {
  overflow: hidden;
}
.employment-apply-box {
  float: right;
  width: 280px;
  margin: 0 0 20px 24px;
  padding: 20px 22px;
  background: #f5f0c8;
  border: 1px solid #c8c0a0;
  border-radius: 8px;
  box-sizing: border-box;
}
.employment-apply-box p {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  color: var(--navy2);
  font-size: 17px;
  line-height: 1.5;
  margin: 0;
}
.employment-apply-box a {
  color: var(--navy2);
  font-weight: 700;
  text-decoration: underline;
}
.employment-closing {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  color: var(--maroon);
  font-size: 18px;
  line-height: 1.55;
  margin: 28px 0 12px;
}
.employment-open {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  color: var(--maroon);
  font-size: 18px;
  margin: 0;
}
@media (max-width: 768px) {
  .employment-page { padding: 28px 18px 40px; }
  .employment-page h1 { font-size: 32px; }
  .employment-role { font-size: 22px; }
  .employment-apply-box {
    float: none;
    width: 100%;
    margin: 0 0 20px;
  }
  .employment-intro,
  .employment-meta-row,
  .employment-closing,
  .employment-open { font-size: 16px; }
  .employment-list li { font-size: 16px; }
}

/* ---------- Code of Conduct page ---------- */
.conduct-page {
  padding: 36px 60px 50px;
  background: #fff;
}
.conduct-wrap {
  max-width: 820px;
  margin: 0 auto;
  background: #e8eef5;
  padding: 40px 56px 44px;
  text-align: center;
}
.conduct-wrap h1 {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-weight: 700;
  color: #333;
  font-size: 32px;
  line-height: 1.25;
  margin-bottom: 10px;
}
.conduct-subtitle {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  color: var(--navy2);
  font-size: 18px;
  margin-bottom: 28px;
}
.conduct-intro {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-weight: 700;
  color: var(--maroon);
  font-size: 18px;
  line-height: 1.55;
  margin-bottom: 28px;
}
.conduct-list {
  list-style: none;
  margin: 0 auto 28px;
  padding: 0;
  max-width: 680px;
  text-align: left;
}
.conduct-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 16px;
  font-family: 'Roboto Condensed', Arial, sans-serif;
  color: var(--navy2);
  font-size: 17px;
  line-height: 1.55;
}
.conduct-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--navy2);
}
.conduct-closing {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-weight: 700;
  color: var(--maroon);
  font-size: 17px;
  line-height: 1.55;
  margin: 0;
}
.conduct-closing a {
  color: var(--maroon);
  text-decoration: underline;
}
@media (max-width: 768px) {
  .conduct-page { padding: 28px 18px 40px; }
  .conduct-wrap { padding: 28px 22px 32px; }
  .conduct-wrap h1 { font-size: 24px; }
  .conduct-subtitle { font-size: 16px; }
  .conduct-intro,
  .conduct-closing { font-size: 16px; }
  .conduct-list li { font-size: 16px; }
}

/* ---------- Board of Directors page (premium) ---------- */
.board-page {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 0 0 20px;
  background: transparent;
}

.board-header {
  text-align: center;
  margin: 0;
  padding: 28px 24px;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--panel-shadow);
}

.board-header h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  color: var(--ink-blue);
  font-size: clamp(2rem, 4vw, 2.5rem);
  line-height: 1.15;
  margin: 0 0 8px;
}

.board-tagline {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--muted-blue);
  font-size: 1.15rem;
  margin: 0;
}

.board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  max-width: none;
  margin: 0;
}

.board-card {
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(31, 40, 60, 0.08);
  box-shadow: var(--panel-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}

.board-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(31, 40, 60, 0.14);
}

.board-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top center;
  display: block;
  background: linear-gradient(180deg, #e8edf4 0%, #dfe7f3 100%);
  image-rendering: -webkit-optimize-contrast;
}

.board-card-body {
  padding: 18px 20px 22px;
  text-align: left;
}

.board-role {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-weight: 700;
  color: var(--accent-red);
  font-size: 14px;
  line-height: 1.35;
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.board-name {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  color: var(--ink-blue);
  font-size: 1.45rem;
  line-height: 1.15;
  margin: 0 0 10px;
}

.board-detail {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  color: #4a5568;
  font-size: 15px;
  line-height: 1.4;
  margin: 0 0 4px;
}

.board-detail:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .board-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .board-page { padding: 0 0 16px; }
  .board-header { padding: 22px 18px; }
  .board-grid { grid-template-columns: 1fr; gap: 20px; }
  .board-name { font-size: 1.3rem; }
}

/* ---------- Staff page ---------- */
.staff-page {
  padding: 36px 60px 50px;
  background: #e8eef5;
}
.staff-wrap {
  max-width: 900px;
  margin: 0 auto;
}
.staff-wrap h1 {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-weight: 700;
  color: var(--navy2);
  font-size: 36px;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 36px;
}
.staff-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.staff-member {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}
.staff-photo-wrap {
  flex: 0 0 140px;
}
.staff-photo {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: #d0d6de;
}
.staff-bio {
  flex: 1;
  min-width: 0;
}
.staff-name {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-weight: 700;
  color: var(--navy2);
  font-size: 28px;
  line-height: 1.2;
  margin: 0 0 4px;
}
.staff-title {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-weight: 700;
  color: var(--navy2);
  font-size: 22px;
  line-height: 1.25;
  margin: 0 0 12px;
}
.staff-bio p {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  color: #222;
  font-size: 17px;
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 640px) {
  .staff-page { padding: 28px 18px 40px; }
  .staff-wrap h1 { font-size: 28px; margin-bottom: 28px; }
  .staff-member { flex-direction: column; align-items: center; text-align: center; }
  .staff-photo-wrap { flex: none; }
  .staff-name { font-size: 24px; }
  .staff-title { font-size: 20px; }
  .staff-bio p { font-size: 16px; }
}

/* ---------- Honoring Our Early Patrons page ---------- */
.patrons-page {
  padding: 36px 60px 50px;
  background: #eef1f4;
}
.patrons-wrap {
  max-width: 900px;
  margin: 0 auto;
}
.patrons-wrap h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  color: var(--navy2);
  font-size: 40px;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 36px;
}
.patron-section {
  margin-bottom: 40px;
}
.patron-section:last-child {
  margin-bottom: 0;
}
.patron-section h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  color: var(--maroon);
  font-size: 30px;
  line-height: 1.25;
  margin-bottom: 8px;
}
.patron-lead {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  color: var(--maroon);
  font-size: 18px;
  line-height: 1.45;
  margin-bottom: 18px;
}
.patron-body {
  overflow: hidden;
}
.patron-body p {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  color: #222;
  font-size: 17px;
  line-height: 1.55;
  margin-bottom: 14px;
}
.patron-body p:last-child {
  margin-bottom: 0;
}
.patron-video {
  float: right;
  width: 320px;
  margin: 0 0 16px 24px;
}
.patron-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid #c5cdd6;
}
.patron-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.patron-video-caption {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  color: var(--navy2);
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
  margin: 8px 0 0;
}
.patron-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}
.patron-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 14px;
  font-family: 'Roboto Condensed', Arial, sans-serif;
  color: #222;
  font-size: 17px;
  line-height: 1.55;
}
.patron-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--navy2);
}
.patron-section > p {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  color: #222;
  font-size: 17px;
  line-height: 1.55;
  margin-bottom: 14px;
}
.patron-section > p:last-child {
  margin-bottom: 0;
}
@media (max-width: 768px) {
  .patrons-page { padding: 28px 18px 40px; }
  .patrons-wrap h1 { font-size: 30px; }
  .patron-section h2 { font-size: 24px; }
  .patron-video {
    float: none;
    width: 100%;
    margin: 0 0 20px;
  }
  .patron-body p,
  .patron-list li,
  .patron-section > p { font-size: 16px; }
}

/* ====================================================================
   HSNEI reference redesign — design tokens, home sections & footer
   (header uses project .topbar/.nav/.donate; restyled above)
   ==================================================================== */
:root {
  --ink-blue: #173c7a;
  --deep-red: #ac0f0f;
  --accent-red: #c51b16;
  --soft-red: #b02e23;
  --muted-blue: #6a83af;
  --footer-blue: #607ca9;
  --panel-shadow: 0 3px 12px rgba(31, 40, 60, 0.16);
}
.main-content { font-family: Arial, Helvetica, sans-serif; }
.main-content {
  width: 90%;
  margin: 0 auto;
}

.hero-copy {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding: 8px 20px 6px;
}

.hero-copy h1,
.section-heading,
.impact-card h3,
.cta-title,
.site-footer h5 {
  font-family: Georgia, "Times New Roman", serif;
}

.hero-copy h1 {
  margin: 0;
  color: var(--ink-blue);
  font-size: clamp(2.6rem, 5vw, 3.9rem);
  line-height: 1;
  font-weight: 700;
}

.hero-copy p {
  margin: 7px 0 0;
  color: var(--soft-red);
  font-size: clamp(1rem, 2vw, 1.18rem);
  font-style: italic;
  font-weight: 700;
}

.impact-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: none;
  margin: 16px auto 14px;
  padding: 0 0 2px;
}

.impact-card {
  overflow: hidden;
  border-radius: 10px;
  box-shadow: var(--panel-shadow);
  min-height: 351px;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.impact-card .card-image {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.impact-card .card-body {
  flex: 1 1 auto;
  min-height: 191px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 11px 16px 16px;
}

.impact-card h3 {
  margin: 0 0 12px;
  font-size: 21px;
  line-height: 1.05;
  font-weight: 700;
}

.impact-card p {
  margin: 0 0 14px;
  max-width: 170px;
  font-size: 12px;
  line-height: 1.34;
}

.impact-card .card-btn {
  margin-top: auto;
  min-width: 140px;
  padding: 10px 18px;
  border-radius: 10px;
  text-decoration: none;
  color: #fff;
  font-weight: 700;
}

.impact-card.wellness .card-body {
  background: linear-gradient(180deg, #aa0d0d 0%, #920606 100%);
  color: #fff;
}

.impact-card.wellness .card-btn {
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: linear-gradient(180deg, #d52a1c 0%, #b70d0d 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.impact-card.engagement .card-body {
  background: #ffffff;
  color: #b12717;
}

.impact-card.engagement .card-btn {
  background: linear-gradient(180deg, #d42b1c 0%, #b80d0d 100%);
  box-shadow: 0 3px 8px rgba(138, 0, 0, 0.18);
}

.impact-card.adoption .card-body {
  background: #d9deea;
  color: var(--ink-blue);
}

.impact-card.adoption .card-btn {
  background: linear-gradient(180deg, #d42b1c 0%, #b80d0d 100%);
  box-shadow: 0 3px 8px rgba(138, 0, 0, 0.18);
}

.cta-strip {
  width: 100%;
  max-width: none;
  margin: 15px auto 28px;
  padding: 0 0 1px;
}

.cta-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border-radius: 7px;
  background: linear-gradient(180deg, #6f8ab5 0%, #627faa 100%);
  border: 1px solid #57719c;
  box-shadow: var(--panel-shadow);
}

.cta-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  padding: 12px 13px;
  color: #fff;
}

.cta-item + .cta-item {
  border-left: 1px solid rgba(12, 22, 45, 0.32);
}

.cta-icon {
  font-size: 30px;
  line-height: 1;
}

.cta-title {
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
}

.cta-subtitle {
  margin-top: 3px;
  font-size: 9.5px;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sponsors-section {
  width: 100%;
  margin: 0 auto;
  padding: 0 18px 8px;
}

.section-heading {
  margin: 0;
  text-align: center;
  color: var(--ink-blue);
  font-size: clamp(2rem, 3.6vw, 2.7rem);
  line-height: 1;
  font-weight: 700;
}

.section-subheading {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  margin: 8px auto 10px;
  color: #147d8d;
  font-style: italic;
  font-size: 18px;
  font-weight: 700;
}

.section-subheading::before,
.section-subheading::after {
  content: "";
  flex: 1 1 120px;
  height: 1px;
  max-width: 165px;
  background: linear-gradient(90deg, rgba(20, 125, 141, 0), rgba(20, 125, 141, 0.55), rgba(20, 125, 141, 0));
}

.panel-wrap {
  width: 100%;
  margin: 0 auto;
}

.panel-wrap img {
  display: block;
  width: 100%;
  height: auto;
}

.panel-shadow {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--panel-shadow);
}

.sponsor-board {
  width: 100%;
  margin: 0 auto;
  padding: 18px 20px 16px;
  background: linear-gradient(180deg, #ffffff 0%, #fcfcfd 100%);
}

.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 18px 22px;
  align-items: center;
}

.sponsor-item {
  margin: 0;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sponsor-item img {
  display: block;
  max-width: 100%;
  max-height: 66px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.sponsor-item.span-2 {
  grid-column: span 2;
}

.sponsor-item.mini {
  min-height: 52px;
}

.sponsor-item.mini img {
  max-height: 54px;
}

.story-board {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  overflow: hidden;
  background: linear-gradient(90deg, #ffffff 0%, #f7f9fc 100%);
}

.story-media {
  background: #fff;
}

.story-media img {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
  object-position: center top;
}

.story-caption {
  padding: 7px 14px 10px;
  text-align: center;
  color: #2f3b55;
}

.story-caption p {
  margin: 0;
  font-size: 14px;
  line-height: 1.25;
}

.story-subcaption {
  margin-top: 8px !important;
  color: #1a3e7d;
  font-size: 12px !important;
  font-style: italic;
  font-weight: 700;
}

.story-content {
  padding: 28px 24px 18px;
  background: linear-gradient(180deg, #eef3fb 0%, #dfe7f4 100%);
  text-align: center;
}

.story-content h2 {
  margin: 0 0 10px;
  color: var(--ink-blue);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 29px;
  line-height: 1.1;
  font-weight: 700;
}

.story-lead {
  margin: 0;
  color: #2b6e7f;
  font-size: 17px;
  font-style: italic;
  font-weight: 700;
}

.story-social-links {
  margin: 10px 0 14px;
}

.story-social-links a {
  color: var(--ink-blue);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  font-weight: 700;
  text-decoration: underline;
}

.story-logo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 24px;
}

.story-logo-row img {
  display: block;
  max-height: 68px;
  width: auto;
  object-fit: contain;
}

.story-logo-row img:last-child {
  max-height: 84px;
}

.story-section {
  width: 100%;
  margin: 0 auto;
  padding: 2px 18px 8px;
}

.education-section {
  width: 100%;
  margin: 0 auto;
  padding: 2px 18px 12px;
}

.education-board {
  padding: 14px 20px 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
}

.education-heading {
  margin-bottom: 12px;
  font-size: clamp(2rem, 3.5vw, 2.6rem);
}

.education-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.98fr) minmax(0, 1.02fr);
  gap: 18px 24px;
  align-items: center;
}

.education-logos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  align-items: center;
}

.education-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
}

.education-logo img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.education-logo--miccio {
  grid-column: 1 / -1;
  justify-self: center;
}

.education-logo--miccio img {
  max-width: 260px;
}

.education-logo--kindness img {
  max-height: 96px;
}

.education-logo--teachheart img {
  max-height: 58px;
}

.education-logo--tails {
  grid-column: 1 / -1;
  justify-self: center;
}

.education-logo--tails img {
  max-width: 320px;
}

.education-logo-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 12px 18px;
  align-items: center;
  margin-top: 2px;
}

.education-logo--community img {
  max-height: 82px;
}

.education-logo--spark img {
  max-height: 52px;
}

.education-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 12px 14px 10px;
  text-align: center;
  color: var(--ink-blue);
  background: linear-gradient(180deg, #eef4fb 0%, #dfe7f3 100%);
  border-radius: 10px;
}

.education-copy p {
  max-width: 500px;
  margin: 0;
  font-size: 18px;
  line-height: 1.42;
  font-weight: 700;
}

.education-partner-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 20px;
  margin-top: 18px;
}

.education-partner-row img {
  display: block;
  max-height: 44px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.site-footer {
  width: 100%;
  margin: 0;
  background: linear-gradient(180deg, #6f89b2 0%, #5f7ba7 100%);
  color: #fff;
  padding: 10px 18px 8px;
}

.footer-inner {
  width: 100%;
}

.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px;
  align-items: start;
}

.site-footer h5 {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
}

.site-footer p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}

.footer-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.footer-social {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}

.social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.14);
  text-decoration: none;
}

.footer-compact {
  opacity: 0.98;
}

.footer-note {
  text-align: center;
  margin-top: 10px;
  color: #eef2f9;
  font-size: 11px;
  line-height: 1.4;
}

.footer-menu-line {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
}

.footer-menu-line a {
  color: #eef2f9;
  text-decoration: none;
}

.footer-menu-line a:hover {
  text-decoration: underline;
}

.footer-menu-sep {
  opacity: 0.85;
}
@media (max-width: 900px) {
  .site-header {
    flex-wrap: wrap;
  }

  .main-nav {
    order: 3;
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding-top: 2px;
  }

  .education-layout {
    grid-template-columns: 1fr;
  }

  .education-copy {
    padding: 16px 14px 12px;
  }

  .subpage-hero {
    grid-template-columns: 1fr;
  }

  .subpage-split {
    grid-template-columns: 1fr;
  }

  .subpage-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  .brand-mark img {
    width: 174px;
  }

  .donate-btn {
    margin-left: auto;
    padding: 11px 14px;
    font-size: 13px;
  }

  .impact-grid {
    grid-template-columns: 1fr;
    max-width: 380px;
  }

  .cta-inner {
    grid-template-columns: 1fr 1fr;
  }

  .cta-item {
    min-height: 64px;
  }

  .cta-title {
    font-size: 19px;
  }

  .cta-subtitle {
    white-space: normal;
  }

  .site-footer .footer-grid {
    grid-template-columns: 1fr;
  }

  .main-content {
    width: 92%;
  }

  .sponsor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .sponsor-item.span-2 {
    grid-column: span 1;
  }
}

@media (max-width: 480px) {
  .site-header {
    padding: 8px 12px;
  }

  .main-nav {
    justify-content: center;
    font-size: 13px;
  }

  .hero-copy {
    padding-inline: 12px;
  }

  .sponsors-section,
  .story-section,
  .education-section {
    padding-left: 12px;
    padding-right: 12px;
  }

  .story-board {
    grid-template-columns: 1fr;
  }

  .story-media img {
    height: 220px;
  }

  .story-content {
    padding: 22px 16px 16px;
  }

  .story-content h2 {
    font-size: 26px;
  }

  .story-social-links a {
    font-size: 22px;
  }

  .story-logo-row {
    flex-wrap: wrap;
    gap: 14px;
  }

  .education-logos {
    grid-template-columns: 1fr 1fr;
  }

  .education-logo-row {
    grid-template-columns: 1fr 1fr;
  }

  .education-copy p {
    font-size: 16px;
  }

  .education-partner-row {
    gap: 12px 14px;
  }

  .subpage-content {
    padding-top: 14px;
  }

  .subpage-hero {
    padding: 18px 14px 16px;
  }

  .subpage-lead {
    font-size: 16px;
  }

  .subpage-grid {
    grid-template-columns: 1fr;
  }

  .subpage-card-header h3 {
    font-size: 20px;
  }

  .subpage-aside {
    padding: 16px 14px 14px;
  }

  .section-subheading {
    font-size: 15px;
  }

  .sponsor-board {
    padding: 14px 12px 12px;
  }
}

/* ====================================================================
   SUBPAGE DESIGN SYSTEM — inner pages (matches homepage premium look)
   ==================================================================== */
.page--inner {
  max-width: none;
  margin: 0;
  padding: 0;
}

.subpage-content {
  width: 90%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 0 48px;
}

.panel-shadow {
  border-radius: 12px;
  box-shadow: var(--panel-shadow);
}

.subpage-hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px;
  align-items: stretch;
  padding: 28px 32px;
  margin-bottom: 28px;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--panel-shadow);
  border: 1px solid rgba(23, 60, 122, 0.08);
}

.subpage-hero-copy { min-width: 0; }

.subpage-kicker {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-blue);
}

.subpage-hero h1,
.subpage-section .section-heading {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--ink-blue);
  font-weight: 700;
}

.subpage-hero h1 {
  margin: 0 0 12px;
  font-size: clamp(2rem, 4.5vw, 2.75rem);
  line-height: 1.08;
}

.subpage-lead {
  margin: 0 0 16px;
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.5;
  color: var(--navy2);
}

.subpage-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.subpage-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-blue);
  background: rgba(23, 60, 122, 0.08);
  border: 1px solid rgba(23, 60, 122, 0.12);
}

.subpage-hero-art {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--panel-shadow);
  min-height: 200px;
}

.subpage-hero-art img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  display: block;
}

.subpage-section {
  margin-bottom: 32px;
}

.subpage-section .section-heading {
  margin: 0 0 20px;
  font-size: clamp(1.5rem, 3vw, 2rem);
  text-align: center;
}

.subpage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.subpage-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--panel-shadow);
  overflow: hidden;
  border: 1px solid rgba(31, 40, 60, 0.08);
  transition: transform .18s ease, box-shadow .18s ease;
}

.subpage-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(31, 40, 60, 0.16);
}

.subpage-card-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.subpage-card-header {
  padding: 16px 18px 0;
}

.subpage-card-header h3,
.subpage-card-header h4 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
  color: var(--ink-blue);
  line-height: 1.2;
}

.subpage-card-body {
  padding: 12px 18px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.subpage-card-body p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.45;
  color: #33405c;
  flex: 1;
}

.subpage-card-body .card-link {
  display: inline-block;
  margin-top: auto;
  font-weight: 700;
  font-size: 14px;
  color: var(--accent-red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.subpage-card-body .card-link:hover { color: var(--deep-red); }

.subpage-split {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr;
  gap: 22px;
  align-items: start;
}

.subpage-aside {
  padding: 22px 24px;
  background: linear-gradient(180deg, #6f8ab5 0%, #627faa 100%);
  color: #fff;
  border-radius: 14px;
  box-shadow: var(--panel-shadow);
}

.subpage-aside h3 {
  margin: 0 0 12px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
}

.subpage-aside p { margin: 0 0 14px; line-height: 1.45; font-size: 15px; }

.subpage-aside .card-link { color: #fff; font-weight: 700; text-decoration: underline; }

.subpage-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.subpage-list li {
  position: relative;
  padding: 8px 0 8px 22px;
  font-size: 15px;
  line-height: 1.45;
  color: #33405c;
}

.subpage-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-red);
}

.subpage-callout {
  padding: 24px 28px;
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--panel-shadow);
  border-left: 4px solid var(--accent-red);
  margin: 24px 0;
}

.subpage-callout h3 {
  margin: 0 0 10px;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--ink-blue);
}

.subpage-callout p { margin: 0 0 10px; line-height: 1.45; }

.subpage-intro-text {
  margin-top: 20px;
}

.subpage-intro-text .maroon-text p { margin-bottom: 14px; }

.subpage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 16px;
}

/* Legacy card-row → premium subpage cards */
.card-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  padding: 0 0 40px;
}

.card-row .card {
  display: flex;
  flex-direction: column;
  background: #fff;
  padding: 0;
  border: 1px solid rgba(31, 40, 60, 0.08);
}

.card-row .card-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.card-row .card h4 {
  padding: 14px 16px 4px;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--ink-blue);
  font-size: 1.1rem;
}

.card-row .card p {
  padding: 0 16px 18px;
  font-size: 14px;
  line-height: 1.4;
  color: #33405c;
}

/* Wellness landing premium */
.wellness-top {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  padding: 0 0 28px;
  background: transparent;
}

.wellness-top .wellness-hero-img {
  width: 38%;
  flex-shrink: 0;
}

.wellness-top .wellness-hero-img img {
  width: 100%;
  border-radius: 12px;
  box-shadow: var(--panel-shadow);
}

.wellness-top .wellness-prices-link {
  display: block;
  text-align: center;
  margin-top: 16px;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 1.25rem;
  color: var(--teal);
  text-decoration: underline;
}

.wellness-grid-wrap { padding: 0 0 20px; background: transparent; }

.well-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.well-cell {
  background: #fff;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(31, 40, 60, 0.08);
}

.well-cell h4 {
  padding: 16px 16px 8px;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--ink-blue);
  font-size: 1.05rem;
}

.well-cell img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.well-cell p {
  padding: 12px 16px 18px;
  font-size: 14px;
  line-height: 1.4;
  color: #33405c;
}

/* WPC wellness subpages — premium layout */
.wpc-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.wpc-hero {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  margin: 0;
  box-shadow: var(--panel-shadow);
  min-height: 280px;
  max-height: none;
  padding: 0;
}

.wpc-hero img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  object-position: center;
  display: block;
}

.wpc-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 48px 32px 24px;
  background: linear-gradient(0deg, rgba(23, 60, 122, 0.94) 0%, rgba(23, 60, 122, 0.35) 55%, transparent 100%);
}

.wpc-label h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  color: #fff;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.12;
  font-weight: 700;
  text-align: left;
  max-width: 18ch;
}

.wpc-content {
  background: #fff;
  border-radius: 14px;
  padding: 32px 36px;
  box-shadow: var(--panel-shadow);
}

.wpc-content h2 {
  margin: 0 0 20px;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--ink-blue);
  font-size: clamp(1.2rem, 2.8vw, 1.65rem);
  line-height: 1.35;
  font-weight: 700;
  max-width: none;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.wpc-page .wpc-prose,
.wpc-page .maroon-text {
  color: #33405c;
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  max-width: none !important;
}

.wpc-page .wpc-prose p,
.wpc-page .maroon-text p {
  margin-bottom: 14px;
}

.wpc-page .wpc-prose p:last-child,
.wpc-page .maroon-text p:last-child {
  margin-bottom: 0;
}

.wpc-cta {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(23, 60, 122, 0.1);
  display: flex;
  justify-content: flex-start;
}

.new-client-btn {
  display: inline-block;
  background: linear-gradient(180deg, #d42b1c 0%, #b80d0d 100%);
  color: #fff;
  border-radius: 10px;
  padding: 12px 28px;
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 3px 10px rgba(138, 0, 0, 0.2);
}

.new-client-btn:hover {
  filter: brightness(1.05);
}

@media (max-width: 767px) {
  .wpc-hero img { height: 260px; }
  .wpc-content { padding: 24px 20px; }
  .wpc-label { padding: 40px 20px 18px; }
}

.subpage-hero .wellness-hero-img {
  min-width: 0;
}

.subpage-hero .wellness-hero-img img {
  width: 100%;
  border-radius: 12px;
  box-shadow: var(--panel-shadow);
}

.clinic {
  padding: 0 0 40px;
  background: transparent;
}

.clinic h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  color: var(--ink-blue);
  text-align: center;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin-bottom: 28px;
}

.clinic .price-col,
.clinic .protected,
.clinic .surgical {
  background: #fff;
  border-radius: 14px;
  padding: 24px 28px;
  box-shadow: var(--panel-shadow);
  margin-bottom: 20px;
}

.snp-page .snp-title,
.tnr-page h1 {
  font-family: Georgia, serif;
  color: var(--ink-blue);
  text-align: center;
}

.snp-top,
.snp-split,
.snp-band,
.tnr-intro,
.tnr-body,
.tnr-help {
  background: #fff;
  border-radius: 14px;
  padding: 24px 28px;
  box-shadow: var(--panel-shadow);
  margin-bottom: 20px;
}

.snp-page img,
.tnr-page img {
  border-radius: 10px;
  max-width: 100%;
}

.adopt-policies-page .adopt-policies-top,
.adopt-policies-page .adopt-policies-body,
.adopt-tips-page,
.barn-cats-page .barn-cats-hero,
.barn-cats-page .barn-cats-body,
.outdoor-cats-page .outdoor-cats-wrap,
.surrender-page .surrender-layout,
.stray-page .stray-panel,
.rehome-page .rehome-intro,
.rehome-page .rehome-body,
.rehome-page .rehome-infographic {
  background: #fff;
  border-radius: 14px;
  padding: 24px 28px;
  box-shadow: var(--panel-shadow);
  margin-bottom: 20px;
}

.adopt-policies-page h1,
.adopt-tips-page .page-title,
.barn-cats-page h1,
.outdoor-cats-page h1,
.surrender-page h1,
.stray-page h1,
.rehome-page h1 {
  font-family: Georgia, serif;
  color: var(--ink-blue);
}

.stray-panel {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: start;
}

.stray-photo,
.adopt-policies-image,
.surrender-photo,
.barn-cats-side {
  border-radius: 10px;
  max-width: 100%;
}

.adopt-tips-links {
  list-style: none;
  padding: 0;
}

.adopt-tips-links li {
  padding: 12px 0;
  border-bottom: 1px solid rgba(31, 40, 60, 0.08);
}

.adopt-tips-links a {
  color: var(--accent-red);
  font-weight: 600;
}

.foster-page .foster-layout,
.foster-info-page .foster-info-wrap,
.volunteer-page .volunteer-hero,
.volunteer-page .volunteer-tabs,
.give-page .give-hero,
.give-page .give-grid,
.companion-page .companion-body,
.honor-page .honor-hero,
.honor-page .honor-columns-section,
.employment-page .employment-wrap,
.conduct-page .conduct-wrap,
.patrons-page .patron-section,
.staff-page .staff-member {
  background: #fff;
  border-radius: 14px;
  padding: 24px 28px;
  box-shadow: var(--panel-shadow);
  margin-bottom: 20px;
}

.foster-page h1,
.foster-info-page h1,
.volunteer-page h1,
.give-page h1,
.companion-page h1,
.honor-page h1,
.employment-page h1,
.conduct-page h1,
.patrons-page h1,
.staff-page h1 {
  font-family: Georgia, serif;
  color: var(--ink-blue);
}

.volunteer-panel {
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--panel-shadow);
  overflow: hidden;
}

.give-page { background: transparent !important; }

.foster-photo,
.volunteer-panel-img,
.give-hero-img,
.honor-hero-image img {
  border-radius: 10px;
  max-width: 100%;
}

.staff-member {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  align-items: start;
}

.staff-photo {
  border-radius: 10px;
  width: 100%;
  object-fit: cover;
}

@media (max-width: 767px) {
  .staff-member { grid-template-columns: 1fr; }
}

/* Help section / get involved */
.help-section {
  padding: 28px 0;
  background: transparent;
}

.help-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}

.help-tile {
  background: linear-gradient(180deg, #6f8ab5 0%, #627faa 100%);
  color: #fff;
  padding: 20px 16px;
  text-align: center;
  border-radius: 14px;
  box-shadow: var(--panel-shadow);
  min-height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.help-tile .t {
  font-family: Georgia, serif;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.help-tile .s {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.95;
}

.thanks {
  text-align: center;
  padding: 32px 24px;
  margin: 20px 0 0;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 14px;
  font-family: Georgia, serif;
  font-size: 1.1rem;
  color: var(--ink-blue);
  line-height: 1.5;
  box-shadow: var(--panel-shadow);
}

/* Events grid premium */
.events-title {
  text-align: center;
  padding: 20px 0 24px;
  background: transparent;
}

.events-title h1 {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--ink-blue);
  font-size: clamp(2rem, 4vw, 2.75rem);
}

.events-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding-bottom: 40px;
}

.ev-cell {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--panel-shadow);
}

.ev-cell.ev-img img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
}

.ev-cell.ev-blue,
.ev-cell.ev-white {
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ev-cell.ev-blue {
  background: linear-gradient(180deg, #6f8ab5 0%, #627faa 100%);
  color: #fff;
}

.ev-cell.ev-blue h3,
.ev-cell.ev-white h3 {
  font-family: Georgia, serif;
  font-size: 1.35rem;
  margin-bottom: 12px;
  line-height: 1.2;
}

.ev-cell.ev-white {
  background: #fff;
  color: var(--ink-blue);
}

.ev-cell .dates { font-weight: 600; margin-bottom: 10px; }
.ev-cell .desc, .ev-cell .ital { font-size: 15px; line-height: 1.4; opacity: 0.95; }

/* Pet listing premium */
.pets-listing-section {
  margin: 8px 0 32px;
}

.pet-listing-shell {
  background: #fff;
  border-radius: 16px;
  padding: 24px 28px 28px;
  box-shadow: var(--panel-shadow);
  border: 1px solid rgba(23, 60, 122, 0.08);
  margin: 0 0 28px;
}

.pet-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 24px;
  padding: 18px 20px;
  background: linear-gradient(180deg, #f4f7fb 0%, #eef2f8 100%);
  border-radius: 12px;
  border: 1px solid rgba(23, 60, 122, 0.1);
  box-shadow: none;
}

.pet-filter-item {
  min-width: 0;
}

.pet-filters select {
  width: 100%;
  padding: 12px 36px 12px 14px;
  border-radius: 10px;
  border: 1px solid #c5d0df;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23173c7a' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center;
  appearance: none;
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-size: 15px;
  color: var(--ink-blue);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.pet-filters select:hover,
.pet-filters select:focus {
  border-color: #6f8ab5;
  outline: none;
  box-shadow: 0 0 0 3px rgba(111, 138, 181, 0.2);
}

.pet-listing-panel {
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  margin: 0;
  max-height: none;
  overflow: visible;
}

.pet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 20px;
  max-width: none;
  margin: 0;
  padding: 0;
}

.pet-grid .pet,
.pet-grid .pet-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(31, 40, 60, 0.08);
  box-shadow: 0 4px 14px rgba(31, 40, 60, 0.08);
  padding: 0;
  text-align: left;
  transition: transform .2s ease, box-shadow .2s ease;
}

.pet-grid .pet:hover,
.pet-grid .pet-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 32px rgba(31, 40, 60, 0.16);
}

.pet-card-media {
  position: relative;
  overflow: hidden;
  background: #e8edf4;
}

.pet-card-media img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  transition: transform .25s ease;
}

.pet-grid .pet:hover .pet-card-media img {
  transform: scale(1.03);
}

.pet-card-body {
  padding: 14px 16px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pet-grid .pet .name,
.pet-card-name {
  display: block;
  padding: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ink-blue);
  text-decoration: none;
  line-height: 1.2;
}

.pet-grid .pet a.name:hover,
.pet-card-name:hover {
  color: var(--accent-red);
  text-decoration: underline;
}

.pet-grid .pet .meta,
.pet-card-meta {
  padding: 0;
  font-family: 'Roboto Condensed', Arial, sans-serif;
  font-size: 13px;
  line-height: 1.35;
  color: #5a6678;
  text-transform: capitalize;
}

.pets-head {
  font-family: Georgia, "Times New Roman", serif;
  color: var(--ink-blue);
  text-align: center;
  margin: 32px 0 20px;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  padding: 0;
}

.pet-grid-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 24px;
  color: #5a6678;
  font-family: Georgia, serif;
  font-size: 1.05rem;
  background: #f7f9fc;
  border-radius: 12px;
  border: 1px dashed #c5d0df;
}

@media (max-width: 767px) {
  .pet-filters { grid-template-columns: 1fr; }
  .pet-listing-shell { padding: 18px 16px 22px; }
  .pet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .pet-card-media img { height: 160px; }
}

@media (max-width: 480px) {
  .pet-grid { grid-template-columns: 1fr; }
}

/* Intro flex (adoption etc.) */
.intro-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
  justify-content: space-between;
}

.intro-flex .subpage-lead-inline {
  color: var(--navy2);
  font-size: 1.15rem;
  margin: 8px 0 0;
}

/* Section padding inside subpage shell */
.subpage-content > .section {
  padding: 0 0 28px;
}

.subpage-content .btn-outline {
  flex-shrink: 0;
}

/* Tails & Treasures premium panel */
.tt {
  background: #fff;
  border-radius: 14px;
  padding: 36px 40px;
  box-shadow: var(--panel-shadow);
  margin-bottom: 20px;
}

.tt h1 {
  font-family: Georgia, serif;
  color: var(--ink-blue);
  text-align: center;
  font-size: clamp(1.75rem, 4vw, 2.25rem);
}

.tt .lead {
  text-align: center;
  color: var(--maroon);
  font-style: italic;
  margin: 16px 0;
}

/* Empty the Shelters — premium */
.ets-page-title {
  background: #fff;
  border-radius: 14px;
  padding: 24px 28px;
  margin-bottom: 20px;
  box-shadow: var(--panel-shadow);
  text-align: center;
}

.ets-title {
  font-family: Georgia, serif;
  color: var(--ink-blue);
  text-align: center;
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  margin: 0;
  padding: 0;
}

.ets-hero {
  width: 100%;
  max-width: none;
  margin: 0 0 24px;
  border: none;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--panel-shadow);
  background: #fff;
}

.ets-hero-banner {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  background: #fff;
}

.ets-band {
  background: linear-gradient(180deg, #6f8ab5 0%, #627faa 100%);
  color: #fff;
  padding: 16px 24px;
  border-radius: 10px;
  margin: 24px 0 16px;
  text-align: center;
  width: 100%;
  max-width: none;
}

.ets-band h2 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 1.5rem;
  font-style: italic;
  color: #fff;
  padding: 0;
}

.ets-body {
  background: #fff;
  border-radius: 14px;
  padding: 28px 32px;
  margin: 20px 0;
  box-shadow: var(--panel-shadow);
  max-width: none;
  color: var(--navy2);
  font-size: 17px;
  line-height: 1.5;
}


/* Adopt page */
.adopt-ready-header {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.adopt-ready-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 32px;
  background: #fff;
  padding: 24px;
  border-radius: 14px;
  box-shadow: var(--panel-shadow);
}

.adopt-ready-row img {
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
}

.adopt-ready-text {
  font-size: 15px;
  line-height: 1.5;
  color: #33405c;
}

@media (max-width: 1024px) {
  .subpage-hero { grid-template-columns: 1fr; }
  .subpage-split { grid-template-columns: 1fr; }
  .subpage-grid { grid-template-columns: repeat(2, 1fr); }
  .events-grid { grid-template-columns: 1fr; }
  .adopt-ready-row { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .subpage-content { width: 94%; padding: 16px 0 36px; }
  .subpage-hero { padding: 20px 18px; }
  .subpage-grid { grid-template-columns: 1fr; }
  .card-row { grid-template-columns: 1fr; }
  .wellness-top { flex-direction: column; }
  .wellness-top .wellness-hero-img { width: 100%; }
  .well-grid { grid-template-columns: 1fr; }
  .help-row { grid-template-columns: 1fr 1fr; }
  .tt { padding: 24px 20px; }
}

@media (max-width: 640px) {
  .help-row { grid-template-columns: 1fr; }
  .subpage-hero-art { min-height: 180px; }
}

/* ====================================================================
   PREMIUM THEME OVERLAY — site-wide, CSS-only (no markup/text changes)
   Unifies the page background, elevates every card, and improves
   spacing, alignment & mobile responsiveness across all pages.
   ==================================================================== */

/* 1) One consistent, premium background on every page */
body {
  background: radial-gradient(circle at top, #ffffff 0%, #f7f9fc 46%, #dfe7f3 100%) !important;
  background-attachment: fixed !important;
  color: #263246;
}

/* 2) Let that background show through the old solid colour bands */
.wellness-top,
.wellness-grid-wrap,
.help-section,
.give-page,
.give-grid,
.events-title,
.thanks {
  background: transparent !important;
}

/* 3) Premium card system — keep each card's own colours, add depth,
      rounding, hover lift & clipped imagery */
.well-cell,
.give-card,
.board-card,
.help-tile,
.foster-info-card,
.subpage-card,
.pet-grid .card,
.card-row .card {
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(31, 40, 60, 0.10) !important;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.well-cell:hover,
.give-card:hover,
.board-card:hover,
.help-tile:hover,
.foster-info-card:hover,
.subpage-card:hover,
.pet-grid .card:hover,
.card-row .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(31, 40, 60, 0.18) !important;
}

/* cards that previously had no panel get a clean white surface */
.foster-info-card {
  background: #ffffff !important;
  padding: 16px 16px 20px !important;
}
.foster-info-card img { border-radius: 10px !important; }

/* refine the heavy give-card border into a soft premium edge */
.give-card { border: 1px solid rgba(139, 111, 71, 0.28) !important; }

/* brighten the flat grey board panels */
.board-card { background: #f4f5f7 !important; }

/* 4) Roomier, better-aligned grids */
.well-grid { gap: 22px !important; }
.help-row { flex-wrap: wrap; gap: 18px !important; max-width: 1100px; }
.help-tile {
  flex: 1 1 210px;
  border-right: none !important;
  border-bottom: none !important;
}

/* 5) Mobile polish — calmer padding, no overflow, stacked hero */
@media (max-width: 640px) {
  .section,
  .wellness-top,
  .wellness-grid-wrap,
  .help-section,
  .give-grid { padding-left: 16px !important; padding-right: 16px !important; }
  .wellness-top { flex-direction: column; }
  .wellness-top .w-img { width: 100% !important; }
}

/* 6) Header + global mobile overflow fixes */
html, body { overflow-x: hidden; max-width: 100%; }
@media (max-width: 760px) {
  .topbar { gap: 10px; padding: 8px 12px; }
  .brand img { width: 148px; }
  .donate {
    padding: 9px 12px;
    font-size: 12px;
    line-height: 1.1;
    white-space: normal;
    text-align: center;
  }
}
@media (max-width: 640px) {
  .section { padding-left: 16px !important; padding-right: 16px !important; }
}

/* 7) Mobile overflow hardening — let flex/grid children shrink, wrap donate */
@media (max-width: 760px) {
  .page, .page * { min-width: 0; }
  .donate { flex: 0 1 auto; max-width: 44vw; white-space: normal; }
}