/* ==========================================================================
   POD Children's Charity – Design System
   Bootstrap 5.3.x + Custom Components
   ========================================================================== */

/* ----- Design tokens ----- */
:root{
  --pod-green: #81c342;
  --pod-green-deep: #4d8420;
  --pod-coral: #e8644a;
  --pod-coral-deep: #c8513a;
  --pod-cream: #fff8ec;
  --pod-card: #ffffff;
  --pod-ink: #2a2118;
  --pod-ink-60: #6c6258;
  --pod-rule: #efe6d4;
  /* Home page additions */
  --pod-yellow: #ffd454;
  --pod-green-dark: #2f5b0f;
}

/* ----- Global typography ----- */
body{
  font-family: 'Sora', system-ui, -apple-system, sans-serif;
  background: var(--pod-cream);
  color: var(--pod-ink);
  font-size: 17px;
  line-height: 1.65;
}
h1, h2, h3, h4{
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 600;
  letter-spacing: -.012em;
}
h1 em, h2 em, h3 em{ font-style: italic; font-weight: 500; color: inherit; }
.italic{ font-style: italic; }

/* ----- Navbar ----- */
.pod-nav{
  background: var(--pod-cream);
  border-bottom: 1px solid var(--pod-rule);
  position: sticky;
  top: 0;
  z-index: 100;
  padding-top: .25rem !important;
  padding-bottom: .25rem !important;
}
.pod-logo-img{ height: 72px; }
.pod-nav .nav-link{
  color: var(--pod-ink);
  font-weight: 500;
  font-size: 15px;
  padding: .4rem .9rem;
}
.pod-nav .nav-link:hover{ color: var(--pod-green-deep); }
.pod-nav .nav-link.active{ color: var(--pod-green-deep); font-weight: 600; }

/* "More" dropdown menu */
.pod-nav .dropdown-toggle::after{ margin-left: .35em; }
.pod-nav .dropdown-menu{
  background: var(--pod-cream);
  border: 1px solid var(--pod-rule);
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 24px 60px -32px rgba(42,33,24,.18);
}
.pod-nav .dropdown-menu .dropdown-item{
  color: var(--pod-ink);
  font-weight: 500;
  font-size: 15px;
  padding: 10px 16px;
  border-radius: 10px;
}
.pod-nav .dropdown-menu .dropdown-item:hover,
.pod-nav .dropdown-menu .dropdown-item:focus{
  background: rgba(129,195,66,.12);
  color: var(--pod-green-deep);
}
.pod-nav .dropdown-menu .dropdown-item.active{
  background: rgba(129,195,66,.18);
  color: var(--pod-green-deep);
}

/* Mobile nav toggler */
.pod-nav .navbar-toggler{
  border: 1px solid var(--pod-rule);
  background: #fff;
}

/* ----- Buttons ----- */
/* Generic Bootstrap .btn baseline shadow so even inline-styled buttons get one.
   Sora's visual baseline sits a hair above the metric center; flex centering
   plus a 1px nudge fixes the optical "text too high" feel inside pill buttons. */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding-top: calc(.65rem + 1px);
  padding-bottom: calc(.65rem - 1px);
  box-shadow: 0 4px 12px -4px rgba(42,33,24,.25);
  transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.btn:hover, .btn:focus{
  box-shadow: 0 12px 28px -8px rgba(42,33,24,.4);
  transform: translateY(-1px);
}

.btn-pod{
  background: var(--pod-green); color: #fff; border: 0;
  border-radius: 999px; padding-left: 1.5rem; padding-right: 1.5rem; font-weight: 600;
  box-shadow: 0 4px 14px -4px rgba(77,132,32,.45);
  transition: background .2s ease, box-shadow .2s ease, transform .15s ease;
}
.btn-pod:hover, .btn-pod:focus{
  background: var(--pod-green-deep); color: #fff;
  box-shadow: 0 12px 28px -8px rgba(77,132,32,.55);
  transform: translateY(-1px);
}
.btn-coral{
  background: var(--pod-coral); color: #fff; border: 0;
  border-radius: 999px; padding-left: 1.5rem; padding-right: 1.5rem; font-weight: 600;
  box-shadow: 0 4px 14px -4px rgba(200,81,58,.5);
  transition: background .2s ease, box-shadow .2s ease, transform .15s ease;
}
.btn-coral:hover, .btn-coral:focus{
  background: var(--pod-coral-deep); color: #fff;
  box-shadow: 0 12px 28px -8px rgba(200,81,58,.6);
  transform: translateY(-1px);
}
.btn-ghost{
  background: transparent; color: var(--pod-ink);
  border: 1.5px solid var(--pod-ink);
  border-radius: 999px; padding-left: 1.5rem; padding-right: 1.5rem; font-weight: 600;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.btn-ghost:hover, .btn-ghost:focus{
  background: var(--pod-ink); color: #fff;
  box-shadow: 0 12px 28px -10px rgba(42,33,24,.5);
  transform: translateY(-1px);
}

/* ----- Card system ----- */
.card-warm{
  background: var(--pod-card);
  border-radius: 28px;
  padding: 40px;
  box-shadow: 0 18px 36px -14px rgba(42,33,24,.3), 0 36px 72px -22px rgba(42,33,24,.28);
  border: 1px solid var(--pod-rule);
}
.card-warm.card-green{ box-shadow: 0 20px 40px -14px rgba(77,132,32,.6), 0 40px 80px -22px rgba(77,132,32,.45); }
.card-warm.card-coral{ box-shadow: 0 20px 40px -14px rgba(200,81,58,.6), 0 40px 80px -22px rgba(200,81,58,.45); }
.card-warm.card-ink{ box-shadow: 0 20px 40px -14px rgba(0,0,0,.6), 0 40px 80px -22px rgba(0,0,0,.5); }
.card-green{ background: var(--pod-green); color: #fff; border: 0; }
.card-green h2, .card-green h3, .card-green h4{ color: #fff; }
.card-coral{ background: var(--pod-coral); color: #fff; border: 0; }
.card-coral h2, .card-coral h3, .card-coral h4{ color: #fff; }
.card-ink{ background: var(--pod-ink); color: #f5efe2; border: 0; }
.card-ink h2, .card-ink h3, .card-ink h4{ color: #fff; }

/* ----- Eyebrow label ----- */
.eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--pod-coral);
  background: rgba(232,100,74,.1);
  padding: 6px 14px; border-radius: 999px;
  margin-bottom: 1.2rem;
  box-shadow: 0 4px 12px -4px rgba(232,100,74,.35);
}
.eyebrow .dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--pod-coral); }
.eyebrow.on-green{
  background: rgba(255,255,255,.18); color: #fff;
  box-shadow: 0 4px 12px -4px rgba(0,0,0,.25);
}
.eyebrow.on-green .dot{ background: #fff; }

/* ----- Page head ----- */
.page-head{ padding: 56px 0 24px; }
.page-head h1{
  font-size: clamp(44px, 5.5vw, 76px);
  line-height: 1.04; letter-spacing: -.02em;
  margin: 0 0 1rem;
}
.page-head .lede{ font-size: 19px; color: var(--pod-ink-60); max-width: 60ch; }

.crumb{
  display: flex; gap: 8px; font-size: 13px;
  color: var(--pod-ink-60); margin-bottom: 1rem; align-items: center;
}
.crumb a{ color: var(--pod-ink-60); text-decoration: none; }
.crumb a:hover{ color: var(--pod-green-deep); }
.crumb .sep{ opacity: .5; }

/* ----- Sections ----- */
.section{ padding: 28px 0 56px; }
.section h2{
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.06; letter-spacing: -.018em;
}

.h-row{
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 32px; gap: 32px; flex-wrap: wrap;
}
.h-row h2{ margin: 0; max-width: 28ch; flex: 0 1 auto; }
.h-row .meta{
  color: var(--pod-ink-60); font-size: 14px;
  max-width: 40ch; flex: 0 1 auto;
  line-height: 1.55;
}

.prose{ max-width: 64ch; }
.prose p{ margin-bottom: 1.1em; font-size: 17px; }
.prose p.lead{
  font-family: 'Source Serif 4', serif;
  font-size: 22px; line-height: 1.5; color: var(--pod-ink);
}

/* ----- Photo frames ----- */
.photo-frame{
  border-radius: 28px; overflow: hidden;
  box-shadow: 0 24px 60px -32px rgba(42,33,24,.2);
}
.photo-frame img{ width: 100%; height: auto; display: block; }
.photo-frame.fixed{ aspect-ratio: 4/3; }
.photo-frame.fixed img{ height: 100%; object-fit: cover; }
.photo-frame.tall{ aspect-ratio: 4/5; }
.photo-frame.tall img{ height: 100%; object-fit: cover; }

/* ----- Quotes ----- */
.quote{
  background: var(--pod-card); border: 1px solid var(--pod-rule);
  border-radius: 24px; padding: 28px 32px;
  font-family: 'Source Serif 4', serif; font-style: italic;
  font-size: 19px; line-height: 1.5; position: relative;
}
.quote::before{
  content: '\201C'; font-family: 'Source Serif 4', serif;
  font-size: 80px; line-height: 1; color: var(--pod-coral);
  position: absolute; top: 8px; left: 18px;
  font-style: normal; opacity: .35;
}
.quote .body{ position: relative; z-index: 1; padding-left: 24px; }
.quote .by{
  display: block; margin-top: 12px; font-style: normal;
  font-family: 'Sora', sans-serif; font-size: 13.5px;
  color: var(--pod-ink-60); letter-spacing: .02em;
}
.quote.green{ background: var(--pod-green); color: #fff; border: 0; }
.quote.green::before{ color: #fff; opacity: .55; }
.quote.green .by{ color: rgba(255,255,255,.82); }
.quote.cream{ background: var(--pod-cream); }
.quote.coral{ background: var(--pod-coral); color: #fff; border: 0; }
.quote.coral::before{ color: #fff; opacity: .5; }
.quote.coral .by{ color: rgba(255,255,255,.85); }

/* ----- Split (text + photo alternating) ----- */
.split{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 28px; align-items: stretch; margin-bottom: 28px;
}
.split.right > .text-col{ order: 2; }
.split.right > .photo-col{ order: 1; }
.split .text-col{ display: flex; flex-direction: column; justify-content: center; }
.split .text-col p{ margin-bottom: .9em; }
.split .text-col p:last-child{ margin-bottom: 0; }
/* Photo column matches the text column height */
.split .photo-col{ display: flex; }
.split .photo-col .photo-frame{
  width: 100%;
  height: 100%;
  aspect-ratio: auto;     /* override fixed/tall ratio inside split */
  min-height: 280px;
}
.split .photo-col .photo-frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ----- HERO (home) ----- */
.hero{ padding: 56px 0 40px; }
.hero-grid{
  display: grid; grid-template-columns: 7fr 5fr; gap: 28px;
}
.hero-main{
  padding: 56px;
  background: var(--pod-card);
  border-radius: 32px;
  border: 1px solid var(--pod-rule);
  box-shadow: 0 24px 60px -32px rgba(42,33,24,.18);
  position: relative; overflow: hidden;
}
.hero-main h1{
  font-size: clamp(48px, 6vw, 88px);
  line-height: 1.02; letter-spacing: -.022em;
  margin: 0 0 1.4rem;
}
.hero-main p.lede{ font-size: 19px; color: var(--pod-ink-60); max-width: 50ch; }
.hero-stats{
  margin-top: 40px; padding-top: 24px;
  border-top: 1px solid var(--pod-rule);
  display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: center;
  gap: 16px;
}
.hero-stats > div{
  flex: 1 1 0;
  min-width: 110px;
  text-align: center;
}
.hero-stats .n{
  font-family: 'Source Serif 4', serif; font-size: 38px;
  font-weight: 700; line-height: 1; color: var(--pod-green-deep);
}
.hero-stats .l{ font-size: 12.5px; color: var(--pod-ink-60); margin-top: 6px; }

.hero-side{ display: grid; grid-template-rows: 1.6fr 1fr; gap: 28px; }
.hero-photo{
  border-radius: 28px; overflow: hidden;
  box-shadow: 0 32px 70px -28px rgba(42,33,24,.32);
}
.hero-photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-quote{
  background: var(--pod-coral); color: #fff;
  border-radius: 28px; padding: 28px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.hero-quote .q{
  font-family: 'Source Serif 4', serif; font-style: italic;
  font-size: 20px; line-height: 1.35;
}
.hero-quote .by{ font-size: 12.5px; opacity: .85; margin-top: 12px; letter-spacing: .04em; }

/* ----- About (home about-grid) ----- */
.about-grid{
  display: grid; grid-template-columns: 5fr 7fr; gap: 28px; align-items: stretch;
}
.about-photo{
  border-radius: 28px; overflow: hidden;
  box-shadow: 0 32px 70px -28px rgba(42,33,24,.32);
  min-height: 480px;
}
.about-photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.about-text p{ margin-bottom: 1.2em; }
.about-text p:first-of-type{
  font-size: 21px; color: var(--pod-ink);
  font-family: 'Source Serif 4', serif; line-height: 1.5;
}

/* ----- About hero (page-level) ----- */
.about-hero{
  background: var(--pod-card); border: 1px solid var(--pod-rule);
  border-radius: 32px; padding: 56px;
  box-shadow: 0 32px 70px -28px rgba(42,33,24,.26);
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center;
}
.about-hero .photo-frame{ aspect-ratio: 4/5; }
.about-hero .photo-frame img{ height: 100%; object-fit: cover; }

/* ----- Stat band ----- */
.stat-band{
  background: var(--pod-green); color: #fff;
  border-radius: 28px; padding: 40px 48px;
  display: flex; flex-wrap: wrap;
  justify-content: space-between; align-items: center;
  gap: 24px;
  margin: 24px 0;
  box-shadow: 0 28px 60px -24px rgba(77,132,32,.4);
}
.stat-band > div{
  flex: 1 1 0;
  min-width: 140px;
  text-align: center;
}
.stat-band .n{
  font-family: 'Source Serif 4', serif; font-size: 48px;
  font-weight: 700; line-height: 1;
}
.stat-band .l{
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  opacity: .85; margin-top: 8px;
}

/* ----- Donate tier grid ----- */
.donate-grid{
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px;
}
.tier-card{
  background: var(--pod-card); border: 1px solid var(--pod-rule);
  border-radius: 24px; padding: 32px 28px;
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative;
}
.tier-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 28px 60px -28px rgba(42,33,24,.22);
}
.tier-card.featured{ background: var(--pod-green); color: #fff; border: 0; }
.tier-card.featured h3{ color: #fff; }
.tier-card .amt{
  font-family: 'Source Serif 4', serif; font-size: 56px;
  font-weight: 700; line-height: 1;
}
.tier-card .label{
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  opacity: .7; margin: 8px 0 16px;
}
.tier-card.featured .label{ opacity: .85; }
.tier-card h3{ font-size: 22px; margin: 0 0 10px; }
.tier-card .ribbon{
  display: inline-block; background: var(--pod-coral); color: #fff;
  font-size: 11px; padding: 4px 10px; border-radius: 999px;
  margin-bottom: 14px; letter-spacing: .1em; text-transform: uppercase;
}
.tier-card p{ font-size: 14.5px; margin-bottom: 0; }
.tier-card .text-muted{ color: var(--pod-ink-60) !important; }
.tier-card.featured p{ opacity: .9; }

/* ----- Donate CTA (QR) ----- */
.donate-cta{
  margin-top: 28px;
  background: var(--pod-card); color: var(--pod-ink);
  border: 1px solid var(--pod-rule);
  border-radius: 28px; padding: 36px;
  display: grid; grid-template-columns: 1.2fr 1fr 180px;
  gap: 28px; align-items: center;
  box-shadow: 0 24px 60px -32px rgba(42,33,24,.18);
}
.donate-cta.card-green, .donate-cta.card-coral{ color: #fff; }
.donate-cta h3{ font-size: 28px; margin: 0 0 6px; }
.donate-cta:not(.card-green):not(.card-coral) h3{ color: var(--pod-ink); }
.donate-cta:not(.card-green):not(.card-coral) p{ color: var(--pod-ink-60); }
.donate-cta p{ font-size: 14.5px; margin: 0; }
.donate-cta .qrwrap{
  background: #fff; padding: 10px; border-radius: 16px;
  aspect-ratio: 1; border: 1px solid var(--pod-rule);
}
.donate-cta .qrwrap img{ width: 100%; height: 100%; object-fit: contain; }
.donate-cta .ways{ display: flex; gap: 8px; flex-wrap: wrap; }
.donate-cta .ways .pill{
  background: var(--pod-cream); border: 1px solid var(--pod-rule);
  padding: 6px 12px; border-radius: 999px;
  font-size: 12.5px; color: var(--pod-ink);
}

/* Big QR variant – for hero-prominent QR */
.donate-cta-qr{
  background: var(--pod-green); color: #fff; border: 0;
  border-radius: 32px; padding: 48px;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center;
  box-shadow: 0 24px 60px -32px rgba(42,33,24,.25);
}
.donate-cta-qr h2{ color: #fff; margin-bottom: 12px; }
.donate-cta-qr .qr-large{
  background: #fff; padding: 18px; border-radius: 24px;
  aspect-ratio: 1; max-width: 280px; margin-left: auto;
}
.donate-cta-qr .qr-large img{ width: 100%; height: 100%; object-fit: contain; }

/* ----- Voices (3-col quote grid) ----- */
.voice-grid{
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px;
}
.voice-card{
  position: relative;
  background: var(--pod-card); border: 1px solid var(--pod-rule);
  border-radius: 24px; padding: 36px 32px 28px;
  display: flex; flex-direction: column; gap: 14px;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.voice-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 24px 60px -28px rgba(42,33,24,.18);
}
.voice-card.green{ background: var(--pod-green); color: #fff; border: 0; }
.voice-card.cream{ background: var(--pod-cream); border-color: var(--pod-rule); }
.voice-card.coral{ background: var(--pod-coral); color: #fff; border: 0; }
/* Decorative oversized quote glyph in the corner – not a content slot.
   Note: avoid the class name `.mark` because Bootstrap 5 styles that
   element with a yellow highlight background. */
.voice-card .q-glyph{
  position: absolute;
  top: -12px; right: 18px;
  font-family: 'Source Serif 4', serif;
  font-size: 140px; line-height: 1;
  color: var(--pod-coral);
  opacity: .14;
  pointer-events: none;
  user-select: none;
  background: transparent !important;
  padding: 0 !important;
}
.voice-card.green .q-glyph{ color: #fff; opacity: .35; }
.voice-card.coral .q-glyph{ color: #fff; opacity: .35; }
.voice-card.cream .q-glyph{ color: var(--pod-coral); opacity: .22; }
.voice-card .role{
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pod-coral);
  background: rgba(232,100,74,.10);
  padding: 4px 12px; border-radius: 999px;
  margin-bottom: 4px;
  box-shadow: 0 4px 10px -4px rgba(232,100,74,.4);
}
.voice-card.green .role,
.voice-card.coral .role{
  color: #fff; background: rgba(255,255,255,.18);
  box-shadow: 0 4px 10px -4px rgba(0,0,0,.25);
}
.voice-card .q{
  font-family: 'Source Serif 4', serif;
  font-size: 19px; line-height: 1.45;
  font-style: italic;
}
.voice-card .by{
  margin-top: auto; padding-top: 14px;
  border-top: 1px solid var(--pod-rule);
  font-size: 13px;
}
.voice-card.green .by, .voice-card.coral .by{ border-top-color: rgba(255,255,255,.25); }

/* ----- Quote grid (2-col) ----- */
.qgrid{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* ----- Coverage card ----- */
.coverage-card{
  background: var(--pod-green); color: #fff;
  border-radius: 32px; padding: 56px;
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 48px; align-items: center;
  overflow: hidden; position: relative;
}
.coverage-card h2{ color: #fff; }
.coverage-pct{
  font-family: 'Source Serif 4', serif;
  font-size: clamp(120px, 14vw, 220px);
  font-weight: 700; line-height: .85; color: #fff;
}
.coverage-pct sup{ font-size: .4em; color: rgba(255,255,255,.7); vertical-align: top; }
.coverage-photo{
  aspect-ratio: 4/5; border-radius: 24px; overflow: hidden;
  box-shadow: 0 32px 70px -28px rgba(0,0,0,.45);
}
.coverage-photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* ----- Donors (home: pill list) ----- */
.donors-card{
  background: var(--pod-card); border: 1px solid var(--pod-rule);
  border-radius: 32px; padding: 56px;
}
.donors-list{
  display: flex; flex-wrap: wrap; gap: 10px;
  list-style: none; padding: 0; margin: 0;
}
.donors-list li{
  background: var(--pod-cream);
  border: 1px solid var(--pod-rule);
  border-radius: 999px;
  padding: 9px 18px; font-size: 14.5px;
  transition: background .15s ease, color .15s ease;
}
.donors-list li:hover{
  background: var(--pod-green); color: #fff;
  border-color: var(--pod-green);
}
.donors-list li.featured{
  background: var(--pod-coral); color: #fff;
  border-color: var(--pod-coral); font-weight: 500;
}

/* ----- Donor wall (page: 3-col list) ----- */
.donor-wall{
  background: var(--pod-card); border: 1px solid var(--pod-rule);
  border-radius: 32px; padding: 56px;
  box-shadow: 0 24px 60px -32px rgba(42,33,24,.18);
}
.donor-list{
  column-count: 3; column-gap: 32px;
  list-style: none; padding: 0; margin: 24px 0 0;
}
.donor-list li{
  break-inside: avoid;
  padding: 8px 0; font-size: 15.5px; color: var(--pod-ink);
  border-bottom: 1px dashed var(--pod-rule);
}
.donor-list li.featured{ font-weight: 600; color: var(--pod-coral); }

/* ----- People grid (entertainers) ----- */
.people-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.people-grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
.people-grid.cols-2{ grid-template-columns: repeat(2, 1fr); }
.person-card{
  background: var(--pod-card); border: 1px solid var(--pod-rule);
  border-radius: 24px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 32px 70px -28px rgba(42,33,24,.32);
  transition: transform .2s ease, box-shadow .2s ease;
}
.person-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 36px 78px -26px rgba(42,33,24,.4);
}
.person-card .photo{ aspect-ratio: 4/5; overflow: hidden; }
.person-card .photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.person-card .body{
  padding: 22px 24px 26px;
  flex: 1; display: flex; flex-direction: column;
}
.person-card .role{
  display: inline-flex; align-items: center;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
  color: var(--pod-coral);
  background: rgba(232,100,74,.12);
  padding: 4px 11px; border-radius: 999px;
  margin-bottom: 8px;
  align-self: flex-start;
  box-shadow: 0 3px 8px -3px rgba(232,100,74,.4);
}
.person-card h3{ font-size: 21px; margin: 0 0 4px; }
.person-card .stage{
  font-size: 13px; color: var(--pod-ink-60); margin: 0 0 12px;
  font-style: italic; font-family: 'Source Serif 4', serif;
}
.person-card p{ font-size: 14.5px; color: var(--pod-ink-60); margin: 0; }

/* ----- Featured person (large 2-col bio) ----- */
.feature-person{
  background: var(--pod-card); border: 1px solid var(--pod-rule);
  border-radius: 32px; padding: 0;
  box-shadow: 0 24px 60px -32px rgba(42,33,24,.18);
  display: grid; grid-template-columns: 5fr 7fr; overflow: hidden;
  margin-bottom: 28px;
}
.feature-person.flip{ grid-template-columns: 7fr 5fr; }
.feature-person.flip > .photo{ order: 2; }
.feature-person.flip > .body{ order: 1; }
.feature-person .photo{ aspect-ratio: 4/5; overflow: hidden; }
.feature-person .photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.feature-person .photo.square{ aspect-ratio: auto; background: var(--pod-cream); display: flex; align-items: center; }
.feature-person .photo.square img{ width: 100%; height: auto; object-fit: contain; }
.feature-person .photo.landscape{ aspect-ratio: 4/3; }
.feature-person .body{
  padding: 48px 56px;
  display: flex; flex-direction: column; justify-content: center;
}
.feature-person .role{
  display: inline-flex; align-items: center;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  color: var(--pod-coral);
  background: rgba(232,100,74,.12);
  padding: 6px 14px; border-radius: 999px;
  margin-bottom: 14px;
  align-self: flex-start;
  box-shadow: 0 4px 10px -4px rgba(232,100,74,.4);
}
.feature-person h3{
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.05; margin: 0 0 1rem;
  letter-spacing: -.018em;
}
.feature-person h3 small{
  display: block; font-size: 16px; color: var(--pod-ink-60);
  font-family: 'Sora', sans-serif; font-weight: 400;
  letter-spacing: 0; margin-top: 6px;
}
.feature-person p{ font-size: 16.5px; margin-bottom: 1em; }
.feature-person p:last-child{ margin-bottom: 0; }

.feature-person.green{ background: var(--pod-green); color: #fff; border: 0; }
.feature-person.green h3{ color: #fff; }
.feature-person.green .role{
  color: #fff; background: rgba(255,255,255,.18);
  box-shadow: 0 4px 10px -4px rgba(0,0,0,.25);
}
.feature-person.green h3 small{ color: rgba(255,255,255,.85); }

.feature-person.coral{ background: var(--pod-coral); color: #fff; border: 0; }
.feature-person.coral h3{ color: #fff; }
.feature-person.coral .role{
  color: #fff; background: rgba(255,255,255,.22);
  box-shadow: 0 4px 10px -4px rgba(0,0,0,.25);
}
.feature-person.coral h3 small{ color: rgba(255,255,255,.9); }

/* ----- Trustee list ----- */
.trustee-list{
  background: var(--pod-card); border: 1px solid var(--pod-rule);
  border-radius: 24px; padding: 32px 40px;
  display: grid; grid-template-columns: repeat(2, 1fr);
  column-gap: 48px; row-gap: 0;
}
.trustee-list .item{
  padding: 16px 0; border-bottom: 1px solid var(--pod-rule);
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
}
.trustee-list .item:nth-last-child(1),
.trustee-list .item:nth-last-child(2){ border-bottom: 0; }
.trustee-list .nm{
  font-family: 'Source Serif 4', serif;
  font-weight: 600; font-size: 17px;
}
.trustee-list .ti{
  font-size: 13px; color: var(--pod-ink-60); letter-spacing: .04em;
  text-align: right;
}

/* ----- Give grid (ways to give / contact methods) ----- */
.give-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.give-grid.cols-3{ grid-template-columns: repeat(3, 1fr); }
.give-card{
  background: var(--pod-card); border: 1px solid var(--pod-rule);
  border-radius: 24px; padding: 32px;
}
.give-card .icon{
  width: 48px; height: 48px; border-radius: 14px;
  background: rgba(129,195,66,.14); color: var(--pod-green-deep);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 16px;
}
.give-card.coral .icon{
  background: rgba(232,100,74,.14); color: var(--pod-coral-deep);
}
.give-card h3{ font-size: 22px; margin-bottom: .6rem; }
.give-card p{ font-size: 15px; color: var(--pod-ink-60); margin-bottom: .8rem; }
.give-card .detail{
  font-family: 'Source Serif 4', serif; font-size: 16px; color: var(--pod-ink);
  padding: 14px 16px; background: var(--pod-cream);
  border-radius: 14px; border: 1px solid var(--pod-rule);
}
.give-card .detail b{ font-family: 'Sora', sans-serif; font-weight: 600; }
.give-card .qr-inline{
  background: #fff; padding: 10px; border-radius: 14px;
  border: 1px solid var(--pod-rule); aspect-ratio: 1;
  max-width: 160px; margin-top: 12px;
  box-shadow: 0 12px 28px -10px rgba(0,0,0,.18);
  transition: transform .25s ease, box-shadow .25s ease;
}
.give-card .qr-inline:hover{
  transform: scale(1.02);
  box-shadow: 0 22px 46px -18px rgba(0,0,0,.28);
}
.give-card .qr-inline img{ width: 100%; height: 100%; object-fit: contain; display: block; }

/* ----- Bank card ----- */
.bank-card{
  background: var(--pod-ink); color: #f5efe2; border-radius: 28px;
  padding: 40px;
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 32px; align-items: center;
}
.bank-card h3{ color: #fff; font-size: 28px; margin: 0 0 .5rem; }
.bank-card p{ color: rgba(255,255,255,.78); font-size: 15px; margin: 0; }
.bank-detail{
  background: rgba(255,255,255,.07); border-radius: 16px;
  padding: 20px 24px; font-family: 'Source Serif 4', serif;
  font-size: 16px; line-height: 1.7;
}
.bank-detail .row-d{ display: flex; justify-content: space-between; gap: 16px; }
.bank-detail .lbl{
  font-family: 'Sora', sans-serif; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
}

/* ----- Letter (long-form testimonial) ----- */
.letter{
  background: var(--pod-card); border: 1px solid var(--pod-rule);
  border-radius: 32px; padding: 56px;
  box-shadow: 0 24px 60px -32px rgba(42,33,24,.18);
  display: grid; grid-template-columns: 5fr 7fr;
  gap: 48px; margin-bottom: 32px;
}
.letter.flip{ grid-template-columns: 7fr 5fr; }
.letter.flip > .photo-frame{ order: 2; }
.letter.flip > .body{ order: 1; }
.letter .photo-frame{ aspect-ratio: 4/5; }
.letter .photo-frame img{ height: 100%; object-fit: cover; }
.letter .photo-frame.landscape{ aspect-ratio: 4/3; align-self: center; }
.letter .role{
  display: inline-flex; align-items: center;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  color: var(--pod-coral);
  background: rgba(232,100,74,.12);
  padding: 6px 14px; border-radius: 999px;
  margin-bottom: 14px;
  align-self: flex-start;
  box-shadow: 0 4px 10px -4px rgba(232,100,74,.4);
}
.letter h3{
  font-size: clamp(22px, 2.2vw, 28px); line-height: 1.3;
  margin: 0 0 1.2rem;
  font-style: italic;
}
/* Entire letter body is italic Source Serif 4 per the brief */
.letter p{
  font-style: italic;
  font-family: 'Source Serif 4', serif;
  font-size: 18px; line-height: 1.5;
  margin-bottom: 1em;
}
.letter p.italic{ /* explicit class still honored for backwards-compat */
  font-style: italic; color: inherit;
  font-family: 'Source Serif 4', serif;
  font-size: 18px; line-height: 1.5;
}
/* Photos in 2nd+ letters sit vertically centered relative to the text (per feedback) */
.letter + .letter > .photo-frame{ align-self: center; }
.letter .signoff{
  margin-top: 1.5rem; padding-top: 1rem;
  border-top: 1px solid var(--pod-rule);
  font-size: 13.5px; color: var(--pod-ink-60);
}

.letter.green{ background: var(--pod-green); color: #fff; border: 0; }
.letter.green h3{ color: #fff; }
.letter.green .role{
  color: #fff; background: rgba(255,255,255,.18);
  box-shadow: 0 4px 10px -4px rgba(0,0,0,.25);
}
.letter.green .signoff{
  border-top-color: rgba(255,255,255,.25);
  color: rgba(255,255,255,.85);
}
.letter.coral{ background: var(--pod-coral); color: #fff; border: 0; }
.letter.coral h3{ color: #fff; }
.letter.coral .role{
  color: #fff; background: rgba(255,255,255,.22);
  box-shadow: 0 4px 10px -4px rgba(0,0,0,.25);
}
.letter.coral .signoff{
  border-top-color: rgba(255,255,255,.25);
  color: rgba(255,255,255,.9);
}

/* ----- Hospitals UK image map ----- */
.uk-map-wrap{
  position: relative;
  background: var(--pod-card);
  border: 1px solid var(--pod-rule);
  border-radius: 32px;
  padding: 40px;
  box-shadow: 0 24px 60px -32px rgba(42,33,24,.18);
  text-align: center;
}
.uk-map-wrap .map-intro{
  color: var(--pod-ink-60);
  font-size: 14.5px;
  margin: 0 0 24px;
}
.uk-map-image{
  position: relative;
  display: inline-block;
  max-width: 560px;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
}
.uk-map-image img{
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}
.uk-map-image area{ cursor: pointer; }
.uk-map-overlay{
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

.region-grid{
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
}
.region-card{
  background: var(--pod-card); border: 1px solid var(--pod-rule);
  border-radius: 20px; padding: 20px 24px;
  text-align: left; cursor: pointer; width: 100%;
  transition: transform .15s ease, box-shadow .15s ease;
}
.region-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -24px rgba(42,33,24,.18);
}
.region-card h3{ font-size: 18px; margin: 0 0 4px; color: var(--pod-ink); }
.region-card span{ font-size: 13px; color: var(--pod-ink-60); }

/* Hospital list inside modal */
.hospital-list{ list-style: none; padding: 0; margin: 0; }
.hospital-list li{
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 0; border-bottom: 1px dashed var(--pod-rule); gap: 16px;
}
.hospital-list li:last-child{ border-bottom: 0; }
.hospital-list .hosp-name{
  font-family: 'Source Serif 4', serif; font-weight: 600; font-size: 16px;
}
.hospital-list .hosp-visits{
  font-size: 13px; color: var(--pod-ink-60);
  background: var(--pod-cream);
  padding: 4px 10px; border-radius: 999px;
  white-space: nowrap;
}

/* ----- Swiper testimonial slider ----- */
.swiper{ padding: 16px 0 56px; }
.swiper-button-prev,
.swiper-button-next{ color: var(--pod-coral) !important; }
.swiper-pagination-bullet{ background: var(--pod-ink-60); opacity: .35; }
.swiper-pagination-bullet-active{ background: var(--pod-coral); opacity: 1; }

/* ----- Video block ----- */
.video-card{
  background: var(--pod-card); border: 1px solid var(--pod-rule);
  border-radius: 24px; overflow: hidden;
  box-shadow: 0 24px 60px -32px rgba(42,33,24,.18);
}
.video-card .ratio{ background: var(--pod-ink); }
.video-card .video-meta{ padding: 20px 24px 24px; }
.video-card h3{ font-size: 20px; margin: 0 0 6px; }
.video-card p{ font-size: 14.5px; color: var(--pod-ink-60); margin: 0; }

/* ----- Footer ----- */
footer{
  background: var(--pod-green); color: #fff;
  padding: 64px 0 28px; margin-top: 56px;
}
footer h3{
  color: #fff; font-family: 'Sora', sans-serif;
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600; margin-bottom: 14px; opacity: .9;
}
footer a{
  color: rgba(255,255,255,.9); text-decoration: none;
  display: block; padding: 3px 0; font-size: 14.5px;
}
footer a:hover{ color: #fff8ec; text-decoration: underline; }
footer p, footer span{ color: rgba(255,255,255,.85); }
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.22);
  margin-top: 40px; padding-top: 20px;
  font-size: 12.5px; color: rgba(255,255,255,.75);
}

/* ----- Modal styling (for hospital regions) ----- */
.modal-content{
  background: var(--pod-card);
  border: 0; border-radius: 28px;
  box-shadow: 0 32px 80px -32px rgba(42,33,24,.4);
}
.modal-header{
  border-bottom: 1px solid var(--pod-rule);
  padding: 24px 32px;
}
.modal-header .modal-title{
  font-family: 'Source Serif 4', serif;
  font-size: 28px; font-weight: 600;
}
.modal-body{ padding: 24px 32px 32px; }

/* ----- Utility classes ----- */
.qr-box{
  background: #fff; padding: 16px; border-radius: 20px;
  border: 1px solid var(--pod-rule); aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
}
.qr-box img{ max-width: 100%; max-height: 100%; }

/* ===== Responsive ===== */
@media (max-width: 1199px){
  .hero-main{ padding: 40px; }
  .feature-person .body{ padding: 32px 36px; }
  .donate-cta{ grid-template-columns: 1.2fr 1fr 140px; gap: 20px; padding: 28px; }
  .stat-band{ padding: 32px 36px; gap: 24px; }
}

@media (max-width: 991px){
  .hero-grid, .about-grid, .coverage-card, .donate-cta, .donate-cta-qr,
  .about-hero, .bank-card{
    grid-template-columns: 1fr;
  }
  .donate-grid, .voice-grid{ grid-template-columns: 1fr; }
  .qgrid{ grid-template-columns: 1fr; }
  .people-grid, .people-grid.cols-3{ grid-template-columns: repeat(2, 1fr); }
  .stat-band{ grid-template-columns: repeat(2, 1fr); padding: 28px; }
  .hero-main{ padding: 36px; }
  .donors-card, .coverage-card, .donor-wall{ padding: 36px; }
  .split, .split.right{ grid-template-columns: 1fr; }
  .split.right > .text-col,
  .split.right > .photo-col{ order: initial; }
  .feature-person, .feature-person.flip,
  .letter, .letter.flip{
    grid-template-columns: 1fr;
    padding: 32px;
    gap: 28px;
  }
  .feature-person.flip > .photo,
  .feature-person.flip > .body,
  .letter.flip > .photo-frame,
  .letter.flip > .body{ order: initial; }
  .feature-person .body{ padding: 32px; }
  .trustee-list{ grid-template-columns: 1fr; padding: 24px; }
  .donor-list{ column-count: 2; }
  .give-grid, .give-grid.cols-3{ grid-template-columns: 1fr; }
  .region-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 600px){
  .people-grid, .people-grid.cols-3, .people-grid.cols-2{ grid-template-columns: 1fr; }
  .hero-stats{ grid-template-columns: repeat(2, 1fr); }
  .donor-list{ column-count: 1; }
  .page-head{ padding: 32px 0 16px; }
  .section{ padding: 24px 0 32px; }
  .card-warm{ padding: 28px; }
}

/* ===========================================================
   Hover lift + richer shadow on otherwise-static blocks
   =========================================================== */
.give-card,
.donor-wall,
.donors-card,
.coverage-card,
.feature-person,
.letter,
.bank-card,
.video-card,
.uk-map-wrap,
.donate-cta,
.donate-cta-qr{
  transition: transform .25s ease, box-shadow .25s ease;
}

.give-card{ box-shadow: 0 8px 22px -16px rgba(42,33,24,.18); }
.give-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 28px 56px -24px rgba(42,33,24,.28);
}

.donor-wall:hover,
.donors-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 36px 70px -28px rgba(42,33,24,.24);
}

.coverage-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 36px 70px -28px rgba(77,132,32,.5);
}

.feature-person:hover{
  transform: translateY(-3px);
  box-shadow: 0 32px 68px -28px rgba(42,33,24,.26);
}
.feature-person.green:hover{ box-shadow: 0 32px 68px -28px rgba(77,132,32,.5); }
.feature-person.coral:hover{ box-shadow: 0 32px 68px -28px rgba(200,81,58,.5); }

.letter:hover{
  transform: translateY(-3px);
  box-shadow: 0 32px 68px -28px rgba(42,33,24,.26);
}
.letter.green:hover{ box-shadow: 0 32px 68px -28px rgba(77,132,32,.5); }
.letter.coral:hover{ box-shadow: 0 32px 68px -28px rgba(200,81,58,.5); }

.bank-card{ box-shadow: 0 16px 40px -20px rgba(0,0,0,.4); }
.bank-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 28px 60px -24px rgba(0,0,0,.5);
}

.video-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 28px 60px -24px rgba(42,33,24,.3);
}

.uk-map-wrap:hover{
  box-shadow: 0 30px 70px -28px rgba(42,33,24,.26);
}

.donate-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 28px 60px -24px rgba(42,33,24,.24);
}
.donate-cta-qr:hover{
  transform: translateY(-3px);
  box-shadow: 0 36px 80px -28px rgba(77,132,32,.55);
}

/* Donor pills get a subtle lift too */
.donors-list li{ transition: background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease; }
.donors-list li:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 14px -6px rgba(77,132,32,.5);
}

/* Hospital list rows in modals */
.hospital-list li{ transition: background .15s ease; }
.hospital-list li:hover{ background: rgba(232,100,74,.06); }

/* Region cards (mobile fallback on hospitals page) */
.region-card{
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: 0 6px 16px -10px rgba(42,33,24,.15);
}
.region-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 48px -22px rgba(232,100,74,.45);
  border-color: var(--pod-coral);
}

/* QR donation box subtle pulse */
.donate-cta .qrwrap,
.donate-cta-qr .qr-large{
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 12px 28px -10px rgba(0,0,0,.18);
}
.donate-cta .qrwrap:hover,
.donate-cta-qr .qr-large:hover{
  transform: scale(1.02);
  box-shadow: 0 24px 50px -16px rgba(0,0,0,.28);
}

/* Tier-card lift sharpened */
.tier-card{ box-shadow: 0 8px 24px -16px rgba(42,33,24,.18); }

/* Photo frames keep a fixed shadow (no hover animation) */
.photo-frame{
  box-shadow: 0 32px 70px -28px rgba(42,33,24,.32);
}

/* ===========================================================
   Decorative background flair – break the "single colour" feel
   =========================================================== */
main.container{ position: relative; }

.section{ position: relative; }

/* Soft coral blob behind voices section */
.voice-grid::before{
  content: "";
  position: absolute;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(232,100,74,.18), transparent 70%);
  top: -60px; right: -120px;
  z-index: -1;
  pointer-events: none;
}

/* Soft green blob behind donors section */
.donors-card::after,
.donor-wall::after{
  content: "";
  position: absolute;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(129,195,66,.18), transparent 70%);
  bottom: -80px; left: -120px;
  z-index: -1;
  pointer-events: none;
}
.donors-card, .donor-wall{ position: relative; }

/* Big watermark quote glyph for testimonial sections */
.qgrid{ position: relative; }
.qgrid::before{
  content: "\201C";
  position: absolute;
  top: -80px; right: 0;
  font-family: 'Source Serif 4', serif;
  font-size: 280px; line-height: 1;
  color: var(--pod-coral);
  opacity: .08;
  pointer-events: none;
  z-index: -1;
}

/* Footer accent glow */
footer{ position: relative; overflow: hidden; }
footer::before{
  content: "";
  position: absolute;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(232,100,74,.18), transparent 70%);
  bottom: -80px; right: -160px;
  pointer-events: none;
}
footer::after{
  content: "";
  position: absolute;
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(255,255,255,.10), transparent 70%);
  bottom: -160px; left: -120px;
  pointer-events: none;
}
footer .container{ position: relative; z-index: 1; }

/* Footer logo box: white frame for the original colourful logo on green */
.footer-logo-frame{
  display: inline-block;
}
.footer-logo-frame img{
  display: block;
  height: 108px; width: auto;
}

/* ==========================================================================
   Home page – circles hero, parent-feedback QR, help-band, news grid
   ==========================================================================
   Used by /index.html only. Distinct class names so existing pages are not
   affected. Reuses .card-warm, .btn-pod, .eyebrow, .voice-card, .photo-frame
   from the shared design system above.
   ========================================================================== */

/* Eyebrow green variant – light-green wash for numbered section tags */
.eyebrow.green{
  color: var(--pod-green-deep);
  background: rgba(129,195,66,.14);
  box-shadow: 0 4px 12px -4px rgba(77,132,32,.3);
}
.eyebrow.green .dot{ background: var(--pod-green); }

/* ===== Hero – three-circle staircase composition (1977 Pod layout) =====
   Right small circle highest, middle logo lower, left big circle lowest.
   Circles touch each other side-by-side and overlap their 10px borders. */
.hero-circles{ padding: 40px 0 24px; position: relative; }

.circles-stack{
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: nowrap;
  margin: 0 auto;
  position: relative;
}
.circles-stack .circle-card{
  display: flex; flex-direction: column; align-items: center;
  flex: 0 0 auto;
}
/* Staircase offsets – right (small) at top, left (big) at the bottom */
.circles-stack .circle-card.lg{ margin-top: clamp(70px, 11vw, 160px); margin-right: clamp(-50px, -1.5vw, -10px); }
.circles-stack .circle-card.md{ margin-top: clamp(35px, 5.5vw, 80px); z-index: 2; }
.circles-stack .circle-card.sm{ margin-top: 0; margin-left: clamp(-50px, -1.5vw, -10px); }

.circles-stack .circle{
  border-radius: 50%;
  overflow: hidden;
  border: 10px solid var(--pod-green);
  box-shadow: 0 24px 60px -20px rgba(42,33,24,.22);
  aspect-ratio: 1;
  background: #fff;
}
.circles-stack .circle img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.circles-stack .circle-lg{ width: clamp(280px, 32vw, 480px); height: clamp(280px, 32vw, 480px); }
.circles-stack .circle-md{
  width: clamp(220px, 26vw, 400px); height: clamp(220px, 26vw, 400px);
  padding: clamp(24px, 2.4vw, 40px);
  display: grid; place-items: center;
  background: #fff;
}
.circles-stack .circle-md img{ width: 100%; height: auto; object-fit: contain; }
.circles-stack .circle-sm{ width: clamp(180px, 22vw, 320px); height: clamp(180px, 22vw, 320px); }

.hero-caption{
  font-family: 'Source Serif 4', serif;
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 36px);
  color: var(--pod-coral-deep);
  text-align: center;
  margin-top: 18px;
  font-weight: 500;
  line-height: 1.15;
}
.hero-caption.right{ font-size: clamp(22px, 2.4vw, 32px); }

.hero-mid-links{
  text-align: center;
  margin-top: 14px;
  display: flex; flex-direction: column; gap: 6px; align-items: center;
}
.hero-mid-links a{
  font-family: 'Source Serif 4', serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--pod-coral-deep);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: border-bottom-color .15s ease;
}
.hero-mid-links a:hover{ border-bottom-color: var(--pod-coral); }

/* One-million stamp – dashed coral disc, slightly rotated.
   Lives in its own row below the tagline, pulled to one side (less central). */
.hero-stamp-row{
  display: flex; justify-content: flex-end;
  margin: 8px 0 0;
  padding-right: clamp(10px, 6vw, 80px);
}
.hero-stamp{
  width: 200px; height: 200px;
  border-radius: 50%;
  border: 3px dashed var(--pod-coral);
  color: var(--pod-coral-deep);
  display: grid; place-items: center;
  text-align: center;
  padding: 20px;
  font-family: 'Source Serif 4', serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.3;
  transform: rotate(-6deg);
  background: rgba(255,255,255,.6);
}
.hero-stamp strong{ font-size: 20px; color: var(--pod-coral); display: block; margin: 2px 0; font-weight: 700; }

/* Tagline below the circle composition */
.hero-tagline-wrap{
  text-align: center;
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid var(--pod-rule);
}
.hero-tagline{
  font-family: 'Source Serif 4', serif;
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.018em;
  margin: 0 auto 12px;
  max-width: 32ch;
  color: var(--pod-green-dark);
}
/* Per feedback: tagline all in same print & colour – no italic / coral em */
.hero-tagline em{ font-style: normal; color: inherit; font-weight: inherit; }
.hero-sub{
  font-family: 'Source Serif 4', serif;
  font-size: clamp(18px, 1.5vw, 22px);
  color: var(--pod-green-dark);
  max-width: 60ch;
  margin: 0 auto;
  font-weight: 500;
}

/* ===== Parent feedback QR band (NOT a donation block) ===== */
.feedback-band{
  margin: 56px 0 0;
  background: var(--pod-green);
  color: #fff;
  border-radius: 36px;
  padding: 40px 44px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 36px;
  align-items: center;
  box-shadow: 0 28px 70px -28px rgba(77,132,32,.55);
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.feedback-band:hover{
  transform: translateY(-3px);
  box-shadow: 0 36px 80px -28px rgba(77,132,32,.65);
}
.feedback-band::before{
  content: ''; position: absolute; right: -80px; top: -80px;
  width: 280px; height: 280px; border-radius: 50%;
  background: rgba(255,255,255,.08);
}
.feedback-band h2{ color: #fff; margin: 0 0 6px; font-size: 36px; line-height: 1.1; }
.feedback-band p{ color: rgba(255,255,255,.92); margin: 0; max-width: 50ch; font-size: 15.5px; }
.feedback-band .qr-pop{
  background: #fff;
  border-radius: 24px;
  padding: 14px;
  width: 200px; height: 200px;
  display: grid; place-items: center;
  box-shadow: 0 20px 40px -16px rgba(0,0,0,.3);
  position: relative;
  z-index: 1;
}
.feedback-band .qr-pop img{ width: 100%; height: 100%; object-fit: contain; }
.feedback-band .qr-label{
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.85); font-weight: 600;
  margin-bottom: 6px;
  display: inline-flex; align-items: center; gap: 6px;
}
.feedback-band .feedback-cta{
  background: #fff; color: var(--pod-green-dark);
  border: 0;
}
.feedback-band .feedback-cta:hover,
.feedback-band .feedback-cta:focus{
  background: var(--pod-yellow); color: var(--pod-green-dark);
}

/* ===== About – yellow-bordered circle photo ===== */
/* Home about-grid uses center-alignment so the yellow circle stays circular
   (the shared .about-grid in /about uses align-items: stretch for rectangular photos).
   Slightly wider photo column so the yellow circle reads as the section's focal point. */
.home-page .about-grid{ grid-template-columns: 6fr 7fr; align-items: center; }
/* Yellow circle fills its column (no max-width) so it looks balanced with the text card. */
.about-circle{
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 10px solid var(--pod-yellow);
  box-shadow: 0 32px 80px -28px rgba(42,33,24,.25);
  width: 100%;
  justify-self: center;
  align-self: center;
  margin: 0 auto;
}
.about-circle img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* Light-green inline highlight for the "no admin costs" line inside .card-warm */
.card-warm .accent{
  color: var(--pod-green-deep); font-weight: 500;
  padding: 14px 16px; background: rgba(129,195,66,.1);
  border-radius: 14px; display: inline-block;
}

/* ===== Hospitals coverage – big green circle stat + warm card ===== */
.coverage-grid{
  display: grid; grid-template-columns: 5fr 6fr; gap: 36px; align-items: center;
}
.coverage-stat{
  background: var(--pod-green);
  color: #fff;
  border-radius: 50%;
  aspect-ratio: 1;
  width: 100%;
  max-width: 380px;
  justify-self: center;
  display: grid; place-items: center;
  box-shadow: 0 32px 80px -28px rgba(77,132,32,.55);
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease;
}
.coverage-stat:hover{
  transform: translateY(-3px);
  box-shadow: 0 40px 90px -28px rgba(77,132,32,.65);
}
.coverage-stat::after{
  content: ''; position: absolute; inset: 18px;
  border-radius: 50%; border: 2px dashed rgba(255,255,255,.35);
  pointer-events: none;
}
.coverage-stat .inner{ text-align: center; padding: 28px; max-width: 78%; }
.coverage-stat .pct{
  font-family: 'Source Serif 4', serif;
  font-size: clamp(96px, 11vw, 150px);
  font-weight: 700; line-height: .9;
  white-space: nowrap;
}
/* % sits as a contained superscript inside the digits (not pushed past the circle edge) */
.coverage-stat .pct sup{
  font-size: .38em; opacity: .85;
  vertical-align: baseline; position: relative; top: -0.85em; left: .02em;
}
.coverage-stat .cap{
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  opacity: .92; margin-top: 14px;
}

/* Inner mini-stats grid used inside a .card-warm on the coverage row */
.stats-row{
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--pod-rule);
}
.stats-row .n{
  font-family: 'Source Serif 4', serif; font-size: 36px;
  font-weight: 700; color: var(--pod-green-deep); line-height: 1;
}
.stats-row .l{
  font-size: 12.5px; color: var(--pod-ink-60); margin-top: 4px;
}

/* ===== How to Help POD – bank / cheque / Gift Aid (no online donations) ===== */
.help-band{
  background: var(--pod-card);
  border: 1px solid var(--pod-rule);
  border-radius: 32px;
  padding: 48px;
  box-shadow: 0 24px 60px -32px rgba(42,33,24,.18);
  transition: transform .25s ease, box-shadow .25s ease;
}
.help-band:hover{
  transform: translateY(-2px);
  box-shadow: 0 32px 70px -28px rgba(42,33,24,.24);
}
/* Green variant — used on the home page How to Help section per client feedback */
.help-band.help-band-green{
  background: var(--pod-green);
  border-color: var(--pod-green);
  box-shadow: 0 28px 70px -28px rgba(77,132,32,.55);
}
.help-band.help-band-green:hover{
  box-shadow: 0 36px 80px -28px rgba(77,132,32,.65);
}
.help-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.help-tile{
  background: var(--pod-cream);
  border: 1px solid var(--pod-rule);
  border-radius: 22px;
  padding: 28px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.help-tile:hover{
  transform: translateY(-3px);
  box-shadow: 0 24px 50px -22px rgba(42,33,24,.22);
}
.help-tile.coral{ background: var(--pod-coral); color: #fff; border: 0; }
.help-tile.coral h3{ color: #fff; }
.help-tile.coral:hover{ box-shadow: 0 24px 50px -22px rgba(200,81,58,.55); }
.help-tile .help-icon{
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--pod-green); color: #fff;
  display: grid; place-items: center;
  font-size: 22px; margin-bottom: 16px;
  box-shadow: 0 6px 14px -6px rgba(77,132,32,.55);
}
.help-tile.coral .help-icon{
  background: rgba(255,255,255,.18); color: #fff;
  box-shadow: 0 6px 14px -6px rgba(0,0,0,.3);
}
.help-tile h3{ font-size: 22px; margin: 0 0 10px; }
.help-tile p{ font-size: 14.5px; margin: 0; color: var(--pod-ink-60); }
.help-tile.coral p{ color: rgba(255,255,255,.95); }
.help-tile .bank{
  margin-top: 12px;
  font-family: ui-monospace, 'SF Mono', monospace;
  font-size: 13px;
  background: #fff;
  border: 1px solid var(--pod-rule);
  border-radius: 12px;
  padding: 12px 14px;
  line-height: 1.7;
  color: var(--pod-ink);
}
.help-tile.coral .bank{ background: rgba(255,255,255,.95); color: var(--pod-ink); border: 0; }
.help-tile .bank strong{ color: var(--pod-green-deep); }

/* ===== Pod People (entertainer-focused) ===== */
.people-split{
  display: grid; grid-template-columns: 7fr 5fr; gap: 36px; align-items: center;
}
.entertainer-photo{
  aspect-ratio: 1/1;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 32px 80px -28px rgba(42,33,24,.25);
  max-width: 540px;
  margin: 0 auto;
  width: 100%;
}
.entertainer-photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.people-text h3{ font-size: 26px; margin: 16px 0 10px; color: var(--pod-ink); }
.people-text h3:first-of-type{ margin-top: 0; }
.people-text .role{
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--pod-coral-deep); font-weight: 600;
}
.people-text p{ font-size: 15px; color: var(--pod-ink-60); margin-bottom: 0; }
.people-text hr{
  border: 0; border-top: 1px solid var(--pod-rule); margin: 22px 0;
}

/* ===== Latest News + FB ===== */
.news-grid{
  display: grid; grid-template-columns: 7fr 5fr; gap: 28px;
}
.news-card{
  background: var(--pod-card);
  border: 1px solid var(--pod-rule);
  border-radius: 28px;
  padding: 36px;
  box-shadow: 0 24px 60px -32px rgba(42,33,24,.18);
  transition: transform .25s ease, box-shadow .25s ease;
}
.news-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 32px 70px -28px rgba(42,33,24,.24);
}
.news-post{
  display: grid; grid-template-columns: 140px 1fr; gap: 22px;
  padding: 22px 0;
  border-bottom: 1px solid var(--pod-rule);
}
.news-post:first-of-type{ padding-top: 0; }
.news-post:last-of-type{ border-bottom: 0; padding-bottom: 0; }
.news-post .thumb{
  width: 140px; height: 140px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--pod-cream);
}
.news-post .thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.news-post .thumb.placeholder{
  background: repeating-linear-gradient(135deg, #fff 0 12px, var(--pod-cream) 12px 24px);
  border: 1px dashed var(--pod-rule);
  display: grid; place-items: center;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--pod-ink-60);
  text-align: center;
  padding: 8px;
}
.news-post .meta{
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--pod-coral-deep); font-weight: 600;
}
.news-post h3{ font-size: 19px; margin: 6px 0 8px; color: var(--pod-ink); font-family: 'Source Serif 4', serif; }
.news-post p{ margin: 0; font-size: 14.5px; color: var(--pod-ink-60); line-height: 1.55; }
.news-post .fb-tag{
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px; font-size: 12px; color: var(--pod-green-deep); font-weight: 500;
}
/* The generated posts link the tag through to the post on Facebook. */
.news-post a.fb-tag{ text-decoration: none; transition: color .15s ease; }
.news-post a.fb-tag:hover{ color: var(--pod-coral-deep); }

.news-side{
  background: var(--pod-coral);
  color: #fff;
  border-radius: 28px;
  padding: 36px;
  display: flex; flex-direction: column; gap: 18px;
  box-shadow: 0 24px 60px -28px rgba(232,100,74,.5);
  transition: transform .25s ease, box-shadow .25s ease;
}
.news-side:hover{
  transform: translateY(-3px);
  box-shadow: 0 32px 70px -28px rgba(232,100,74,.6);
}
.news-side h3{ color: #fff; margin: 0; font-size: 26px; line-height: 1.15; }
.news-side p{ margin: 0; color: rgba(255,255,255,.92); font-size: 14.5px; }
.news-side .qr-label{
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.85); font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}
.news-side .qrwrap{
  background: #fff;
  border-radius: 18px;
  padding: 12px;
  margin: 4px auto 0;
  width: 100%; max-width: 220px; aspect-ratio: 1;
  box-shadow: 0 12px 28px -10px rgba(0,0,0,.25);
  transition: transform .25s ease, box-shadow .25s ease;
}
.news-side .qrwrap:hover{
  transform: scale(1.02);
  box-shadow: 0 18px 38px -10px rgba(0,0,0,.32);
}
.news-side .qrwrap img{ width: 100%; height: 100%; object-fit: contain; }
.news-side .fbbtn{
  background: #fff; color: var(--pod-coral-deep);
  border-radius: 999px; padding: .65rem 1.2rem;
  font-weight: 600; font-size: 14.5px;
  text-decoration: none; text-align: center;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .15s ease, transform .15s ease;
}
.news-side .fbbtn:hover{ background: var(--pod-yellow); color: var(--pod-coral-deep); transform: translateY(-1px); }

/* UK map link on the home page hospitals section */
.uk-map-link{
  display: block; position: relative;
  background: var(--pod-card);
  border: 1px solid var(--pod-rule);
  border-radius: 28px;
  padding: 24px;
  text-decoration: none;
  box-shadow: 0 24px 60px -32px rgba(42,33,24,.18);
  transition: transform .25s ease, box-shadow .25s ease;
  justify-self: center;
  width: 100%;
  max-width: 460px;
  align-self: center;
}
.uk-map-link img{
  width: 100%; height: auto; display: block;
  border-radius: 18px;
}
.uk-map-link .uk-map-cta{
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px;
  font-size: 13.5px; font-weight: 600;
  letter-spacing: .04em;
  color: var(--pod-coral-deep);
}
.uk-map-link:hover{
  transform: translateY(-3px);
  box-shadow: 0 36px 80px -28px rgba(42,33,24,.28);
}
.uk-map-link:hover .uk-map-cta{ color: var(--pod-coral); }

/* Eyebrow coral variant — explicit (the default eyebrow is already coral, this is a no-op
   alias added so semantic intent reads clearly in HTML). */
.eyebrow.coral{ /* same as default eyebrow */ }

/* Home section heading colour – slightly deeper green for tagline + h2 */
.home-page h2{ color: var(--pod-green-dark); }
.home-page .section-head{ text-align: center; margin-bottom: 36px; }
.home-page .section-head p{ color: var(--pod-ink-60); max-width: 56ch; margin: 8px auto 0; }

/* Responsive – collapse home multi-column layouts on tablet/mobile */
@media (max-width: 991px){
  /* Stack circles vertically, drop the staircase offsets and overlap */
  .circles-stack{ flex-direction: column; align-items: center; gap: 16px; }
  .circles-stack .circle-card.lg,
  .circles-stack .circle-card.md,
  .circles-stack .circle-card.sm{
    margin-top: 0; margin-left: 0; margin-right: 0;
  }
  .circles-stack .circle-lg,
  .circles-stack .circle-md,
  .circles-stack .circle-sm{
    width: clamp(220px, 60vw, 320px);
    height: clamp(220px, 60vw, 320px);
  }
  .hero-stamp-row{ justify-content: center; padding-right: 0; }
  .feedback-band{ grid-template-columns: 1fr; text-align: center; }
  .feedback-band .qr-pop{ margin: 0 auto; }
  .feedback-band p{ margin-left: auto; margin-right: auto; }
  .coverage-grid,
  .people-split,
  .news-grid{ grid-template-columns: 1fr; }
  .help-grid{ grid-template-columns: 1fr; }
  .news-post{ grid-template-columns: 1fr; }
  .news-post .thumb{ width: 100%; height: 200px; }
}
@media (max-width: 600px){
  .help-band{ padding: 28px; }
  .news-card{ padding: 24px; }
  .stats-row{ grid-template-columns: 1fr; gap: 12px; }
}

/* ===========================================================
   Mobile & accessibility pass  (added by the 2026-08 audit)
   Everything below is additive: no rule above this line was
   changed, so the desktop design is untouched.
   =========================================================== */

/* ----- Responsive images -----------------------------------
   Every <img> is now wrapped in <picture>. Without this the
   wrapper becomes the flex/grid child instead of the image and
   rules like `.circle img{ width:100%; height:100% }` size
   against an inline box that has collapsed to nothing. */
picture{ display: contents; }

/* The width/height attributes are presentational hints, so an image that only
   gets one dimension from CSS takes the other from the attribute and comes out
   stretched. The navbar logo is the only element in that position. */
.pod-logo-img{ width: auto; }

/* ----- Horizontal overflow --------------------------------
   Three separate causes, all of which made the page scroll
   sideways on a phone:

   1. Long unbreakable strings (the administrator's email
      address) push a grid item's min-content width past the
      container, because grid items default to min-width:auto.
   2. The decorative radial blobs are positioned at -120px, so
      they bled past the viewport edge (this one showed up at
      1440px too, not just on mobile).
   3. Bootstrap's `g-5` gutter gives .row a -24px side margin,
      but .container only has 12px of padding to absorb it.   */
body{ overflow-wrap: break-word; }

.give-grid > *, .feature-person > *, .split > *, .letter > *, .qgrid > *,
.voice-grid > *, .people-split > *, .coverage-grid > *, .news-grid > *,
.help-grid > *, .donate-grid > *, .about-grid > *, .about-hero > *,
.bank-card > *, .hero-grid > *, .region-grid > *, .trustee-list > *,
.stats-row > *, .feedback-band > *, .news-post > *{ min-width: 0; }

/* clip, not hidden: clip doesn't create a scroll container, so
   position:sticky on the navbar keeps working. */
.section{ overflow-x: clip; }

footer .row{ --bs-gutter-x: 1.5rem; }

/* ----- Card padding utilities ------------------------------
   These replace inline `style="padding: …"` on 14 cards. An
   inline style beats any stylesheet rule, so those cards kept
   40-56px of side padding on a 375px screen and the mobile
   rules for .card-warm never got a chance to apply.
   Desktop values are identical to the inline ones they
   replace; only the smaller steps are new. */
.card-pad-xl{ padding: 64px 40px; }
.card-pad-lg{ padding: 56px; }
.card-pad-lg-x{ padding: 48px 56px; }
.card-pad-md{ padding: 44px; }

@media (max-width: 991px){
  .card-pad-xl, .card-pad-lg, .card-pad-lg-x, .card-pad-md{ padding: 44px 36px; }
}
@media (max-width: 600px){
  .card-pad-xl, .card-pad-lg, .card-pad-lg-x, .card-pad-md{ padding: 32px 24px; }
}

/* ----- Touch target sizes ----------------------------------
   Measured at 375px: footer links were 30px tall, the social
   icons 22x36, breadcrumbs 40x21 and buttons 37-41px. The
   type sizes are unchanged - only the hit area grows. */
.btn{ min-height: 44px; }
.pod-nav .navbar-toggler{ min-height: 44px; }

footer a{ padding: 11px 0; }

/* Calling the charity is a primary mobile action, but these links sit inline
   in a sentence where the line box is only ~21px tall. The negative margin
   keeps the surrounding text from spreading out.
   The phone numbers used to be plain text, so they inherit Bootstrap's link
   blue unless told otherwise - keep them on-brand and marked as links. */
a[href^="tel:"]{
  display: inline-block;
  padding: 11px 1px;
  margin-top: -11px;
  margin-bottom: -11px;
  color: var(--pod-coral-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a[href^="tel:"]:hover{ color: var(--pod-coral); }
footer a[href^="tel:"]{ color: inherit; }
footer .footer-social a,
footer .footer-email{
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0;
}
footer .footer-social a{ justify-content: center; min-width: 44px; }
/* The address block's email used to carry an inline underline; keep it, since
   it is the only thing marking it as a link against the green background. */
footer .footer-email[href^="mailto:"]{ text-decoration: underline; }

.crumb{ min-height: 44px; }
.crumb a{
  display: inline-flex; align-items: center;
  min-height: 44px;
}

.hero-mid-links a,
.news-post a.fb-tag{
  display: inline-flex; align-items: center;
  min-height: 44px;
}

/* ----- Hover on touch screens ------------------------------
   A tap latches :hover on phones, so every card the visitor
   touched stayed lifted until they tapped somewhere else.
   Colour-only hovers are harmless and left alone; only the
   29 rules that move an element are neutralised. */
@media (hover: none){
  .btn:hover, .btn-pod:hover, .btn-coral:hover, .btn-ghost:hover,
  .tier-card:hover, .voice-card:hover, .person-card:hover,
  .give-card:hover, .give-card .qr-inline:hover, .region-card:hover,
  .donor-wall:hover, .donors-card:hover, .donors-list li:hover,
  .coverage-card:hover, .coverage-stat:hover, .feature-person:hover,
  .letter:hover, .bank-card:hover, .video-card:hover,
  .donate-cta:hover, .donate-cta-qr:hover,
  .donate-cta .qrwrap:hover, .donate-cta-qr .qr-large:hover,
  .feedback-band:hover, .help-band:hover, .help-tile:hover,
  .news-card:hover, .news-side:hover, .news-side .qrwrap:hover,
  .news-side .fbbtn:hover, .uk-map-link:hover{
    transform: none;
  }
}

/* ----- Keyboard focus -------------------------------------
   The stylesheet only ever styled :focus as a copy of :hover,
   which left keyboard users with no visible focus ring at all. */
a:focus-visible,
button:focus-visible,
area:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.region-card:focus-visible{
  outline: 3px solid var(--pod-coral);
  outline-offset: 3px;
  border-radius: 6px;
}
/* On the green footer and green cards the coral ring has too
   little contrast against the background. */
footer a:focus-visible,
.card-green a:focus-visible,
.help-band-green a:focus-visible,
.coverage-card a:focus-visible{
  outline-color: #fff;
}

/* ----- Reduced motion -------------------------------------
   Honour the OS setting: no lift, no slide, no count-up.
   (assets/js/counters.js checks the same media query and jumps
   straight to the final number.) */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .btn:focus,
  .tier-card:hover, .voice-card:hover, .person-card:hover,
  .give-card:hover, .region-card:hover, .donors-card:hover,
  .donor-wall:hover, .coverage-card:hover, .coverage-stat:hover,
  .feature-person:hover, .letter:hover, .bank-card:hover,
  .video-card:hover, .donate-cta:hover, .donate-cta-qr:hover,
  .feedback-band:hover, .help-band:hover, .help-tile:hover,
  .news-card:hover, .news-side:hover, .uk-map-link:hover{
    transform: none;
  }
}