/* ==========================================================================
   THRYA HEALTH AND RESEARCH FOUNDATION
   Stylesheet: WHAT WE DO (what-we-do.html)

   Structure of this file:
     1.  Design tokens          (kept identical across every page stylesheet)
     2.  Reset & base
     3.  Typography utilities
     4.  Buttons & links
     5.  Layout utilities
     6.  Site header & navigation
     7.  Site footer
     8.  Scroll reveal / motion
     9.  PAGE — Vision hero
     10. PAGE — Mission
     11. PAGE — Approach pillars
     12. PAGE — Focus areas
     13. PAGE — Programmes detail
     14. PAGE — CTA band
     15. Back-to-top button
     16. MOBILE RESPONSIVE (section by section, labelled)
     17. MOBILE RESPONSIVE — Nav & header      (rebuilt from scratch)
     18. MOBILE RESPONSIVE — Vision hero       (rebuilt from scratch)
     19. MOBILE RESPONSIVE — Mission           (rebuilt from scratch)
     20. MOBILE RESPONSIVE — Approach pillars  (rebuilt from scratch)
     21. MOBILE RESPONSIVE — Focus areas       (rebuilt from scratch)
     22. MOBILE RESPONSIVE — Programmes detail (rebuilt from scratch)
     23. MOBILE RESPONSIVE — CTA band          (rebuilt from scratch)
     24. MOBILE RESPONSIVE — Footer            (rebuilt from scratch)
     25. MOBILE RESPONSIVE — Back to top       (rebuilt from scratch)
   ========================================================================== */


/* ----------------------------------------------------------------------
   1. DESIGN TOKENS
   ---------------------------------------------------------------------- */
:root{
  --color-cream:        #FBF6EF;
  --color-cream-deep:   #F3E8D8;
  --color-paper:        #FFFDF9;
  --color-forest:       #14332A;
  --color-forest-2:     #1F5040;
  --color-terracotta:   #B85C34;
  --color-terracotta-deep:#93482A;
  --color-gold:         #C08A34;
  --color-ink:          #211D18;
  --color-ink-soft:     #5B564D;
  --color-line:         #E3D6C2;
  --color-sage:         #E3E8D6;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --space-xs: .5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-xxl: 8rem;

  --radius-sm: 8px;
  --radius-md: 18px;
  --radius-lg: 32px;

  --shadow-soft: 0 24px 60px -30px rgba(20,51,42,.35);
  --shadow-lift: 0 14px 34px -18px rgba(20,51,42,.28);

  --container-w: 1200px;
  /* Left offset of the .nav-capsule pill itself (the rounded glass bar),
     computed the way the browser positions it: .header-inner is centered
     at max-width 1200px inside .site-header (which itself has 1.5rem side
     padding), so once the viewport is wider than 1200px + that padding,
     extra space opens up on both sides — (100vw - 1248px)/2 — on top of
     the fixed padding stack up to the capsule's own edge (site-header
     1.5rem + header-inner .6rem = 2.1rem / 33.6px — NOT including the
     capsule's own 1.6rem inner padding, since we want the pill's outer
     edge, not the logo text sitting inside it). max(...,0px) keeps it
     from going negative on narrower screens. */
  --hero-indent: calc(33.6px + max((100vw - 1248px) / 2, 0px));
  --header-h: 124px;
}

/* ----------------------------------------------------------------------
   2. RESET & BASE
   ---------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
body{ margin: 0; background: var(--color-cream); color: var(--color-ink); font-family: var(--font-body); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4{ font-family: var(--font-display); color: var(--color-forest); margin: 0 0 .6em; line-height: 1.15; font-weight: 500; }
p{ margin: 0 0 1em; }
button{ font-family: inherit; cursor: pointer; }

.skip-link{ position: absolute; left: -999px; top: 0; background: var(--color-forest); color: #fff; padding: .8rem 1.2rem; z-index: 999; border-radius: 0 0 8px 0; }
.skip-link:focus{ left: 0; }
:focus-visible{ outline: 2.5px solid var(--color-terracotta); outline-offset: 3px; }

/* ----------------------------------------------------------------------
   3. TYPOGRAPHY UTILITIES
   ---------------------------------------------------------------------- */
.eyebrow{ font-family: var(--font-body); font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-terracotta); margin: 0 0 .9rem; display: inline-block; }
.eyebrow-light{ color: var(--color-gold); text-shadow: 0 1px 10px rgba(10,24,19,.55); }
.section-head{ max-width: 1250px; margin: 0 auto var(--space-xl); text-align: center; }
.section-head h2{ font-size: clamp(1.8rem, 3vw, 2.6rem); }
.section-lede{ color: var(--color-ink-soft); font-size: 1.08rem; }

/* ----------------------------------------------------------------------
   4. BUTTONS & LINKS
   ---------------------------------------------------------------------- */
.btn{ display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .95rem 1.9rem; border-radius: 999px; font-weight: 600; font-size: .98rem; border: 1.5px solid transparent; transition: transform .2s ease, background .25s ease, color .25s ease, border-color .25s ease; white-space: nowrap; }
.btn:hover{ transform: translateY(-2px); }
.btn-primary{ background: var(--color-terracotta); color: #fff; box-shadow: var(--shadow-lift); }
.btn-primary:hover{ background: var(--color-terracotta-deep); }
.btn-outline-light{ border-color: rgba(255,255,255,.55); color: #fff; }
.btn-outline-light:hover{ background: #fff; color: var(--color-forest); }

/* ----------------------------------------------------------------------
   5. LAYOUT UTILITIES
   ---------------------------------------------------------------------- */
.container{ max-width: var(--container-w); margin: 0 auto; padding: 0 1.5rem; }
.hero-actions{ display: flex; gap: 1rem; flex-wrap: wrap; }

/* ----------------------------------------------------------------------
   6. SITE HEADER & NAVIGATION — floating glass capsule
   (identical markup/styles to the Home page header)
   ---------------------------------------------------------------------- */
.site-header{
  /* NOTE: no backdrop-filter/transform directly on this element or on
     .header-inner — either would make this sticky header the containing
     block for any position:fixed descendant (like the mobile nav panel
     below), trapping it inside the header's own box instead of the
     viewport. The glass effect instead lives on .header-inner::before,
     a pseudo-element, which never becomes a containing block for real
     DOM descendants like .site-nav. */
  position: sticky; top: 0; z-index: 100; width: 100%;
  padding: 14px 1.5rem;
  background: transparent;
  transition: padding .35s ease;
}
.site-header.is-scrolled{ padding-top: 10px; padding-bottom: 10px; }

.header-inner{
  position: relative;
  height: 96px;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 .6rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
/* the nav pill: logo + links, its own glass capsule */
.nav-capsule{
  position: relative; flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  height: 70px; padding: 0 .6rem 0 1.6rem;
}
.nav-capsule::before{
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  border-radius: 999px;
  background: rgba(251, 246, 239, .62);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow:
    0 18px 40px -22px rgba(20, 51, 42, .35),
    0 2px 8px -2px rgba(20, 51, 42, .12),
    inset 0 1px 0 rgba(255, 255, 255, .55);
  transition: background .35s ease, box-shadow .35s ease;
}
.site-header.is-scrolled .nav-capsule::before{
  background: rgba(251, 246, 239, .86);
  box-shadow:
    0 22px 44px -20px rgba(20, 51, 42, .4),
    0 2px 10px -2px rgba(20, 51, 42, .16),
    inset 0 1px 0 rgba(255, 255, 255, .6);
}

.brand{ display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.brand-mark {
    width: 152px;
    height: 47px;
    object-fit: contain;
}.brand-name{ font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; letter-spacing: .04em; color: var(--color-forest); }

.site-nav{ display: flex; align-items: center; gap: .25rem; }
.nav-link{
  font-weight: 600; font-size: .92rem; color: var(--color-ink);
  padding: .6rem 1.05rem; border-radius: 999px;
  transition: color .25s ease, background .25s ease;
}
.nav-link:hover,
.nav-link.is-active{
  color: var(--color-terracotta); background: rgba(20, 51, 42, .07);
}

/* separate floating CTA pill, outside the nav capsule — dark, with a
   circular arrow bubble, matching a "book appointment" style hero CTA */
.nav-cta{
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: .7rem;
  background: var(--color-forest); color: #fff !important; font-weight: 600; font-size: .92rem;
  padding: .5rem .5rem .5rem 1.4rem; border-radius: 999px;
  box-shadow: 0 14px 28px -12px rgba(20, 51, 42, .55);
  transition: background .25s ease, transform .2s ease, box-shadow .25s ease;
}
.nav-cta:hover{ background: var(--color-forest-deep, #0E241D); transform: translateY(-2px); box-shadow: 0 18px 32px -12px rgba(20, 51, 42, .65); }
.nav-cta-arrow{
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; background: var(--color-terracotta);
  font-size: 1rem; line-height: 1;
}

.nav-toggle{
  display: none;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    padding: 0;
    margin-right: 1.2rem;
}
.nav-toggle span{ display: block; height: 2px; width: 100%; background: var(--color-forest); border-radius: 2px; transition: transform .3s ease, opacity .3s ease; }
.nav-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity: 0; }
.nav-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ----------------------------------------------------------------------
   7. SITE FOOTER
   ---------------------------------------------------------------------- */
.site-footer{
  position: relative;
  background: linear-gradient(175deg, var(--color-forest) 0%, #142b23 100%);
  color: #E9E3D6;
  padding: var(--space-xl) 0 var(--space-md);
  margin-top: var(--space-xxl);
  overflow: hidden;
}

/* subtle top accent line */
.site-footer::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-terracotta), var(--color-gold), var(--color-terracotta));
  opacity: .85;
}

/* faint radial glow for depth, matching CTA band */
.site-footer::after{
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% 0%, rgba(214, 163, 63, .12), transparent 55%);
  pointer-events: none;
}

.footer-inner{
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.footer-logo{
  display: block;
  width: 71px;
  height: 65px;
  margin-left: 0px;
  margin-top: -6px;
  margin-bottom: .4rem;
  opacity: 1;
}

.footer-name{
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: #fff;
  margin: 1.1rem 0 .3rem;
  line-height: 1.35;
}

.footer-tagline{
  color: var(--color-gold);
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0;
}

.footer-col h3{
  font-family: var(--font-body);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 1rem;
  position: relative;
  padding-bottom: .6rem;
}
.footer-col h3::after{
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 24px; height: 2px;
  background: var(--color-terracotta);
}

.footer-col a, .footer-col p{
  display: block;
  color: #D9D2C2;
  font-size: .95rem;
  margin-bottom: .65rem;
  line-height: 1.5;
}

.footer-col a{
  position: relative;
  width: fit-content;
  transition: color .25s ease, transform .25s ease;
}
.footer-col a:hover{
  color: #fff;
  transform: translateX(3px);
}

.footer-bottom{
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-md);
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-bottom p{
  margin: 0;
  font-size: .85rem;
  color: #B9AF9C;
}

.footer-social{ display: flex; gap: .9rem; }
.footer-social a{
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center;
  color: #E9E3D6;
  transition: background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.footer-social a:hover{
  background: var(--color-terracotta);
  border-color: var(--color-terracotta);
  transform: translateY(-3px);
  box-shadow: 0 8px 18px -6px rgba(196, 106, 79, .55);
}


/* ----------------------------------------------------------------------
   8. SCROLL REVEAL / MOTION
   ---------------------------------------------------------------------- */
.js [data-reveal]{ opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.js [data-reveal].is-visible{ opacity: 1; transform: translateY(0); }

/* ----------------------------------------------------------------------
   PAGE — VISION HERO
   ---------------------------------------------------------------------- */
.vision-hero{
  position: relative;
  overflow: hidden;
  padding: var(--space-xxl) 0;
  background:
    linear-gradient(165deg, rgba(10,24,19,.32) 0%, rgba(10,24,19,.42) 100%),
    url('images/Thrya/Tribe1.jpg.webp') center/cover no-repeat;
  border-radius: 12px;
}
.vision-hero::before{
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 90% -12%, rgba(192,138,52,.24), transparent 55%),
    radial-gradient(circle at 2% 118%, rgba(31,80,64,.6), transparent 50%);
}
.vision-hero .container{ position: relative; z-index: 1; }
.vision-hero .section-head{ margin-bottom: var(--space-lg); }

.vision-heading{
  font-family: var(--font-display); font-weight: 500; font-style: normal;
  font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.45; color: #fff;
  max-width: 50ch; margin: 0 auto; text-align: center;
  text-wrap: balance;
  text-shadow: 0 2px 16px rgba(10,24,19,.45);
}

.vision-chip{
  all: unset;
  cursor: pointer;
  font: inherit;
  color: inherit;
  border-bottom: 2px solid rgba(192,138,52,.5);
  transition: color .25s ease, border-color .25s ease;
}
.vision-chip:hover{ color: var(--color-gold); border-color: var(--color-gold); }
.vision-chip:focus-visible{ outline: 2px solid var(--color-gold); outline-offset: 3px; border-radius: 2px; }

.vision-panels{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  max-width: 980px; margin: 0 auto;
}
.vision-panel{
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px; padding: 1.2rem 1.3rem;
  opacity: .4; transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease, border-color .3s ease, background .3s ease;
}
.vision-panel.is-active{
  opacity: 1; transform: translateY(0);
  border-color: rgba(192,138,52,.5); background: rgba(192,138,52,.08);
}
.vision-panel-num{
  font-family: var(--font-display); color: var(--color-gold); font-size: .9rem;
  display: block; margin-bottom: .5rem;
}
.vision-panel p{ margin: 0; font-size: .86rem; line-height: 1.55; color: rgba(255,255,255,.78); }

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

/* ---- Vision hero on phones: rebuilt from scratch in section 18 at the
   end of this file ---- */


/* ----------------------------------------------------------------------
   PAGE — MISSION
   ---------------------------------------------------------------------- */
.mission{ padding: var(--space-xxl) 0; }

.mission-grid{
  list-style: none; margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.6rem 1.6rem;
}

.mission-item{
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 calc(33.333% - 1.1rem); /* 3 per row on desktop */
}

/* the big numeral, sitting behind/left of the card and poking out top+bottom */
.mission-num{
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 7rem;
  line-height: .8;
  letter-spacing: -.03em;
  margin-right: -1.3rem;
  user-select: none;
  transition: transform .35s ease;
}
.mission-item:hover .mission-num,
.mission-item:focus-within .mission-num{ transform: translateX(-8px); }

.mission-num-1{ color: var(--color-forest-2); text-shadow: 5px 6px 0 rgba(20,51,42,.18); }
.mission-num-2{ color: var(--color-gold);     text-shadow: 5px 6px 0 rgba(147,72,42,.18); }
.mission-num-3{ color: var(--color-terracotta); text-shadow: 5px 6px 0 rgba(147,72,42,.22); }
.mission-num-4{ color: var(--color-forest);   text-shadow: 5px 6px 0 rgba(20,51,42,.25); }
.mission-num-5{ color: var(--color-terracotta-deep); text-shadow: 5px 6px 0 rgba(20,51,42,.18); }

/* the coloured card, overlapping the right side of the numeral */
.mission-card{
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  padding: 1.5rem 1.3rem 1.4rem 2.1rem;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  box-shadow: var(--shadow-lift);
  display: flex;
  flex-direction: column;
  min-height: 158px;
  cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
}
.mission-card:hover,
.mission-card:focus-visible{
  transform: translateY(-6px);
  box-shadow: 0 26px 46px -20px rgba(20,51,42,.45);
  filter: brightness(1.05);
  outline: 2.5px solid rgba(255,255,255,.8);
  outline-offset: 3px;
}

.mission-icon{ display: inline-flex; margin-bottom: .7rem; }
.mission-icon svg{ width: 26px; height: 26px; transition: transform .35s ease; }
.mission-card:hover .mission-icon svg{ transform: scale(1.15) rotate(-6deg); }

.mission-card h3{ color: #fff; font-size: 1.05rem; margin: 0 0 .4rem; }
.mission-card p{ color: rgba(255,255,255,.86); font-size: .9rem; margin: 0; }

.mission-card-1{ background: var(--color-forest-2); }
.mission-card-2{ background: var(--color-gold); }
.mission-card-3{ background: var(--color-terracotta); }
.mission-card-4{ background: var(--color-forest); }
.mission-card-5{ background: var(--color-terracotta-deep); }

/* ---- Mission responsive ---- */
@media (max-width: 900px){
  .mission-item{ flex-basis: calc(50% - .8rem); } /* 2 per row */
}

/* ---- Mission on phones: rebuilt from scratch in section 19 at the end
   of this file ---- */



/* ----------------------------------------------------------------------
   11. PAGE — APPROACH PILLARS
   ---------------------------------------------------------------------- */
.approach{ padding-bottom: var(--space-xxl); background: var(--color-cream-deep); padding-top: var(--space-xxl); }

.pillar-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  gap: 1.1rem;
}

/* ---- unified card: fuses the text panel + photo into one shape, so all
   four pillars share the same total height regardless of bullet count ---- */
.pillar-card{
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 24px -14px rgba(20,51,42,.35);
}

/* ---- text panel ---- */
.pillar-text-card{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.9rem 1.5rem;
}
.pillar-text-card h3{
  color: #fff; font-family: var(--font-body); font-weight: 800;
  font-size: 1.05rem; letter-spacing: .01em; text-transform: uppercase;
  margin-bottom: 1rem; line-height: 1.25;
}
.pillar-c1{ background: var(--color-gold); }
.pillar-c2{ background: var(--color-terracotta); }
.pillar-c3{ background: var(--color-terracotta-deep); }
.pillar-c4{ background: var(--color-forest-2); }

.pillar-points{ display: flex; flex-direction: column; gap: .05rem; }
.pillar-point{
  position: relative; cursor: pointer;
  font-size: .88rem; line-height: 1.55; color: rgba(255,255,255,.7);
  padding: .5rem 0 .5rem .8rem;
  border-left: 2px solid rgba(255,255,255,.25);
  transition: color .3s ease, border-color .3s ease, padding-left .3s ease;
}
.pillar-point:hover{ color: #fff; }
.pillar-point:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }
.pillar-point.is-active{
  color: #fff; font-weight: 600;
  border-left-color: #fff; padding-left: 1rem;
}

/* ---- photo panel ---- */
.pillar-image-card{ position: relative; flex-shrink: 0; }
.pillar-image-inner{
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--color-sage);
}
.pillar-image-inner::after{
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.35) 100%);
  pointer-events: none;
}
.pillar-image-inner::before{
  content: ''; position: absolute; inset: 0; z-index: 1;
  mix-blend-mode: multiply; opacity: .35; pointer-events: none;
}
.pillar-card:nth-child(1) .pillar-image-inner::before{ background: var(--color-gold); }
.pillar-card:nth-child(2) .pillar-image-inner::before{ background: var(--color-terracotta); }
.pillar-card:nth-child(3) .pillar-image-inner::before{ background: var(--color-terracotta-deep); }
.pillar-card:nth-child(4) .pillar-image-inner::before{ background: var(--color-forest-2); }

.pillar-img{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transition: opacity .35s ease;
}
.pillar-img.is-active{ opacity: 1; }

/* ---- seam badge: sits exactly on the boundary between text and photo,
   regardless of which order they're stacked in, and regardless of how
   tall the text panel grows to fill the stretched card height ---- */
.pillar-seam{ height: 0; position: relative; z-index: 3; }
.pillar-badge{
  position: absolute; top: 0; left: 1.4rem; transform: translateY(-50%);
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--color-forest); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-size: 1.1rem;
  border: 3px solid var(--color-cream-deep);
  box-shadow: 0 6px 16px -4px rgba(20,51,42,.5);
}

/* ---- Approach responsive ---- */
@media (max-width: 1024px){
  .pillar-grid{ grid-template-columns: repeat(2, 1fr); row-gap: 1.4rem; }
}

/* ---- Approach pillars on phones: rebuilt from scratch in section 20 at
   the end of this file ---- */

/* ----------------------------------------------------------------------
   12. PAGE — FOCUS AREAS
   ---------------------------------------------------------------------- */
.focus{ padding: var(--space-xxl) 0; background: var(--color-forest); }
.focus .section-head h2{ color: #fff; }

.focus-list{ list-style: none; margin: 0 auto; padding: 0; max-width: 960px; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 2.5rem; }

.focus-item{
  display: grid; grid-template-rows: auto 0fr;
  border-bottom: 1px solid rgba(255,255,255,.14);
  transition: grid-template-rows .45s ease;
}
.focus-item:hover, .focus-item:focus-within{ grid-template-rows: auto 1fr; }
.focus-item:focus-within{ outline: none; }

.focus-row{ display: flex; align-items: baseline; gap: .7rem; padding: 1.15rem 0; }
.focus-dash{
  flex: 0 0 auto; display: inline-block; width: 14px; height: 1px; background: rgba(255,255,255,.4);
  margin-bottom: .35em; transition: width .4s ease, background .4s ease;
}
.focus-item:hover .focus-dash, .focus-item:focus-within .focus-dash{ width: 26px; background: var(--color-gold); }
.focus-text{ color: #EDE8DC; font-size: 1.05rem; line-height: 1.4; }

.focus-note-wrap{ overflow: hidden; }
.focus-fold{
  height: 1px; background: rgba(255,255,255,.16); margin: 0 0 .9rem;
  transform: scaleX(0); transform-origin: left; transition: transform .4s ease .05s;
}
.focus-item:hover .focus-fold, .focus-item:focus-within .focus-fold{ transform: scaleX(1); }
.focus-note{
  margin: 0 0 1.2rem; padding-left: 1.7rem; max-width: 44ch; color: #9FB3A6; font-size: .88rem; line-height: 1.55;
  opacity: 0; transition: opacity .35s ease .1s;
}
.focus-item:hover .focus-note, .focus-item:focus-within .focus-note{ opacity: 1; }


/* ----------------------------------------------------------------------
   13. PAGE — PROGRAMMES DETAIL
   ---------------------------------------------------------------------- */
.programmes{ padding: var(--space-xxl) 0; }

.programme-detail{
  position: relative;
  display: grid;
  grid-template-columns: .4fr 1.6fr;
  gap: var(--space-xl);
  align-items: center;
  padding: var(--space-lg) var(--space-md);
  margin: 0 calc(-1 * var(--space-md));
  border-bottom: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  scroll-margin-top: calc(var(--header-h) + 20px);

  /* pointer-follow highlight coordinates, set by JS */
  --mx: 50%;
  --my: 50%;

  transition: background .45s ease, border-color .45s ease, transform .45s cubic-bezier(.22,1,.36,1);
}
.programme-detail:last-of-type{ border-bottom: none; }
.programme-detail-reverse{ direction: rtl; }
.programme-detail-reverse > *{ direction: ltr; }

/* soft pointer-follow glow across the whole row */
.programme-detail::before{
  content:"";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(192,138,52,.14), transparent 70%);
  transition: opacity .45s ease;
}
.programme-detail:hover{ background: var(--color-paper); border-color: transparent; }
.programme-detail:hover::before{ opacity: 1; }
.programme-detail > *{ position: relative; z-index: 1; }

.programme-detail-media{
  position: relative;
  background-color: var(--color-sage);
  border-radius: var(--radius-lg);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform .5s cubic-bezier(.34,1.56,.64,1), box-shadow .45s ease;
}

.programme-detail-media img{
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1s cubic-bezier(.22,1,.36,1);
}

/* tint the photo so it reads as part of the palette, and keeps the
   icon legible against any image */
.programme-detail-media::before{
  content:"";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(160deg, rgba(20,51,42,.72) 0%, rgba(184,92,52,.42) 100%);
  mix-blend-mode: multiply;
  transition: opacity .45s ease;
}

.programme-detail-media svg{
  width: 46%;
  height: 46%;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
  transition: transform .5s cubic-bezier(.34,1.56,.64,1);
}
/* icon strokes were tuned for a light background — force them white so
   they hold up against the photo + tint */
.programme-detail-media svg path,
.programme-detail-media svg circle{
  stroke: #FBF6EF !important;
}

/* icon "pop" + gentle rotation, media lifts, zooms the photo and gains
   a shadow on hover */
.programme-detail:hover .programme-detail-media{
  transform: translateY(-4px) scale(1.03);
  box-shadow: var(--shadow-lift);
}
.programme-detail:hover .programme-detail-media img{
  transform: scale(1.14);
}
.programme-detail:hover .programme-detail-media::before{
  opacity: .82;
}
.programme-detail:hover .programme-detail-media svg{
  transform: scale(1.12) rotate(-4deg);
}

/* a soft expanding ring behind the icon on hover, for a bit of life */
.programme-detail-media::after{
  content:"";
  position: absolute;
  z-index: 2;
  width: 40%;
  height: 40%;
  border-radius: 50%;
  background: rgba(251,246,239,.22);
  transform: scale(.6);
  opacity: 0;
  transition: transform .6s cubic-bezier(.22,1,.36,1), opacity .6s ease;
}
.programme-detail:hover .programme-detail-media::after{
  transform: scale(1.7);
  opacity: 1;
}

/* small index number, tucked in the corner of the media box, over the photo */
.programme-detail-index{
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 3;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: #FBF6EF;
  opacity: .7;
  text-shadow: 0 1px 4px rgba(20,51,42,.5);
  transition: opacity .4s ease, transform .4s ease;
}
.programme-detail-reverse .programme-detail-index{ left: auto; right: 12px; }
.programme-detail:hover .programme-detail-index{ opacity: 1; transform: translateY(-2px); }

.programme-tag{
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-terracotta);
  margin-bottom: .7rem;
  transition: letter-spacing .4s ease;
}
.programme-detail:hover .programme-tag{ letter-spacing: .16em; }

.programme-detail h3{
  font-size: 1.6rem;
  margin-bottom: .7rem;
  transition: color .35s ease;
}
.programme-detail:hover h3{ color: var(--color-terracotta-deep); }

.programme-detail p{
  color: var(--color-ink-soft);
  font-size: 1.03rem;
  max-width: 60ch;
  margin: 0 0 .9rem;
}

/* "Learn more" affordance: understated by default, animates in on hover/focus */
.programme-more{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .92rem;
  font-weight: 600;
  color: var(--color-forest-2);
  cursor: pointer;
  padding-bottom: 2px;
  border-bottom: 1.5px solid transparent;
  transition: border-color .35s ease, color .35s ease, gap .35s ease;
}
.programme-more svg{
  width: 16px;
  height: 16px;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.programme-detail:hover .programme-more,
.programme-more:focus-visible{
  color: var(--color-terracotta);
  border-color: var(--color-terracotta);
  gap: .6rem;
}
.programme-detail:hover .programme-more svg,
.programme-more:focus-visible svg{
  transform: translateX(4px);
}
.programme-more:focus-visible{ outline: 2.5px solid var(--color-terracotta); outline-offset: 4px; }

/* reveal-on-scroll: each row rises + fades in, staggered slightly */
.programme-detail[data-reveal]{
  opacity: 0;
  transform: translateY(28px);
}
.programme-detail[data-reveal].is-visible{
  opacity: 1;
  transform: translateY(0);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1),
              background .45s ease, border-color .45s ease;
}

@media (prefers-reduced-motion: reduce){
  .programme-detail, .programme-detail-media, .programme-detail-media svg,
  .programme-detail-media::after, .programme-tag, .programme-detail h3,
  .programme-more, .programme-more svg, .programme-detail-index{
    transition: none !important;
  }
  .programme-detail[data-reveal]{ opacity: 1; transform: none; }
}

/* ---- Programmes detail on phones: rebuilt from scratch in section 22 at
   the end of this file ---- */


/* ----------------------------------------------------------------------
   14. PAGE — CTA BAND
   ---------------------------------------------------------------------- */
.cta-band{ background: var(--color-forest); color: #fff; padding: var(--space-xl) 0; margin-bottom: var(--space-xxl); }
.cta-inner{ display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; }
.cta-inner h2{ color: #fff; font-size: clamp(1.6rem, 2.8vw, 2.2rem); max-width: 22ch; margin: 0; }

/* ----------------------------------------------------------------------
   15. BACK TO TOP BUTTON
   ---------------------------------------------------------------------- */
.to-top{ position: fixed; right: 1.6rem; bottom: 1.6rem; width: 48px; height: 48px; border-radius: 50%; background: var(--color-forest); color: #fff; border: none; font-size: 1.2rem; box-shadow: var(--shadow-soft); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s ease, transform .3s ease, background .2s ease; z-index: 90; }
.to-top.is-visible{ opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover{ background: var(--color-terracotta); }


/* ==========================================================================
   16. MOBILE RESPONSIVE
   Organised section by section, matching the numbering above.
   Everything below ≤ 640px is rebuilt from scratch in sections 17–25 at
   the end of this file; this block only carries the tablet breakpoint.
   ========================================================================== */

/* ---- 16.1 Layout & tablet breakpoint (≤ 1024px) ---- */
@media (max-width: 1024px){
  :root{ --space-xxl: 6rem; --space-xl: 3.6rem; }
  .focus-list{ grid-template-columns: 1fr; }
  .footer-inner{ grid-template-columns: 1fr 1fr; }
}

/* ---- 16.2 Header & nav: rebuilt from scratch in section 17 at the end
   of this file ---- */

/* ---- 16.3 Vision hero: rebuilt from scratch in section 18 at the end
   of this file ---- */

/* ---- 16.4 Mission: rebuilt from scratch in section 19 at the end of
   this file ---- */

/* ---- 16.5 Approach pillars: rebuilt from scratch in section 20 at the
   end of this file ---- */

/* ---- 16.6 Focus areas: rebuilt from scratch in section 21 at the end
   of this file ---- */

/* ---- 16.7 Programmes detail: rebuilt from scratch in section 22 at the
   end of this file ---- */

/* ---- 16.8 CTA band: rebuilt from scratch in section 23 at the end of
   this file ---- */

/* ---- 16.9 Footer: rebuilt from scratch in section 24 at the end of
   this file ---- */

/* ---- 16.10 Back to top: rebuilt from scratch in section 25 at the end
   of this file ---- */


/* ==========================================================================
   17. MOBILE RESPONSIVE — NAV & HEADER (rebuilt from scratch)
   Desktop rules above are untouched. Identical to the Home page header
   behaviour so the two pages match: shorter capsule, CTA shrinks to its
   arrow bubble, and the nav links open as a small floating card instead
   of a full-height slide-in panel.
   ========================================================================== */
@media (max-width: 640px){
  :root{ --header-h: 88px; }

  .site-header{ padding: 10px 1rem; }
  .header-inner{ height: 64px; padding: 0 .3rem; }

  .nav-toggle{ display: flex; }

  .nav-capsule{
    height: 64px;
    padding: 0 .4rem 0 1rem;
  }
  .brand-mark{
    width: 43px;
    height: 64px;
    margin-left: 12px;
  }
  .brand-name{ font-size: 1.05rem; }

  /* CTA pill shrinks to just its arrow bubble to save space */
  .nav-cta{ font-size: .72rem; gap: .4rem; padding: .3rem .3rem .3rem .8rem; }
  .nav-cta-arrow{ width: 26px; height: 26px; font-size: .85rem; }

  /* nav links drop out of the capsule row and open as a small floating
     card — about half the screen height — instead of a full-height panel */
  .site-nav{
    position: fixed;
    inset: auto;
    top: calc(var(--header-h) + .5rem);
    left: 50%;
    width: min(88vw, 360px);
    max-height: 50vh;
    transform: translateX(-50%) translateY(-12px) scale(.96);
    flex-direction: column;
    align-items: stretch;
    gap: .2rem;
    padding: .8rem;
    border-radius: var(--radius-lg);
    /* same frosted-glass recipe as .nav-capsule::before. backdrop-filter is
       safe here because .site-nav is itself the fixed element — it has no
       fixed descendants that could get trapped by a new containing block. */
    background: rgba(251, 246, 239, .62);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, .6);
    box-shadow:
      0 18px 40px -22px rgba(20, 51, 42, .35),
      0 2px 8px -2px rgba(20, 51, 42, .12),
      inset 0 1px 0 rgba(255, 255, 255, .55);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease, background .35s ease, box-shadow .35s ease;
  }
  /* keep in step with the capsule, which gets more opaque once scrolled */
  .site-header.is-scrolled .site-nav{
    background: rgba(251, 246, 239, .86);
    box-shadow:
      0 22px 44px -20px rgba(20, 51, 42, .4),
      0 2px 10px -2px rgba(20, 51, 42, .16),
      inset 0 1px 0 rgba(255, 255, 255, .6);
  }
  /* browsers without backdrop-filter: fall back to a near-solid panel */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
    .site-nav,
    .site-header.is-scrolled .site-nav{ background: rgba(251, 246, 239, .97); }
  }
  .site-nav.is-open{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
  }
  .nav-link{ width: 100%; font-size: 1rem; padding: .8rem .9rem; text-align: left; border-radius: 999px; }

  body.nav-open{ overflow: hidden; }
}

/* ==========================================================================
   18. MOBILE RESPONSIVE — VISION HERO (rebuilt from scratch)
   Desktop rules above are untouched. Same structure as desktop — heading
   then the numbered panels — just smaller: tighter padding, smaller type,
   and the four panels stacked one per row.
   ========================================================================== */
@media (max-width: 640px){

  .vision-hero{ padding: 2.6rem 0; border-radius: var(--radius-sm); }
  .vision-hero .section-head{ margin-bottom: 1.4rem; }
  .vision-hero .eyebrow{ font-size: .62rem; margin-bottom: .55rem; }

  .vision-heading{
    font-size: 1.28rem;
    line-height: 1.5;
    max-width: 100%;
    text-align: left;
  }
  .vision-chip{ border-bottom-width: 1.5px; }

  .vision-panels{ grid-template-columns: 1fr; gap: .6rem; }

  .vision-panel{
    border-radius: 10px;
    padding: .85rem .95rem;
    /* on a phone there is no hover, so the dimmed inactive state just
       reads as broken — keep them all legible, the active one only
       gains the gold border/tint */
    opacity: 1;
    transform: none;
  }
  .vision-panel-num{ font-size: .72rem; margin-bottom: .3rem; }
  .vision-panel p{ font-size: .76rem; line-height: 1.5; }
}

/* ==========================================================================
   19. MOBILE RESPONSIVE — MISSION (rebuilt from scratch)
   Desktop rules above are untouched. Same shape as desktop — big numeral
   with the coloured card overlapping it — just scaled down and stacked
   one per row, with the numeral small enough that the card still gets
   most of the width.
   ========================================================================== */
@media (max-width: 640px){

  .mission{ padding: 2.6rem 0; }
  .mission .section-head{ margin-bottom: 1.6rem; }

  .mission-grid{ gap: 1rem; }
  .mission-item{ flex-basis: 100%; }

  .mission-num{
    font-size: 3.6rem;
    margin-right: -1rem;
    text-shadow: 3px 4px 0 rgba(20,51,42,.18);
  }

  .mission-card{
    padding: .9rem 1rem .95rem 1.5rem;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    min-height: auto;
  }
  .mission-icon{ margin-bottom: .45rem; }
  .mission-icon svg{ width: 20px; height: 20px; }
  .mission-card h3{ font-size: .9rem; margin-bottom: .25rem; }
  .mission-card p{ font-size: .76rem; line-height: 1.5; }

  /* scroll-triggered "hover": whichever item is nearest the middle of the
     screen lights up, one at a time, in place of the desktop :hover —
     see the scroll-activate script at the end of the page's JS */
  .mission-item.is-inview .mission-num{ transform: translateX(-6px); }
  .mission-item.is-inview .mission-card{
    transform: translateY(-4px);
    box-shadow: 0 20px 34px -16px rgba(20,51,42,.4);
    filter: brightness(1.05);
  }
  .mission-item.is-inview .mission-icon svg{ transform: scale(1.12) rotate(-6deg); }
}

/* ==========================================================================
   20. MOBILE RESPONSIVE — APPROACH PILLARS (rebuilt from scratch)
   Desktop rules above are untouched. Cards stay 2-up (2×2) rather than
   dropping to a single column, matching the founders grid on the Home
   page — tight gap, smaller type, smaller seam badge, and a shorter
   landscape photo so each card stays a comfortable height.
   ========================================================================== */
@media (max-width: 640px){

  .approach{ padding: 2.6rem 0; }

  .pillar-grid{ grid-template-columns: repeat(2, 1fr); gap: .7rem; }

  .pillar-card{ border-radius: var(--radius-sm); }

  .pillar-text-card{ padding: .95rem .8rem 1.05rem; }
  .pillar-text-card h3{ font-size: .78rem; margin-bottom: .55rem; line-height: 1.3; }

  .pillar-point{
    font-size: .68rem;
    line-height: 1.45;
    padding: .3rem 0 .3rem .55rem;
    border-left-width: 1.5px;
  }
  .pillar-point.is-active{ padding-left: .7rem; }

  .pillar-image-inner{ aspect-ratio: 4 / 3; }

  .pillar-badge{
    left: .7rem;
    width: 30px; height: 30px;
    font-size: .76rem;
    border-width: 2px;
  }
}

/* ==========================================================================
   21. MOBILE RESPONSIVE — FOCUS AREAS (rebuilt from scratch)
   Desktop rules above are untouched. Single column, and since there is no
   hover on a phone the fold-out note is simply shown open by default so
   none of the copy becomes unreachable.
   ========================================================================== */
@media (max-width: 640px){

  .focus{ padding: 2.6rem 0; }
  .focus .section-head{ margin-bottom: 1.6rem; }

  .focus-list{ grid-template-columns: 1fr; column-gap: 0; }

  /* no hover on touch — keep every row's note in the flow (not collapsed
     to 0, which would make it unreachable without JS) at reduced opacity,
     then let the scroll-activate script bring one row fully into focus
     at a time as it crosses the middle of the screen */
  .focus-item{ grid-template-rows: auto auto; }

  .focus-row{ gap: .55rem; padding: .8rem 0 .5rem; }
  .focus-dash{ width: 12px; margin-bottom: .3em; }
  .focus-text{ font-size: .88rem; line-height: 1.4; }

  .focus-fold{ transform-origin: left; transform: scaleX(.4); opacity: .5; margin-bottom: .6rem; }
  .focus-note{
    opacity: .7;
    padding-left: 1.05rem;
    max-width: 100%;
    font-size: .74rem;
    line-height: 1.5;
    margin-bottom: .9rem;
  }

  .focus-item.is-inview .focus-dash{ width: 26px; background: var(--color-gold); }
  .focus-item.is-inview .focus-fold{ transform: scaleX(1); opacity: 1; }
  .focus-item.is-inview .focus-note{ opacity: 1; }
}

/* ==========================================================================
   22. MOBILE RESPONSIVE — PROGRAMMES DETAIL (rebuilt from scratch)
   Desktop rules above are untouched. Keeps the two-column row rather than
   stacking: a small square media tile on the left and the copy beside it,
   which reads much tighter on a phone than a full-width image above text.
   The reverse rows are un-reversed so every row scans the same way.
   ========================================================================== */
@media (max-width: 640px){

  .programmes{ padding: 2.6rem 0; }

  .programme-detail,
  .programme-detail-reverse{
    grid-template-columns: 96px 1fr;
    gap: .9rem;
    align-items: start;
    direction: ltr;
    text-align: left;
    padding: 1.1rem .2rem;
    margin: 0;
    border-radius: var(--radius-sm);
  }

  .programme-detail-media{ border-radius: var(--radius-md); }
  .programme-detail-media svg{ width: 40%; height: 40%; }

  .programme-detail-index,
  .programme-detail-reverse .programme-detail-index{
    top: 6px; left: 7px; right: auto;
    font-size: .6rem;
  }

  .programme-tag{ font-size: .6rem; margin-bottom: .35rem; letter-spacing: .08em; }
  .programme-detail h3{ font-size: 1rem; margin-bottom: .35rem; }
  .programme-detail p{
    font-size: .78rem;
    line-height: 1.5;
    max-width: 100%;
    margin: 0 0 .6rem;
  }

  .programme-more{ font-size: .74rem; gap: .3rem; }
  .programme-more svg{ width: 13px; height: 13px; }

  /* scroll-triggered "hover": the row nearest the middle of the screen
     gets the same highlight the desktop version gets on mouse-over */
  .programme-detail.is-inview{ background: var(--color-paper); border-color: transparent; }
  .programme-detail.is-inview::before{ opacity: 1; }
  .programme-detail.is-inview .programme-detail-media{
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--shadow-lift);
  }
  .programme-detail.is-inview .programme-detail-media img{ transform: scale(1.1); }
  .programme-detail.is-inview .programme-detail-media::before{ opacity: .82; }
  .programme-detail.is-inview .programme-detail-media::after{ transform: scale(1.6); opacity: 1; }
  .programme-detail.is-inview .programme-detail-index{ opacity: 1; }
  .programme-detail.is-inview .programme-tag{ letter-spacing: .13em; }
  .programme-detail.is-inview h3{ color: var(--color-terracotta-deep); }
  .programme-detail.is-inview .programme-more{ color: var(--color-terracotta); border-color: var(--color-terracotta); }
  .programme-detail.is-inview .programme-more svg{ transform: translateX(3px); }
}

/* ==========================================================================
   23. MOBILE RESPONSIVE — CTA BAND (rebuilt from scratch)
   Desktop rules above are untouched. Same row layout as desktop (copy on
   the left, buttons on the right) — just a smaller version of it, with
   the button group vertically centred against the wrapped heading.
   ========================================================================== */
@media (max-width: 640px){

  .cta-band{ padding: 1.5rem 0; margin-bottom: var(--space-lg); border-radius: var(--radius-sm); }

  .cta-inner{
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: .8rem;
    flex-wrap: nowrap;
    text-align: left;
  }
  .cta-inner h2{ font-size: .98rem; line-height: 1.4; max-width: 58%; }

  .cta-inner .hero-actions{
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
    margin-top: .2rem;
    flex-wrap: nowrap;
  }
  .cta-inner .btn{ padding: .32rem .65rem; font-size: .64rem; gap: .25rem; flex: 0 0 auto; text-align: center; }
}

/* ==========================================================================
   24. MOBILE RESPONSIVE — FOOTER (rebuilt from scratch)
   Desktop rules above are untouched. Same structure as the Home page
   footer on mobile — brand block across the top, two link columns side
   by side, contact column full width below — with tighter spacing and
   smaller type throughout.
   ========================================================================== */
@media (max-width: 640px){

  .site-footer{ padding: 1.8rem 0 1rem; margin-top: var(--space-lg); }

  .footer-inner{
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem .8rem;
    padding-bottom: 1.1rem;
  }
  .footer-brand{
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: .6rem;
  }
  /* Quick links (2nd child) and Get involved (3rd child) sit side by
     side; Reach us (4th child) drops back to full width below them */
  .footer-col:nth-child(4){ grid-column: 1 / -1; }

  .footer-logo{ grid-column: 1; grid-row: 1 / span 2; width: 48px; height: 36px; margin: 0; }
  .footer-name{ grid-column: 2; grid-row: 1; font-size: .8rem; margin: 0; line-height: 1.25; align-self: end; }
  .footer-tagline{ grid-column: 2; grid-row: 2; font-size: .58rem; margin: 0; align-self: start; white-space: normal; }

  .footer-col h3{ font-size: .66rem; margin-bottom: .45rem; padding-bottom: .3rem; }
  .footer-col a, .footer-col p{ font-size: .78rem; margin-bottom: .3rem; }

  .footer-bottom{
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    padding-top: .8rem;
  }
  .footer-bottom p{ font-size: .68rem; }

  .footer-social{ gap: .5rem; }
  .footer-social a{ width: 26px; height: 26px; }
  .footer-social a svg{ width: 14px; height: 14px; }
}

/* ==========================================================================
   25. MOBILE RESPONSIVE — BACK TO TOP (rebuilt from scratch)
   Desktop rules above are untouched. Smaller button, pulled in closer to
   the screen edge to match the tighter mobile margins used everywhere
   else.
   ========================================================================== */
@media (max-width: 640px){
  .to-top{ right: 1rem; bottom: 1rem; width: 40px; height: 40px; font-size: 1rem; }
}