:root {
  --primary: #e30613;
  --primary-dark: #b30510;
  --amber: #f59e0b;
  --amber-ink: #b45309;
  --green: #10b981;
  --blue: #0ea5e9;
  --violet: #8b5cf6;

  --ink: #0e1013;
  --ink-2: #171a1f;
  --ink-3: #22262d;
  --bg: #fbfaf7;
  --surface: #ffffff;

  --text: #1a1d21;
  --text-muted: #5a6470;
  --text-inv: #f4f5f7;
  --text-inv-muted: #9aa3ad;

  --border: rgba(15, 20, 25, .08);
  --border-inv: rgba(255, 255, 255, .10);

  --radius: 16px;
  --radius-lg: 26px;
  --shadow-lg: 0 20px 60px rgba(15, 20, 25, .12);

  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-ui: 'Inter', system-ui, -apple-system, sans-serif;
}

html { overflow-x: hidden; }
body {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  max-width: 100vw;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: -.03em;
  line-height: 1.1;
  margin: 0;
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }

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

.section { padding: 5rem 0; }
.section-dark { background: var(--ink-2); color: var(--text-inv); }
.section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark p { color: var(--text-inv-muted); }

.section-head { max-width: 46rem; margin-bottom: 3rem; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; margin-bottom: 1rem; }
.section-head p { font-size: 1.08rem; color: var(--text-muted); margin: 0; }
/* .section-dark p and .section-head p have equal specificity, so without
   this, a section-head p inside a dark section falls back to the light-bg
   muted color (dark grey on dark background). */
.section-dark .section-head p { color: var(--text-inv-muted); }
#live-shows .section-head p { color: var(--text-inv); }

.eyebrow {
  font-size: 1.2rem !important; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--amber-ink) !important; margin: 0 0 1rem; display: inline-block;
}
.eyebrow-inv { color: var(--amber) !important; }

/* ---------- buttons (layered on Bootstrap's .btn) ---------- */
.btn { font-weight: 600; border-radius: 8px; padding: .85rem 1.7rem; }
.btn-lg { padding: 1rem 2.1rem; font-size: 1.02rem; }
.btn-primary {
  background: var(--primary); border-color: var(--primary); color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--primary-dark); border-color: var(--primary-dark); color: #fff;
  transform: translateY(-2px); box-shadow: 0 10px 30px rgba(227, 6, 19, .35);
}
.btn-light { background: #fff; color: var(--ink); border-color: #fff; }
.btn-light:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); color: var(--ink); }
.btn-outline-inv { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .28); }
.btn-outline-inv:hover { border-color: #fff; background: rgba(255, 255, 255, .09); color: #fff; }
.btn-outline-brand { background: transparent; color: var(--text); border: 1.5px solid var(--border); }
.btn-outline-brand:hover { border-color: var(--primary); color: var(--primary); }
.btn { transition: transform .18s, box-shadow .18s, background .18s; }
.btn-equal { min-width: 17.5rem; text-align: center; }
@media (max-width: 400px) { .btn-equal { min-width: 0; width: 100%; } }

/* ----------- nav ----------- */
:root { --nav-h: 66px; }
.site-nav { background: var(--ink); border-bottom: 1px solid var(--border-inv); padding-top: 0; padding-bottom: 0; }
.site-nav .container { min-height: var(--nav-h); display: flex; align-items: center; flex-wrap: wrap; }
.site-nav .navbar-brand { display: flex; align-items: center; gap: .5rem; }

/* ---------- brand logo (inlined SVG so it can be themed per background) ---------- */
.brand-logo { display: inline-flex; align-items: center; }
.brand-logo-svg { height: 36px; width: auto; display: block; }
.brand-logo-svg .logo-ink { fill: #050505; }
.brand-logo-svg .logo-accent { fill: #f90202; }
/* the nav and footer are always dark here, so the ink half flips to white for contrast */
.site-nav .brand-logo-svg .logo-ink,
.footer-brand .brand-logo-svg .logo-ink { fill: #fff; }
.footer-brand .brand-logo-svg { height: 34px; }
.site-nav .nav-link { color: var(--text-inv-muted) !important; font-weight: 500; font-size: .92rem; }
.site-nav .nav-link:hover, .site-nav .nav-link.active { color: #fff !important; }
.site-nav .navbar-toggler { border-color: var(--border-inv); }
.site-nav .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,.75)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
@media (max-width: 991.98px) {
  .site-nav .navbar-collapse { padding-bottom: .75rem; }
  .site-nav .navbar-nav { row-gap: .2rem; }
}

/* ---------- hero (nav + hero + stat band together fit one screen) ---------- */
.hero {
  background: var(--ink); color: var(--text-inv); position: relative; overflow: hidden;
  min-height: calc(100svh - var(--nav-h));
  display: flex; flex-direction: column; justify-content: center; gap: clamp(1.5rem, 5vh, 3.5rem);
  padding: 1.75rem 0;
}
.hero::before {
  content: ''; position: absolute; top: -20%; left: 50%; width: 900px; height: 900px;
  transform: translateX(-30%);
  background: radial-gradient(circle, rgba(227, 6, 19, .20), transparent 62%);
  pointer-events: none;
}
.hero-inner { position: relative; }
.hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); font-weight: 800; margin-bottom: 1.1rem; color: #fff; }
.hero h1 .hl { color: var(--primary); }
.hero-lede { font-size: 1.08rem; color: var(--text-inv); max-width: 40rem; margin: 0 0 1.5rem; }

.hero-anim { width: 100%; max-width: 560px; margin: 0 auto; }

.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border-inv); }
.hstat { padding: 1.3rem 1.5rem 1.5rem; border-right: 1px solid var(--border-inv); min-width: 0; }
.hstat:last-child { border-right: none; }
.hstat-num {
  font-family: var(--font-display); font-size: clamp(1.5rem, 3.2vw, 2.4rem); font-weight: 800;
  color: #fff; line-height: 1; margin-bottom: .3rem; display: flex; align-items: baseline; gap: .15rem;
}
.hstat-num .plus { color: var(--primary); font-size: .6em; }
.hstat-label { font-size: .82rem; color: var(--text-inv-muted); font-weight: 500; }
/* Bootstrap stacks .col-lg-6 to one column below 992px — the hero's
   fit-one-screen height must stop being enforced at the same point, or any
   viewport in between gets short stacked content forced into a full-screen
   box (visible as a big empty gap). */
@media (max-width: 991px) {
  .hero { min-height: 0; }
}
@media (max-width: 700px) {
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .hstat { padding: 1.25rem 1rem 1.5rem; }
  .hstat:nth-child(2) { border-right: none; }
  .hstat:nth-child(1), .hstat:nth-child(2) { border-bottom: 1px solid var(--border-inv); }
}

/* ---------- page hero (about / contact) ---------- */
.page-hero {
  background: var(--ink); color: #fff; padding: 5rem 0 4.25rem; text-align: center;
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; top: -40%; left: 50%; width: 900px; height: 900px; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(227, 6, 19, .22), transparent 62%); pointer-events: none;
}
.page-hero::after {
  content: ''; position: absolute; bottom: -55%; right: -8%; width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(245, 158, 11, .16), transparent 62%); pointer-events: none;
}
.page-hero-inner { position: relative; }
.page-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); font-weight: 800; margin-bottom: 1rem; }
.page-hero p { font-size: 1.1rem; color: var(--text-inv-muted); max-width: 40rem; margin: 0 auto; }
.page-hero-chips { display: flex; gap: .65rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }
.page-hero-chip {
  display: inline-flex; align-items: center; gap: .55rem; background: rgba(255, 255, 255, .06);
  border: 1px solid var(--border-inv); border-radius: 100px; padding: .6rem 1.15rem;
  font-size: .86rem; font-weight: 600; color: #fff; transition: background .18s, border-color .18s;
}
.page-hero-chip svg { flex-shrink: 0; color: var(--primary); }
a.page-hero-chip:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); color: #fff; }
.page-hero-chip { transition: background .18s, border-color .18s, transform .18s ease, box-shadow .18s ease; }
.page-hero-chip:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, .16); }
.page-hero-chip svg { transition: transform .25s ease; }
.page-hero-chip:hover svg { transform: rotate(-8deg) scale(1.08); }
.page-hero-socials { justify-content: center !important; margin: 2rem auto 0 !important; }

/* ---------- programme cards ---------- */
.prog-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 2rem 1.8rem; height: 100%; position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}
.prog-bar { position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.prog-card .photo-top {
  width: 100%; height: 152px; object-fit: cover; border-radius: 12px; margin-bottom: 1.15rem; background: #e9e6e1;
}
.prog-card h3 { font-size: 1.28rem; font-weight: 700; margin-bottom: .6rem; }
.prog-card p { font-size: .95rem; color: var(--text-muted); margin: 0 0 1.2rem; flex: 1; }
.prog-meta {
  display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: .5rem 1rem; border-radius: 100px;
  background: rgba(227, 6, 19, .08); border: 1px solid rgba(227, 6, 19, .18); color: var(--primary);
  align-self: flex-start;
}

/* ---------- carousel (Why it matters) ---------- */
.quote-carousel { max-width: 52rem; margin: 0 auto; }
.quote-carousel .carousel-item { text-align: center; padding: 0 .5rem; }
.quote-carousel blockquote {
  font-family: var(--font-display); font-size: clamp(1.5rem, 3.2vw, 2.3rem); font-weight: 600;
  line-height: 1.32; letter-spacing: -.025em; margin: 0 0 2rem; color: #fff;
  /* sized to the tallest of the 4 real quotes at each breakpoint, so the
     attribution row below never shifts as the carousel auto-advances */
  min-height: clamp(12.5rem, 22vw, 15.5rem);
  display: flex; align-items: center; justify-content: center;
}
.quote-attr { display: inline-flex; align-items: center; gap: .9rem; text-align: left; }
.quote-avatar {
  width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--amber));
  display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-weight: 800;
  font-size: 1.2rem; flex-shrink: 0; object-fit: cover;
}
.quote-name { font-weight: 700; color: #fff; font-size: 1rem; }
.quote-role { font-size: .88rem; color: var(--text-inv-muted); }
.quote-carousel .carousel-indicators { position: static; margin-top: 2.2rem; }
.quote-carousel .carousel-indicators [data-bs-target] {
  width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .3); border: none;
}
.quote-carousel .carousel-indicators .active { background: var(--primary); }
.quote-carousel .carousel-control-prev,
.quote-carousel .carousel-control-next { width: 3rem; opacity: .6; }
.quote-carousel .carousel-control-prev:hover,
.quote-carousel .carousel-control-next:hover { opacity: 1; }

/* ---------- how-to-help steps ---------- */
.step-card {
  position: relative; padding: 2rem 1.6rem; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); height: 100%;
}
.step-num {
  font-family: var(--font-display); font-size: 2.5rem; font-weight: 800; color: var(--primary);
  line-height: 1; display: block; margin-bottom: .85rem;
}
.step-card h4 { font-size: 1.08rem; font-weight: 700; margin-bottom: .5rem; }
.step-card p { font-size: .92rem; color: var(--text-muted); margin: 0; }

/* ---------- involvement booklet ---------- */
.involvement-grid { align-items: stretch; }
.involvement-grid > [class*="col-"] { display: flex; min-width: 0; }
.involvement-card {
  width: 100%; min-height: 230px; cursor: pointer; overflow: hidden;
  transition: transform .25s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
}
.involvement-card::after {
  content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 5px;
  background: var(--primary); opacity: 0; transform: scaleY(.35);
  transition: opacity .35s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
}
.involvement-card.is-active { border-color: rgba(227, 6, 19, .28); background: #fff; box-shadow: var(--shadow-lg); }
.involvement-card.is-active::after { opacity: 1; transform: scaleY(1); }
.involvement-card:focus-visible { outline: 3px solid rgba(227, 6, 19, .35); outline-offset: 4px; }
.involvement-card p {
  max-height: 0; opacity: 0; overflow: hidden; transform: translateY(10px);
  transition: max-height .45s ease, opacity .3s ease, transform .45s ease;
}
.involvement-card.is-active p { max-height: 8rem; opacity: 1; transform: translateY(0); }
.involvement-card .step-num { transition: transform .4s ease, color .25s ease; }
.involvement-card.is-active .step-num { transform: translateX(5px); color: var(--primary); }

@media (min-width: 768px) {
  .involvement-grid { display: flex; gap: 1rem; }
  .involvement-grid > [class*="col-"] { flex: .8 1 0; width: auto; padding: 0; transition: flex .55s cubic-bezier(.22, 1, .36, 1); }
  .involvement-grid > [class*="col-"]:has(.involvement-card.is-active) { flex: 2.15 1 0; }
}

@media (max-width: 767.98px) {
  .involvement-grid { row-gap: .75rem; }
  .involvement-grid > [class*="col-"] { width: 100%; }
  .involvement-card { min-height: 0; padding: 1.35rem 1.25rem; }
}

/* ---------- about page motion ---------- */
.story-media { overflow: hidden; border-radius: var(--radius-lg); box-shadow: 0 18px 45px rgba(15, 20, 25, .12); }
.story-photo { transition: transform .7s cubic-bezier(.22, 1, .36, 1), filter .7s ease; }
.story-media:hover .story-photo { transform: scale(1.035); filter: saturate(1.08); }
.motion-ready .story-photo.motion-reveal.is-revealed { animation: about-story-settle .95s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes about-story-settle {
  from { opacity: 0; transform: scale(1.09) translate3d(22px, 10px, 0); filter: saturate(.7); }
  to { opacity: 1; transform: scale(1) translate3d(0, 0, 0); filter: saturate(1); }
}
.about-pillars .step-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.about-pillars .step-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-lg); }
.about-pillars .step-num { transition: transform .25s ease, color .25s ease; transform-origin: left center; }
.about-pillars .step-card:hover .step-num { color: var(--amber-ink); transform: translateX(4px) scale(1.05); }

/* ---------- team ---------- */
.team-card {
  position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3/4;
  background: #e9e6e1; border: 1px solid transparent; height: 100%;
}
.team-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; }
.team-card-overlay {
  position: absolute; inset: auto 0 0 0; padding: 3rem 1rem 1.1rem; text-align: center;
  background: linear-gradient(to top, rgba(10, 12, 14, .94) 30%, transparent 100%);
  transition: padding .3s ease, background .3s ease;
}
.about-team .team-photo { transition: transform .65s cubic-bezier(.22, 1, .36, 1), filter .65s ease; }
.motion-ready .about-team .team-card.motion-reveal.is-revealed .team-photo { animation: about-team-settle .85s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes about-team-settle {
  from { opacity: .45; transform: scale(1.12) translate3d(0, 10px, 0); filter: saturate(.65) contrast(.95); }
  to { opacity: 1; transform: scale(1) translate3d(0, 0, 0); filter: saturate(1) contrast(1); }
}
.about-team .team-card:hover .team-photo,
.about-team .team-card:focus-within .team-photo { transform: scale(1.06); filter: saturate(1.08); }
.about-team .team-card:hover .team-card-overlay,
.about-team .team-card:focus-within .team-card-overlay { padding-bottom: 1.35rem; background: linear-gradient(to top, rgba(10, 12, 14, .96) 38%, transparent 100%); }
.team-name { color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: -.01em; }
.team-role { font-size: .78rem; color: #ff8078; font-weight: 600; margin: .2rem 0 .75rem; }
.team-socials { display: flex; justify-content: center; gap: .5rem; min-height: 30px; }
.team-socials a {
  width: 30px; height: 30px; border-radius: 8px; background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18); display: grid; place-items: center; color: #fff;
  transition: background .18s, border-color .18s;
}
.team-socials a:hover { background: var(--primary); border-color: var(--primary); }

/* ---------- activity gallery ---------- */
.gitem { position: relative; display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 4/3; background: #e9e6e1; border: 1px solid transparent; }
.gitem img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.gitem:hover img { transform: scale(1.06); }
.gcap {
  position: absolute; inset: auto 0 0 0; padding: 2.2rem .95rem .85rem; color: #fff;
  background: linear-gradient(transparent, rgba(10, 12, 14, .78));
}
.gcap b { display: block; font-family: var(--font-display); font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
.gcap span { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; opacity: .82; margin-bottom: .2rem; }

/* ---------- video library ---------- */
.video-card { display: block; border-radius: 14px; overflow: hidden; background: var(--ink-2); height: 100%; border: 1px solid transparent; cursor: pointer; }
.video-thumb {
  aspect-ratio: 16/9; background: linear-gradient(135deg, var(--ink-3), var(--ink)); position: relative;
  display: grid; place-items: center; overflow: hidden;
}
.video-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-thumb::after {
  content: ''; width: 52px; height: 52px; border-radius: 50%;
  clip-path: polygon(35% 24%, 35% 76%, 78% 50%);
  background-color: rgba(227, 6, 19, .92);
  position: relative; z-index: 3;
}
.video-thumb::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, .38), transparent 55%);
}
.video-card:hover .video-thumb::after { background-color: var(--primary); }

.video-title-overlay {
  position: absolute; inset: auto 0 0 0; height: 52%; z-index: 2;
  background: linear-gradient(to top, rgba(10, 12, 14, .82) 30%, transparent 100%);
  display: flex; align-items: flex-end; padding: .9rem .9rem .8rem;
}
.video-title-text {
  color: #fff; font-family: var(--font-display); font-weight: 700; font-size: .92rem; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Inline playback: JS swaps the thumbnail for an iframe on click; the
   pseudo-element play button/gradient and the title overlay both hide. */
.video-thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 4; }
.video-card.is-playing .video-thumb::after,
.video-card.is-playing .video-thumb::before,
.video-card.is-playing .video-title-overlay { display: none; }

/* ---------- partners ---------- */
.partner-carousel { overflow: hidden; }
.partner-track {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .9rem; padding: .25rem .1rem .75rem;
}
.partner-track > .partner-tile { min-width: 0; }
.partner-tile {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: .5rem .6rem; display: grid; place-items: center; text-align: center; min-height: 88px;
  height: 100%; position: relative; overflow: hidden;
}
.partner-tile img { max-height: 60px; max-width: 100%; width: auto; object-fit: contain; }
.partner-tile::after {
  content: attr(data-name);
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: .5rem; background: rgba(255, 255, 255, .96); color: var(--primary);
  font-family: var(--font-ui); font-weight: 700; font-size: .82rem; line-height: 1.25;
  opacity: 0; transition: opacity .18s ease; pointer-events: none;
}
.partner-tile:hover::after, .partner-tile:focus-visible::after { opacity: 1; }

@media (max-width: 991.98px) {
  .partner-track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
  .partner-track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
}

/* ---------- calendar ---------- */
.cal-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.cal-toolbar-controls, .cal-toolbar-meta { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.cal-toolbar-controls .cal-today-btn { margin-left: .6rem; }
/* A real sliding switch, not a pair of pill buttons — and deliberately
   NOT red, so it doesn't read as an action button alongside Today/
   Subscribe. The two options are forced equal width so the sliding
   thumb (::before) always lines up exactly under whichever is active. */
.cal-view-toggle {
  position: relative; display: inline-flex; border: 1px solid var(--border); border-radius: 9px;
  padding: 3px; background: var(--bg); gap: 2px;
}
.cal-view-toggle::before {
  content: ''; position: absolute; top: 3px; left: 3px; width: calc(50% - 3px); height: calc(100% - 6px);
  background: var(--ink); border-radius: 6px; transition: transform .2s ease;
}
.cal-view-toggle.is-month::before { transform: translateX(100%); }
.cal-view-btn {
  position: relative; z-index: 1; flex: 1; min-width: 4.5rem; text-align: center;
  border: none; background: transparent; color: var(--text-muted); font-weight: 700; font-size: .82rem;
  padding: .45rem .9rem; border-radius: 6px; cursor: pointer; transition: color .18s ease;
}
.cal-view-btn.is-active { color: #fff; }
.cal-view-btn:not(.is-active):hover { color: var(--text); }
.cal-nav { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.cal-nav-btn {
  width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text); font-size: 1.15rem; line-height: 1; display: grid; place-items: center; cursor: pointer;
  transition: border-color .18s, color .18s;
}
.cal-nav-btn:hover { border-color: var(--primary); color: var(--primary); }
.cal-nav-select { display: flex; gap: .4rem; }
.cal-nav-select select {
  border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text);
  font-weight: 700; font-family: var(--font-display); padding: .5rem .7rem; font-size: .95rem; cursor: pointer;
}
.cal-today-btn {
  border: 1px solid var(--border); border-radius: 9px; background: var(--primary-dark); color: white;
  font-weight: 600; font-size: .86rem; padding: .5rem 1rem; cursor: pointer; transition: border-color .18s, color .18s;
}
.cal-today-btn:hover { border-color: var(--primary); color: var(--primary); }

.cal-subscribe { position: relative; }
/* Colors/border/padding come from the shared .cal-today-btn class (kept in
   sync with the Today button on purpose) — this just adds the icon layout. */
.cal-subscribe-btn { display: inline-flex; align-items: center; gap: .4rem; }
.cal-subscribe-menu {
  position: absolute; top: calc(100% + .5rem); right: 0; z-index: 20; width: 230px; max-width: calc(100vw - 2.5rem);
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg);
  padding: .6rem; display: flex; flex-direction: column; gap: .15rem;
}
.cal-subscribe-hint { font-size: .74rem; color: var(--text-muted); margin: 0 0 .4rem; padding: 0 .3rem; line-height: 1.4; }
.cal-subscribe-option {
  display: block; width: 100%; text-align: left; border: none; background: none; color: var(--text);
  font-size: .88rem; font-weight: 600; padding: .55rem .6rem; border-radius: 8px; cursor: pointer;
  transition: background .15s ease, color .15s ease; text-decoration: none; font-family: inherit;
}
.cal-subscribe-option:hover { background: var(--bg); color: var(--primary); }

/* On phones the legend collapses behind this button into a popover instead
   of sitting in the toolbar as 3 chips — see the mobile media query below.
   Desktop always shows the chips directly, so this stays hidden there. */
.cal-legend-toggle { display: none; align-items: center; gap: .4rem; }
.cal-legend { display: flex; gap: .6rem; flex-wrap: wrap; }
.cal-legend-item {
  display: inline-flex; align-items: center; gap: .4rem; font-size: .74rem; font-weight: 700;
  padding: .35rem .8rem; border-radius: 100px; text-transform: uppercase; letter-spacing: .05em;
}
.cal-legend-item::before { content: ''; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cal-legend-event { background: rgba(14, 165, 233, .1); color: #0369a1; }
.cal-legend-event::before { background: #0ea5e9; }
.cal-legend-training { background: rgba(16, 185, 129, .1); color: #047857; }
.cal-legend-training::before { background: #10b981; }
.cal-legend-internal { background: rgba(139, 92, 246, .1); color: #6d28d9; }
.cal-legend-internal::before { background: #8b5cf6; }

.cal-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: .6rem; margin-bottom: .6rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
  text-align: center;
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .6rem; }
.cal-cell {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  min-height: 108px; padding: .6rem; display: flex; flex-direction: column; gap: .35rem;
  min-width: 0; /* grid items default to min-width:auto — without this, an
    unbreakable long event title refuses to shrink and grows its whole
    column at the expense of its neighbours */
}
.cal-cell.is-muted { background: var(--bg); }
.cal-cell.is-muted .cal-daynum { color: var(--text-muted); opacity: .55; }
.cal-cell.is-today { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(227, 6, 19, .15); }
.cal-daynum { font-family: var(--font-display); font-weight: 700; font-size: .95rem; }
.cal-cell.is-today .cal-daynum {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--primary); color: #fff;
}
.cal-event {
  display: inline-block; max-width: 100%; min-width: 0; font-size: .74rem; font-weight: 600;
  padding: .3rem .55rem; border-radius: 7px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; cursor: pointer; transition: transform .15s ease, filter .15s ease;
}
.cal-event:hover { transform: translateY(-1px); filter: brightness(1.08); }
.cal-event-event { background: rgba(14, 165, 233, .12); color: #0369a1; }
.cal-event-training { background: rgba(16, 185, 129, .12); color: #047857; }
.cal-event-internal { background: rgba(139, 92, 246, .12); color: #6d28d9; }

/* Flows with the page like everything else — no bounded/scrolling panel
   (that meant a second, ugly internal scrollbar). Upcoming/Past is a
   filter (below), not two stacked sections — whichever is selected
   replaces the whole list, so there's only ever one thing to read. */
.cal-list-filter { display: flex; gap: .5rem; margin-bottom: 1.5rem; }
.cal-list-filter-btn {
  border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
  font-weight: 700; font-size: .82rem; padding: .5rem 1.1rem; border-radius: 100px; cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.cal-list-filter-btn.is-active { background: rgba(227, 6, 19, .1); border-color: rgba(227, 6, 19, .3); color: var(--primary); }
.cal-list-filter-btn:not(.is-active):hover { border-color: var(--primary); color: var(--primary); }
.cal-list-month-header {
  font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--text); margin: 2rem 0 .8rem;
}
.cal-list-month-header:first-child { margin-top: 0; }
.cal-list-item {
  display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1.1rem; margin-bottom: .6rem;
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--border);
  border-radius: 12px; cursor: pointer;
}
.cal-list-item-event { border-left-color: #0ea5e9; }
.cal-list-item-training { border-left-color: #10b981; }
.cal-list-item-internal { border-left-color: #8b5cf6; }
.cal-list-date { display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; width: 52px; text-align: center; }
.cal-list-weekday { font-size: .68rem; font-weight: 700; text-transform: uppercase; color: var(--text-muted); letter-spacing: .04em; }
.cal-list-day { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; line-height: 1.1; color: var(--text); }
.cal-list-body { min-width: 0; flex: 1; }
.cal-list-cat {
  display: inline-flex; align-items: center; font-size: .68rem; font-weight: 700;
  padding: .2rem .6rem; border-radius: 100px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .4rem;
}
.cal-list-title { font-size: 1.02rem; font-weight: 700; margin: 0 0 .25rem; }
.cal-list-meta { font-size: .84rem; color: var(--text-muted); margin: 0; }

.cal-status {
  grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; padding: 3.5rem 1rem; text-align: center; color: var(--text-muted); font-size: .92rem;
}
.cal-spinner {
  width: 32px; height: 32px; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--primary);
  animation: cal-spin .8s linear infinite;
}
@keyframes cal-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .cal-spinner { animation-duration: 1.6s; }
}

.cal-modal-backdrop {
  position: fixed; inset: 0; z-index: 60; background: rgba(10, 12, 14, .6);
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  opacity: 0; visibility: hidden; transition: opacity .2s ease;
}
.cal-modal-backdrop.is-visible { opacity: 1; visibility: visible; }
.cal-modal {
  background: var(--surface); border-radius: var(--radius-lg); padding: 2.2rem 2rem;
  max-width: 420px; width: 100%; position: relative; box-shadow: var(--shadow-lg);
  transform: translateY(12px); transition: transform .25s ease;
}
.cal-modal-backdrop.is-visible .cal-modal { transform: translateY(0); }
.cal-modal-close {
  position: absolute; top: 1rem; right: 1rem; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--bg); color: var(--text-muted); font-size: 1.2rem;
  line-height: 1; cursor: pointer; display: grid; place-items: center; transition: border-color .18s, color .18s;
}
.cal-modal-close:hover { border-color: var(--primary); color: var(--primary); }
.cal-modal-category {
  display: inline-flex; align-items: center; gap: .4rem; font-size: .74rem; font-weight: 700;
  padding: .35rem .8rem; border-radius: 100px; text-transform: uppercase; letter-spacing: .05em;
}
.cal-modal-category::before { content: ''; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cal-modal-category.cal-legend-event { background: rgba(14, 165, 233, .1); color: #0369a1; }
.cal-modal-category.cal-legend-event::before { background: #0ea5e9; }
.cal-modal-category.cal-legend-training { background: rgba(16, 185, 129, .1); color: #047857; }
.cal-modal-category.cal-legend-training::before { background: #10b981; }
.cal-modal-category.cal-legend-internal { background: rgba(139, 92, 246, .1); color: #6d28d9; }
.cal-modal-category.cal-legend-internal::before { background: #8b5cf6; }
.cal-modal-title { font-size: 1.4rem; font-weight: 800; margin: .9rem 0 .3rem; }
.cal-modal-meta { font-size: .88rem; color: var(--text-muted); margin: 0 0 1.1rem; }
.cal-modal-desc { font-size: .98rem; color: var(--text); margin: 0; line-height: 1.6; }

@media (max-width: 700px) {
  /* The toolbar (toggle, today/nav, legend, subscribe) is too much content
     for one row at phone widths — a horizontal-scrolling single row was
     tried, but a toolbar you have to swipe to see the rest of isn't
     actually more usable than one that just wraps. Instead every piece is
     shrunk to fit into 1-2 plain, fully-visible rows: the view toggle and
     today button lose a little padding, the legend collapses behind a
     small toggle button that opens it as a popover (same pattern as
     Subscribe, and desktop still shows the legend chips directly — see the
     .cal-legend-toggle / .cal-legend rules), and Subscribe drops its label
     down to icon-only, keeping only an aria-label for it.
  */
  .cal-toolbar { row-gap: .5rem; column-gap: .5rem; justify-content: flex-start; }
  /* Unwraps the controls/meta grouping divs so their children flow as
     direct items of .cal-toolbar itself — otherwise each group wraps as
     one rectangular block, and the small legend/subscribe icons end up
     stranded on their own row below a wide nav row instead of packing in
     next to the toggle where there's room. order then puts the wide nav
     control last, so it's the one pushed onto its own line. */
  .cal-toolbar-controls, .cal-toolbar-meta { display: contents; }
  .cal-view-toggle { order: 1; }
  .cal-toolbar-controls .cal-today-btn { order: 2; margin-left: 0; }
  .cal-legend-toggle { order: 3; }
  .cal-subscribe { order: 4; }
  #calNavControls { order: 5; flex-basis: 100%; }
  .cal-view-btn { min-width: 3.6rem; padding: .4rem .6rem; font-size: .78rem; }
  .cal-today-btn { padding: .45rem .7rem; font-size: .8rem; }
  .cal-nav-select select { padding: .4rem .5rem; font-size: .85rem; }
  /* Touch browsers simulate :hover on tap and leave it stuck until the next
     tap elsewhere, which reads as a lingering highlight rather than a real
     hover state — so these two lose the hover styling on mobile. */
  .cal-subscribe-btn:hover, .cal-legend-toggle:hover { border-color: var(--border); color: white; }
  .cal-btn-label { display: none; }
  .cal-legend-toggle { display: inline-flex; }
  .cal-legend {
    display: none; flex-direction: column; align-items: stretch; gap: .3rem; position: fixed; z-index: 20;
    width: 200px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: var(--shadow-lg); padding: .6rem;
  }
  .cal-legend.is-open { display: flex; }
  .cal-legend-item { justify-content: center; }
  .cal-weekdays span { font-size: .62rem; }
  .cal-grid, .cal-weekdays { gap: .2rem; }
  .cal-cell { min-height: 60px; padding: .2rem; border-radius: 8px; gap: .16rem; }
  .cal-daynum { font-size: .78rem; }
  .cal-cell.is-today .cal-daynum { width: 20px; height: 20px; font-size: .72rem; }
  /* Each event reads as its own row inside the day square (Google
     Calendar's mobile month view), not a dot — a dot carries no
     information at this size, a labelled bar at least shows the title.
     Padding is kept minimal since a 7-column grid only leaves ~35-45px
     of width per day on a phone either way. */
  .cal-event {
    display: block; width: 100%; max-width: 100%; font-size: .56rem; font-weight: 700;
    padding: .1rem .18rem; border-radius: 4px; line-height: 1.3;
  }
  .cal-list-item { padding: .8rem .9rem; gap: .7rem; }
  .cal-list-date { width: 40px; }
  .cal-list-day { font-size: 1.1rem; }
  .cal-list-title { font-size: .92rem; }
  .cal-list-meta { font-size: .78rem; }
  .cal-list-filter-btn { font-size: .78rem; padding: .45rem .9rem; }
}

/* ---------- CTA box (adapted from home-3, recoloured to home-2 palette) ---------- */
.cta { padding: 5rem 0; }
.cta-box {
  background: linear-gradient(140deg, var(--primary) 0%, var(--primary-dark) 55%, var(--amber) 100%);
  border-radius: var(--radius-lg); padding: 3.75rem 3rem; text-align: center; color: #fff;
  position: relative; overflow: hidden;
}
.cta-box::before {
  content: ''; position: absolute; top: -45%; right: -8%; width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(255, 255, 255, .16), transparent 66%); border-radius: 50%; pointer-events: none;
}
.cta-box::after {
  content: ''; position: absolute; bottom: -55%; left: -6%; width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(255, 255, 255, .11), transparent 66%); border-radius: 50%; pointer-events: none;
}
.cta-box h2 { font-size: clamp(1.9rem, 4vw, 2.85rem); font-weight: 800; margin-bottom: 1rem; position: relative; }
.cta-box p { font-size: 1.1rem; opacity: .95; max-width: 38rem; margin: 0 auto 2.2rem; position: relative; color: #fff; }
.cta-box .btn-light { box-shadow: 0 10px 34px rgba(0, 0, 0, .2); }
.cta-box .btn-outline-inv { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .4); }
.cta-box .btn-outline-inv:hover { background: rgba(255, 255, 255, .22); border-color: #fff; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink-2); color: var(--text-inv-muted); padding: 3.5rem 0 1.75rem; border-top: 1px solid var(--border-inv); }
.site-footer h5 { font-family: var(--font-display); color: #fff; font-size: .95rem; font-weight: 700; margin: 0 0 1rem; }
.footer-brand { font-family: var(--font-display); font-size: 1.45rem; font-weight: 800; color: #fff; margin-bottom: .9rem; letter-spacing: -.04em; }
.footer-brand span { color: var(--primary); }
.site-footer p { font-size: .9rem; margin: 0 0 1rem; line-height: 1.65; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .55rem; }
.site-footer a { color: var(--text-inv-muted); font-size: .9rem; transition: color .18s; }
.site-footer a:hover { color: #fff; }
.footer-social { display: flex; gap: .55rem; margin-top: 1.1rem; }
.footer-social a {
  width: 36px; height: 36px; border-radius: 8px; background: rgba(255, 255, 255, .07);
  display: grid; place-items: center; font-size: 1rem; transition: background .18s; color: #fff;
}
.footer-social a:hover { background: var(--primary); color: #fff; }
.footer-copyright { font-size: .84rem; margin: 1.5rem 0 0; }

/* ---------- contact page ---------- */
.contact-panel { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }

.contact-top {
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 68%, #2a1d20 100%);
  color: #fff; padding: 2.25rem 2.5rem; position: relative; overflow: hidden;
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2rem 2.5rem;
}
.contact-top::before {
  content: ''; position: absolute; top: -60%; right: -15%; width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(227, 6, 19, .22), transparent 62%); pointer-events: none;
}
.contact-top a { color: #fff; }
.contact-top a:hover { color: var(--amber); }

.contact-panel-form { padding: 3.25rem 2.75rem 3.5rem; }
.contact-form-heading { max-width: 34rem; margin-bottom: 2rem; }
.contact-form-heading .eyebrow { margin-bottom: .7rem; font-size: .78rem !important; }
.contact-form-heading h3 { font-size: clamp(1.5rem, 2.8vw, 2rem); font-weight: 800; margin-bottom: .45rem; }
.contact-form-heading p:last-child { color: var(--text-muted); font-size: .95rem; margin: 0; }

.contact-top-item {
  display: flex; align-items: flex-start; gap: .85rem; position: relative; flex: 1 1 220px;
  padding: .7rem; margin: -.7rem; border: 1px solid transparent; border-radius: 14px;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.contact-top-item:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); transform: translateY(-2px); }
.contact-top-label { font-size: .78rem; color: var(--text-inv-muted); font-weight: 600; }
.contact-icon {
  width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0;
  background: rgba(255, 255, 255, .1); transition: transform .2s ease, background .2s ease;
}
.contact-top-item:hover .contact-icon { transform: scale(1.08) rotate(-3deg); background: rgba(255, 255, 255, .16); }
.contact-icon-red { color: #ff6b60; }
.contact-icon-green { color: #34d399; }
.contact-icon-amber { color: var(--amber); }

.contact-socials { display: flex; flex-wrap: wrap; gap: .75rem; position: relative; margin-left: auto; }
.contact-socials a {
  width: 60px; height: 60px; border-radius: 16px; background: rgba(255, 255, 255, .08);
  border: 1px solid transparent; display: grid; place-items: center; color: var(--primary);
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.contact-socials a:hover { border-color: var(--primary); transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.form-label { font-weight: 600; font-size: .92rem; }
.form-control {
  border: 1.5px solid var(--border); border-radius: 10px; padding: .78rem .9rem; font-size: .95rem;
  background: var(--bg); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.form-control:focus {
  border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 .2rem rgba(227, 6, 19, .12);
}
.message-meta {
  display: flex; justify-content: space-between; gap: 1rem; margin-top: .45rem;
  color: var(--text-muted); font-size: .78rem; line-height: 1.4;
}
.message-meta #message-count { font-variant-numeric: tabular-nums; white-space: nowrap; }
.message-meta #message-count.is-over-limit { color: var(--primary); font-weight: 700; }
.reason-chips { 
  display: flex; 
  flex-wrap: wrap; 
  gap: .5rem; 
  margin-top: .6rem; 
}

.reason-chip {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 100px; 
  padding: .5rem 1.05rem;
  font-size: .86rem; 
  font-weight: 600; 
  color: var(--text-muted); 
  cursor: pointer; 
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}

.reason-chip:hover {
  border-color: var(--primary); color: var(--primary); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(227, 6, 19, .1);
}

.reason-chip.is-active {
  background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 8px 20px rgba(227, 6, 19, .2);
}
#contact-status { font-size: .92rem; margin-top: 1rem; display: none; }
#contact-status.is-success { color: var(--green); display: block; }
#contact-status.is-error { color: var(--primary); display: block; }

@media (max-width: 640px) {
  .contact-socials { margin-left: 0; }
  .contact-top { padding: 1.5rem; gap: 1rem; }
  .contact-top-item { flex-basis: 100%; margin: -.45rem; padding: .45rem; }
  .contact-panel-form { padding: 2.25rem 1.25rem 2.5rem; }
}

/* ---------- shared hover accent (lift + red border + shadow) ----------
   One class, reused everywhere a card/tile/button should react to hover
   the same way: partner tiles, programme cards, step cards, gallery
   tiles, video cards, and the two hero buttons. */
.hover-accent { transition: transform .18s, box-shadow .18s, border-color .18s; }
.hover-accent:hover { border-color: var(--primary); transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* ---------- misc ---------- */
.motion-ready .motion-reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .65s ease var(--reveal-delay, 0ms), transform .65s cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0ms);
}
.motion-ready .motion-reveal.is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hover-accent, .btn, .gitem img, .contact-top-item, .contact-icon, .reason-chip,
  .page-hero-chip, .page-hero-chip svg, .story-photo, .about-pillars .step-card,
  .about-pillars .step-num, .about-team .team-photo, .about-team .team-card-overlay,
  .involvement-card, .involvement-card::after, .involvement-card p, .involvement-card .step-num,
  .involvement-grid > [class*="col-"] { transition: none !important; }
  .motion-ready .story-photo.motion-reveal.is-revealed,
  .motion-ready .about-team .team-card.motion-reveal.is-revealed .team-photo { animation: none !important; }
  .motion-ready .motion-reveal { opacity: 1; transform: none; transition: none !important; }
}