/*
Theme Name: GASP Motor Project
Theme URI: https://www.gaspmotorproject.org
Author: GASP Motor Project
Author URI: https://www.gaspmotorproject.org
Description: Custom WordPress theme for GASP Motor Project charity. Responsive, accessible, mobile-first design using the GASP brand colours.
Version: 7.18.10
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gasp-theme
Tags: custom-menu, featured-images, responsive-layout, accessibility-ready
*/

/* ============================================================
   GASP Brand Colours (from brochure)
   --gasp-teal:    #00C9A0  (mint/teal from brochure headings)
   --gasp-purple:  #2B1A8A  (deep purple from brochure blocks)
   --gasp-blue:    #2B5FBF  (blue from brochure backgrounds)
   --gasp-navy:    #1A1060  (dark navy for text)
   --gasp-white:   #FFFFFF
   --gasp-light:   #F4F6FA
   ============================================================ */

:root {
  --gasp-teal:     #00C9A0;
  --gasp-teal-dk:  #00A882;
  --gasp-purple:   #2B1A8A;
  --gasp-purple-lt:#3D2BB5;
  --gasp-blue:     #2B5FBF;
  --gasp-navy:     #1A1060;
  --gasp-white:    #FFFFFF;
  --gasp-light:    #F4F6FA;
  --gasp-grey:     #6B7280;
  --gasp-dark:     #111827;
  --radius-sm:     6px;
  --radius-md:     12px;
  --radius-lg:     20px;
  --shadow-sm:     0 2px 8px rgba(43,26,138,0.10);
  --shadow-md:     0 6px 24px rgba(43,26,138,0.15);
  --transition:    0.25s ease;
  --font-display:  'Montserrat', 'Arial Black', sans-serif;
  --font-body:     'Open Sans', Arial, sans-serif;
  --max-w:         1200px;
}

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

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  color: var(--gasp-dark);
  background: var(--gasp-white);
  line-height: 1.6;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--gasp-purple); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--gasp-teal-dk); }
a:focus-visible { outline: 3px solid var(--gasp-teal); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--gasp-navy);
}

ul { list-style: none; }

/* ============================================================
   UTILITY
   ============================================================ */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* The skip link needs to become visible on keyboard focus — a skip
   link that can never be seen defeats its own purpose, since a
   keyboard user needs to see it appear (usually on the first Tab
   press) to know it's there to use. Other visually-hidden content
   (icon-button labels etc.) should stay hidden even on focus, so
   this exception is scoped to .skip-link specifically. */
.skip-link:focus {
  position: fixed; top: 1rem; left: 1rem;
  width: auto; height: auto; padding: 0.75rem 1.5rem;
  margin: 0; overflow: visible; clip: auto; white-space: normal;
  background: var(--gasp-teal); color: var(--gasp-navy);
  font-family: var(--font-display); font-weight: 700; font-size: 0.95rem;
  border-radius: var(--radius-sm); box-shadow: 0 4px 16px rgba(0,0,0,.3);
  z-index: 10000; text-decoration: none;
}

.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  font-family: var(--font-display);
  font-size: 0.95rem; font-weight: 700;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer; transition: all var(--transition);
  text-decoration: none; white-space: nowrap;
}
.btn-primary {
  background: var(--gasp-teal); color: var(--gasp-navy);
  border-color: var(--gasp-teal);
}
.btn-primary:hover { background: var(--gasp-teal-dk); border-color: var(--gasp-teal-dk); color: var(--gasp-navy); }
.btn-secondary {
  background: transparent; color: var(--gasp-white);
  border-color: var(--gasp-white);
}
.btn-secondary:hover { background: var(--gasp-white); color: var(--gasp-purple); }
.btn-outline {
  background: transparent; color: var(--gasp-purple);
  border-color: var(--gasp-purple);
}
.btn-outline:hover { background: var(--gasp-purple); color: var(--gasp-white); }

/* Email addresses are long and have no spaces to break on naturally —
   .btn's default white-space:nowrap causes them to overflow their card
   on narrow screens. Let this specific button wrap onto multiple lines
   instead, on every viewport (not just mobile — the same overflow risk
   exists in a 3-up card grid on tablet/desktop too). */
.btn-email {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  text-align: center;
  line-height: 1.35;
  width: 100%;
  box-sizing: border-box;
  font-size: 0.78rem;
  padding: 0.6rem 0.85rem;
  letter-spacing: 0;
}

/* Contact directory (About → Contact Us): two wide columns instead of
   the default services-grid auto-fit (which drops to a 280px minimum
   and is too narrow for a full email address even after wrapping).
   Uses a COMPOUND selector (.services-grid.contact-directory-grid) so
   it wins on specificity regardless of source order — a plain single
   class here previously lost the cascade to .services-grid because
   that rule happened to be declared later in the file (the same class
   of bug fixed for the header QR code). Also gives every card a fixed
   flex layout so cards look uniform in height no matter how long each
   department's email address is. */
.services-grid.contact-directory-grid {
  grid-template-columns: repeat(2, 1fr);
}
.contact-directory-grid .service-card {
  display: flex;
  flex-direction: column;
  min-height: 190px;
}
.contact-directory-grid .service-card h3 { min-height: 2.6em; }
.contact-directory-grid .service-card p { flex: 1 0 auto; }
.contact-directory-grid .service-card .btn-email { margin-top: auto; }
@media (max-width: 640px) {
  .services-grid.contact-directory-grid { grid-template-columns: 1fr; }
  .contact-directory-grid .service-card { min-height: 0; }
}
.btn-donate {
  background: var(--gasp-teal); color: var(--gasp-navy);
  border-color: var(--gasp-teal);
}
.btn-donate:hover { background: var(--gasp-teal-dk); border-color: var(--gasp-teal-dk); color: var(--gasp-navy); }
.heart-icon { color: #E8453C; }

/* ============================================================
   HEADER & NAV
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: var(--gasp-navy);
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1.25rem;
  max-width: var(--max-w); margin: 0 auto;
  gap: 1rem;
}

.site-logo { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.site-logo img { height: 52px; width: auto; }
.site-logo .logo-text { color: var(--gasp-white); }
.site-logo .logo-title {
  font-family: var(--font-display);
  font-size: 1.15rem; font-weight: 800;
  line-height: 1.1;
  color: var(--gasp-white);
}
.site-logo .logo-title .lt-word { display: inline-block; margin-right: 0.28em; }
.site-logo .logo-title .lt-word:last-child { margin-right: 0; }
.site-logo .logo-tagline {
  font-size: 0.7rem; color: var(--gasp-teal);
  font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase;
}

.primary-nav { display: flex; align-items: center; gap: 0.25rem; }
.primary-nav a {
  color: var(--gasp-white);
  font-family: var(--font-display);
  font-size: 0.85rem; font-weight: 600;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  white-space: nowrap;
}
.primary-nav a:hover,
/* v6.18 FIX: WordPress puts "current-menu-item"/"current-menu-ancestor"
   on the <li>, not the <a> — the old selector here (.primary-nav
   a.current-menu-item) could never match real markup, so the active
   page was never actually highlighted in the top nav. Also covers the
   #primary-menu WP-menu-compatibility markup and the hardcoded
   fallback menu's "current" class (see header.php).

   v6.25 FIX: found the actual reason this never visibly worked even
   once the JS was correctly adding the class — .primary-nav
   #primary-menu .menu-item > a (further down this file) sets link
   colour using a selector that includes the #primary-menu ID. An ID
   anywhere in a selector always outranks any number of classes, by
   definition, regardless of !important or source order for the
   losing side. Every attempt at this used only classes, so it could
   never have won against that rule on the real WordPress-managed
   menu. Now uses !important (belt and braces) AND repeats each
   selector with #primary-menu included, so it matches the winning
   rule's own specificity and doesn't have to rely on !important alone. */
.primary-nav .current-menu-item > a,
.primary-nav .current-menu-ancestor > a,
.primary-nav #primary-menu .current-menu-item > a,
.primary-nav #primary-menu .current-menu-ancestor > a,
.primary-nav .nav-item.current > a,
.primary-nav a.current,
.primary-nav .gasp-current-section > a,
.primary-nav a.gasp-current-section,
.primary-nav #primary-menu a.gasp-current-section,
.primary-nav #primary-menu .gasp-current-section > a {
  color: var(--gasp-teal) !important;
  position: relative;
}
.primary-nav .current-menu-item > a::after,
.primary-nav .current-menu-ancestor > a::after,
.primary-nav #primary-menu .current-menu-item > a::after,
.primary-nav #primary-menu .current-menu-ancestor > a::after,
.primary-nav .nav-item.current > a::after,
.primary-nav a.current::after,
.primary-nav .gasp-current-section > a::after,
.primary-nav a.gasp-current-section::after,
.primary-nav #primary-menu a.gasp-current-section::after,
.primary-nav #primary-menu .gasp-current-section > a::after {
  content: "";
  position: absolute;
  left: 0.9rem; right: 0.9rem; bottom: 0.3rem;
  height: 3px; border-radius: 2px;
  background: var(--gasp-teal);
}
@media (max-width: 340px) {
  /* Only the true stacked hamburger-panel fallback (below any real
     phone width) uses a left-edge bar — a bottom bar reads oddly
     against full-width dropdown rows. Everywhere else, including
     ordinary phones in portrait which now show inline text nav,
     keeps the standard underline: it takes less horizontal room,
     which matters more here than in the dropdown-panel case. */
  .primary-nav .current-menu-item > a::after,
  .primary-nav .current-menu-ancestor > a::after,
  .primary-nav #primary-menu .current-menu-item > a::after,
  .primary-nav #primary-menu .current-menu-ancestor > a::after,
  .primary-nav .nav-item.current > a::after,
  .primary-nav a.current::after,
  .primary-nav .gasp-current-section > a::after,
  .primary-nav a.gasp-current-section::after,
  .primary-nav #primary-menu a.gasp-current-section::after,
  .primary-nav #primary-menu .gasp-current-section > a::after {
    left: 0; right: auto; top: 0.4rem; bottom: 0.4rem;
    width: 3px; height: auto;
  }
}

.header-ctas { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.header-ctas .btn { padding: 0.55rem 1.1rem; font-size: 0.82rem; }

/* Mobile hamburger */
.menu-toggle {
  display: none;
  background: none; border: none; cursor: pointer;
  padding: 0.5rem; color: var(--gasp-white);
  flex-direction: column; gap: 5px;
}
.menu-toggle span {
  display: block; width: 24px; height: 2px;
  background: var(--gasp-white); border-radius: 2px;
  transition: all var(--transition);
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO GALLERY SLIDER
   ============================================================ */
.hero-slider {
  position: relative;
  background: var(--gasp-navy);
  overflow: hidden;
  height: clamp(320px, 55vh, 620px);
}

.slider-track {
  display: flex; height: 100%;
  transition: transform 0.6s cubic-bezier(0.4,0,0.2,1);
}

.slide {
  min-width: 100%; height: 100%;
  position: relative; flex-shrink: 0;
}
.slide img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  filter: brightness(0.6);
}
.slide-caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(0deg, rgba(26,16,96,0.92) 0%, transparent 100%);
  padding: 2rem 2rem 1.5rem;
  color: var(--gasp-white);
}
.slide-caption h2 {
  color: var(--gasp-white);
  font-size: clamp(1.3rem, 3vw, 2.2rem);
  margin-bottom: 0.4rem;
}
.slide-caption p { font-size: 0.95rem; color: rgba(255,255,255,0.85); max-width: var(--max-w); }

.slider-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(43,26,138,0.75); color: var(--gasp-white);
  border: 2px solid rgba(255,255,255,0.3);
  width: 48px; height: 48px; border-radius: 50%;
  cursor: pointer; font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition); z-index: 10;
  backdrop-filter: blur(4px);
}
.slider-btn:hover { background: var(--gasp-purple); border-color: var(--gasp-teal); }
.slider-btn.prev { left: 1rem; }
.slider-btn.next { right: 1rem; }

.slider-dots {
  position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 10;
}
.slider-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,0.45); border: none; cursor: pointer;
  transition: all var(--transition);
}
.slider-dot.active { background: var(--gasp-teal); transform: scale(1.3); }

/* ============================================================
   IMPACT BAR
   ============================================================ */
.impact-bar {
  background: var(--gasp-purple);
  padding: 1.25rem 1.25rem;
}
.impact-bar-inner {
  max-width: var(--max-w); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-around;
  gap: 1rem; flex-wrap: wrap;
}
.impact-stat { text-align: center; }
.impact-stat .number {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800; color: var(--gasp-teal);
  line-height: 1;
}
.impact-stat .label {
  font-size: 0.75rem; color: rgba(255,255,255,0.8);
  font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; margin-top: 0.2rem;
}
.impact-divider { width: 1px; height: 40px; background: rgba(255,255,255,0.2); }

/* ============================================================
   THREE PILLARS (Home page blocks)
   ============================================================ */
.pillars {
  padding: 3rem 1.25rem;
  background: var(--gasp-light);
}
.pillars-grid {
  max-width: var(--max-w); margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.pillar-card-header {
  padding: 1.75rem 1.75rem 1.25rem;
  background: var(--gasp-purple);
  display: flex; align-items: flex-start; gap: 1rem;
}
.pillar-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--gasp-teal);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; flex-shrink: 0;
}
.pillar-card-header h3 {
  color: var(--gasp-white); font-size: 1.2rem;
  margin-top: 0.35rem;
}
.pillar-card-body { padding: 1.5rem 1.75rem; flex: 1; }
.pillar-card-body p { color: var(--gasp-grey); font-size: 0.93rem; line-height: 1.65; }
.pillar-card-footer {
  padding: 1rem 1.75rem 1.5rem;
  display: flex; align-items: center;
  font-family: var(--font-display);
  font-size: 0.85rem; font-weight: 700;
  color: var(--gasp-purple);
  gap: 0.4rem;
}
.pillar-card-footer::after { content: '→'; font-size: 1rem; }

/* ============================================================
   SECTION GENERIC
   ============================================================ */
.section { padding: 2.75rem 1.25rem; }
.section-alt { background: var(--gasp-light); }
.section-dark { background: var(--gasp-navy); }

.section-header { margin-bottom: 1.75rem; }
.section-header.centered { text-align: center; }
.section-header.centered p { margin-left: auto; margin-right: auto; }
/* v7.1.2 — Settled definitively via the actual computed CSS from
   v6.95 (not a screenshot this time): the real rule is a plain
   border-left bar — display:inline-block, padding: 0.2rem 0.75rem,
   border-radius: 20px, border-left: 3px solid teal. No outline,
   no cap, no clip-path. What made this genuinely hard to verify by
   eye is that a single-sided border combined with border-radius
   renders with a curved, crescent-like appearance in an actual
   browser at this size — even though the code is just a flat
   border-left — which is exactly why it kept looking like an
   outline semicircle in screenshots despite the CSS being this
   simple. Only the colour changed from the original: solid,
   non-transparent light teal instead of the original's semi-
   transparent tint (which is what caused the earlier dark-
   background blending problem), and navy text instead of the
   original's teal, which is what actually fixed the WCAG AA
   failure this whole thread of work started from. */
.section-eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gasp-navy); margin-bottom: 0.5rem;
  padding: 0.2rem 0.75rem;
  background: #D9F7EF;
  border-radius: 20px;
  border-left: 3px solid var(--gasp-teal);
}
.section-header h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  color: var(--gasp-navy); margin-bottom: 0.5rem;
}
.section-dark .section-header h2 { color: var(--gasp-white); }
/* v7.1.3 — Page heading eyebrow specifically goes back to the
   original teal-on-dark colours by preference. Worth noting why
   this is fine where the light-background version wasn't: the
   WCAG failure was specifically about teal TEXT on a light/white
   background (2.13:1, well under the 4.5:1 minimum) — teal on a
   dark navy background is a completely different pairing and
   comes out around 7.66:1, comfortably passing. The problem was
   never teal itself, just that one specific light-background
   context. */
.page-hero .section-eyebrow,
.section-dark .section-eyebrow {
  color: var(--gasp-teal);
  background: var(--gasp-navy);
  border-left-color: var(--gasp-teal);
}
.section-header p { color: var(--gasp-grey); font-size: 1rem; }

/* ============================================================
   ABOUT SECTION
   ============================================================ */
.about-inner {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 3rem; align-items: center;
}
.about-inner--top { align-items: start; }
.about-content p { color: var(--gasp-grey); margin-bottom: 1rem; line-height: 1.75; }
.about-content .btn { margin-top: 0.75rem; }

.about-image { border-radius: var(--radius-md); overflow: hidden; position: relative; }
.about-image img { width: 100%; height: 400px; object-fit: cover; }
.about-image-badge {
  position: absolute; bottom: 1.25rem; right: 1.25rem;
  background: var(--gasp-teal); color: var(--gasp-navy);
  font-family: var(--font-display);
  font-weight: 800; font-size: 0.8rem;
  padding: 0.6rem 1rem; border-radius: var(--radius-sm);
  text-transform: uppercase; letter-spacing: 0.05em;
}

/* ============================================================
   SERVICES / PROGRAMMES
   ============================================================ */
.services-inner { max-width: var(--max-w); margin: 0 auto; }
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.service-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--gasp-white);
  box-shadow: var(--shadow-sm);
  border-top: 4px solid var(--gasp-teal);
  padding: 1.75rem;
}
.service-card h3 { color: var(--gasp-purple); margin-bottom: 0.75rem; font-size: 1.1rem; }
.service-card p { color: var(--gasp-grey); font-size: 0.92rem; line-height: 1.65; margin-bottom: 1rem; }
.service-card .tag {
  display: inline-block;
  background: rgba(43,26,138,0.08);
  color: var(--gasp-purple);
  font-size: 0.75rem; font-weight: 700;
  padding: 0.2rem 0.6rem; border-radius: 20px;
  margin-right: 0.3rem; margin-bottom: 0.3rem;
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials-inner { max-width: var(--max-w); margin: 0 auto; }
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}
.testimonial-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  position: relative;
}
.testimonial-card::before {
  content: '\201C';
  font-family: Georgia, serif;
  font-size: 4rem; line-height: 1;
  color: var(--gasp-teal);
  position: absolute; top: 0.5rem; left: 1.25rem;
}
.testimonial-card p {
  color: rgba(255,255,255,0.88);
  font-size: 0.93rem; line-height: 1.7;
  margin-top: 1.5rem;
}
.testimonial-source {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: 0.8rem; font-weight: 700;
  color: var(--gasp-teal);
}

/* ============================================================
   SUPPORTERS
   ============================================================ */
.supporters-inner { max-width: var(--max-w); margin: 0 auto; }
.supporters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.1rem;
  margin-bottom: 2.5rem;
}
.supporter-item {
  background: var(--gasp-white);
  border: 1px solid rgba(43,26,138,0.1);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.1rem;
  display: flex; align-items: center; gap: 0.85rem;
  text-align: left;
  transition: all var(--transition);
  text-decoration: none;
}
.supporter-item:hover {
  border-color: var(--gasp-teal);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.supporter-badge {
  flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.1rem;
  color: var(--gasp-white);
}
.supporter-logo {
  flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gasp-white);
  border: 1px solid rgba(43,26,138,0.1);
  overflow: hidden;
}
.supporter-logo img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
}
.supporter-text { min-width: 0; }
.supporter-name {
  font-size: 0.88rem; font-weight: 700; color: var(--gasp-navy);
  line-height: 1.3; display: block;
}
.supporter-item:hover .supporter-name { color: var(--gasp-purple); }
.supporter-link {
  font-size: 0.74rem; color: var(--gasp-teal-dk); font-weight: 600;
  margin-top: 0.15rem; display: block;
}
.supporters-cta {
  background: var(--gasp-purple);
  border-radius: var(--radius-md);
  padding: 2.5rem;
  text-align: center;
  color: var(--gasp-white);
}
.supporters-cta h3 {
  color: var(--gasp-white); margin-bottom: 0.75rem; font-size: 1.4rem;
}
.supporters-cta p { color: rgba(255,255,255,0.8); margin-bottom: 1.5rem; }
.supporters-cta-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Standalone QR code, centred below the buttons (Supporters overview
   page) — the redundant "Donate via JustGiving" sub-label is hidden
   since the card already has that as its own heading. */
.supporters-cta-qr { display: flex; justify-content: center; margin-top: 1.5rem; }
.qr-block--support-standalone .qr-block-url { display: none; }
.qr-block--support-standalone .qr-block-label { color: rgba(255,255,255,0.65); font-size: 0.78rem; }

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero {
  background: linear-gradient(135deg, var(--gasp-navy) 0%, var(--gasp-purple) 100%);
  padding: 1.5rem 1.25rem;
  text-align: center;
}
.page-hero h1 { color: var(--gasp-white); font-size: clamp(1.8rem, 4vw, 3rem); margin-bottom: 0.5rem; }
.page-hero p { color: rgba(255,255,255,0.8); margin: 0 auto; }

/* ============================================================
   CONTACT / BOOK
   ============================================================ */
.contact-inner {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 3rem; align-items: start;
}
.contact-info h3 { margin-bottom: 0.5rem; font-size: 1.1rem; }
.contact-info p, .contact-info a:not(.btn) { color: var(--gasp-grey); font-size: 0.95rem; }
.contact-info a:not(.btn):hover { color: var(--gasp-teal-dk); }
.contact-block { margin-bottom: 1.5rem; }

/* Location tiles (v7.18.2) — "View on Google Maps" / what3words,
   replacing the plain text links under the workshop address with
   two small clickable icon tiles. */
.location-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: .75rem;
}
.location-tile {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .85rem;
  background: var(--gasp-light);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition);
}
.location-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
.location-tile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--gasp-purple);
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
}
.location-tile-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.location-tile-label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--gasp-purple);
}
.location-tile-sub {
  font-size: .72rem;
  color: var(--gasp-grey);
}
.contact-form-col { display: flex; flex-direction: column; gap: 1.5rem; }
.contact-booking-note { background: var(--gasp-light); border-radius: var(--radius-md); padding: 1.5rem; }
.contact-booking-note a {
  color: #00C853; font-weight: 700; text-decoration: underline;
  text-decoration-thickness: 2px; text-underline-offset: 2px;
}
.contact-booking-note a:hover { color: #009624; }

.wpcf7-form, .gasp-form {
  background: var(--gasp-white);
  border-radius: var(--radius-md);
  padding: 2rem;
  box-shadow: var(--shadow-md);
}
.form-group { margin-bottom: 1.25rem; }
.form-group label {
  display: block; margin-bottom: 0.4rem;
  font-weight: 600; font-size: 0.88rem; color: var(--gasp-navy);
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%; padding: 0.75rem 1rem;
  border: 1.5px solid #D1D5DB;
  border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 0.93rem;
  color: var(--gasp-dark);
  transition: border-color var(--transition);
  background: var(--gasp-white);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none; border-color: var(--gasp-purple);
  box-shadow: 0 0 0 3px rgba(43,26,138,0.12);
}
.form-group textarea { min-height: 120px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--gasp-navy);
  color: rgba(255,255,255,0.75);
  padding: 0 1.25rem 1.5rem;
}
.footer-newsletter-wrap {
  border-bottom: 1px solid rgba(255,255,255,0.12);
  margin-bottom: 2.5rem;
}
.footer-inner {
  max-width: var(--max-w); margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem;
  margin-bottom: 2.5rem;
}
.footer-logo-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.85rem; }
.footer-brand .footer-logo-icon { height: 52px; width: auto; }
.footer-brand .logo-title { color: var(--gasp-white); }
.footer-brand .logo-title .lt-word { display: inline-block; margin-right: 0.28em; }
.footer-brand .logo-title .lt-word:last-child { margin-right: 0; }
.footer-brand .logo-tagline { color: var(--gasp-teal); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.footer-brand p { font-size: 0.88rem; line-height: 1.65; color: rgba(255,255,255,0.65); margin-bottom: 1rem; }
.footer-brand .charity-no { font-size: 0.78rem; color: var(--gasp-teal); font-weight: 600; }
.footer-social { display: flex; gap: 0.6rem; margin-bottom: 0.85rem; }
.footer-social-icon {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.75);
  transition: all var(--transition);
}
.footer-social-icon:hover { background: var(--gasp-teal); color: var(--gasp-navy); }

.footer-col h4 {
  color: var(--gasp-teal); font-family: var(--font-display);
  font-size: 0.8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 1rem;
}
.footer-col ul li { margin-bottom: 0.5rem; }
.footer-col ul li a {
  color: rgba(255,255,255,0.7); font-size: 0.88rem;
  transition: color var(--transition);
}
.footer-col ul li a:hover { color: var(--gasp-teal); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.75rem;
  font-size: 0.8rem; color: rgba(255,255,255,0.45);
}
.footer-bottom a { color: rgba(255,255,255,0.6); }
.footer-bottom a:hover { color: var(--gasp-teal); }
.footer-fr-badge { display: inline-flex; align-items: center; flex-shrink: 0; opacity: 0.92; transition: opacity var(--transition); }
.footer-fr-badge:hover { opacity: 1; }
.footer-fr-badge img { display: block; height: 34px; width: auto; background: #fff; border-radius: 4px; padding: 3px 6px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {  .about-inner { gap: 2rem; }
  .pillars-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}

@media (max-width: 768px) {
  .header-ctas .btn:not(.btn-donate) { display: none; }

  .pillars-grid { grid-template-columns: 1fr; }
  .about-inner { grid-template-columns: 1fr; }
  .about-image img { height: 280px; }
  .contact-inner { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .impact-bar-inner { gap: 1rem; }
  .impact-divider { display: none; }

  .slider-btn { width: 38px; height: 38px; font-size: 1rem; }
  .slide-caption { padding: 1.25rem 1.25rem 1rem; }
  .form-row { grid-template-columns: 1fr; }
  .supporters-cta-btns { flex-direction: column; align-items: center; }
}

@media (max-width: 480px) {  .header-inner { padding: 0.6rem 1rem; }
  .site-logo .logo-title { font-size: 1rem; }
  .site-logo .logo-tagline { display: none; }
  .impact-stat .number { font-size: 1.4rem; }
}

/* ============================================================
   WORDPRESS CORE CLASSES
   ============================================================ */
.wp-block-image { margin: 1.5rem 0; }
.aligncenter { display: block; margin: 0 auto; }
.alignleft { float: left; margin-right: 1.5rem; margin-bottom: 1rem; }
.alignright { float: right; margin-left: 1.5rem; margin-bottom: 1rem; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 0.85rem; color: var(--gasp-grey); margin-top: 0.4rem; }
.screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Entry content */
.entry-content h2, .entry-content h3 { margin: 1.5rem 0 0.75rem; }
.entry-content p { margin-bottom: 1rem; }
.entry-content ul, .entry-content ol { margin: 1rem 0 1rem 1.5rem; list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li { margin-bottom: 0.4rem; }

/* ============================================================
   SUBNAV
   ============================================================ */
.subnav {
  background: var(--gasp-white);
  border-bottom: 2px solid rgba(43,26,138,0.1);
  position: sticky; top: 72px; z-index: 90;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.subnav .container {
  display: flex; gap: 0.2rem; overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
}
.subnav .container::-webkit-scrollbar { display: none; }
.subnav a {
  display: block; padding: .8rem 1.1rem;
  font-family: var(--font-display); font-size: .8rem; font-weight: 700;
  color: var(--gasp-navy); white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: all var(--transition); text-decoration: none;
}
.subnav a:hover, .subnav a.active {
  color: var(--gasp-purple); border-bottom-color: var(--gasp-teal);
}

/* ============================================================
   TIMELINE
   ============================================================ */
.timeline { position: relative; padding-left: 2rem; }
.timeline::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: linear-gradient(180deg, var(--gasp-teal), var(--gasp-purple));
  border-radius: 3px;
}
.timeline-item {
  position: relative; padding: 0 0 2rem 1.75rem;
  display: grid; grid-template-columns: 80px 1fr; gap: 1rem; align-items: start;
}
.timeline-item::before {
  content: ''; position: absolute; left: -5px; top: 5px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--gasp-teal); border: 3px solid var(--gasp-white);
  box-shadow: 0 0 0 2px var(--gasp-teal);
}
.timeline-year {
  font-family: var(--font-display); font-weight: 800; font-size: 1rem;
  color: var(--gasp-purple); padding-top: 2px;
}
.timeline-content { color: var(--gasp-grey); font-size: .93rem; line-height: 1.65; }

/* ============================================================
   TEAM CARDS
   ============================================================ */
.team-card {
  background: var(--gasp-white); border-radius: var(--radius-md);
  padding: 1.5rem; text-align: center;
  box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--gasp-teal);
}
.team-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg,var(--gasp-purple),var(--gasp-teal));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem; margin: 0 auto 1rem;
  overflow: hidden;
}
.team-avatar img { width: 100%; height: 100%; object-fit: cover; }
.team-name { font-family: var(--font-display); font-weight: 700; color: var(--gasp-navy); margin-bottom: .25rem; }
.team-role { font-size: .8rem; color: var(--gasp-teal); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .5rem; }
.team-bio { font-size: .85rem; color: var(--gasp-grey); line-height: 1.55; }

/* ============================================================
   SLIDE PLACEHOLDER (no image)
   ============================================================ */
.slide-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg,var(--gasp-navy) 0%,var(--gasp-purple) 100%);
}

/* ============================================================
   RESPONSIVE SUBNAV
   ============================================================ */
@media (max-width: 768px) {
  .subnav { top: 0; }
  .subnav a { font-size: .75rem; padding: .65rem .75rem; }
  .timeline { padding-left: 1.25rem; }
  .timeline-item { grid-template-columns: 56px 1fr; gap: .5rem; }
  .timeline-year { font-size: .85rem; }
}

/* ============================================================
   NEED GRID (2-col need/address layout)
   ============================================================ */
.need-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
.need-highlight-box {
  background: var(--gasp-purple);
  color: var(--gasp-white);
  border-radius: var(--radius-md);
  padding: 2rem;
}
.need-highlight-box h3 {
  color: var(--gasp-teal);
  margin-bottom: 1rem;
  font-size: 1.15rem;
}
.need-highlight-box p {
  color: rgba(255,255,255,.85);
  font-size: .93rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}
.need-highlight-box p:last-child { margin-bottom: 0; }

.stat-highlight {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--gasp-light);
  border-left: 4px solid var(--gasp-teal);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}
.stat-num {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--gasp-purple);
  line-height: 1;
  flex-shrink: 0;
}
.stat-label {
  font-size: .88rem;
  color: var(--gasp-grey);
  line-height: 1.5;
}

/* ============================================================
   WHAT WE DO GRID
   ============================================================ */
.what-we-do-grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 3rem;
  align-items: center;
}
.wwd-image {
  border-radius: var(--radius-md);
  overflow: hidden;
}
.wwd-image img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  object-position: top center;
}

.topic-list {
  list-style: none;
  margin: .75rem 0 1rem;
}
.topic-list li {
  padding: .4rem 0 .4rem 1.5rem;
  position: relative;
  color: var(--gasp-grey);
  font-size: .93rem;
  border-bottom: 1px solid rgba(43,26,138,.07);
}
.topic-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--gasp-teal);
  font-weight: 700;
}

/* ============================================================
   IMPACT CARDS STACK
   ============================================================ */
.impact-cards-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.impact-card-mini {
  background: var(--gasp-white);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--gasp-teal);
}
.impact-card-num {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--gasp-purple);
  line-height: 1;
  margin-bottom: .35rem;
}
.impact-card-label {
  font-size: .78rem;
  color: var(--gasp-grey);
  line-height: 1.4;
}

/* ============================================================
   INFO BLOCKS (home about section)
   ============================================================ */
.info-blocks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.5rem;
}
.info-block {
  background: var(--gasp-light);
  border-radius: var(--radius-sm);
  padding: 1.25rem;
  border-left: 3px solid var(--gasp-teal);
}
.info-block h4 {
  color: var(--gasp-purple);
  font-size: .9rem;
  margin-bottom: .5rem;
}
.info-block p {
  color: var(--gasp-grey);
  font-size: .85rem;
  line-height: 1.6;
}

/* ============================================================
   SUPPORT CTA GRID
   ============================================================ */
.support-cta-grid {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.support-cta-grid .supporters-cta {
  flex: 1;
  min-width: 280px;
}

/* ============================================================
   QUOTE GRID (student quotes)
   ============================================================ */
.quote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.quote-card {
  background: var(--gasp-white);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--gasp-teal);
  position: relative;
}
.quote-card::before {
  content: '\201C';
  font-family: Georgia, serif;
  font-size: 3rem;
  line-height: 1;
  color: var(--gasp-teal);
  position: absolute;
  top: .25rem;
  left: 1rem;
  opacity: .4;
}
.quote-card p {
  color: var(--gasp-grey);
  font-size: .92rem;
  line-height: 1.65;
  margin-top: 1.25rem;
}
.quote-source {
  margin-top: .75rem;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  color: var(--gasp-purple);
}

/* ============================================================
   SLIDER ADMIN HINT
   ============================================================ */
.slider-admin-hint {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.75);
  color: #fff;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  z-index: 20;
  pointer-events: none;
  white-space: nowrap;
}

/* ============================================================
   RESPONSIVE – new components
   ============================================================ */
@media (max-width: 900px) {
  .need-grid          { grid-template-columns: 1fr; }
  .what-we-do-grid    { grid-template-columns: 1fr; }
  .wwd-image          { order: -1; }
  .wwd-image img      { height: 260px; }
  .info-blocks        { grid-template-columns: 1fr; }
  .impact-cards-stack { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .impact-cards-stack { grid-template-columns: 1fr; }
  .support-cta-grid   { flex-direction: column; }
  .stat-num           { font-size: 1.8rem; }
}

/* ============================================================
   v1.2 — DROPDOWN NAV
   ============================================================ */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0; padding: 0;
}
.nav-item > a {
  display: flex; align-items: center; gap: .3rem;
  color: var(--gasp-white);
  font-family: var(--font-display);
  font-size: .82rem; font-weight: 600;
  padding: .6rem .9rem;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  white-space: nowrap;
  text-decoration: none;
}
.nav-item > a:hover,
.nav-item > a:focus { background: var(--gasp-purple-lt); color: var(--gasp-teal); }
.nav-item .arrow { font-size: .65rem; opacity: .7; }.dropdown {
  display: none;
  position: absolute; top: calc(100% + 4px); left: 0;
  min-width: 230px;
  background: var(--gasp-navy);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  list-style: none; padding: .4rem 0;
  z-index: 500;
}
.dropdown li a {
  display: block;
  padding: .6rem 1.1rem;
  color: rgba(255,255,255,.82);
  font-size: .83rem; font-weight: 500;
  text-decoration: none;
  transition: all var(--transition);
}
.dropdown li a:hover {
  background: rgba(255,255,255,.07);
  color: var(--gasp-teal);
  padding-left: 1.4rem;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown { display: block; }

/* WordPress-generated menu compatibility */
.primary-nav ul.nav-menu,
.primary-nav #primary-menu {
  display: flex; align-items: center;
  list-style: none; margin: 0; padding: 0; gap: 0;
}
.primary-nav #primary-menu .menu-item > a {
  display: flex; align-items: center; gap: .3rem;
  color: var(--gasp-white);
  font-family: var(--font-display);
  font-size: .82rem; font-weight: 600;
  padding: .6rem .9rem;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  white-space: nowrap; text-decoration: none;
}
.primary-nav #primary-menu .menu-item > a:hover { background: var(--gasp-purple-lt); color: var(--gasp-teal); }
.primary-nav #primary-menu .menu-item { position: relative; }
.primary-nav #primary-menu .sub-menu {
  display: none; position: absolute; top: calc(100% + 4px); left: 0;
  min-width: 230px;
  background: var(--gasp-navy);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  list-style: none; padding: .4rem 0; z-index: 500;
}
.primary-nav #primary-menu .menu-item:hover > .sub-menu,
.primary-nav #primary-menu .menu-item:focus-within > .sub-menu { display: block; }
.primary-nav #primary-menu .sub-menu .menu-item > a {
  display: block; padding: .6rem 1.1rem;
  color: rgba(255,255,255,.82); font-size: .83rem; font-weight: 500;
}
.primary-nav #primary-menu .sub-menu .menu-item > a:hover {
  background: rgba(255,255,255,.07); color: var(--gasp-teal); padding-left: 1.4rem;
}

/* ============================================================
   v1.2 — ALERT BAR (red registration banner)
   ============================================================ */
.header-alert-bar {
  background: #E8453C;
  padding: .65rem 1.25rem;
  text-align: center;
  font-size: .88rem;
  color: var(--gasp-white);
}
.header-alert-bar a {
  color: var(--gasp-white);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.header-alert-bar a:hover { color: rgba(255,255,255,.8); }

/* ============================================================
   v1.2 — HEADER CTAs (3-button layout: Contact, Book, Donate)
   ============================================================ */
.btn-contact {
  color: var(--gasp-white) !important;
  border-color: rgba(255,255,255,.4) !important;
  background: transparent !important;
  font-size: .78rem !important;
  padding: .5rem .9rem !important;
}
.btn-contact:hover {
  background: rgba(255,255,255,.1) !important;
  border-color: var(--gasp-white) !important;
}
.btn-book {
  background: transparent;
  color: var(--gasp-white);
  border: 1.5px solid rgba(255,255,255,.4);
  font-family: var(--font-display);
  font-size: .78rem; font-weight: 700;
  padding: .5rem .9rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: all var(--transition);
  white-space: nowrap;
}
.btn-book:hover { background: rgba(255,255,255,.1); border-color: var(--gasp-white); color: var(--gasp-white); }

/* ============================================================
   v1.2 — HOME SECTIONS (matching live site style)
   ============================================================ */
.home-section { padding: 3.5rem 1.25rem; }
.home-section-inner { max-width: var(--max-w); margin: 0 auto; }
.home-section-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--gasp-navy);
  text-align: center;
  margin-bottom: 2rem;
  font-family: var(--font-display);
}
.home-what-we-do { background: var(--gasp-white); }
.home-what-inner {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}
.home-what-logo {
  flex: 0 0 auto;
  width: 150px;
  height: auto;
  opacity: 0.92;
}
.home-what-body {
  flex: 1;
  color: var(--gasp-grey);
  line-height: 1.75;
  font-size: .97rem;
}
.home-what-body p { margin-bottom: 1rem; }
.home-what-body a { color: var(--gasp-purple); font-weight: 600; }
.home-what-body a:hover { color: var(--gasp-teal-dk); }
@media (max-width: 700px) {
  .home-what-inner { flex-direction: column; gap: 1.5rem; text-align: center; }
  .home-what-logo { width: 110px; }
}

/* Home testimonials — matching live 2-column layout */
.home-testimonials { background: var(--gasp-light); border-top: 1px solid #eee; }
.home-testimonials-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem 3rem;
  max-width: var(--max-w);
  margin: 0 auto;
}
.home-testimonial { padding-top: .5rem; }
.home-testimonial-quote {
  font-size: 2.8rem;
  line-height: 1;
  color: #c8c8c8;
  font-family: Georgia, serif;
  margin-bottom: .75rem;
  letter-spacing: -.1em;
}
.home-testimonial p {
  color: var(--gasp-grey);
  font-size: .93rem;
  line-height: 1.7;
  margin-bottom: 1.25rem;
}
.home-testimonial-source strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--gasp-navy);
  font-size: .9rem;
}
/* ============================================================
   v1.2 — STICKY HEADER OFFSET for subnav
   ============================================================ */
/* Removed here — see the guaranteed-to-win fix at the true end of
   this file for why (.site-header is genuinely position:sticky,
   this comment's claim otherwise was simply wrong, and top:0 here
   was making the subnav try to occupy the exact same stuck
   position as the header itself, which — with a much higher
   z-index — was simply covering it). */

/* ============================================================
   v1.2 — RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .nav-item > a,
  .primary-nav #primary-menu .menu-item > a { padding: .55rem .65rem; font-size: .78rem; }
  .header-ctas .btn-contact { display: none; }
}
@media (max-width: 900px) {
  .home-testimonials-grid { grid-template-columns: 1fr; gap: 2rem; }
}
/* ============================================================
   v6.18 — Nav collapses to hamburger at a NARROWER width than
   before (was 768px, now 680px). At 768px specifically (iPad
   portrait) the full text nav now fits, using the same stacked
   "GASP / Motor / Project" logo treatment as phone portrait to
   free up the horizontal room it needs — extended here from
   phone-only up through this whole tablet range, plus a modest
   tightening of nav link padding for extra safety margin.
   overflow-x:auto on .header-inner (set globally further up)
   remains as a safety net regardless.
   ============================================================ */
@media (max-width: 900px) {
  .header-inner { gap: 0.5rem; padding: 0.6rem 0.85rem; }
  .site-logo img { height: 42px; }
  .site-logo { gap: 0.35rem; }
  .site-logo .logo-title {
    display: flex;
    flex-direction: column;
    font-size: 0.64rem;
    line-height: 1.15;
  }
  .site-logo .logo-title .lt-word { display: block; margin-right: 0; }
  .site-logo .logo-tagline { display: none; }
  .nav-menu { gap: 0; }
  .nav-item > a,
  .primary-nav #primary-menu .menu-item > a { padding: 0.5rem 0.5rem; font-size: 0.74rem; }
  .header-search { flex-shrink: 0; }
  .header-ctas { gap: 0.3rem; flex-shrink: 0; }
  .header-ctas .btn-book { display: none; }
}

@media (max-width: 340px) {
  /* Nav collapses to hamburger — only as a defensive fallback below
     any width a real phone actually uses in portrait (smallest
     common is ~375px). See the 480px block further down for how
     phones in portrait keep the text nav instead. */
  .primary-nav { display: none; flex-direction: column; align-items: stretch;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--gasp-navy); padding: 1rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.3); z-index: 999; }
  .primary-nav.open { display: flex; }
  .primary-nav a { padding: 0.75rem 1rem; font-size: 1rem; border-radius: var(--radius-sm); }
  .nav-menu { flex-direction: column; align-items: stretch; }
  .nav-item > a { padding: .75rem 1rem; font-size: .95rem; }
  .dropdown { position: static; box-shadow: none; border: none;
    background: rgba(255,255,255,.05); border-radius: 0; display: none; }
  .has-dropdown.open > .dropdown { display: block; }
  /* Show dropdown on tap for mobile */
  .primary-nav #primary-menu .sub-menu { position: static; box-shadow: none;
    background: rgba(255,255,255,.05); display: none; }
  .primary-nav #primary-menu .menu-item.open > .sub-menu { display: block; }
  .header-ctas .btn-book { display: none; }
  .menu-toggle { display: flex; }
  .site-header { position: relative; }
}

/* ============================================================
   v6.47 — Keep TEXT navigation on phones in portrait too, rather
   than collapsing to a hamburger icon. The active-page teal
   underline only means anything if the section names are actually
   visible — a hamburger icon hides that visual cue entirely. Drops
   "Home" (the logo already links there) and the search icon to free
   up enough width; nav items get tighter padding again for the
   same reason. flex-wrap on .header-inner is the safety net if a
   genuinely tiny/unusual viewport still can't fit everything on one
   row — wrapping to a second row, rather than the overflow-x:auto
   trick used elsewhere, which was found to clip dropdown menus.
   ============================================================ */
@media (max-width: 480px) {
  .header-inner { flex-wrap: wrap; }
  .nav-menu > li:first-child { display: none; }
  .nav-item > a,
  .primary-nav #primary-menu .menu-item > a { padding: 0.32rem 0.4rem; font-size: 0.64rem; }
}

/* ============================================================
   v1.4 — REMOVE ALERT BAR (no longer used)
   ============================================================ */
.header-alert-bar { display: none !important; }

/* ============================================================
   v1.4 — PILLAR CARDS WITH SUB-NAV LINKS
   ============================================================ */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 2.5rem 1.25rem;
}
/* Keep existing .pillar-card styles but ensure it doesn't grow */
.pillar-card-wrap .pillar-card {
  flex: 0 0 auto;
}

/* Sub-nav list under each pillar card */
.pillar-subnav {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--gasp-white);
  border: 1px solid rgba(43,26,138,0.1);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.pillar-subnav li {
  border-bottom: 1px solid rgba(43,26,138,0.07);
}.pillar-subnav li a:hover {
  background: rgba(43,26,138,0.04);
  color: var(--gasp-purple);
  padding-left: 1.4rem;
}
/* Adjust pillar card bottom radius when subnav follows */
.pillar-card-wrap .pillar-card {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* ============================================================
   v1.4 — DONATE CTA SECTION
   ============================================================ */
.home-donate-cta {
  background: var(--gasp-navy);
  padding: 3rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.donate-cta-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: center;
}
.donate-cta-text h2 {
  color: var(--gasp-white);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  margin-bottom: .6rem;
}
.donate-cta-text p {
  color: rgba(255,255,255,.75);
  font-size: .95rem;
  line-height: 1.65;
  margin-bottom: .4rem;
}
.donate-hashtag {
  color: var(--gasp-teal) !important;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem !important;
  margin-top: .5rem !important;
  letter-spacing: .02em;
}
.donate-cta-buttons {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  min-width: 220px;
}
.btn-donate-large {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1rem 2rem;
  background: var(--gasp-teal);
  color: var(--gasp-navy);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  border: 2px solid var(--gasp-teal);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: all var(--transition);
  text-align: center;
}
.btn-donate-large:hover {
  background: var(--gasp-teal-dk);
  border-color: var(--gasp-teal-dk);
  color: var(--gasp-navy);
  transform: translateY(-1px);
}
.donate-cta-buttons .btn-secondary {
  justify-content: center;
  text-align: center;
}

/* ============================================================
   v1.4 — NAV: correct 3-section structure
   Tighten header so 3 nav items + 2 CTAs all fit
   ============================================================ */
.primary-nav { flex: 1; }
.nav-menu { justify-content: center; }
.header-ctas { gap: .5rem; }
.header-ctas .btn-book {
  background: transparent;
  color: var(--gasp-white);
  border: 1.5px solid rgba(255,255,255,.5);
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 700;
  padding: .55rem 1.1rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: all var(--transition);
  white-space: nowrap;
}
.header-ctas .btn-book:hover {
  background: rgba(255,255,255,.1);
  border-color: var(--gasp-white);
  color: var(--gasp-white);
}
.header-ctas .btn-donate {
  background: var(--gasp-teal) !important;
  color: var(--gasp-navy) !important;
  border: 2px solid var(--gasp-teal) !important;
  font-size: .82rem !important;
  padding: .55rem 1.1rem !important;
  white-space: nowrap;
}
.header-ctas .btn-donate:hover {
  background: var(--gasp-teal-dk) !important;
  border-color: var(--gasp-teal-dk) !important;
}

/* ============================================================
   v1.4 — RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .pillars-grid { grid-template-columns: 1fr; max-width: 480px; }
  .donate-cta-inner { grid-template-columns: 1fr; gap: 2rem; }
  .donate-cta-buttons { flex-direction: row; flex-wrap: wrap; min-width: unset; }
  .donate-cta-buttons .btn { flex: 1; min-width: 160px; }
}
@media (max-width: 600px) {
  .donate-cta-buttons { flex-direction: column; }
  .donate-cta-buttons .btn { width: 100%; }
}

/* ============================================================
   v1.5 — PILLAR CARDS: equal height, aligned footers
   Key: card uses flex column, body grows to fill space,
   footer always pins to bottom of the card area.
   ============================================================ */

/* Reset any previous pillar-card-wrap/pillar-card rules */
.pillars { background: var(--gasp-light); }
.pillar-card-wrap {
  display: flex;
  flex-direction: column;
}

/* v6.65 — Consolidated from three separate .pillar-card
   declarations that had accumulated in this file (spotted via dev
   tools) down to two.
   v6.66 — Down to genuinely one now. Turns out the "visual" one
   (background/shadow/rounded corners) was never actually taking
   effect: .pillar-card ALSO has display:contents set further down
   this file (structurally necessary — see the warning comment
   there), and since that rule comes later, it wins for the display
   property specifically, which suppresses .pillar-card's own box
   entirely — box-shadow and overflow:hidden on an element with no
   box simply don't render anything. The card's actual visible
   appearance (purple header, white body/footer) was already coming
   entirely from .pillar-card-header/-body/-footer's own individual
   backgrounds the whole time, not from this rule. The one thing it
   WAS genuinely contributing — the hover shadow-lift effect — is
   moved to .pillar-card-wrap below, which has a real box (see the
   v6.56 fix) and can actually render it.
   v6.67 — The transform:translateY lift, also on this same element,
   turned out to have a serious side effect: transform creates a new
   CSS stacking context on whatever it's applied to, for as long as
   it's active — and since that's the same hover moment the submenu
   needs to escape upward past sibling sections on the page, its
   z-index got trapped inside that new context instead. It could
   still stack above things INSIDE the card, but no longer above
   content outside it, like the Testimonials section below. Removed
   the transform, kept the shadow darken — less dramatic, but the
   submenu needs this element to not gain a stacking context the
   moment it's revealed. */
.pillar-card-wrap {
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-md);
  transition: box-shadow var(--transition);
}
.pillar-card-wrap:hover {
  box-shadow: var(--shadow-md);
}

/* The inner link fills the full card */
.pillar-card-link {
  display: flex;
  flex-direction: column;
  flex: 1;               /* grow to fill card */
  text-decoration: none;
  color: inherit;
  /* Make all three cards the SAME height */
  min-height: 280px;
}
.pillar-card-link:hover .pillar-card-footer { color: var(--gasp-teal-dk); }

.pillar-card-header {
  padding: 1.5rem 1.75rem 1.25rem;
  background: var(--gasp-purple);
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}/* Body GROWS — this is what makes the footer align */
.pillar-card-body {
  padding: 1.25rem 1.75rem;
  flex: 1;               /* takes all remaining space */
}
/* Footer PINS to the bottom of every card */
.pillar-card-footer {
  padding: .9rem 1.75rem;
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 700;
  color: var(--gasp-purple);
  border-top: 1px solid rgba(43,26,138,.08);
  background: var(--gasp-white);
  flex-shrink: 0;        /* never shrinks */
  transition: color var(--transition);
}

/* Sub-nav list — connects to the bottom of the card */
.pillar-subnav {
  list-style: none;
  margin: 0; padding: 0;
  background: var(--gasp-white);
  border: 1px solid rgba(43,26,138,.1);
  border-top: 2px solid var(--gasp-teal);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.pillar-subnav li {
  border-bottom: 1px solid rgba(43,26,138,.07);
}.pillar-subnav li a::after {
  content: '›';
  color: var(--gasp-teal);
  font-size: 1.1rem;
  font-weight: 400;
  opacity: 0;
  transform: translateX(-4px);
  transition: all var(--transition);
}
.pillar-subnav li a:hover {
  background: rgba(43,26,138,.04);
  color: var(--gasp-purple);
  padding-left: 1.4rem;
}
/* ============================================================
   v1.5 — ADMIN HINT: only show when logged in (belt+braces)
   ============================================================ */
.slider-admin-hint { display: none; }
.logged-in .slider-admin-hint { display: block; }

/* ============================================================
   v1.5 — RESPONSIVE pillars
   ============================================================ */
@media (max-width: 900px) {  .pillar-card-link { min-height: unset; }
}.logged-in .slider-admin-hint { display: block !important; }.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0;
  /* Each column is itself a grid so card-header/body/footer rows align */
  align-items: start;
}
/* The card itself spans all grid rows except subnav */
/* ⚠️ DO NOT REMOVE OR CONSOLIDATE — this display:contents is load-
   bearing. The pillar submenu positioning fix (search this file for
   "v6.56") explicitly relies on THIS element's own box disappearing
   so its header/body/footer children become effective direct flex
   children of .pillar-card-wrap. There are two other, purely
   visual .pillar-card declarations elsewhere in this file (search
   "v6.65") — this is NOT a duplicate of those; it does a
   structurally different job and looks similar only by coincidence
   of both targeting the same class name. */
.pillar-card {
  display: contents; /* lets children participate in the wrap's grid */
  text-decoration: none;
  color: inherit;
}

/* Card link is the actual clickable block */
.pillar-card-link {
  display: contents;
  text-decoration: none;
  color: inherit;
}

/* Header — row 1 */
.pillar-card-header {
  background: var(--gasp-purple);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: 1.5rem 1.75rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  transition: background var(--transition);
}/* Body — row 2 (this is the one that stretches to equal height) */
.pillar-card-body {
  background: var(--gasp-white);
  padding: 1.25rem 1.75rem 1rem;
  /* no flex needed — grid row 1fr handles the stretch */
}
/* Footer — row 3 (always same row across all 3 columns) */
.pillar-card-footer {
  background: var(--gasp-white);
  padding: .9rem 1.75rem;
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 700;
  color: var(--gasp-purple);
  border-top: 1px solid rgba(43,26,138,.1);
  display: flex;
  align-items: center;
  gap: .4rem;
  transition: color var(--transition);
}/* FIX 3 — Nav: force WP menu to show only 4 items.
   If the old menu is assigned, hide excess items that don't match
   our four sections (Home, About Us, Our Services, Supporters).
   (Real fix: delete old menu in WP Admin → Menus)
   v6.16: was -n+3 for the original 3 sections; updated to -n+4 when
   "Home" was added as a legitimate 4th top-level item — this rule
   was silently hiding Home/Supporters (whichever landed 4th) since
   then, which is why Supporters went missing from the menu. */
#primary-menu > .menu-item:not(:nth-child(-n+4)) { display: none !important; }

/* Responsive */
@media (max-width: 900px) {  .pillar-card-wrap { grid-template-rows: auto auto auto auto; }
  #primary-menu > .menu-item:not(:nth-child(-n+3)) { display: list-item !important; }
}

/* ============================================================
   v1.8 FIX 1 — DROPDOWN: no gap, instant open, delayed close
   The gap between nav link and dropdown causes the menu to 
   vanish when the cursor moves down. Fix:
   • Use padding-bottom on the trigger so hover area extends down
   • Add a transparent pseudo-element bridge to fill the gap
   • Use JS for a small close delay instead of pure CSS hover
   ============================================================ */

/* Remove the gap that causes the dropdown to disappear */
.nav-item { position: relative; }

/* Extend the clickable/hoverable area downward to bridge the gap */
.nav-item > a {
  padding-bottom: 1rem; /* extends hover zone down into the dropdown area */
  margin-bottom: -0.4rem; /* pulls it back up visually */
}

/* Invisible bridge between nav link and dropdown */
.nav-item.has-dropdown > a::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  height: 12px; /* covers the gap */
  background: transparent;
}

/* Dropdown sits closer — no visual gap */
.dropdown {
  top: calc(100% - 2px);
  padding-top: 4px;    /* small top padding inside */
  padding-bottom: 4px;
}

/* Keep dropdown open while hovering it */
.nav-item.has-dropdown:hover > .dropdown,
.nav-item.has-dropdown:focus-within > .dropdown,
.nav-item.has-dropdown.open > .dropdown { display: block; }

/* WP menu equivalent */
.primary-nav #primary-menu .menu-item-has-children > .sub-menu {
  top: calc(100% - 2px);
  padding-top: 4px;
  padding-bottom: 4px;
}
.primary-nav #primary-menu .menu-item-has-children:hover > .sub-menu,
.primary-nav #primary-menu .menu-item-has-children:focus-within > .sub-menu,
.primary-nav #primary-menu .menu-item-has-children.open > .sub-menu { display: block; }

/* ============================================================
   v1.8 FIX 2 — EQUAL HEIGHT PILLAR CARDS
   Use CSS subgrid (rows) so all three columns share identical
   row heights. The body row uses 1fr to fill remaining space.
   Fallback: min-height on the card body.
   ============================================================ */

/* The outer grid drives equal column widths */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Use subgrid for rows so header/body/footer align across columns */
  grid-template-rows: auto;
  align-items: start;
  gap: 1.5rem;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 2.5rem 1.25rem;
}

/* Each pillar wrap is its own mini-grid with 4 rows:
   header | body | footer | subnav
   The body row uses 1fr so it ALWAYS fills to the tallest column */
.pillar-card-wrap {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  /* No min-height needed — the 1fr row handles it */
}

/* Strip display:contents — it breaks the grid row alignment */
.pillar-card,
.pillar-card-link {
  display: contents;
}

/* Each grid child maps to a row in pillar-card-wrap */
.pillar-card-header {
  /* row 1 — natural height */
  background: var(--gasp-purple);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: 1.5rem 1.75rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  transition: background var(--transition);
  cursor: pointer;
}.pillar-card-footer {
  /* row 3 — pinned, same height for all three */
  background: var(--gasp-white);
  padding: .9rem 1.75rem;
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 700;
  color: var(--gasp-purple);
  border-top: 1px solid rgba(43,26,138,.1);
  display: flex;
  align-items: center;
  gap: .4rem;
  transition: color var(--transition);
  cursor: pointer;
}/* Responsive */
@media (max-width: 900px) {
  .pillars-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
}.logged-in .slider-admin-hint {
  display: block !important;
  position: absolute;
  top: 10px;
  right: 10px;       /* top-right, out of the way */
  left: auto;        /* override any centering */
  transform: none;   /* override any transform */
  background: rgba(0,0,0,.65);
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 11px;
  z-index: 20;
  pointer-events: none;
  white-space: nowrap;
  max-width: 260px;
}

/* ============================================================
   v1.9 FIX 2 — Pillar cards: proper responsive stacking
   On mobile (<768px) cards must stack to 1 column.
   On tablet (768–1024px) still 3 columns but narrower.
   ============================================================ */

/* Desktop: 3 equal columns */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 2.5rem 1.25rem;
  align-items: start;
}

/* Each card wrap: 4-row grid so header/body/footer/subnav
   align correctly within each column */
.pillar-card-wrap {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  width: 100%;        /* ensure full column width */
}

/* Equal-height body using 1fr row */
.pillar-card-body {
  background: var(--gasp-white);
  padding: 1.25rem 1.75rem;
  /* 1fr row from parent grid handles the stretch */
  align-self: stretch;
}

/* Tablet: keep 3 cols but tighten gap */
@media (max-width: 1024px) and (min-width: 601px) {
  .pillars-grid { gap: 1rem; padding: 2rem .75rem; }
}

/* Mobile: stack to single column, full width */
@media (max-width: 600px) {
  .pillars-grid {
    grid-template-columns: 1fr;   /* single column */
    gap: 2rem;
    padding: 1.5rem 1rem;
    max-width: 100%;
  }
  .pillar-card-wrap {
    width: 100%;
    /* On mobile rows don't need to align across cards */
    grid-template-rows: auto auto auto auto;
  }
}

/* ============================================================
   v1.9 FIX 3 — Impact bar: wrap gracefully on narrow screens
   ============================================================ */
@media (max-width: 600px) {
  .impact-bar-inner {
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
  }
  .impact-divider { display: none; }
  .impact-stat { min-width: 120px; text-align: center; }
  .impact-stat .number { font-size: 1.6rem; }
  .impact-stat .label  { font-size: .7rem; }
}

/* ============================================================
   v1.9 FIX 4 — Nav: on very narrow screens hide overflow
   ============================================================ */
@media (max-width: 600px) {
  .header-inner { padding: .6rem .75rem; }
  .site-logo .logo-title { font-size: .95rem; }
  .site-logo .logo-tagline { display: none; }
  .header-ctas .btn-book { display: none; } /* too cramped — book via menu */
}

/* ============================================================
   v2.0 FIX 1 — CARD FOOTER ALIGNMENT
   
   Root cause: .pillar-card-wrap uses grid-template-rows but
   .pillar-card and .pillar-card-link use display:contents which
   flattens the HTML into the grid — this works BUT only if
   every element is a direct child of .pillar-card-wrap.
   
   The structure is:
     .pillar-card-wrap
       .pillar-card                    (display:contents)
         .pillar-card-link             (display:contents)  
           .pillar-card-header         → grid row 1
           .pillar-card-body           → grid row 2 (1fr)
           .pillar-card-footer         → grid row 3
       .pillar-subnav                  → grid row 4
   
   With display:contents the children bubble up correctly.
   The fix: use a SHARED outer grid across all 3 columns
   so the rows are synchronised between cards.
   ============================================================ */

/* 
  Override with a subgrid approach:
  The pillars-grid itself defines named rows that all 3 columns share.
  This is the most reliable cross-browser equal-height solution.
*/
.pillars { background: var(--gasp-light); padding: 2.5rem 1.25rem; }

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Define 4 shared row tracks: header | body | footer | subnav */
  grid-template-rows: auto 1fr auto auto;
  gap: 0 1.5rem;           /* column gap only — rows join seamlessly */
  max-width: var(--max-w);
  margin: 0 auto;
  align-items: start;
}

/* Each wrap occupies ONE column, spanning ALL 4 rows */
.pillar-card-wrap {
  display: contents;  /* children participate directly in pillars-grid */
}

/* Now each child is placed explicitly into the shared grid rows */

/* Row 1 — header (same row across all 3 cards) */
.pillar-card-wrap:nth-child(1) .pillar-card-header { grid-column: 1; grid-row: 1; }
.pillar-card-wrap:nth-child(2) .pillar-card-header { grid-column: 2; grid-row: 1; }
.pillar-card-wrap:nth-child(3) .pillar-card-header { grid-column: 3; grid-row: 1; }

/* Row 2 — body (1fr row = tallest card drives the height for ALL) */
.pillar-card-wrap:nth-child(1) .pillar-card-body { grid-column: 1; grid-row: 2; align-self: stretch; }
.pillar-card-wrap:nth-child(2) .pillar-card-body { grid-column: 2; grid-row: 2; align-self: stretch; }
.pillar-card-wrap:nth-child(3) .pillar-card-body { grid-column: 3; grid-row: 2; align-self: stretch; }

/* Row 3 — footer (ALWAYS same row = perfectly aligned) */
.pillar-card-wrap:nth-child(1) .pillar-card-footer { grid-column: 1; grid-row: 3; }
.pillar-card-wrap:nth-child(2) .pillar-card-footer { grid-column: 2; grid-row: 3; }
.pillar-card-wrap:nth-child(3) .pillar-card-footer { grid-column: 3; grid-row: 3; }

/* Row 4 — subnav list */
.pillar-card-wrap:nth-child(1) .pillar-subnav { grid-column: 1; grid-row: 4; }
.pillar-card-wrap:nth-child(2) .pillar-subnav { grid-column: 2; grid-row: 4; }
.pillar-card-wrap:nth-child(3) .pillar-subnav { grid-column: 3; grid-row: 4; }

/* Also display:contents on the link wrapper so children reach the grid */
.pillar-card       { display: contents; }
.pillar-card-link  { display: contents; }

/* Styling for each cell */
.pillar-card-header {
  background: var(--gasp-purple);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: 1.5rem 1.75rem 1.25rem;
  display: flex; align-items: center; gap: 1rem;
  cursor: pointer;
  transition: background var(--transition);
  text-decoration: none;
}
.pillar-card-wrap:hover .pillar-card-header { background: var(--gasp-purple-lt); }
.pillar-card-header h3 { color: var(--gasp-white); font-size: 1.15rem; margin: 0; }

.pillar-icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--gasp-teal);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; flex-shrink: 0;
}

.pillar-card-body {
  background: var(--gasp-white);
  padding: 1.25rem 1.75rem;
}
.pillar-card-body p { color: var(--gasp-grey); font-size: .92rem; line-height: 1.65; margin: 0; }

.pillar-card-footer {
  background: var(--gasp-white);
  padding: .9rem 1.75rem;
  font-family: var(--font-display); font-size: .85rem; font-weight: 700;
  color: var(--gasp-purple);
  border-top: 1px solid rgba(43,26,138,.1);
  display: flex; align-items: center; gap: .4rem;
  cursor: pointer;
  transition: color var(--transition);
}
.pillar-card-footer::after { content: '→'; color: var(--gasp-teal); font-size: 1rem; }
.pillar-card-wrap:hover .pillar-card-footer { color: var(--gasp-teal-dk); }

.pillar-subnav {
  list-style: none; margin: 0; padding: 0;
  background: var(--gasp-white);
  border: 1px solid rgba(43,26,138,.1);
  border-top: 2px solid var(--gasp-teal);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: 0 4px 12px rgba(43,26,138,.08);
  overflow: hidden;
}
.pillar-subnav li { border-bottom: 1px solid rgba(43,26,138,.06); }
.pillar-subnav li:last-child { border-bottom: none; }
.pillar-subnav li a {
  display: flex; align-items: center; justify-content: space-between;
  padding: .65rem 1.1rem; font-size: .85rem; font-weight: 600;
  color: var(--gasp-navy); text-decoration: none;
  transition: all var(--transition);
}
.pillar-subnav li a::after {
  content: '›'; color: var(--gasp-teal); font-size: 1.1rem;
  opacity: 0; transform: translateX(-4px); transition: all var(--transition);
}
.pillar-subnav li a:hover {
  background: rgba(43,26,138,.04); color: var(--gasp-purple); padding-left: 1.35rem;
}
.pillar-subnav li a:hover::after { opacity: 1; transform: translateX(0); }

/* ============================================================
   v2.0 FIX 2 — Admin hint: top-right of slider, not centred
   ============================================================ */
.slider-admin-hint {
  display: none !important;
}
.logged-in .slider-admin-hint {
  display: block !important;
  position: absolute !important;
  top: 10px !important;
  right: 12px !important;
  left: auto !important;
  transform: none !important;
  background: rgba(0,0,0,.6);
  color: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  z-index: 20;
  pointer-events: none;
  white-space: nowrap;
}

/* ============================================================
   v2.0 — RESPONSIVE: revert to stacked layout on mobile
   (display:contents breaks on single column — use normal flex)
   ============================================================ */
@media (max-width: 768px) {
  .pillars-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 1.5rem 1rem;
  }
  .pillar-card-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  /* Reset explicit grid placements */
  .pillar-card-wrap:nth-child(1) .pillar-card-header,
  .pillar-card-wrap:nth-child(2) .pillar-card-header,
  .pillar-card-wrap:nth-child(3) .pillar-card-header,
  .pillar-card-wrap:nth-child(1) .pillar-card-body,
  .pillar-card-wrap:nth-child(2) .pillar-card-body,
  .pillar-card-wrap:nth-child(3) .pillar-card-body,
  .pillar-card-wrap:nth-child(1) .pillar-card-footer,
  .pillar-card-wrap:nth-child(2) .pillar-card-footer,
  .pillar-card-wrap:nth-child(3) .pillar-card-footer,
  .pillar-card-wrap:nth-child(1) .pillar-subnav,
  .pillar-card-wrap:nth-child(2) .pillar-subnav,
  .pillar-card-wrap:nth-child(3) .pillar-subnav {
    grid-column: unset;
    grid-row: unset;
  }
  .pillar-card, .pillar-card-link { display: flex; flex-direction: column; }
}

/* ============================================================
   v2.1 — SCROLL INDICATOR
   Animated chevrons at bottom of hero to signal more content
   ============================================================ */
.scroll-indicator {
  position: absolute;
  bottom: 3.5rem;   /* above the dots */
  right: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  z-index: 10;
  opacity: 1;
  transition: opacity .4s ease;
  cursor: pointer;
}
.scroll-indicator.hidden { opacity: 0; pointer-events: none; }

.scroll-indicator-text {
  color: rgba(255,255,255,.7);
  font-size: .7rem;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .2rem;
}

.scroll-indicator-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

/* Three animated chevrons stacked vertically */
.scroll-indicator-arrow span {
  display: block;
  width: 16px;
  height: 16px;
  border-right: 2.5px solid rgba(255,255,255,.9);
  border-bottom: 2.5px solid rgba(255,255,255,.9);
  transform: rotate(45deg);
  animation: scrollBounce 1.6s ease-in-out infinite;
}
.scroll-indicator-arrow span:nth-child(1) { animation-delay: 0s;    opacity: .4; }
.scroll-indicator-arrow span:nth-child(2) { animation-delay: .18s;  opacity: .7; }
.scroll-indicator-arrow span:nth-child(3) { animation-delay: .36s;  opacity: 1.0; }

@keyframes scrollBounce {
  0%, 100% { transform: rotate(45deg) translateY(0);   }
  50%       { transform: rotate(45deg) translateY(5px); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .scroll-indicator-arrow span { animation: none; }
}

/* Hide on mobile — less useful on touch devices */
@media (max-width: 600px) {
  .scroll-indicator { display: none; }
}

/* ============================================================
   v2.1 — SECTION TRANSITION HINT
   Subtle gradient fade at bottom of each section to hint
   there's more content below. JS adds/removes based on scroll.
   ============================================================ */
.home-section,
.home-what-we-do,
.home-testimonials,
.home-donate-cta,
.pillars {
  position: relative;
}

/* "More below" fade — shown by JS when section bottom is near viewport edge */
.section-fade-hint {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(0deg, rgba(0,0,0,.18) 0%, transparent 100%);
  pointer-events: none;
  z-index: 50;
  opacity: 0;
  transition: opacity .35s ease;
}
.section-fade-hint.visible { opacity: 1; }

/* ============================================================
   v2.2 — COOKIE CONSENT BANNER
   ============================================================ */

/* Overlay backdrop */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--gasp-navy);
  border-top: 3px solid var(--gasp-teal);
  box-shadow: 0 -4px 32px rgba(0,0,0,.35);
  font-family: var(--font-body);
  animation: cookieSlideUp .4s ease forwards;
}
.cookie-banner[hidden] { display: none; }

@keyframes cookieSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Main banner row */
.cookie-banner-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.cookie-banner-content {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex: 1;
  min-width: 280px;
}

.cookie-banner-icon {
  font-size: 1.75rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.cookie-banner-title {
  color: var(--gasp-white);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 .35rem;
}

.cookie-banner-text p {
  color: rgba(255,255,255,.75);
  font-size: .85rem;
  line-height: 1.55;
  margin: 0;
}

.cookie-policy-link {
  color: var(--gasp-teal);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-policy-link:hover { color: var(--gasp-teal-dk); }

/* Action buttons */
.cookie-banner-actions {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: center;
}

.cookie-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .6rem 1.25rem;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  line-height: 1;
}

.cookie-btn-accept {
  background: var(--gasp-teal);
  color: var(--gasp-navy);
  border-color: var(--gasp-teal);
}
.cookie-btn-accept:hover {
  background: var(--gasp-teal-dk);
  border-color: var(--gasp-teal-dk);
}

.cookie-btn-reject {
  background: transparent;
  color: rgba(255,255,255,.8);
  border-color: rgba(255,255,255,.3);
}
.cookie-btn-reject:hover {
  border-color: var(--gasp-white);
  color: var(--gasp-white);
}

.cookie-btn-customise {
  background: var(--gasp-purple);
  color: var(--gasp-white);
  border-color: var(--gasp-purple);
}
.cookie-btn-customise:hover {
  background: var(--gasp-purple-lt);
  border-color: var(--gasp-purple-lt);
}

/* ── Customise panel ── */
.cookie-customise-panel {
  border-top: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.2);
}
.cookie-customise-panel[hidden] { display: none; }

.cookie-customise-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 1.5rem;
}

.cookie-customise-title {
  color: var(--gasp-white);
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 700;
  margin: 0 0 .4rem;
}
.cookie-customise-desc {
  color: rgba(255,255,255,.65);
  font-size: .82rem;
  margin-bottom: 1.25rem;
}

.cookie-categories {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-bottom: 1.25rem;
}

.cookie-category {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-sm);
  padding: .9rem 1rem;
}

.cookie-category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.cookie-category-info {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.cookie-category-name {
  color: var(--gasp-white);
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: 700;
}

.cookie-category-desc {
  color: rgba(255,255,255,.6);
  font-size: .78rem;
  line-height: 1.45;
}

/* Always on badge */
.cookie-always-on {
  font-size: .72rem;
  font-weight: 700;
  color: var(--gasp-teal);
  background: rgba(0,201,160,.15);
  border: 1px solid rgba(0,201,160,.3);
  border-radius: 20px;
  padding: .2rem .65rem;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Toggle switch */
.cookie-toggle {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
  flex-shrink: 0;
  cursor: pointer;
}
.cookie-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.cookie-toggle-slider {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.2);
  border-radius: 26px;
  transition: background var(--transition);
}
.cookie-toggle-slider::before {
  content: '';
  position: absolute;
  left: 3px; top: 3px;
  width: 20px; height: 20px;
  background: var(--gasp-white);
  border-radius: 50%;
  transition: transform var(--transition);
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.cookie-toggle input:checked + .cookie-toggle-slider {
  background: var(--gasp-teal);
}
.cookie-toggle input:checked + .cookie-toggle-slider::before {
  transform: translateX(20px);
}
.cookie-toggle input:focus-visible + .cookie-toggle-slider {
  outline: 3px solid var(--gasp-teal);
  outline-offset: 2px;
}

/* Customise actions */
.cookie-customise-actions {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}

/* ── Re-open button (bottom-left corner) ── */
.cookie-reopen-btn {
  position: fixed;
  bottom: 1.25rem;
  left: 1.25rem;
  width: 40px;
  height: 40px;
  background: var(--gasp-navy);
  border: 2px solid var(--gasp-teal);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  z-index: 9000;
  box-shadow: var(--shadow-md);
  transition: all var(--transition);
  opacity: 0;             /* hidden until banner dismissed */
  pointer-events: none;
  transform: scale(0.8);
}
.cookie-reopen-btn.visible {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}
.cookie-reopen-btn:hover {
  background: var(--gasp-purple);
  transform: scale(1.1);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .cookie-banner-inner {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
  }
  .cookie-banner-actions {
    width: 100%;
    flex-direction: column;
  }
  .cookie-btn { width: 100%; }
  .cookie-customise-inner { padding: 1rem; }
  .cookie-categories { gap: .5rem; }
}

/* ============================================================
   v2.3 — QR CODE BLOCK
   ============================================================ */
.qr-block {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}

.qr-block-link {
  display: block;
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.qr-block-link:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.qr-block-link img {
  display: block;
  width: 140px;
  height: 140px;
  image-rendering: pixelated;   /* keep QR crisp at any size */
  image-rendering: crisp-edges;
}

.qr-block-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
}
.qr-block-label {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gasp-grey);
}
.qr-block-url {
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  color: var(--gasp-purple);
}.qr-block--footer .qr-block-url   { color: var(--gasp-teal); }
.qr-block--footer .qr-block-link  { box-shadow: 0 2px 12px rgba(0,0,0,.4); }

/* Donate/Support variant — centred */
.qr-block--donate,
.qr-block--support { align-items: center; width: 100%; }
.qr-block--support .qr-block-label { color: rgba(255,255,255,.5); }
.qr-block--support .qr-block-url   { color: var(--gasp-teal); }

/* Contact variant */
.qr-block--contact { align-items: center; width: 100%; }

/* ============================================================
   v2.4 — QR CODE: canvas-based (qrcode.js)
   ============================================================ */
.qr-wrap-link {
  display: inline-block;
  line-height: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.qr-wrap-link:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
/* qr-inner: qrcode.js renders the canvas/img directly here */
/* Size is set in JS (110px) — no CSS override needed */
.qr-inner { display: inline-block; line-height: 0; background:#fff; padding:6px; }
.qr-inner canvas, .qr-inner img { display:block; }

/* Remove the floating cookie button */
.cookie-reopen-btn { display: none !important; }

/* ============================================================
   v2.5 — Footer icon links styling
   ============================================================ */
.footer-bottom a {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

/* Ensure emoji icons in footer links don't affect line-height */
.footer-bottom a span,
.footer-bottom a {
  line-height: 1.4;
  vertical-align: middle;
}

/* ============================================================
   v2.7 — FOOTER: Get Involved column with inline QR code
   QR sits to the right of the links, aligned with Donate row
   ============================================================ */

/* Widen the footer grid to accommodate the QR beside Get Involved */
.footer-inner {
  grid-template-columns: 2fr 1fr 1.6fr 1fr;
}

/* Get Involved column uses flex to put links + QR side by side */
.footer-col--get-involved { }

.footer-get-involved-inner {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}

.footer-get-involved-links {
  flex: 1;
  /* links sit on left as normal */
}

/* QR wrapper — aligns vertically with the Donate link (2nd item) */
.footer-qr-wrap {
  flex-shrink: 0;
  /* Push down to align with "Donate" (2nd list item).
     Each footer li is ~1.5rem font + ~0.5rem margin = ~2rem per item.
     "Book a Course" is item 1, "Donate" is item 2.
     h4 heading = ~1.4rem + 1rem margin-bottom ≈ 2.4rem offset from top of ul.
     Item 1 height ≈ 1.5rem. So Donate starts at ≈ 3.9rem from top of .footer-col. */
  margin-top: 3.5rem;
}

/* QR block layout in footer context */
.qr-block--footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
}
.qr-block--footer .qr-block-label { color: rgba(255,255,255,.5); }
.qr-block--footer .qr-block-url   { color: var(--gasp-teal); font-size: .72rem; }

/* Responsive — on smaller screens stack QR below links */
@media (max-width: 1024px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-get-involved-inner { flex-direction: column; gap: 1rem; }
  .footer-qr-wrap { margin-top: 0; }
}
@media (max-width: 600px) {}

/* ============================================================
   v2.8 — FOOTER: 5-column layout with standalone Donate/QR col
   Brand | Explore | Get Involved | Donate (QR) | Contact
   ============================================================ */
.footer-inner {
  grid-template-columns: 1.8fr 1fr 1fr auto 1fr;
}

/* Donate column — narrow, centred content */
.footer-col--donate {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 130px;
}
.footer-col--donate h4 {
  width: 100%;
  text-align: center;
  margin-bottom: 0.75rem;
}/* Responsive */
@media (max-width: 1100px) {}
@media (max-width: 600px) {
  .footer-inner { grid-template-columns: 1fr; }
}

/* ============================================================
   v2.9 FIX 1 — FOOTER: equal column distribution
   5 columns: Brand + Explore + Get Involved + Donate + Contact
   All non-brand columns get equal width with consistent gap
   ============================================================ */
.footer-inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

/* Donate column — centred heading and QR */
.footer-col--donate {
  display: flex;
  flex-direction: column;
  align-items: center;
}.footer-col--donate .qr-block {
  align-items: center;
}.footer-col--donate .qr-block-url   { color: var(--gasp-teal); font-size:.72rem; text-align:center; }

/* Responsive */
@media (max-width: 1100px) {  .footer-col--donate { align-items: flex-start; }}
@media (max-width: 600px) {}
@media (max-width: 400px) {}.home-testimonial {
  position: relative;
  padding-top: 2rem;
}
.home-testimonial::before {
  content: '\201C'; /* proper left double quotation mark " */
  position: absolute;
  top: 0;
  left: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 3.5rem;
  line-height: 1;
  color: var(--gasp-teal);
  opacity: .5;
  pointer-events: none;
}

/* Dark section testimonials */
.testimonial-card::before {
  content: '\201C';
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 3.5rem;
  line-height: 1;
  color: var(--gasp-teal);
  position: absolute;
  top: 0.5rem;
  left: 1.25rem;
  opacity: .6;
}

/* ============================================================
   v3.0 FIX 1 — TESTIMONIALS: professional blockquote style
   Large teal opening quote flows INTO the text (not isolated above)
   No separate quote mark element — pure CSS drop-cap approach
   ============================================================ */

/* Remove the floating ::before approach */
.home-testimonial::before { display: none; }
.home-testimonial-quote   { display: none; }

/* Reset padding */
.home-testimonial { padding-top: 0; position: relative; }

/* The paragraph itself gets the quote via first-letter / ::before on p */
.home-testimonial p {
  position: relative;
  padding-left: 2.5rem;  /* indent text to clear the large quote */
  color: var(--gasp-grey);
  font-size: .93rem;
  line-height: 1.7;
  margin-bottom: 1.25rem;
  font-style: italic;   /* italics = classic blockquote style */
}
.home-testimonial p::before {
  content: '\201C';          /* " opening quote */
  position: absolute;
  left: 0;
  top: -0.2rem;
  font-family: Georgia, serif;
  font-size: 3rem;
  line-height: 1;
  color: var(--gasp-teal);
  font-style: normal;
  font-weight: 400;
}
.home-testimonial p::after {
  content: '\201D';          /* " closing quote */
  font-family: Georgia, serif;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--gasp-teal);
  font-style: normal;
  margin-left: .1rem;
  vertical-align: -0.15em;
}

/* Source line */
.home-testimonial-source {
  padding-left: 2.5rem;   /* align with indented text */
  margin-top: -.5rem;
}/* Dark section testimonial cards — same treatment */
.testimonial-card::before { display: none; }
.testimonial-card {
  padding: 1.5rem 1.75rem 1.5rem 1.75rem;
}
.testimonial-card p {
  position: relative;
  padding-left: 2.25rem;
  font-style: italic;
  color: rgba(255,255,255,.88);
  font-size: .93rem;
  line-height: 1.7;
  margin-top: 0;
}
.testimonial-card p::before {
  content: '\201C';
  position: absolute;
  left: 0; top: -.2rem;
  font-family: Georgia, serif;
  font-size: 3rem;
  line-height: 1;
  color: var(--gasp-teal);
  font-style: normal;
}
.testimonial-card p::after {
  content: '\201D';
  font-family: Georgia, serif;
  font-size: 1.2rem;
  color: var(--gasp-teal);
  font-style: normal;
  margin-left: .1rem;
  vertical-align: -.15em;
}
.testimonial-source {
  padding-left: 2.25rem;
  margin-top: .75rem;
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 700;
  color: var(--gasp-teal);
  font-style: normal;
}

/* ============================================================
   v3.0 FIX 2 — FOOTER: truly equal column spacing
   Use auto for all content columns so they shrink to content,
   then gap handles even distribution
   ============================================================ */
.footer-inner {
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  gap: 2.5rem;
  align-items: start;
}

/* Donate column — centred */
.footer-col--donate {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
@media (max-width: 1100px) {}
@media (max-width: 600px) {}
@media (max-width: 400px) {}

/* ============================================================
   v3.1 FIX 1 — FOOTER: Donate column truly equal with others
   The QR canvas is wider than the column so the column auto-
   expands. Fix by capping the QR size and constraining column.
   ============================================================ */
.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

/* Cap QR at column width so it doesn't push the column wider */
.footer-col--donate {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;      /* prevent QR from bleeding out */
  min-width: 0;          /* allow grid column to shrink if needed */
}
/* Force QR canvas to fit within the column */
.footer-col--donate .qr-inner,
.footer-col--donate .qr-inner canvas,
.footer-col--donate .qr-inner img {
  width: 100px !important;
  height: 100px !important;
  max-width: 100% !important;
}
.footer-col--donate .qr-wrap-link { display: block; }
.footer-col--donate .qr-block-label { color: rgba(255,255,255,.5); font-size:.68rem; }
.footer-col--donate .qr-block-url   {
  color: var(--gasp-teal);
  font-size:.72rem;
  text-align:center;
  word-break: break-word;
}

/* ============================================================
   v3.1 FIX 2 — TESTIMONIALS: balanced small quotes + icon
   Replace large/small mismatch with:
   - A subtle speech-bubble icon above the text (decorative)
   - Small matching " and " around the text (same size, same colour)
   ============================================================ */

/* Remove all previous quote pseudo-elements */
.home-testimonial::before,
.home-testimonial p::before,
.home-testimonial p::after,
.testimonial-card::before,
.testimonial-card p::before,
.testimonial-card p::after { display: none; content: none; }

/* Reset paragraph indenting */
.home-testimonial p,
.testimonial-card p {
  padding-left: 0;
  font-style: italic;
}

/* Icon above — speech bubble SVG via background image (inline data URI) */
.home-testimonial {
  padding-top: 2.5rem;
  position: relative;
}
.home-testimonial::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28' fill='none'%3E%3Cpath d='M0 0h14v14H7c0 4 2 7 7 9v5C5 25 0 18 0 10V0zM18 0h14v14h-7c0 4 2 7 7 9v5c-9-3-14-10-14-18V0z' fill='%2300C9A0' fill-opacity='0.45'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

/* Balanced small quotes wrapping the text */
.home-testimonial p::before {
  content: '\201C'; /* " */
  display: inline;
  font-family: Georgia, serif;
  font-size: 1em;
  color: var(--gasp-teal);
  font-style: normal;
  margin-right: .05em;
  opacity: .8;
}
.home-testimonial p::after {
  content: '\201D'; /* " */
  display: inline;
  font-family: Georgia, serif;
  font-size: 1em;
  color: var(--gasp-teal);
  font-style: normal;
  margin-left: .05em;
  opacity: .8;
  vertical-align: 0;
}
/* Dark section testimonial cards — same treatment */
.testimonial-card {
  padding-top: 3rem; /* room for icon */
}
.testimonial-card::before {
  content: '';
  display: block;
  position: absolute;
  top: 1rem;
  left: 1.25rem;
  width: 28px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 28' fill='none'%3E%3Cpath d='M0 0h14v14H7c0 4 2 7 7 9v5C5 25 0 18 0 10V0zM18 0h14v14h-7c0 4 2 7 7 9v5c-9-3-14-10-14-18V0z' fill='%2300C9A0' fill-opacity='0.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}
.testimonial-card p {
  font-style: italic;
  padding-left: 0;
  margin-top: 0;
}
.testimonial-card p::before {
  content: '\201C';
  display: inline;
  font-family: Georgia, serif;
  font-size: 1em;
  color: var(--gasp-teal);
  font-style: normal;
  margin-right: .05em;
  opacity: .8;
}
.testimonial-card p::after {
  content: '\201D';
  display: inline;
  font-family: Georgia, serif;
  font-size: 1em;
  color: var(--gasp-teal);
  font-style: normal;
  margin-left: .05em;
  opacity: .8;
  vertical-align: 0;
}.testimonial-card::before       { content: none !important; display: none !important; background: none !important; }.home-testimonial-source span   { font-size: .75rem; color: var(--gasp-grey); text-transform: uppercase; letter-spacing: .08em; font-style: normal; }

/* Dark card testimonials — keep the teal ::before but simple */
.testimonial-card::before {
  content: '\201C\201C' !important;
  display: block !important;
  background: none !important;
  font-family: Georgia, serif;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--gasp-teal);
  opacity: .45;
  position: absolute;
  top: .5rem;
  left: 1.25rem;
  letter-spacing: -.1em;
}

/* ============================================================
   v3.3 FIX 1 — FOOTER: equal column spacing, QR not clipped
   ============================================================ */
.footer-inner {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

/* Donate column */
.footer-col--donate {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
  overflow: visible;  /* don't clip the QR */
}
.footer-col--donate h4 { text-align: center; width: 100%; }

/* QR must not overflow its column — set exact size in JS (110px)
   and ensure the wrapper does not add extra padding that clips it */
.footer-col--donate .qr-inner {
  padding: 4px;
  background: #fff;
  display: inline-block;
  line-height: 0;
  border-radius: 4px;
}
.footer-col--donate .qr-inner canvas,
.footer-col--donate .qr-inner img {
  display: block;
  width: 110px !important;
  height: 110px !important;
}
.footer-col--donate .qr-wrap-link {
  display: inline-block;
  line-height: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  border-radius: 4px;
  overflow: visible;
}
.footer-col--donate .qr-block-label { color: rgba(255,255,255,.5); font-size:.68rem; margin-top:.5rem; display:block; }
.footer-col--donate .qr-block-url   { color: var(--gasp-teal); font-size:.75rem; display:block; font-weight:700; }
/* Single clean green " before each testimonial */
.home-testimonial {
  padding-top: 1.75rem;
  position: relative;
}
.home-testimonial::before {
  content: '\201C';
  position: absolute;
  top: 0;
  left: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--gasp-teal);
  font-style: normal;
  font-weight: 400;
  opacity: .85;
}.home-testimonial p::before { content: none !important; }
.home-testimonial p::after  { content: none !important; }
/* Dark card testimonials — same: single green " */
.testimonial-card::before {
  content: '\201C' !important;
  background: none !important;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--gasp-teal);
  opacity: .7;
  position: absolute;
  top: .4rem;
  left: 1.25rem;
  letter-spacing: 0;
  font-style: normal;
  display: block !important;
}
.testimonial-card p {
  padding-left: 0;
  font-style: normal;
  color: rgba(255,255,255,.88);
  font-size: .93rem;
  line-height: 1.7;
  margin-top: 1.5rem;
}
.testimonial-card p::before { content: none !important; }
.testimonial-card p::after  { content: none !important; }

/* Responsive footer */
@media (max-width: 1100px) {
  .footer-inner { grid-template-columns: 1fr 1fr 1fr; }
  .footer-col--donate { align-items: flex-start; text-align: left; }
  .footer-col--donate h4 { text-align: left; }
}
@media (max-width: 600px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 400px) {
  .footer-inner { grid-template-columns: 1fr; }
}

/* ============================================================
   v3.4 — FOOTER: clean 4-column layout (no Donate column)
   ============================================================ */
.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

/* ============================================================
   v3.4 — TESTIMONIALS: revert to v2.3 original style
   Grey double-comma above, plain text, bold source
   All pseudo-element and SVG quote attempts cleared
   ============================================================ */

/* Clear ALL accumulated quote overrides */
.home-testimonial         { padding-top: 0; position: static; }
.home-testimonial::before { content: none !important; display: none !important;
                             background: none !important; }
.home-testimonial p       { padding-left: 0; font-style: normal;
                             color: var(--gasp-grey); font-size: .93rem;
                             line-height: 1.7; margin-bottom: 1.25rem; }
.home-testimonial p::before { content: none !important; display: none !important; }
.home-testimonial p::after  { content: none !important; display: none !important; }
.home-testimonial-source    { padding-left: 0; }
.home-testimonial-source strong { display: block; font-family: var(--font-display);
                                  font-weight: 700; color: var(--gasp-navy);
                                  font-size: .9rem; font-style: normal; }
.home-testimonial-source span   { font-size: .75rem; color: var(--gasp-grey);
                                   text-transform: uppercase; letter-spacing: .08em; }

/* Restore original grey double-comma element */
.home-testimonial-quote {
  display: block !important;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 2.8rem;
  line-height: 1;
  color: #c8c8c8;
  letter-spacing: -.1em;
  margin-bottom: .5rem;
}

/* Dark section cards — clear all accumulated overrides */
.testimonial-card         { padding-top: 1.75rem; }
.testimonial-card::before { content: '\201C\201C' !important;
                             display: block !important;
                             background: none !important;
                             font-family: Georgia, serif;
                             font-size: 2.5rem; line-height: 1;
                             color: rgba(255,255,255,.25);
                             position: absolute; top: .5rem; left: 1.25rem;
                             letter-spacing: -.1em; font-style: normal;
                             opacity: 1; }
.testimonial-card p       { padding-left: 0; font-style: normal;
                             color: rgba(255,255,255,.88);
                             font-size: .93rem; line-height: 1.7;
                             margin-top: 0; }
.testimonial-card p::before { content: none !important; display: none !important; }
.testimonial-card p::after  { content: none !important; display: none !important; }

/* Responsive footer */
@media (max-width: 900px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .footer-inner { grid-template-columns: 1fr; }
}

/* ============================================================
   v3.5 — TESTIMONIALS: polished card treatment
   Clears all prior overrides and gives each testimonial a
   proper card: background, shadow, teal accent, badge icon
   ============================================================ */

/* Grid — responsive card layout */
.home-testimonials-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  gap: 1.75rem !important;
  max-width: var(--max-w);
  margin: 0 auto;
}

/* Card container */
.home-testimonial {
  background: var(--gasp-white) !important;
  border-radius: var(--radius-md) !important;
  padding: 2rem 1.75rem 1.75rem !important;
  box-shadow: 0 2px 10px rgba(43,26,138,.07) !important;
  border: 1px solid rgba(43,26,138,.14) !important;
  border-left: 4px solid var(--gasp-teal) !important;
  position: relative !important;
  transition: transform var(--transition), box-shadow var(--transition);
}
.home-testimonial:hover {
  transform: translateY(-3px);
  border-color: rgba(43,26,138,.14) !important;
  border-left-color: var(--gasp-teal) !important;
  box-shadow: 0 10px 28px rgba(43,26,138,.14) !important;
}

/* Quote badge — small circular icon, top-left, overlapping the card edge */
.home-testimonial-quote {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--gasp-teal);
  color: var(--gasp-navy);
  border-radius: 50%;
  font-family: Georgia, serif;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 1rem !important;
  letter-spacing: 0;
  box-shadow: 0 3px 8px rgba(0,201,160,.35);
}
/* Replace the "" text content with a single clean mark via ::after,
   hide the literal characters typed in HTML */
.home-testimonial-quote {
  font-size: 0 !important;   /* hide the raw "" text */
  color: transparent;
}
.home-testimonial-quote::after {
  content: '\201D';           /* single " mark, reads like a speech mark */
  font-size: 1.4rem;
  color: var(--gasp-navy);
  font-family: Georgia, serif;
}

/* Quote text */
.home-testimonial p {
  color: var(--gasp-dark) !important;
  font-size: .95rem !important;
  line-height: 1.75 !important;
  margin-bottom: 1.5rem !important;
  font-style: italic;
}

/* Source — separated with a subtle top border */
.home-testimonial-source {
  padding-top: 1rem;
  border-top: 1px solid rgba(43,26,138,.08);
}
.home-testimonial-source strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--gasp-purple) !important;
  font-size: .92rem !important;
}
.home-testimonial-source span {
  font-size: .72rem !important;
  color: var(--gasp-grey) !important;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 600;
}

/* ── Dark-section testimonial cards (section-dark) — matching polish ── */
.testimonial-card {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-left: 4px solid var(--gasp-teal) !important;
  border-radius: var(--radius-md) !important;
  padding: 2rem 1.75rem 1.75rem !important;
  position: relative;
  transition: transform var(--transition), background var(--transition);
}
.testimonial-card:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,.08) !important;
}
.testimonial-card::before {
  content: '\201D' !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: static !important;
  width: 40px; height: 40px;
  background: var(--gasp-teal);
  color: var(--gasp-navy) !important;
  border-radius: 50%;
  font-family: Georgia, serif;
  font-size: 1.4rem;
  margin-bottom: 1rem;
  box-shadow: 0 3px 8px rgba(0,201,160,.3);
  opacity: 1 !important;
  letter-spacing: 0 !important;
}
.testimonial-card p {
  color: rgba(255,255,255,.85) !important;
  font-size: .95rem !important;
  line-height: 1.75 !important;
  font-style: italic;
  margin-top: 0 !important;
  margin-bottom: 1.25rem;
}
.testimonial-source {
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.12);
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--gasp-teal) !important;
  font-size: .85rem !important;
}

@media (max-width: 600px) {
  .home-testimonial, .testimonial-card { padding: 1.5rem 1.25rem 1.25rem !important; }
}

/* ============================================================
   v3.7 — HEADER QR CODE (next to Donate button)
   Small, compact — just the code, no label text, tooltip on hover
   ============================================================ */
.header-ctas .qr-block--header {
  display: flex;
  align-items: center;
  margin-left: .25rem;
}
.header-ctas .qr-block--header .qr-block-text { display: none; } /* hide label — tooltip instead */
.header-ctas .qr-block--header .qr-wrap-link {
  display: block;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
  transition: transform var(--transition);
}.header-ctas .qr-block--header .qr-inner {
  padding: 2px;
  background: #fff;
  display: block;
  line-height: 0;
}
.header-ctas .qr-block--header .qr-inner canvas,
.header-ctas .qr-block--header .qr-inner img {
  width: 40px !important;
  height: 40px !important;
  display: block !important;
}

/* Hide header QR on smaller screens — not enough room */
@media (max-width: 1100px) {
  .header-ctas .qr-block--header { display: none; }
}

/* ============================================================
   v3.8 — QR CODE: fix duplicate rendering
   qrcode.js creates a <canvas> AND a hidden fallback <img> for
   older browsers inside the same container. Earlier CSS rules
   using "canvas, img" selectors made BOTH visible at once.
   Fix: only ever show the FIRST child element in qr-inner.
   ============================================================ */
.qr-inner > *:not(:first-child) {
  display: none !important;
}

/* Belt-and-braces: qrcode.js sometimes sets the img as
   display:none inline style itself — make sure we never
   override that back to visible anywhere */
.qr-inner img[style*="display: none"],
.qr-inner img[style*="display:none"] {
  display: none !important;
}

/* ============================================================
   v4.0 — HEADER QR CODE: match Donate button height exactly
   Donate button height = padding(.55rem top+bottom) + font-size(.82rem)*line-height + border(2px*2)
   ≈ 8.8px + 8.8px + 15.7px + 4px ≈ 37px total — we target 36px to match visually
   ============================================================ */
.header-ctas {
  align-items: center; /* ensure vertical centering of all CTA children */
}

.header-ctas .qr-block--header {
  display: flex;
  align-items: center;
  height: 36px;           /* matches Donate button rendered height */
  margin-left: .25rem;
}
.header-ctas .qr-block--header .qr-wrap-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  width: 36px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
  transition: transform var(--transition);
}
.header-ctas .qr-block--header .qr-wrap-link:hover { transform: scale(1.08); }
.header-ctas .qr-block--header .qr-inner {
  padding: 2px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  width: 36px;
  height: 36px;
  box-sizing: border-box;
}
.header-ctas .qr-block--header .qr-inner canvas,
.header-ctas .qr-block--header .qr-inner img {
  width: 32px !important;
  height: 32px !important;
  display: block !important;
}

/* FIX (v6.7): the "match Donate button height" rule above sets
   display:flex with no media query, which was silently overriding
   the max-width:1100px hide rule earlier in this file (identical
   specificity, later source order wins) — the QR code was showing
   on every phone regardless of orientation. Re-assert the hide rule
   here, last, so it actually wins on small screens as intended. */
@media (max-width: 1100px) {
  .header-ctas .qr-block--header { display: none !important; }
}

/* ============================================================
   v4.6 FIX — TESTIMONIAL CARD TEXT COLOUR BUG
   
   .testimonial-card is used in TWO different contexts:
   1. Light backgrounds (e.g. Parents page) — with inline styles
      setting grey text, intended to be readable on a light card.
   2. Dark backgrounds (.section-dark, e.g. Schools/Students page)
      — needs white text to be readable on a dark navy background.
   
   A previous global rule forced white text with !important onto
   EVERY .testimonial-card, which made light-background instances
   completely invisible (white text on light grey = "blank").
   
   Fix: scope the white-text rule strictly to .section-dark, and
   let light-background instances use their own inline colour.
   ============================================================ */

/* Reset: base testimonial-card text is NOT forced to any colour.
   This lets inline styles (used for light-background instances)
   take effect naturally. */
.testimonial-card p {
  font-size: .95rem !important;
  line-height: 1.75 !important;
  font-style: italic;
  margin-top: 0 !important;
  margin-bottom: 1.25rem;
  /* no color here — inherits from inline style or falls back below */
  color: var(--gasp-grey);
}

/* Dark-section override — ONLY applies inside .section-dark,
   where the card background is dark and white text is required */
.section-dark .testimonial-card p {
  color: rgba(255,255,255,.85) !important;
}
.section-dark .testimonial-source {
  color: var(--gasp-teal) !important;
}

/* Light-background testimonial-card (e.g. Parents page):
   ensure the card itself has a visible border/shadow even
   without inline styles, and default source colour is readable */
.testimonial-card:not(.section-dark .testimonial-card) {
  background: var(--gasp-white);
}
.testimonial-source {
  color: var(--gasp-purple);
}

/* ============================================================
   v4.6 FIX — REDUCE EXCESS GAP BETWEEN IMPACT BAR AND PILLARS
   
   Root cause: both .pillars (the outer section) AND .pillars-grid
   (the inner grid) had their own top/bottom padding of 2.5rem each,
   stacking to create a much larger gap (~80px+) than intended
   between the impact stats bar and the three cards below.
   
   Fix: remove padding from the outer .pillars section entirely
   (the grid's own padding is sufficient), and reduce the grid's
   top padding specifically so the cards sit closer to the stats
   bar above, while keeping reasonable bottom spacing.
   ============================================================ */
.pillars {
  padding: 0 !important;  /* let pillars-grid handle all spacing */
}
.pillars-grid {
  padding: 1.5rem 1.25rem 2.5rem !important; /* less top, normal bottom */
}

@media (max-width: 768px) {
  .pillars-grid {
    padding: 1.25rem 1rem 2rem !important;
  }
}

/* ============================================================
   v4.6 — FORM STATUS NOTICE (success/error after submission)
   ============================================================ */
.gasp-form-notice {
  padding: 1rem 1.25rem;
  border-radius: var(--radius-sm);
  font-size: .93rem;
  margin-bottom: 1.25rem;
  line-height: 1.6;
}
.gasp-form-notice--success {
  background: rgba(0,201,160,.12);
  border: 1px solid rgba(0,201,160,.35);
  color: #0a6b56;
}
.gasp-form-notice--error {
  background: rgba(232,69,60,.1);
  border: 1px solid rgba(232,69,60,.3);
  color: #8f2b24;
}
.gasp-form-notice a { color: inherit; text-decoration: underline; font-weight: 700; }

/* Honeypot field — hidden from real users, visible to bots */
.gasp-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ============================================================
   v4.7 — GOOGLE FORM EMBED
   ============================================================ */
.gasp-google-form-wrap {
  background: var(--gasp-white);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: var(--shadow-md);
}

.gasp-google-form-frame-outer {
  width: 100%;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--gasp-light);
}

.gasp-google-form-iframe {
  width: 100%;
  height: var(--gform-height, 900px);
  border: none;
  display: block;
}

.gasp-google-form-fallback {
  text-align: center;
  font-size: .8rem;
  color: var(--gasp-grey);
  margin-top: .75rem;
}
.gasp-google-form-fallback a {
  color: var(--gasp-purple);
  font-weight: 600;
}
.gasp-google-form-fallback a:hover { color: var(--gasp-teal-dk); }

@media (max-width: 600px) {
  .gasp-google-form-wrap { padding: 1rem; }
  .gasp-google-form-iframe { height: 700px; }
}

/* ============================================================
   v5.0 — DEFINITIVE TESTIMONIAL QUOTE ICON
   Speech-bubble icon in GASP teal, replacing all previous
   quote-mark treatments (grey commas, bare " characters, etc).
   This block is intentionally the LAST word on testimonial
   quote styling — it overrides every earlier iteration.
   ============================================================ */

/* Clear every previous quote-mark approach */
.home-testimonial-quote { display: none !important; }
.home-testimonial::before,
.testimonial-card::before {
  content: '' !important;
  display: block !important;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2072%2062%22%3E%20%3Cpolygon%20points%3D%2230%2C44%2030%2C60%2054%2C44%22%20fill%3D%22%2300C9A0%22%20stroke%3D%22%23049775%22%20stroke-width%3D%223%22%20stroke-linejoin%3D%22round%22/%3E%20%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%2264%22%20height%3D%2246%22%20rx%3D%2212%22%20fill%3D%22%2300C9A0%22%20stroke%3D%22%23049775%22%20stroke-width%3D%223%22/%3E%20%3Ctext%20x%3D%2236%22%20y%3D%2241%22%20font-family%3D%22Georgia%2C%20%27Times%20New%20Roman%27%2C%20serif%22%20font-weight%3D%22bold%22%20font-size%3D%2234%22%20fill%3D%22%2312295E%22%20text-anchor%3D%22middle%22%3E%26%238221%3B%3C/text%3E%20%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  width: 46px !important;
  height: 40px !important;
  opacity: 1 !important;
  font-size: 0 !important;
  letter-spacing: normal !important;
  position: static !important;
}

/* Home testimonial cards — icon sits above the text */
.home-testimonial {
  padding-top: 0 !important;
  position: static !important;
}
.home-testimonial::before {
  margin-bottom: .85rem;
}

/* Dark-section testimonial cards — icon sits above the text,
   normal document flow (not absolutely positioned like before) */
.testimonial-card {
  padding-top: 1.75rem !important;
}
.testimonial-card::before {
  margin-bottom: .85rem;
}
.testimonial-card p {
  margin-top: 0 !important;
}

/* Dark-background variant needs a light border to actually show up */
body .section-dark .testimonial-card,
body .testimonials-inner .testimonial-card {
  border: 1px solid rgba(255,255,255,.18) !important;
}

/* ============================================================
   v5.0 — REDUCE GAP BETWEEN SUB-NAV AND PAGE CONTENT
   Halves the top padding of whichever section immediately
   follows the sub-navigation bar, without affecting spacing
   between other sections further down the same page.
   ============================================================ */
.subnav + section.section {
  padding-top: 2rem;
}
@media (max-width: 768px) {
  .subnav + section.section {
    padding-top: 1.5rem;
  }
}

/* ============================================================
   v5.1 — BREADCRUMBS
   ============================================================ */
.breadcrumbs {
  background: var(--gasp-light);
  border-bottom: 1px solid rgba(43,26,138,0.08);
  padding: .7rem 1.25rem;
}
.breadcrumbs-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  margin: 0; padding: 0;
  max-width: var(--max-w);
  margin-left: auto; margin-right: auto;
}
.breadcrumbs-item {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
}
.breadcrumbs-item a {
  color: var(--gasp-purple);
  font-weight: 600;
  text-decoration: none;
}
.breadcrumbs-item a:hover {
  color: var(--gasp-teal-dk);
  text-decoration: underline;
}
.breadcrumbs-item span[aria-current] {
  color: var(--gasp-grey);
  font-weight: 500;
}
.breadcrumbs-sep {
  color: var(--gasp-grey);
  opacity: .5;
}

@media (max-width: 480px) {
  .breadcrumbs { padding: .5rem 1rem; }
  .breadcrumbs-item { font-size: .72rem; }
}

/* ============================================================
   v5.1 — BACK TO TOP BUTTON
   Fixed bottom-right, hidden until scrolled down, then fades in.
   Positioned to avoid the cookie preferences icon area.
   ============================================================ */
.back-to-top {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  width: 44px;
  height: 44px;
  background: var(--gasp-purple);
  color: var(--gasp-white);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity var(--transition), transform var(--transition), background var(--transition);
}
.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.back-to-top:hover {
  background: var(--gasp-teal);
  color: var(--gasp-navy);
}
.back-to-top:focus-visible {
  outline: 3px solid var(--gasp-teal);
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .back-to-top { bottom: 1rem; right: 1rem; width: 40px; height: 40px; }
}

/* ============================================================
   v5.1 — HEADER SEARCH
   ============================================================ */
.header-search {
  position: relative;
  display: flex;
  align-items: center;
}
.search-toggle {
  background: none;
  border: none;
  color: var(--gasp-white);
  cursor: pointer;
  padding: .5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}
.search-toggle:hover,
.search-toggle[aria-expanded="true"] {
  background: rgba(255,255,255,.12);
}

.search-box {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  display: flex;
  align-items: center;
  background: var(--gasp-white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: .35rem;
  width: 280px;
  max-width: 80vw;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 500;
}
.search-box.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.search-box input[type="search"] {
  flex: 1;
  border: none;
  padding: .5rem .6rem;
  font-size: .88rem;
  color: var(--gasp-dark);
  outline: none;
  background: transparent;
}
.search-box input[type="search"]:focus {
  box-shadow: inset 0 0 0 2px var(--gasp-teal);
  border-radius: var(--radius-sm);
}
.search-box button[type="submit"] {
  background: var(--gasp-teal);
  border: none;
  color: var(--gasp-navy);
  width: 32px; height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition);
}
.search-box button[type="submit"]:hover { background: var(--gasp-teal-dk); }

@media (max-width: 1100px) {
  .search-box { right: -20px; }
}

/* ============================================================
   v5.1 — SEARCH RESULTS PAGE
   ============================================================ */
.search-results-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 760px;
}
.search-result-item {
  background: var(--gasp-white);
  border: 1px solid rgba(43,26,138,.1);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}
.search-result-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.search-result-item h2 {
  font-size: 1.15rem;
  margin-bottom: .5rem;
}
.search-result-item h2 a { color: var(--gasp-purple); text-decoration: none; }
.search-result-item h2 a:hover { color: var(--gasp-teal-dk); }
.search-result-item .search-result-url {
  font-size: .78rem;
  color: var(--gasp-teal-dk);
  margin-bottom: .5rem;
  display: block;
}
.search-result-item p { color: var(--gasp-grey); font-size: .92rem; line-height: 1.65; }
.search-no-results {
  text-align: center;
  padding: 3rem 1.5rem;
  background: var(--gasp-light);
  border-radius: var(--radius-md);
}

/* ============================================================
   v5.1 — TESTIMONIAL CAROUSEL
   Shows 3 cards per "page" on desktop, 1 on mobile.
   Track slides horizontally; JS controls how many cards move
   per click based on viewport width.
   ============================================================ */
.testimonial-carousel {
  position: relative;
  max-width: var(--max-w);
  margin: 0 auto;
  overflow: hidden;
}

.testimonial-track {
  display: flex;
  gap: 1.75rem;
  transition: transform .5s cubic-bezier(0.4,0,0.2,1);
}

/* Each card: 3-up on desktop */
.testimonial-track .home-testimonial {
  flex: 0 0 calc((100% - 2 * 1.75rem) / 3);
  min-width: 0;
}

.testimonial-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--gasp-white);
  border: 2px solid rgba(43,26,138,.15);
  color: var(--gasp-purple);
  width: 42px; height: 42px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
  z-index: 5;
}
.testimonial-nav-btn:hover {
  background: var(--gasp-purple);
  color: var(--gasp-white);
  border-color: var(--gasp-purple);
}
.testimonial-nav-btn.prev { left: -8px; }
.testimonial-nav-btn.next { right: -8px; }
.testimonial-nav-btn:disabled {
  opacity: .3;
  cursor: default;
  pointer-events: none;
}

.testimonial-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 1.75rem;
}
.testimonial-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(43,26,138,.2);
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  padding: 0;
}
.testimonial-dot.active {
  background: var(--gasp-teal);
  transform: scale(1.3);
}

/* Tablet: 2-up */
@media (max-width: 1024px) and (min-width: 701px) {
  .testimonial-track .home-testimonial {
    flex: 0 0 calc((100% - 1.75rem) / 2);
  }
}

/* Mobile: 1-up, swipeable */
@media (max-width: 700px) {
  .testimonial-track .home-testimonial {
    flex: 0 0 100%;
  }
  .testimonial-nav-btn { display: none; } /* rely on swipe + dots on mobile */
  .testimonial-carousel { overflow: visible; }
}

/* ============================================================
   v5.2 — FINAL, AUTHORITATIVE FIXES
   These rules use higher specificity (not just !important) so
   they cannot be silently overridden by older leftover rules
   earlier in this file, regardless of source order.
   ============================================================ */

/* ── Quote icon: simplified to a bare teal glyph, no bubble/circle ── */
.home-testimonial::before,
.testimonial-card::before {
  content: '' !important;
  display: block !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2048%2040%22%3E%3Ctext%20x%3D%220%22%20y%3D%2234%22%20font-family%3D%22Georgia%2C%20%27Times%20New%20Roman%27%2C%20serif%22%20font-weight%3D%22bold%22%20font-size%3D%2248%22%20fill%3D%22%2300C9A0%22%3E%26%238221%3B%3C/text%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: left center !important;
  width: 40px !important;
  height: 34px !important;
  margin-bottom: .6rem !important;
  opacity: 1 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  align-items: unset !important;
  justify-content: unset !important;
}

/* ── Testimonial text colour: default (light backgrounds) ── */
body .testimonial-card p {
  color: var(--gasp-grey) !important;
}
/* ── Testimonial text colour: dark-section override (higher specificity wins) ── */
body .section-dark .testimonial-card p,
body .testimonials-inner .testimonial-card p {
  color: rgba(255,255,255,.9) !important;
}
body .section-dark .testimonial-source,
body .testimonials-inner .testimonial-source {
  color: var(--gasp-teal) !important;
}
/* Light-background testimonial source colour */
body .testimonial-source {
  color: var(--gasp-purple);
}

/* ── Default testimonial-card appearance (light-background usage,
   e.g. Parents page): clean white card, teal top accent ── */
.testimonial-card {
  background: var(--gasp-white);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(43,26,138,.14);
}
.testimonial-card:not(.section-dark .testimonial-card):not(.testimonials-inner .testimonial-card) {
  border-top: 4px solid var(--gasp-teal);
}

/* ============================================================
   v5.3 — QR CODE: server-generated image (no JS dependency)
   Overrides all previous canvas/JS-specific sizing rules.
   ============================================================ */
.qr-generated-img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 160px;
  border-radius: 6px;
  background: #fff;
  padding: 6px;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.qr-wrap-link {
  display: inline-block;
  transition: transform var(--transition);
}
.qr-wrap-link:hover .qr-generated-img {
  transform: scale(1.04);
}

/* Header context — small */
.header-ctas .qr-block--header .qr-generated-img {
  max-width: 36px;
  padding: 2px;
}

/* Footer context — medium */
.footer-col--donate .qr-generated-img {
  max-width: 100px;
}

/* Support / Donate page contexts — standard size */
.qr-block--support .qr-generated-img,
.qr-block--donate .qr-generated-img,
.qr-block--contact .qr-generated-img {
  max-width: 150px;
}

/* ============================================================
   v5.5 — FINAL FIXES: carousel clipping, card padding, breadcrumbs
   ============================================================ */

/* ── Carousel: overflow-hidden moves to new inner viewport,
   outer carousel container stays visible so nav buttons
   (positioned slightly outside the edge) are never clipped ── */
.testimonial-carousel {
  position: relative;
  max-width: var(--max-w);
  margin: 0 auto;
  overflow: visible !important; /* was 'hidden' — caused button clipping */
  padding: 0 44px; /* room for nav buttons without overlapping cards */
}
.testimonial-viewport {
  overflow: hidden;
  width: 100%;
}

/* Nav buttons: pulled inward so they sit just inside the extra
   side padding above, fully visible instead of poking off-edge */
.testimonial-nav-btn.prev { left: 0; }
.testimonial-nav-btn.next { right: 0; }

@media (max-width: 700px) {
  .testimonial-carousel { padding: 0; }
}

/* ── Testimonial card: fix crushed top padding so the quote
   icon has proper breathing room inside the rounded card,
   instead of sitting flush against the top edge ── */
.home-testimonial {
  padding: 2rem 1.75rem 1.75rem !important;
  position: relative !important;
}
.home-testimonial::before {
  margin-top: 0 !important;
  margin-bottom: .75rem !important;
}
.home-testimonial p {
  margin-bottom: 1rem !important;
}

/* ============================================================
   v5.5 — BREADCRUMBS: CSS-level safety net
   In case any cached HTML fragment still contains a breadcrumbs
   block, this forces it hidden unless the toggle is genuinely on
   (signalled by a body class, output fresh on every request).
   ============================================================ */
.breadcrumbs { display: none !important; }
body.gasp-breadcrumbs-on .breadcrumbs { display: block !important; }

/* ============================================================
   v6.11 FIX — Donate button hanging off the edge on phones in
   portrait (e.g. iPhone).

   Root cause: .site-logo and .header-ctas are both flex-shrink:0
   with no wrap on .header-inner, so on a narrow phone the logo
   icon + "GASP Motor Project" title text + hamburger menu + Donate
   button together need more horizontal space than the viewport
   provides. body has overflow-x:hidden, so the excess doesn't
   scroll into view — it's simply clipped, which is what showed as
   the Donate button hanging off the edge.

   An earlier, unrelated rule (.header-ctas .btn-donate, "v1.4 —
   NAV") already sets padding and font-size with !important, so any
   fix here must also use !important AND be declared after that
   rule to win the cascade — placed at the true end of the file to
   guarantee that regardless of future edits above it.

   v6.15: instead of hiding the title text or the search icon to
   make room, stack "GASP / Motor / Project" onto three lines. The
   widest single word ("Project") is far narrower than the full
   string, which frees up enough width to keep the search icon
   visible too — the donate button no longer needs to fight either
   of them for space. overflow-x:auto on .header-inner stays as a
   safety net regardless.
   ============================================================ */
@media (max-width: 480px) {
  .header-inner { padding: 0.5rem 0.6rem !important; gap: 0.5rem !important; }
  .site-logo img { height: 42px !important; }
  .site-logo { gap: 0.35rem !important; }
  .site-logo .logo-title {
    display: flex !important;
    flex-direction: column !important;
    font-size: 0.62rem !important;
    line-height: 1.15 !important;
    letter-spacing: 0.02em;
  }
  .site-logo .logo-title .lt-word { display: block !important; margin-right: 0 !important; }
  .header-search { gap: 0.2rem; }
  .header-ctas { gap: 0.3rem !important; }
  .header-ctas .btn-donate {
    padding: 0.45rem 0.6rem !important;
    font-size: 0.72rem !important;
  }
  .header-ctas .btn-book {
    padding: 0.45rem 0.6rem !important;
    font-size: 0.72rem !important;
  }
}

/* ============================================================
   v6.19 FIX — Donate button hanging off the edge again, this
   time specifically in the 681–900px range (phone landscape /
   tablet portrait) where the full text nav now shows instead of
   the hamburger. .header-ctas .btn-donate has padding/font-size
   set with !important elsewhere in this file, so a plain
   (non-!important) attempt to tighten it in this range was
   silently ignored, same lesson as the ≤480px fix.

   v6.22 CORRECTION: this block originally also added
   overflow-x:auto to .header-inner as a safety net, matching the
   ≤480px fix. That turned out to be wrong here — per the CSS
   overflow spec, an element can't have overflow-x:auto with
   overflow-y truly visible; the browser silently forces overflow-y
   to auto as well, whatever you write. Since dropdown submenus in
   this range are positioned absolutely *below* .header-inner, that
   was clipping them — the actual cause of dropdowns not opening in
   landscape mobile. Removed here; the padding/font-size tightening
   below does the real work of preventing the overflow in the first
   place, so the unsafe safety net isn't needed.
   ============================================================ */
@media (max-width: 900px) and (min-width: 681px) {
  .header-ctas .btn-donate {
    padding: 0.5rem 0.7rem !important;
    font-size: 0.76rem !important;
  }
}

/* ============================================================
   v6.48 — Home page pillar cards: hide the sub-navigation list
   under each card until that card is hovered, saving significant
   vertical space on the home page.
   v6.51 — Revealing it in normal flow shifted the whole grid row
   taller. Changed to an absolutely-positioned overlay so it no
   longer affects layout, and picked up the toolbar's teal styling
   for consistency.
   v6.52 — The below-card overlay still didn't work in practice:
   full card width with any gap at all between card and submenu
   created a dead zone the mouse had to cross, closing the menu
   before it could be used. Switched to a side flyout instead —
   opens to the right of the first two cards, left of the third
   (so it never runs off the edge of the row) — positioned flush
   against the card with zero gap, so there's no dead zone to lose
   hover through in the first place.
   ============================================================ */
/* v6.56 — Found the actual root cause of the submenu never
   becoming visible, confirmed by direct testing: .pillar-card-wrap
   itself has display:contents set elsewhere in this file ("children
   participate directly in pillars-grid"). display:contents makes an
   element's own box disappear completely — position:relative on it
   (set above) was having literally no effect, because there was no
   box left for it to apply to. The absolutely-positioned submenu
   was then falling through to whatever ancestor DOES have a real
   box as its containing block — nowhere near the card — which is
   why forcing the class on never produced any visible change.
   Overriding display back to flex (matching its original, pre-grid
   layout) gives it a real box again, so position:relative finally
   means something and the submenu can anchor to the actual card. */
/* v6.57 — Redesigned once the submenu was actually displaying:
   solid teal read as a coloured block rather than a menu, so this
   switched to white with a teal accent, rounded corners, no
   chevrons, and an opacity/transform based fade-in (display can't
   be animated, so the show/hide mechanism changed to support that).
   v6.58 — Repositioned to sit inside the card, offset right below
   the header.
   v6.59 — Back to appearing below the whole card (below "Find Out
   More" / "View Services" / "Get Involved"), full card width, per
   further feedback — still position:absolute so it never affects
   the section's height, still flush/zero-gap against the card so
   hovering across into it doesn't cross any dead space. Colour
   scheme now matches .pillar-card-footer directly (white
   background, purple text turning teal on hover) rather than a
   teal block, so the menu reads as a natural continuation of that
   footer rather than a separate coloured surface.
   Also: the three cards are now equal height (all matching the
   tallest one, i.e. About Us with the longest content) —
   .pillars-grid had align-items:start, which is exactly what was
   letting the shorter cards hug their own content instead of
   stretching to match; overridden to stretch, with the card body
   given flex:1 so it's the body specifically that absorbs the
   extra height (keeping the footer pinned to the bottom edge on
   every card, not just the tallest one).
   ============================================================ */
.pillars-grid { align-items: stretch !important; }
.pillar-card-wrap {
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
}
.pillar-card-body { flex: 1 !important; }
.pillar-subnav {
  display: block !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  grid-row: auto !important; grid-column: auto !important;
  top: 100% !important;
  left: 0 !important; right: 0 !important;
  width: auto !important;
  margin: 0 !important;
  z-index: 60 !important;
  background: var(--gasp-purple-lt) !important;
  border: 1px solid var(--gasp-navy) !important;
  border-top: none !important;
  border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
  box-shadow: 0 16px 36px rgba(26,16,96,.18) !important;
  padding: .4rem 0 !important;
  transform: translateY(-6px) !important;
  transition: opacity .18s ease, transform .18s ease, visibility .18s !important;
}
.pillar-card-wrap:hover .pillar-subnav,
.pillar-card-wrap:focus-within .pillar-subnav,
.pillar-card-wrap.subnav-open .pillar-subnav {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}
.pillar-subnav li {
  border-bottom: none !important;
}
.pillar-subnav li a {
  display: block !important;
  color: var(--gasp-white) !important;
  font-family: var(--font-display) !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  padding: .6rem 1.75rem !important;
  border-radius: var(--radius-sm) !important;
  transition: background .15s ease, color .15s ease, padding-left .15s ease !important;
}
.pillar-subnav li a:hover {
  background: var(--gasp-navy) !important;
  color: var(--gasp-teal) !important;
  padding-left: 2.05rem !important;
}
.pillar-subnav li a::after { content: none !important; }

/* ============================================================
   v6.48 FIX — Search icon still showing on phone portrait despite
   an earlier hide rule at the 480px breakpoint. Cause: a later,
   unconditional ".header-search { display: flex; }" base rule
   (applies at every width) has equal specificity and comes after
   that rule in the file, so it silently won the tie — the same
   category of bug hit several times already in this file. Fixed
   here with !important, placed last, matching the pattern already
   proven reliable elsewhere.
   ============================================================ */
@media (max-width: 480px) {
  .header-search { display: none !important; }
}

/* ============================================================
   v6.49 — Tighter underline inset to match the very compact nav
   item padding used at 480px and below (0.4rem horizontal) — the
   default 0.9rem inset was sized for normal desktop padding and
   would leave a disproportionately short underline on these much
   narrower items.
   ============================================================ */
@media (max-width: 480px) and (min-width: 341px) {
  .primary-nav .current-menu-item > a::after,
  .primary-nav .current-menu-ancestor > a::after,
  .primary-nav #primary-menu .current-menu-item > a::after,
  .primary-nav #primary-menu .current-menu-ancestor > a::after,
  .primary-nav .nav-item.current > a::after,
  .primary-nav a.current::after,
  .primary-nav .gasp-current-section > a::after,
  .primary-nav a.gasp-current-section::after,
  .primary-nav #primary-menu a.gasp-current-section::after,
  .primary-nav #primary-menu .gasp-current-section > a::after {
    left: 0.25rem !important;
    right: 0.25rem !important;
  }
}

/* ============================================================
   v6.49 — Further reduce the Donate button on phone portrait now
   that the search icon is confirmed hidden and there's genuinely
   room — shrinking it a bit more gives extra margin so it reliably
   stays on the same row as the nav and doesn't wrap to a second
   line on any real device.
   ============================================================ */
@media (max-width: 480px) {
  .header-ctas .btn-donate {
    padding: 0.4rem 0.5rem !important;
    font-size: 0.66rem !important;
  }
}

/* ============================================================
   v6.51 — White turned out to have the same problem as navy did,
   just on the opposite kind of page: dropdowns could blend into
   white/light page content just as easily as they blended into the
   navy header before.
   v6.68 — Switched again, this time to match the top-level nav
   links' own hover colour exactly (.primary-nav #primary-menu
   .menu-item > a:hover uses purple-lt background + teal text) —
   so the dropdown reads as a direct continuation of that hover
   state rather than introducing a third, separate colour scheme.
   ============================================================ */
.dropdown,
.primary-nav #primary-menu .sub-menu {
  background: var(--gasp-purple-lt) !important;
  border: 1px solid var(--gasp-navy) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.25) !important;
}
.dropdown li a,
.primary-nav #primary-menu .sub-menu .menu-item > a {
  color: var(--gasp-white) !important;
}
.dropdown li a:hover,
.primary-nav #primary-menu .sub-menu .menu-item > a:hover {
  background: var(--gasp-navy) !important;
  color: var(--gasp-teal) !important;
}

/* ============================================================
   v6.55 — Sub-page navigation (the "About GASP | Our Team | Our
   Impact..." row) wasn't staying visible on scroll despite already
   having position:sticky set. Root cause: the header itself is
   ALSO position:sticky at top:0 (a nearby comment claiming
   otherwise was simply stale/wrong) — with the subnav also trying
   to stick at top:0, both were competing for the exact same spot,
   and the header, with a much higher z-index, was simply covering
   the subnav once both became stuck. Giving the subnav a top value
   matching the header's actual height lets it stick just below the
   header instead of underneath it. The header is a different
   height at different breakpoints (smaller logo/padding on
   phones), so this adjusts alongside those same breakpoints.
   ============================================================ */
.subnav { top: 76px !important; }
@media (max-width: 900px) {
  /* Recalculated from the header's actual dimensions at this range
     (42px logo + ~19px total vertical padding ≈ 61px) — the
     previous 64px was a reasonably close estimate, not a confirmed
     regression like the 480px value below, but tightened slightly
     anyway while addressing the reported landscape gap. */
  .subnav { top: 61px !important; }
}
@media (max-width: 480px) {
  /* v6.89 — Header at this width has since been shrunk considerably
     (logo down to 32px, tighter padding, across v6.84–v6.88) to fix
     the donate button wrapping issue, but this offset was never
     updated to match — leaving a gap between the header and the
     subnav where it stuck too far down, with page content visible
     scrolling through the gap. Recalculated from the header's
     actual current height (32px logo + 16px total vertical
     padding = 48px) rather than the old, taller value. */
  .subnav { top: 48px !important; }
}

/* ============================================================
   v6.69 — Reinforcing .btn-donate's hover state with !important.
   The CSS already matches .btn-primary's hover exactly (navy text
   on a darker teal background) and I couldn't find a conflicting
   rule affecting it specifically on the Contact Us page, but
   without being able to see the live page directly, the safest fix
   is to remove any possibility of it losing a cascade fight rather
   than continue guessing at an invisible one.
   ============================================================ */
.btn-donate:hover {
  background: var(--gasp-teal-dk) !important;
  border-color: var(--gasp-teal-dk) !important;
  color: var(--gasp-navy) !important;
}

/* ============================================================
   v6.69 — Quote/testimonial attribution (school name, parent,
   funder, etc.) was already consistently placed AFTER the quote
   text in the markup everywhere on the site, but with no flex
   layout or margin-top:auto, it just followed immediately after
   whatever length of quote preceded it — meaning in a grid of
   cards with different quote lengths, the attribution landed at a
   different visual height on every card instead of lining up
   along a shared bottom edge. Making the card a flex column and
   pushing the source to the bottom with margin-top:auto fixes
   this for both testimonial patterns used across the site (the
   plain .testimonial-card grid, and the home page's distinct
   .home-testimonial style).
   ============================================================ */
.testimonial-card {
  display: flex !important;
  flex-direction: column !important;
}
.testimonial-source {
  margin-top: auto !important;
  padding-top: 1rem;
}
.home-testimonial {
  display: flex !important;
  flex-direction: column !important;
}
.home-testimonial-source {
  margin-top: auto !important;
}
.home-testimonial-logo {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 26px;
  height: auto;
  opacity: 0.92;
}

/* ============================================================
   v6.70 — Found the actual cause of the Contact Us donate button
   showing grey text: .contact-info p, .contact-info a sets EVERY
   link inside .contact-info to grey (for the plain phone/email/
   website links there), and since that selector has two classes
   against .btn-donate's one, it wins on specificity alone — no
   !important needed on either side, file order doesn't even come
   into it. My earlier fix only reinforced the :hover state with
   !important, not the base state, which is why the grey persisted
   even after that. Reinforcing the base colour here the same way.
   ============================================================ */
.btn-donate {
  background: var(--gasp-teal) !important;
  color: var(--gasp-navy) !important;
  border-color: var(--gasp-teal) !important;
}

/* ============================================================
   v6.73 — Pillar card bottom corners weren't actually rounded to
   match the header's top corners, even though the wrapper itself
   has border-radius on all four sides. Cause: that wrapper
   deliberately has no overflow:hidden (needed so the submenu isn't
   clipped — see the v6.56/v6.66 fixes), so nothing was clipping the
   footer's own square background into the wrapper's rounded shape.
   Simplest fix is giving the footer its own matching bottom-radius
   directly, the same way the header already has its own top-radius
   — no clipping involved, so the submenu positioning is unaffected.
   ============================================================ */
.pillar-card-footer {
  border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
}

/* ============================================================
   v6.74 — Same issue as the pillar card footer corners: the
   toolbar dropdown container has rounded corners, but its
   individual items had no border-radius of their own — so the
   first/last item's square hover highlight could poke out past
   the container's rounded top/bottom edge. The pillar submenu
   items already had this (border-radius: var(--radius-sm)); the
   toolbar dropdown just never got the same treatment.
   ============================================================ */
.dropdown li a,
.primary-nav #primary-menu .sub-menu .menu-item > a {
  border-radius: var(--radius-sm) !important;
}

/* ============================================================
   v6.75 — Two related corner fixes for the pillar cards and their
   submenus:
   1. The submenu's bottom corners used --radius-sm (6px) while the
      card's top corners use --radius-md (12px) — genuinely
      different sizes, not just a perception thing. Matched to
      --radius-md so both ends of the card+submenu unit round by
      the same amount.
   2. While the submenu is open, it sits flush against the card
      with no gap — but the card's own bottom corners were still
      rounded, which (now that the submenu's top edge is square,
      since it butts directly against the card) left a small
      visible notch at each bottom corner where the card's curve
      pulled away from the submenu's straight edge. Squaring the
      card's bottom corners off specifically while the submenu is
      showing makes the two read as one continuous shape instead of
      two separate rounded boxes stacked with a gap between them.
   ============================================================ */
.pillar-card-wrap:hover .pillar-card-footer,
.pillar-card-wrap:focus-within .pillar-card-footer,
.pillar-card-wrap.subnav-open .pillar-card-footer {
  border-radius: 0 !important;
}

/* ============================================================
   v6.79 — Footer charity number reported as hard to see on mobile
   portrait/landscape. The CSS already sets it to teal, but
   reinforcing with !important here removes any chance of a
   conflicting rule (found or not) winning on a narrower viewport.
   v6.80 — Still reported as showing a lighter blue/purple rather
   than teal even with that fix in place. Escalated to the literal
   hex value instead of var(--gasp-teal), removing any possibility
   — however unlikely — of the variable itself resolving to
   something unexpected in this context.
   ============================================================ */
.footer-brand .charity-no {
  color: #00C9A0 !important;
}

/* ============================================================
   v6.81 — Donate button still wrapping to a second row below the
   logo on a real device (confirmed via screenshot), despite the
   480px tightening already in place. Reducing further for more
   safety margin — this is now quite small, but a working, slightly
   snug button beats one that wraps to its own row.
   ============================================================ */
@media (max-width: 480px) {
  .header-ctas .btn-donate {
    padding: 0.32rem 0.4rem !important;
    font-size: 0.58rem !important;
  }
  .header-ctas .btn-donate .heart-icon {
    font-size: 0.7rem;
  }
}

/* ============================================================
   v6.82 — Attempted fix removed for v6.83: hiding the heart icon
   traded away a liked visual detail to solve what turned out to be
   a Chrome-specific rendering quirk rather than a universal fit
   problem — Edge renders this correctly at the same width, so the
   heart is staying. If Chrome specifically still wraps, that's a
   narrower, separate problem to solve without affecting how this
   looks in every other browser.
   ============================================================ */

/* ============================================================
   v6.84 — Confirmed via DevTools emulation at 400x642 that the CSS
   itself is correct at that width — it renders fine there. Desktop
   Chrome's emulation mode still uses desktop Chrome's own rendering
   engine even when simulating a phone viewport though, so it can't
   fully reproduce how a real iPhone measures fonts. Rather than
   keep shrinking the donate button specifically (the heart is
   staying, per feedback), spreading a small amount of extra saving
   across the logo and nav gaps too, so the fit has genuine margin
   instead of sitting right on the edge of what one specific
   rendering engine happens to calculate.
   ============================================================ */
@media (max-width: 480px) {
  .site-logo img {
    height: 36px !important;
  }
  .header-inner {
    gap: 0.35rem !important;
  }
  .nav-item > a,
  .primary-nav #primary-menu .menu-item > a {
    padding: 0.28rem 0.32rem !important;
  }
}

/* ============================================================
   v6.85 — v6.84's modest tightening wasn't enough — confirmed
   still wrapping at 393px (iPhone 16 Pro's actual width) even with
   that update. Went further: nav items and the donate button both
   reduced again, and the gap between header sections tightened
   once more. Still keeping the heart icon per feedback.
   v6.86 — Confirmed fitting with room to spare, so eased back
   roughly halfway toward v6.84's looser values — turned out to be
   too much easing, wrapping returned. The real sweet spot is
   between v6.85 and v6.86, closer to v6.85.
   v6.87 — Eased back only slightly from v6.85's confirmed-working
   values this time, rather than halfway. Erring toward "reliably
   fits" as the priority — some leftover space is a fine trade for
   not going through another wrap/no-wrap cycle.
   v6.88 — Confirmed fitting well with good spacing, but the text
   was a little small to read comfortably. Bumped font sizes back
   up slightly, and tightened padding/gaps a little further to
   compensate for the extra width the larger text needs — aiming to
   keep the same overall fit while making it more legible.
   ============================================================ */
@media (max-width: 480px) {
  .header-inner {
    gap: 0.24rem !important;
    padding: 0.5rem 0.38rem !important;
  }
  .site-logo img {
    height: 32px !important;
  }
  .nav-item > a,
  .primary-nav #primary-menu .menu-item > a {
    padding: 0.22rem 0.22rem !important;
    font-size: 0.68rem !important;
  }
  .header-ctas {
    gap: 0.14rem !important;
  }
  .header-ctas .btn-donate {
    padding: 0.28rem 0.3rem !important;
    font-size: 0.62rem !important;
  }
  .header-ctas .btn-donate .heart-icon {
    font-size: 0.7rem;
  }
}

/* ============================================================
   v6.94 — Two underline issues reported on mobile:
   1. Landscape (~852px, e.g. iPhone 16 Pro rotated — falls in the
      681-900px range): nav items there have much tighter padding
      than desktop (0.5rem vs the full desktop padding), but the
      underline was still using the desktop-sized 0.9rem inset on
      each side — disproportionately large for the now much
      narrower item, making the bar look too short. Never adjusted
      when that range's nav-item padding was tightened.
   2. Portrait (≤480px): the earlier inset fix for this range only
      ever touched the horizontal (left/right) position, never the
      vertical one — as this range's padding got progressively
      tightened in later updates (chasing the donate-button-fit
      issue), the bar's fixed distance from the bottom stayed the
      same while the item itself got shorter, so it ended up
      sitting closer to the text than intended. Landscape's
      vertical position was untouched by that work and is correct
      as-is, so left alone here.
   ============================================================ */
@media (max-width: 900px) and (min-width: 681px) {
  .primary-nav .current-menu-item > a::after,
  .primary-nav .current-menu-ancestor > a::after,
  .primary-nav #primary-menu .current-menu-item > a::after,
  .primary-nav #primary-menu .current-menu-ancestor > a::after,
  .primary-nav .nav-item.current > a::after,
  .primary-nav a.current::after,
  .primary-nav .gasp-current-section > a::after,
  .primary-nav a.gasp-current-section::after,
  .primary-nav #primary-menu a.gasp-current-section::after,
  .primary-nav #primary-menu .gasp-current-section > a::after {
    left: 0.4rem !important;
    right: 0.4rem !important;
  }
}
@media (max-width: 480px) and (min-width: 341px) {
  .primary-nav .current-menu-item > a::after,
  .primary-nav .current-menu-ancestor > a::after,
  .primary-nav #primary-menu .current-menu-item > a::after,
  .primary-nav #primary-menu .current-menu-ancestor > a::after,
  .primary-nav .nav-item.current > a::after,
  .primary-nav a.current::after,
  .primary-nav .gasp-current-section > a::after,
  .primary-nav a.gasp-current-section::after,
  .primary-nav #primary-menu a.gasp-current-section::after,
  .primary-nav #primary-menu .gasp-current-section > a::after {
    bottom: 0.12rem !important;
  }
}

/* ============================================================
   v6.95 — The previous fix was aimed at the top-level nav bar
   underline (About Us / Our Services / Supporters), but the actual
   report was about the underline WITHIN the dropdown submenu
   (marking which specific sub-page, e.g. "Schools & Educators", is
   the current one). Dropdown items have different padding (.6rem
   vertical) to the top-level items, so the same vertical offset
   doesn't suit both — giving dropdown items their own explicitly
   scoped rule here rather than sharing one value between two
   differently-sized contexts. More specific selector (extra
   .sub-menu ancestor) means this correctly overrides the general
   rule for dropdown items only, leaving the top-level nav bar's
   underline exactly as it was.
   ============================================================ */
.primary-nav #primary-menu .sub-menu .current-menu-item > a::after,
.primary-nav #primary-menu .sub-menu .current-menu-ancestor > a::after,
.primary-nav #primary-menu .sub-menu a.gasp-current-section::after {
  bottom: 0.15rem !important;
}

/* ============================================================
   v7.0 — Newsletter signup bar, full width across the top of the
   footer. Reuses the same form-handling system as every other
   form on the site (Form Submissions admin, email notification,
   spam honeypot) via a "Newsletter Signup" form type, rather than
   a separate bespoke mechanism.
   ============================================================ */
.newsletter-signup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.75rem 0;
}
.newsletter-signup-title {
  color: var(--gasp-white);
  font-size: 1.15rem;
  margin-bottom: 0.2rem;
}
.newsletter-signup-desc {
  color: rgba(255,255,255,0.65);
  font-size: 0.92rem;
  margin: 0;
}
.newsletter-signup-form { flex-shrink: 0; }
.newsletter-signup-row {
  display: flex;
  gap: 0.6rem;
}
.newsletter-signup-row input[type="email"] {
  padding: 0.7rem 1rem;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.08);
  color: var(--gasp-white);
  font-size: 0.9rem;
  min-width: 220px;
}
.newsletter-signup-row input[type="email"]::placeholder { color: rgba(255,255,255,0.5); }
.newsletter-signup-row input[type="email"]:focus {
  outline: none;
  border-color: var(--gasp-teal);
  box-shadow: 0 0 0 3px rgba(0,201,160,0.2);
}
@media (max-width: 680px) {
  .newsletter-signup { flex-direction: column; align-items: flex-start; }
  .newsletter-signup-row { width: 100%; }
  .newsletter-signup-row input[type="email"] { flex: 1; min-width: 0; }
}

/* ============================================================
   v7.2.0 — Scroll progress indicator: a thin bar just below the
   sticky header that fills as the visitor scrolls down the page,
   with the real GASP clamp icon riding at the leading edge instead
   of a plain dot. Reuses the same header-height values already
   established for the sticky subnav (76px desktop, 61px tablet/
   landscape, 48px phone portrait) so it sits flush under the
   header at every breakpoint rather than needing its own separate
   set of numbers.
   ============================================================ */
/* Sits as the first child inside .subnav (see the JS that inserts
   it), which already has position:sticky — that's enough to serve
   as the containing block for this absolutely-positioned strip
   without needing its own separate positioning context. Placed at
   the very top edge of the subnav bar. */
.gasp-scroll-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 5;
  pointer-events: none;
}
.gasp-scroll-progress-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0%;
  background: rgba(0,201,160,0.6);
}
.gasp-scroll-progress-icon {
  position: absolute;
  top: 3px;
  left: 8px;
  width: 14px;
  height: auto;
}

/* ============================================================
   v7.2.0 — Clamp icon accent on testimonial cards, top-left
   corner. Added as a new, separate element rather than modifying
   the existing quote-mark pseudo-element logic, which has enough
   accumulated history across this file that changing it directly
   carries more risk than adding this alongside it.
   ============================================================ */
.testimonial-card {
  position: relative;
}
.testimonial-card-icon {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 22px;
  height: auto;
  opacity: 1;
}

/* ============================================================
   v7.2.0 — Topic list bullets replaced with the real clamp icon
   instead of a plain checkmark, using background-image (rather
   than content:url()) for reliable sizing control.
   ============================================================ */
.topic-list li::before {
  content: '' !important;
  background-image: url('assets/images/gasp-icon.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 11px;
  height: 19px;
  top: 0.55rem;
}

/* ============================================================
   v7.2.3 — The scroll progress bar moved to a fixed bar at the
   bottom of the viewport (see .gasp-scroll-progress above),
   26px tall — .back-to-top was already fixed at the bottom-right
   at the same height, so it would now sit partly underneath the
   new bar. Raised it to clear the bar with a small gap to spare.
   ============================================================ */
.back-to-top {
  bottom: calc(1.25rem + 26px) !important;
}