/* ==========================================================================
   IRETI experience layer
   Parallax bands, scroll-driven counters, the Our Work in Action scroller,
   the Our Beneficiaries carousel, and the motion system.

   Loads last, after progress.css, so it wins the cascade over the six legacy
   stylesheets without needing !important.
   ========================================================================== */

:root {
  --fx-navy: #0b2e6e;
  --fx-navy-deep: #08245b;
  --fx-gold: #c8900a;
  --fx-gold-strong: #a97a08;
  --fx-ink: #14203a;
  --fx-soft: #5a6478;
  --fx-paper: #f4f7fb;
  --fx-ease: cubic-bezier(.22, .85, .25, 1);
}

/* ==========================================================================
   1. Motion system
   Everything animates FROM a visible resting state. If the observer never
   fires, or scripting is off, the content is still fully readable.
   ========================================================================== */
.fx { will-change: transform, opacity; }

html.fx-on .fx-up    { opacity: 0; transform: translate3d(0, 26px, 0); }
html.fx-on .fx-left  { opacity: 0; transform: translate3d(-30px, 0, 0); }
html.fx-on .fx-right { opacity: 0; transform: translate3d(30px, 0, 0); }
html.fx-on .fx-zoom  { opacity: 0; transform: scale(.94); }
html.fx-on .fx-clip  { opacity: 0; clip-path: inset(0 0 100% 0); }

html.fx-on .fx-up,
html.fx-on .fx-left,
html.fx-on .fx-right,
html.fx-on .fx-zoom,
html.fx-on .fx-clip {
  transition:
    opacity .78s var(--fx-ease) var(--fx-delay, 0ms),
    transform .78s var(--fx-ease) var(--fx-delay, 0ms),
    clip-path .9s var(--fx-ease) var(--fx-delay, 0ms);
}

html.fx-on .fx-in {
  opacity: 1 !important;
  transform: none !important;
  clip-path: inset(0 0 0 0) !important;
}

/* a gold rule that draws itself under a section heading */
.fx-rule { position: relative; padding-bottom: 16px; }
.fx-rule::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 3px; width: 74px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--fx-gold), #e8c565);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .8s var(--fx-ease) .18s;
}
.fx-rule.fx-in::after { transform: scaleX(1); }
.fx-rule.fx-center { padding-bottom: 18px; }
.fx-rule.fx-center::after { left: 50%; margin-left: -37px; transform-origin: center; }

/* ==========================================================================
   2. Parallax band
   A real transform-driven parallax. background-attachment:fixed is avoided
   because iOS Safari ignores it and it forces expensive repaints.
   ========================================================================== */
.px-band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  place-items: center;
  min-height: clamp(340px, 46vw, 520px);
  padding: clamp(56px, 8vw, 104px) max(6vw, 24px);
  text-align: center;
  color: #fff;
  background: var(--fx-navy-deep);
}
.px-media {
  position: absolute;
  inset: -18% 0 -18% 0;      /* extra height so the translate never exposes an edge */
  z-index: -2;
  background-position: center 50%;
  background-size: cover;
  background-repeat: no-repeat;
  will-change: transform;
}
.px-band::after {                /* scrim: keeps text at AA on any photograph */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgb(8 36 91 / .58), rgb(8 36 91 / .72)),
    radial-gradient(120% 90% at 50% 40%, rgb(8 36 91 / .18), rgb(8 36 91 / .82));
}
.px-inner { max-width: 62ch; margin: 0 auto; }
.px-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: #f0cf7a;
  margin: 0 0 16px;
}
.px-band h2 {
  font-family: "Bricolage Grotesque", Karla, sans-serif;
  font-size: clamp(30px, 4.1vw, 50px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-wrap: balance;
  margin: 0;
  color: #fff;
}
.px-band p {
  margin: 18px auto 0;
  max-width: 54ch;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.65;
  color: rgb(255 255 255 / .88);
}
.px-actions { margin-top: 28px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.px-actions a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .3s var(--fx-ease), box-shadow .3s var(--fx-ease), background .3s;
}
.px-actions .px-primary {
  background: linear-gradient(180deg, #e0ad3f, var(--fx-gold-strong));
  color: #1c1503;
  box-shadow: 0 10px 26px -12px rgb(0 0 0 / .6);
}
.px-actions .px-ghost { border: 1.5px solid rgb(255 255 255 / .5); color: #fff; }
.px-actions a:hover { transform: translateY(-2px); }
.px-actions .px-ghost:hover { background: rgb(255 255 255 / .12); border-color: #fff; }

/* a quiet statistic row some bands carry */
.px-stats {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 46px;
}
.px-stats div { min-width: 116px; }
.px-stats b {
  display: block;
  font-family: "Bricolage Grotesque", Karla, sans-serif;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700;
  line-height: 1;
  color: #f3d68a;
  font-variant-numeric: tabular-nums;
}
.px-stats span {
  display: block;
  margin-top: 7px;
  font-size: 12px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgb(255 255 255 / .74);
}

/* ==========================================================================
   3. Our Recent Event
   ========================================================================== */
.recent-event { padding: clamp(64px, 8vw, 110px) max(6vw, 22px); background: #fff; }
.recent-event-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  gap: clamp(30px, 5vw, 66px);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) { .recent-event-inner { grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); } }

.recent-event .eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .19em;
  text-transform: uppercase; color: var(--fx-gold); margin: 0 0 14px;
}
.recent-event h2 {
  font-family: "Bricolage Grotesque", Karla, sans-serif;
  font-size: clamp(34px, 4.4vw, 54px);
  font-weight: 700; line-height: 1.06; letter-spacing: -.022em;
  color: var(--fx-ink); margin: 0; text-wrap: balance;
}
.recent-event h3 {
  font-family: "Bricolage Grotesque", Karla, sans-serif;
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 600; color: var(--fx-navy); margin: 22px 0 12px;
}
.recent-event p:not(.eyebrow) {
  font-size: 16px; line-height: 1.72; color: var(--fx-soft); max-width: 46ch; margin: 0;
}
.event-meta {
  margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px;
}
.event-meta span {
  font-size: 12.5px; font-weight: 600; color: var(--fx-navy);
  background: #eef2fa; border-radius: 999px; padding: 7px 14px;
}

/* photo composition: one lead frame, two stacked beside it */
.event-photos {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .event-photos { grid-template-columns: 1.25fr .75fr; align-items: stretch; } }
.event-photos > img,
.event-stack > img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 16px;
  box-shadow: 0 18px 44px -26px rgb(8 36 91 / .55);
}
.event-photos > img { min-height: 260px; }
@media (min-width: 700px) { .event-photos > img { min-height: 430px; } }
.event-stack { display: grid; gap: 14px; grid-template-rows: 1fr 1fr; }
.event-stack > img { min-height: 150px; }
@media (min-width: 700px) { .event-stack > img { min-height: 0; } }

.event-photos img { transition: transform .6s var(--fx-ease), box-shadow .6s var(--fx-ease); }
.event-photos img:hover { transform: translateY(-4px) scale(1.012); box-shadow: 0 26px 56px -26px rgb(8 36 91 / .62); }

/* slot for a photograph that has not been supplied yet */
.event-slot {
  display: grid; place-items: center; text-align: center;
  border-radius: 16px; min-height: 150px; padding: 20px;
  background: repeating-linear-gradient(112deg, #eef2f8 0 12px, #e6ecf5 12px 24px);
  border: 1px dashed #c3cddd; color: var(--fx-soft); font-size: 12.5px; line-height: 1.5;
}
.event-slot b { display: block; color: var(--fx-ink); font-size: 13px; margin-bottom: 4px; }

/* ==========================================================================
   4. Our Beneficiaries — carousel
   ========================================================================== */
.beneficiaries { padding: clamp(58px, 7vw, 96px) 0; background: var(--fx-paper); overflow: hidden; }
.bn-head { max-width: 1180px; margin: 0 auto clamp(30px, 4vw, 46px); padding: 0 max(6vw, 22px); text-align: center; }
.bn-head .eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .19em;
  text-transform: uppercase; color: var(--fx-gold); margin: 0 0 13px;
}
.bn-head h2 {
  font-family: "Bricolage Grotesque", Karla, sans-serif;
  font-size: clamp(28px, 3.6vw, 44px); font-weight: 700;
  letter-spacing: -.02em; color: var(--fx-ink); margin: 0 auto; text-wrap: balance;
}
.bn-head p { margin: 15px auto 0; max-width: 60ch; color: var(--fx-soft); font-size: 15.5px; line-height: 1.65; }

.bn-viewport { max-width: 1180px; margin: 0 auto; padding: 0 max(6vw, 22px); }
.bn-track {
  display: flex; gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 6px 2px 10px;
}
.bn-track::-webkit-scrollbar { display: none; }
.bn-card {
  flex: 0 0 calc((100% - 54px) / 4);
  min-width: 178px;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid #e3e9f2;
  border-radius: 14px;
  padding: 28px 20px 22px;
  display: grid;
  place-items: center;
  gap: 14px;
  text-align: center;
  transition: transform .45s var(--fx-ease), box-shadow .45s var(--fx-ease), border-color .45s;
}
@media (max-width: 900px) { .bn-card { flex-basis: calc((100% - 36px) / 3); } }
@media (max-width: 660px) { .bn-card { flex-basis: calc((100% - 18px) / 2); } }
@media (max-width: 430px) { .bn-card { flex-basis: 100%; } }
.bn-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px -24px rgb(8 36 91 / .4); border-color: #cfdaea; }
.bn-card img { max-width: 128px; max-height: 62px; width: auto; height: auto; object-fit: contain; }
.bn-card b { font-size: 13.5px; font-weight: 700; color: var(--fx-navy); }

/* ==========================================================================
   5. Our Work in Action — continuous scroller
   ========================================================================== */
.work-gallery { padding: clamp(58px, 7vw, 96px) 0 clamp(48px, 6vw, 78px); background: #fff; overflow: hidden; }
.wg-head { max-width: 1180px; margin: 0 auto clamp(30px, 4vw, 44px); padding: 0 max(6vw, 22px); text-align: center; }
.wg-head .eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .19em;
  text-transform: uppercase; color: var(--fx-gold); margin: 0 0 13px;
}
.wg-head h2 {
  font-family: "Bricolage Grotesque", Karla, sans-serif;
  font-size: clamp(28px, 3.6vw, 44px); font-weight: 700;
  letter-spacing: -.02em; color: var(--fx-ink); margin: 0 auto; text-wrap: balance;
}
.wg-head p { margin: 15px auto 0; max-width: 66ch; color: var(--fx-soft); font-size: 15.5px; line-height: 1.65; }

.wg-viewport {
  position: relative;
  /* fade the strip into the page at both ends */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.wg-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 8px 0 14px;
  cursor: grab;
  scroll-behavior: auto;
}
.wg-track::-webkit-scrollbar { display: none; }
.wg-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.wg-item {
  flex: 0 0 auto;
  width: clamp(210px, 24vw, 310px);
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  background: #e9edf4;
  box-shadow: 0 14px 34px -22px rgb(8 36 91 / .5);
  transition: transform .5s var(--fx-ease), box-shadow .5s var(--fx-ease);
}
.wg-item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .8s var(--fx-ease), filter .5s;
  -webkit-user-drag: none; user-select: none;
}
.wg-item:hover { transform: translateY(-5px); box-shadow: 0 24px 48px -22px rgb(8 36 91 / .58); }
.wg-item:hover img { transform: scale(1.06); }

.wg-controls {
  max-width: 1180px;
  margin: 20px auto 0;
  padding: 0 max(6vw, 22px);
  display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
}
.wg-btn {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1.5px solid #d3dce9; background: #fff; color: var(--fx-navy);
  display: grid; place-items: center; cursor: pointer; font-size: 16px; line-height: 1;
  transition: background .3s, border-color .3s, transform .3s var(--fx-ease);
}
.wg-btn:hover { background: var(--fx-navy); border-color: var(--fx-navy); color: #fff; transform: translateY(-2px); }
.wg-dots { display: flex; gap: 7px; align-items: center; }
.wg-dots button {
  width: 8px; height: 8px; padding: 0; border-radius: 50%;
  border: none; background: #cbd5e4; cursor: pointer;
  transition: background .3s, width .3s var(--fx-ease);
}
.wg-dots button[aria-current="true"] { background: var(--fx-gold); width: 22px; border-radius: 4px; }

/* ==========================================================================
   6. Fixes to existing sections
   ========================================================================== */
/* the impact strip alternated gold on the 2nd and 4th tiles, encoding nothing */
.impact-strip > div { background: #fff !important; color: var(--fx-ink) !important; }
.impact-strip > div b { color: var(--fx-navy) !important; font-variant-numeric: tabular-nums; }
.impact-strip > div span { color: var(--fx-soft) !important; }
.impact-strip > div { transition: transform .4s var(--fx-ease); }
.impact-strip > div:hover { transform: translateY(-3px); }

/* the old prev/next control design.js injects after .work-row is no longer used */
.work-row + .slider-nav { display: none; }

@media (prefers-reduced-motion: reduce) {
  html.fx-on .fx-up, html.fx-on .fx-left, html.fx-on .fx-right,
  html.fx-on .fx-zoom, html.fx-on .fx-clip {
    opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important;
  }
  .fx-rule::after { transform: scaleX(1) !important; transition: none !important; }
  .px-media { transform: none !important; }
  .wg-item, .wg-item img, .bn-card, .event-photos img { transition: none !important; }
}

/* audit.css paints a navy wave via `.recent-event::after`, sized for the old
   layout. On the redesigned white section it cuts across the photographs. */
.recent-event::after { content: none; }

/* The lead photograph is portrait; keep the faces in frame when it crops. */
.event-lead { object-position: center 30%; }
@media (min-width: 700px) { .event-photos > .event-lead { min-height: 470px; } }
.event-slot--lead { min-height: 260px; }
@media (min-width: 700px) { .event-slot--lead { min-height: 470px; } }
.event-slot code { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 11.5px; background: #dde5f0; padding: 1px 5px; border-radius: 3px; }

/* ==========================================================================
   7. Colour correction — remove the greens
   clone.css sets --text:#526354 (a green-biased grey) as the sitewide body
   colour, and audit.css repeats greens through the footer. IRETI's palette is
   navy and gold, so every neutral is re-based toward navy.
   ========================================================================== */
:root { --text: #4b5568; }
body { color: var(--text); }
footer { color: #4b5568 !important; }
footer h4 { color: var(--fx-navy) !important; }
footer a, footer p { color: #4b5568 !important; }
.footer-bottom { color: #6b7488 !important; }
.success { background: #eaf1fb !important; color: #14203a !important; border-left: 3px solid var(--fx-navy); }

/* ==========================================================================
   8. Header — curved bottom edge, sitewide
   ========================================================================== */
.head {
  position: relative;
  z-index: 5;
  background: #fff;
}
.head::after {
  content: "";
  position: absolute;
  left: -2%; right: -2%; bottom: -26px;
  height: 30px;
  z-index: 6;
  pointer-events: none;
  background: #fff;
  border-radius: 0 0 52% 52% / 0 0 100% 100%;
  box-shadow: 0 12px 26px -18px rgb(11 46 110 / .45);
}
/* a hairline of brand gold riding the curve */
.head::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  z-index: 7;
  background: linear-gradient(90deg, transparent, var(--fx-gold) 22%, #e8c565 50%, var(--fx-gold) 78%, transparent);
  opacity: .55;
}
/* the hero and page hero sit under the curve */
.hero, .pagehero, .px-band:first-of-type { position: relative; }

/* ==========================================================================
   9. Dignity — rebuilt
   ========================================================================== */
.dignity.dg {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: clamp(70px, 9vw, 124px) max(6vw, 22px) clamp(56px, 7vw, 96px);
  background:
    radial-gradient(90% 70% at 82% 8%, #f2f6fd 0%, transparent 58%),
    linear-gradient(180deg, #fff 0%, #f7f9fd 100%);
  display: block;
}
.dg-decor { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.dg-orb {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(2px); opacity: .5;
}
.dg-orb-a {
  width: 340px; height: 340px; right: -90px; top: -70px;
  background: radial-gradient(circle at 32% 32%, rgb(232 199 106 / .40), rgb(232 199 106 / 0) 68%);
  animation: dg-drift 17s ease-in-out infinite;
}
.dg-orb-b {
  width: 280px; height: 280px; left: -80px; bottom: 4%;
  background: radial-gradient(circle at 60% 40%, rgb(49 109 219 / .26), rgb(49 109 219 / 0) 70%);
  animation: dg-drift 21s ease-in-out infinite reverse;
}
.dg-ring {
  position: absolute; right: 6%; bottom: 12%;
  width: 330px; height: 330px; border-radius: 50%;
  border: 1px solid rgb(11 46 110 / .10);
  animation: dg-drift 26s ease-in-out infinite;
}
@keyframes dg-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-18px, 22px, 0) scale(1.05); }
}

.dg-inner {
  max-width: 1180px; margin: 0 auto;
  display: grid; gap: clamp(34px, 5vw, 72px);
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 940px) { .dg-inner { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); } }

.dg-copy .eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .19em;
  text-transform: uppercase; color: var(--fx-gold); margin: 0 0 15px; display: block;
}
.dg-copy h2 {
  font-family: "Bricolage Grotesque", Karla, sans-serif;
  font-size: clamp(32px, 4.2vw, 52px); font-weight: 700;
  line-height: 1.07; letter-spacing: -.024em; color: var(--fx-ink);
  margin: 0; text-wrap: balance; max-width: 17ch;
}
.dg-quote {
  margin: 26px 0 0; padding: 18px 22px;
  border-left: 3px solid var(--fx-gold);
  background: linear-gradient(90deg, rgb(232 199 106 / .16), rgb(232 199 106 / 0));
  border-radius: 0 10px 10px 0;
}
.dg-quote p {
  margin: 0; font-size: clamp(15.5px, 1.5vw, 17.5px); line-height: 1.6;
  font-style: italic; color: var(--fx-ink); font-weight: 500;
}
.dg-quote cite {
  display: block; margin-top: 9px; font-style: normal;
  font-size: 12.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--fx-gold-strong);
}
.dg-lead { margin: 22px 0 0; font-size: 16px; line-height: 1.75; color: var(--fx-soft); max-width: 52ch; }

.dg-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.dg-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 26px; border-radius: 999px;
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; position: relative; overflow: hidden;
  transition: transform .32s var(--fx-ease), box-shadow .32s var(--fx-ease), background .32s, color .32s;
}
.dg-btn span { transition: transform .32s var(--fx-ease); }
.dg-btn:hover span { transform: translateX(4px); }
.dg-btn-solid { background: var(--fx-navy); color: #fff; box-shadow: 0 14px 30px -16px rgb(11 46 110 / .8); }
.dg-btn-solid:hover { transform: translateY(-3px); box-shadow: 0 20px 38px -16px rgb(11 46 110 / .9); }
.dg-btn-line { border: 1.5px solid rgb(11 46 110 / .3); color: var(--fx-navy); }
.dg-btn-line:hover { border-color: var(--fx-navy); background: rgb(11 46 110 / .05); transform: translateY(-3px); }

/* image frame with pointer tilt */
.dg-visual { position: relative; }
.dg-frame {
  margin: 0; border-radius: 22px; overflow: hidden; position: relative;
  box-shadow: 0 30px 70px -34px rgb(8 36 91 / .6);
  transform-style: preserve-3d;
  transition: transform .5s var(--fx-ease), box-shadow .5s var(--fx-ease);
}
.dg-frame img { width: 100%; height: auto; display: block; transition: transform .9s var(--fx-ease); }
.dg-frame:hover img { transform: scale(1.05); }
.dg-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 52%, rgb(8 36 91 / .68));
}
.dg-caption {
  position: absolute; left: 22px; bottom: 18px; z-index: 2;
  color: #fff; font-size: 12.5px; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase;
}
.dg-badge {
  position: absolute; left: -14px; bottom: -18px; z-index: 3;
  background: #fff; border-radius: 16px; padding: 16px 22px;
  display: flex; align-items: center; gap: 13px;
  box-shadow: 0 20px 44px -22px rgb(8 36 91 / .55);
  border: 1px solid #e6ecf5;
  animation: dg-float 6.5s ease-in-out infinite;
}
.dg-badge b {
  font-family: "Bricolage Grotesque", Karla, sans-serif;
  font-size: 38px; line-height: 1; color: var(--fx-gold-strong); font-variant-numeric: tabular-nums;
}
.dg-badge span { font-size: 12px; line-height: 1.35; font-weight: 600; color: var(--fx-soft); }
@keyframes dg-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* value pillars */
.dg-pillars {
  max-width: 1180px; margin: clamp(46px, 6vw, 74px) auto 0;
  padding: 0; list-style: none;
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.dg-pillar {
  background: #fff; border: 1px solid #e6ecf5; border-radius: 14px;
  padding: 22px 20px; display: grid; gap: 10px; align-content: start;
  position: relative; overflow: hidden;
  transition: transform .42s var(--fx-ease), box-shadow .42s var(--fx-ease), border-color .42s;
}
.dg-pillar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--fx-gold), #e8c565);
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--fx-ease);
}
.dg-pillar:hover { transform: translateY(-6px); box-shadow: 0 24px 46px -26px rgb(8 36 91 / .45); border-color: #d5dfee; }
.dg-pillar:hover::before { transform: scaleX(1); }
.dg-ico {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(160deg, #fdf4dc, #f6e6bd);
  transition: transform .42s var(--fx-ease);
}
.dg-pillar:hover .dg-ico { transform: rotate(-6deg) scale(1.06); }
.dg-ico svg { width: 21px; height: 21px; fill: none; stroke: var(--fx-gold-strong); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dg-pillar b { font-size: 14.5px; font-weight: 700; color: var(--fx-ink); line-height: 1.35; }
.dg-pillar-note { font-size: 13px; line-height: 1.55; color: var(--fx-soft); }

@media (prefers-reduced-motion: reduce) {
  .dg-orb, .dg-ring, .dg-badge { animation: none !important; }
}

/* ==========================================================================
   10. Ambient decor for plain white sections
   Injected by experience.js as .fx-decor; purely presentational.
   ========================================================================== */
.fx-host { position: relative; isolation: isolate; overflow: clip; }
.fx-decor { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.fx-decor i {
  position: absolute; display: block; border-radius: 50%;
  animation: fx-drift var(--d, 19s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.fx-decor .o1 {
  width: 300px; height: 300px; right: -80px; top: -60px;
  background: radial-gradient(circle at 34% 34%, rgb(232 199 106 / .30), rgb(232 199 106 / 0) 68%);
}
.fx-decor .o2 {
  width: 250px; height: 250px; left: -70px; bottom: 6%;
  background: radial-gradient(circle at 60% 40%, rgb(49 109 219 / .20), rgb(49 109 219 / 0) 70%);
}
.fx-decor .r1 {
  width: 280px; height: 280px; right: 8%; bottom: -70px;
  border: 1px solid rgb(11 46 110 / .09); background: none;
}
.fx-decor .d1 {
  width: 190px; height: 190px; left: 6%; top: 12%; border-radius: 0;
  background-image: radial-gradient(rgb(11 46 110 / .13) 1px, transparent 1px);
  background-size: 17px 17px;
  -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 72%);
          mask-image: radial-gradient(circle, #000 30%, transparent 72%);
}
@keyframes fx-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-20px, 24px, 0) scale(1.06); }
}

/* ==========================================================================
   11. Image and card interactions, sitewide
   ========================================================================== */
.fx-media { overflow: hidden; position: relative; }
.fx-media img { transition: transform .85s var(--fx-ease); display: block; }
.fx-media:hover img { transform: scale(1.06); }

/* a soft sheen that sweeps across on hover */
.fx-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / .26) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .85s var(--fx-ease);
}
.fx-media:hover::after { transform: translateX(120%); }

/* pointer-tracked tilt, applied by experience.js */
[data-tilt] { transition: transform .45s var(--fx-ease); transform-style: preserve-3d; }
[data-tilt].is-tilting { transition: transform .12s linear; }

/* cards and tiles across the site get a consistent lift */
.prog .card, .impact-stories article, .tile, .value-grid article,
.programme-pillars article, .about-chapters article, .board-grid .card,
.volunteer-grid article, .contact-card, .faq-item, .quick article {
  transition: transform .42s var(--fx-ease), box-shadow .42s var(--fx-ease);
}
.prog .card:hover, .impact-stories article:hover, .tile:hover,
.value-grid article:hover, .programme-pillars article:hover,
.about-chapters article:hover, .board-grid .card:hover,
.volunteer-grid article:hover, .contact-card:hover, .quick article:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 46px -26px rgb(8 36 91 / .42);
}

/* links and buttons */
.arrow, .text-link { transition: color .28s, letter-spacing .28s; }
.arrow:hover, .text-link:hover { letter-spacing: .012em; }
.btn, .outline-btn, .blue-btn, .donate {
  transition: transform .3s var(--fx-ease), box-shadow .3s var(--fx-ease), background .3s, color .3s;
}
.btn:hover, .outline-btn:hover, .blue-btn:hover, .donate:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -14px rgb(8 36 91 / .55);
}

/* the Donate button failed contrast at 2.82:1 — darken the gold to clear AA */
.donate, .btn { background: var(--fx-gold-strong) !important; }
.donate:hover, .btn:hover { background: #8f6706 !important; }

/* ==========================================================================
   12. Footer — superseded by section 16
   The old mobile rules trimmed a multi-column footer by position
   (`p:first-of-type` dropped the tagline). The footer is now just the mark,
   the registration number and the copyright, so those positional selectors
   would hide the registration number instead. Removed.
   ========================================================================== */

/* ==========================================================================
   13. Programme pages — backgrounds and the impact counter
   `.programme-proof` was #f6f8fb with #f3f3f3 stat tiles: two greys three
   points apart, so the counter had no visible container at all. The section
   ground is tinted toward navy and the tiles become real cards, matching the
   white-tile treatment used by the impact strip on the homepage.
   ========================================================================== */
.programme-proof {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(80% 70% at 88% 6%, rgb(232 199 106 / .13) 0%, transparent 60%),
    linear-gradient(168deg, #eef2f9 0%, #e6edf7 55%, #eef2f9 100%) !important;
}
.programme-proof::before {
  content: "";
  position: absolute;
  right: -120px; top: -110px;
  width: 420px; height: 420px;
  border-radius: 50%;
  border: 1px solid rgb(11 46 110 / .10);
  z-index: -1;
  pointer-events: none;
}
.programme-proof::after {
  content: "";
  position: absolute;
  left: -90px; bottom: -80px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle at 55% 45%, rgb(49 109 219 / .16), transparent 70%);
  z-index: -1;
  pointer-events: none;
}

/* the counter tiles */
.programme-proof .stats { gap: 14px !important; margin: 30px 0 26px !important; }
.programme-proof .stats > div {
  position: relative;
  background: #fff !important;
  border: 1px solid #dde5f0;
  border-radius: 16px !important;
  padding: 24px 16px 20px !important;
  overflow: hidden;
  box-shadow: 0 10px 26px -16px rgb(8 36 91 / .34) !important;
  transition: transform .4s var(--fx-ease), box-shadow .4s var(--fx-ease), border-color .4s;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--fx-soft);
}
.programme-proof .stats > div::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--fx-gold), #e8c565);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--fx-ease);
}
.programme-proof .stats > div:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 42px -20px rgb(8 36 91 / .42) !important;
  border-color: #c9d6e8;
}
.programme-proof .stats > div:hover::before { transform: scaleX(1); }
.programme-proof .stats b {
  font-size: clamp(30px, 3vw, 38px) !important;
  color: var(--fx-navy) !important;
  font-variant-numeric: tabular-nums;
  margin-bottom: 7px;
  letter-spacing: -.02em;
}

/* the pull-quote: off-brand teal text, and it needs to breathe */
.programme-quote { border-right-color: var(--fx-gold-strong) !important; }
.programme-quote p { color: var(--fx-soft) !important; }
.programme-quote span { color: var(--fx-navy) !important; }

/* the surrounding programme sections get the same considered grounds */
.programme-detail { background: #fff; }
.related-campaign {
  position: relative; isolation: isolate; overflow: clip;
  background: linear-gradient(180deg, #fff 0%, #f4f7fc 100%);
}

@media (prefers-reduced-motion: reduce) {
  .programme-proof .stats > div { transition: none !important; }
}

/* The stats sit inside the narrow copy column of a two-column section, so a
   fixed 4-up grid clips longer labels ("Communities"). Let the count follow
   the available width instead. */
.programme-proof .stats {
  grid-template-columns: repeat(auto-fit, minmax(152px, 1fr)) !important;
}
.programme-proof .stats > div { overflow-wrap: break-word; hyphens: auto; font-size: 13px; padding-left: 13px !important; padding-right: 13px !important; }
@media (max-width: 520px) {
  .programme-proof .stats { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Campaign cards in a row: titles run two or three lines and the copy one or
   two, so the actions finished at different heights. Reserve the space. */
.catalogue-grid .campaign-large { display: flex; flex-direction: column; }
.catalogue-grid .campaign-large > div { display: flex; flex-direction: column; flex: 1 1 auto; }
.catalogue-grid .campaign-large h3 {
  min-height: 2.5em !important;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.catalogue-grid .campaign-large > div > p { min-height: 3em; }
.catalogue-grid .campaign-large .ip-meter { margin-top: auto; }

/* ==========================================================================
   14. Hover treatment — cards and images
   Two legacy rules cancel any hover transform and must be outranked:
     art.css   .campaign-large>img,.dignity img,… { transform:…!important }
     art.css   .motion-image { transform:none!important }   (motion.js stamps
               this on .event-photos img and .impact-stories img)
   Every selector below therefore carries !important and higher specificity.
   ========================================================================== */

/* ---- cards: rest shadow, then lift ---- */
.campaign-large,
.catalogue-grid .campaign-large,
.campaign,
.prog .card,
.impact-stories article,
.action-panels article,
.board-grid .card,
.bn-card,
.wg-item {
  box-shadow: 0 12px 30px -20px rgb(8 36 91 / .38);
  transition: transform .45s var(--fx-ease), box-shadow .45s var(--fx-ease);
}
.campaign-large:hover,
.catalogue-grid .campaign-large:hover,
.campaign:hover,
.prog .card:hover,
.impact-stories article:hover,
.action-panels article:hover,
.board-grid .card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 58px -24px rgb(8 36 91 / .5);
}

/* ---- images inside cards: clip the frame, then zoom ---- */
.campaign-large,
.prog .card,
.impact-stories article,
.board-grid .card { overflow: hidden; }

.campaign-large > img,
.prog .card img,
.impact-stories article img,
.board-grid .card img {
  transition: transform .8s var(--fx-ease), filter .5s var(--fx-ease) !important;
  will-change: transform;
}
.campaign-large:hover > img,
.prog .card:hover img,
.impact-stories article:hover img,
.board-grid .card:hover img {
  transform: scale(1.07) !important;
  filter: saturate(1.05) !important;
}

/* ---- Our Recent Event photographs ----
   These are direct grid children with no clipping frame, so they lift and
   grow slightly rather than zooming inside a mask. Raised above their
   neighbours while hovered so the growth never sits under an adjacent frame. */
.recent-event .event-photos > img,
.recent-event .event-stack > img,
.recent-event .event-slot {
  box-shadow: 0 18px 44px -26px rgb(8 36 91 / .5);
  transition: transform .5s var(--fx-ease), box-shadow .5s var(--fx-ease), filter .5s var(--fx-ease) !important;
  will-change: transform;
}
.recent-event .event-photos > img:hover,
.recent-event .event-stack > img:hover {
  transform: translateY(-9px) scale(1.022) !important;
  box-shadow: 0 38px 72px -26px rgb(8 36 91 / .62) !important;
  filter: saturate(1.07) !important;
  position: relative;
  z-index: 3;
}

/* ---- Our Work in Action tiles ---- */
.wg-item:hover {
  transform: translateY(-7px);
  box-shadow: 0 30px 56px -22px rgb(8 36 91 / .55);
}
.wg-item img { transition: transform .8s var(--fx-ease) !important; }
.wg-item:hover img { transform: scale(1.08) !important; }

/* ---- beneficiary logo cards ---- */
.bn-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 26px 48px -24px rgb(8 36 91 / .45);
}
.bn-card img { transition: transform .5s var(--fx-ease) !important; }
.bn-card:hover img { transform: scale(1.06) !important; }

@media (prefers-reduced-motion: reduce) {
  .campaign-large, .campaign, .prog .card, .impact-stories article,
  .action-panels article, .board-grid .card, .bn-card, .wg-item,
  .recent-event .event-photos > img, .recent-event .event-stack > img {
    transition: none !important;
  }
  .campaign-large:hover, .campaign:hover, .prog .card:hover,
  .impact-stories article:hover, .action-panels article:hover,
  .board-grid .card:hover, .bn-card:hover, .wg-item:hover,
  .recent-event .event-photos > img:hover, .recent-event .event-stack > img:hover {
    transform: none !important;
  }
}

/* ---- clear the resting transform on images that now have hover motion ----
   art.css applies `translate3d(0,var(--parallax-y),0) scale(1.045)!important`
   and motion.js stamps `.motion-image`, both of which occupy the transform
   property and fight the hover state. These images opt out of the scroll
   parallax so hover is the only thing driving transform — and it also removes
   the permanent 4.5% crop that scale(1.045) was applying to every card photo. */
.campaign-large > img,
.recent-event .event-photos > img,
.recent-event .event-stack > img,
.wg-item img,
.prog .card img,
.impact-stories article img,
.board-grid .card img,
.bn-card img {
  transform: none !important;
}

/* hover states are re-declared here, after the reset, so they are last in the
   sheet as well as more specific */
.campaign-large:hover > img,
.prog .card:hover img,
.impact-stories article:hover img,
.board-grid .card:hover img { transform: scale(1.07) !important; }

.wg-item:hover img { transform: scale(1.08) !important; }
.bn-card:hover img { transform: scale(1.06) !important; }

.recent-event .event-photos > img:hover,
.recent-event .event-stack > img:hover {
  transform: translateY(-9px) scale(1.022) !important;
}

/* ==========================================================================
   15. Mobile navigation — off-canvas drawer
   The old mobile menu dropped `.nav` into a grid and forced every submenu
   open (`.mobileopen .drop{display:block}`), which is where the large empty
   gaps came from. This replaces it with a real drawer: scrim, close control,
   accordion submenus, and a pinned Donate action.
   ========================================================================== */
@media (max-width: 900px) {
  /* the drawer is a child of .head, so .head must outrank the scrim or the
     whole header stacking context is painted underneath it */
  .head { height: 74px; position: relative; z-index: 90; }
  .head .navdonate { display: none; }
  .hamb {
    display: grid; place-items: center;
    width: 44px; height: 44px; margin-left: auto;
    border: 1.5px solid #dbe3ef; border-radius: 12px;
    background: #fff; color: var(--fx-navy); font-size: 19px; line-height: 1;
    transition: background .25s, border-color .25s, transform .25s var(--fx-ease);
  }
  .hamb:hover, .hamb:focus-visible { background: #f1f5fb; border-color: var(--fx-navy); }
  .hamb:active { transform: scale(.94); }

  /* scrim */
  .nav-scrim {
    position: fixed; inset: 0; z-index: 70;
    background: rgb(8 20 45 / .5);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden;
    transition: opacity .35s var(--fx-ease), visibility .35s;
  }
  html.nav-open .nav-scrim { opacity: 1; visibility: visible; }
  html.nav-open { overflow: hidden; }

  /* the drawer itself */
  .head .nav,
  .head .nav.mobileopen {
    display: flex !important;
    flex-direction: column;
    position: fixed !important;
    top: 0; right: 0; bottom: 0; left: auto;
    width: min(86vw, 348px);
    max-width: 348px;
    z-index: 80;
    margin: 0;
    padding: 0;
    gap: 0;
    background: #fff;
    box-shadow: -24px 0 60px -30px rgb(8 20 45 / .6);
    transform: translate3d(102%, 0, 0);
    transition: transform .42s var(--fx-ease);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  html.nav-open .head .nav,
  .head .nav.mobileopen { transform: translate3d(0, 0, 0); }

  /* drawer head */
  .nav-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; padding: 18px 20px;
    border-bottom: 1px solid #eaeff6;
    position: sticky; top: 0; background: #fff; z-index: 2;
  }
  .nav-head img { width: 116px; height: auto; }
  .nav-close {
    width: 40px; height: 40px; flex: none;
    display: grid; place-items: center;
    border: 1.5px solid #dbe3ef; border-radius: 11px;
    background: #fff; color: var(--fx-navy); font-size: 20px; line-height: 1;
    transition: background .25s, border-color .25s, transform .25s var(--fx-ease);
  }
  .nav-close:hover { background: #f1f5fb; border-color: var(--fx-navy); transform: rotate(90deg); }

  /* top-level rows */
  .head .nav > a,
  .head .nav > div {
    display: block;
    border-bottom: 1px solid #f0f4f9;
    padding: 0 20px;
  }
  .head .nav > div { display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .head .nav > a,
  .head .nav > div > a {
    padding: 15px 0;
    font: 700 15.5px Karla, sans-serif;
    color: var(--fx-navy);
    text-decoration: none;
    letter-spacing: -.005em;
  }
  .head .nav > a:hover,
  .head .nav > div > a:hover { color: var(--fx-gold-strong); }

  /* accordion toggle */
  .head .nav .menu-toggle {
    width: 34px; height: 34px; flex: none;
    display: grid; place-items: center;
    border: 1px solid #e4eaf3; border-radius: 9px;
    background: #f7f9fd; color: var(--fx-navy);
    font-size: 12px; line-height: 1;
    transition: transform .3s var(--fx-ease), background .25s;
  }
  .head .nav .menu-toggle[aria-expanded="true"] { transform: rotate(180deg); background: #e8eefa; }

  /* submenu: closed by default, this is the gap that used to be forced open */
  .head .nav .drop {
    grid-column: 1 / -1;
    display: block !important;
    position: static !important;
    width: auto !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    max-height: 0;
    overflow: hidden;
    transition: max-height .38s var(--fx-ease);
  }
  .head .nav .drop.is-open { max-height: 480px; }
  .head .nav .drop a {
    display: block;
    padding: 11px 0 11px 15px;
    font: 500 14px Karla, sans-serif;
    color: var(--fx-soft);
    text-decoration: none;
    border-left: 2px solid #e9eef6;
  }
  .head .nav .drop a:first-child { padding-top: 4px; }
  .head .nav .drop a:last-child { padding-bottom: 16px; }
  .head .nav .drop a:hover { color: var(--fx-navy); border-left-color: var(--fx-gold); }

  /* pinned footer inside the drawer */
  .nav-foot { margin-top: auto; padding: 20px; display: grid; gap: 14px; background: #f7f9fd; }
  .nav-foot .nav-cta {
    display: block; text-align: center; text-decoration: none;
    padding: 15px 20px; border-radius: 999px;
    background: var(--fx-gold-strong); color: #fff;
    font: 700 13px Karla, sans-serif; letter-spacing: .08em; text-transform: uppercase;
    box-shadow: 0 12px 26px -14px rgb(169 122 8 / .9);
  }
  .nav-foot .nav-meta { display: grid; gap: 6px; font-size: 12.5px; color: var(--fx-soft); text-align: center; }
  .nav-foot .nav-meta a { color: var(--fx-soft); text-decoration: none; }
  .nav-foot .nav-meta a:hover { color: var(--fx-navy); }
}

@media (prefers-reduced-motion: reduce) {
  .head .nav, .nav-scrim, .nav-close, .head .nav .drop { transition: none !important; }
}

/* ==========================================================================
   16. Footer
   Web keeps the full footer — mark, tagline, registration number, Quick Links,
   Our Programs and Address. Mobile keeps only the mark, the registration
   number and the copyright.

   The mobile rules target named blocks (.foot-col, .foot-tagline) rather than
   nth-child/first-of-type. An earlier positional version hid the registration
   number once the tagline was removed.
   ========================================================================== */
footer.site-footer {
  background: #fff !important;
  color: #4b5568 !important;
  border-top: 1px solid #e6ebf3;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 38px;
  padding: clamp(48px, 5vw, 66px) max(6vw, 24px) clamp(26px, 3vw, 34px) !important;
  align-items: start;
}
footer.site-footer .foot-mark img {
  width: 168px; height: auto;
  background: transparent !important; padding: 0 !important;
  display: block;
}
footer.site-footer .foot-tagline { margin: 16px 0 10px !important; font-size: 14px; line-height: 1.7; max-width: 30ch; }
footer.site-footer .foot-reg {
  margin: 0 !important;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--fx-soft) !important;
}
footer.site-footer h4 {
  color: var(--fx-navy) !important;
  font: 700 15px Karla, sans-serif !important;
  margin: 0 0 14px !important;
}
footer.site-footer .foot-col a,
footer.site-footer .foot-col p {
  display: block;
  color: #4b5568 !important;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.95 !important;
  margin: 0;
}
footer.site-footer .foot-col a { transition: color .25s, transform .25s var(--fx-ease); }
footer.site-footer .foot-col a:hover { color: var(--fx-gold-strong) !important; transform: translateX(3px); }
footer.site-footer .foot-address p + p { margin-top: 12px; }

footer.site-footer .footer-bottom {
  grid-column: 1 / -1;
  margin: clamp(20px, 2.4vw, 28px) 0 0 !important;
  padding-top: 20px !important;
  border-top: 1px solid #eef2f8;
  text-align: center;
  font-size: 12.5px;
  color: #6b7488 !important;
}

@media (max-width: 1000px) {
  footer.site-footer { grid-template-columns: 1fr 1fr; gap: 30px; }
}

/* ---- mobile: mark, registration number and copyright only ---- */
@media (max-width: 760px) {
  footer.site-footer {
    display: block !important;
    grid-template-columns: none !important;
    text-align: center;
    padding: clamp(38px, 6vw, 52px) max(6vw, 22px) 26px !important;
  }
  footer.site-footer .foot-col,
  footer.site-footer .foot-tagline { display: none !important; }
  footer.site-footer .foot-mark { display: grid; justify-items: center; gap: 14px; }
  footer.site-footer .foot-mark img { margin: 0 auto; }
  footer.site-footer .footer-bottom {
    margin-top: 24px !important;
    max-width: 760px; margin-inline: auto !important;
  }
}

/* ==========================================================================
   17. Button alignment
   Paired actions centre on small screens; anything already in a centred
   section centres at every width.
   ========================================================================== */
.px-actions, .mission .btn-row, .intro .btn-row { justify-content: center; }

@media (max-width: 900px) {
  .dg-actions,
  .heroin .btn-row,
  .quick article,
  .related-campaign article,
  .programme-detail .btn-row { justify-content: center; text-align: center; }

  .dg-actions { display: flex; flex-wrap: wrap; justify-content: center; }
  .dg-actions .dg-btn { flex: 1 1 220px; justify-content: center; max-width: 320px; }

  /* legacy button pairs that sit as inline anchors */
  .dignity .outline-btn, .dignity .blue-btn,
  .heroin .btn, .intro .blue-btn, .related-campaign .outline-btn {
    display: inline-flex !important;
    justify-content: center;
  }
  .heroin, .intro, .related-campaign article { text-align: center; }
  .heroin p, .intro p { margin-left: auto; margin-right: auto; }

  .wg-controls, .bn-controls { justify-content: center; }
  .catalogue-grid .campaign-large .outline-btn { justify-content: center; }
}

/* ---- drawer overrides for the legacy desktop-nav rules ----
   audit.css sets `.nav{gap:27px!important}` (15px under 1000px) and
   enhanced/audit set `align-items:center`. In a horizontal desktop bar those
   are right; in a vertical drawer they are the large gaps between items and
   the reason each row was shrink-wrapped instead of full width. */
@media (max-width: 900px) {
  .head .nav,
  .head .nav.mobileopen {
    gap: 0 !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    height: 100dvh; height: 100vh;
    max-height: 100dvh;
  }
  .head .nav > a,
  .head .nav > div,
  .head .nav > .nav-head,
  .head .nav > .nav-foot { width: 100% !important; flex: 0 0 auto; }
}

/* ---- drawer: row padding and the display:contents trap ----
   clone.css has `.mobileopen>div{display:contents}` to flatten the desktop
   dropdown wrappers. That also dissolves the drawer's own header and footer,
   so both are re-asserted. And `.head .nav > a` needs its horizontal padding
   restated because the later `padding:15px 0` shorthand wiped it. */
@media (max-width: 900px) {
  .head .nav > a { padding: 15px 20px !important; }
  .head .nav > div { padding: 0 20px !important; }

  .head .nav > .nav-head {
    display: flex !important;
    align-items: center; justify-content: space-between;
    padding: 16px 20px !important;
  }
  .head .nav > .nav-foot {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 20px !important;
    border-bottom: 0;
  }
  .nav-foot .nav-meta { font-size: 12.5px; line-height: 1.6; }
  .nav-foot .nav-meta a, .nav-foot .nav-meta span { display: block; }

  /* the accordion chevrons were reading as big pale slabs */
  .head .nav .menu-toggle {
    width: 30px !important; height: 30px !important;
    border-radius: 8px !important;
    font-size: 10px !important;
    justify-self: end;
  }
}

/* The drawer's own chrome is injected into .nav, so it must be hidden wherever
   the nav is a horizontal desktop bar. */
@media (min-width: 901px) {
  .nav-head, .nav-foot, .nav-scrim { display: none !important; }
}

/* ==========================================================================
   9b. Legacy .dignity resets  (RESTORED — these were removed by accident when
   the stale section 12 footer block was deleted; they had been appended after
   it in the file. Without them audit.css re-applies `.dignity>div{max-width:
   590px; border-left:3px solid gold}` and the section collapses to a narrow
   gold-ruled column on wide screens.)
   ========================================================================== */
.dignity.dg { padding: clamp(70px, 9vw, 124px) max(6vw, 22px) clamp(56px, 7vw, 96px) !important; }
.dignity.dg::before { content: none !important; }
.dignity.dg > div { max-width: none !important; padding: 0 !important; border-left: 0 !important; }
.dignity.dg > div::before { content: none !important; }

.dignity.dg h2 {
  font-size: clamp(32px, 4.2vw, 52px) !important;
  letter-spacing: -.024em !important;
  max-width: 17ch !important;
  margin: 0 !important;
}
.dignity.dg p { max-width: none; }
.dignity.dg .dg-lead { max-width: 52ch; font-size: 16px !important; line-height: 1.75 !important; }
.dignity.dg .dg-quote p { margin: 0 !important; }

.dignity.dg .dg-pillars {
  display: grid !important;
  column-gap: 14px !important; row-gap: 14px !important;
  margin: clamp(46px, 6vw, 74px) auto 0 !important;
  columns: auto !important;
}
.dignity.dg .dg-pillar { margin: 0 !important; font-weight: 400 !important; }
.dignity.dg .dg-pillar::before { content: "" !important; }
.dignity.dg .dg-pillar b::before,
.dignity.dg li::before { content: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; }

.dignity.dg .dg-frame img {
  height: auto !important; width: 100% !important;
  border: 0 !important; border-radius: 0 !important;
  outline: none !important; outline-offset: 0 !important;
  box-shadow: none !important; filter: none !important;
  object-fit: cover;
}
.dignity.dg .dg-frame { border-radius: 22px !important; overflow: hidden !important; }

/* 9c. composition corrections */
.dg-caption { left: auto !important; right: 22px; }
.dignity.dg .dg-pillars { grid-template-columns: repeat(2, 1fr) !important; }
@media (min-width: 760px)  { .dignity.dg .dg-pillars { grid-template-columns: repeat(3, 1fr) !important; } }
@media (min-width: 1120px) { .dignity.dg .dg-pillars { grid-template-columns: repeat(5, 1fr) !important; } }
@media (max-width: 479px)  { .dignity.dg .dg-pillars { grid-template-columns: 1fr !important; } }

/* the blanket `.dignity.dg > div{max-width:none}` reset above also clears the
   intended container cap, so re-assert it for the inner grid */
.dignity.dg .dg-inner { max-width: 1180px !important; margin-inline: auto !important; }

/* ==========================================================================
   18. Form controls — selects and file uploads
   ========================================================================== */
.fields select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%230b2e6e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  padding-right: 38px !important;
  cursor: pointer;
}
.fields select:focus-visible { outline: 2px solid var(--fx-navy); outline-offset: 1px; }
.fields option[disabled] { color: #9aa5b8; }

.upload-field { display: block; }
.upload-field small { font-weight: 400; color: var(--fx-soft); }
.upload-field input[type="file"] {
  width: 100%;
  margin-top: 6px;
  padding: 12px !important;
  border: 1.5px dashed #c6d2e4 !important;
  border-radius: 12px;
  background: #f8fafd;
  font: inherit;
  font-size: 13.5px;
  color: var(--fx-soft);
  cursor: pointer;
  transition: border-color .25s, background .25s;
}
.upload-field input[type="file"]:hover { border-color: var(--fx-navy) !important; background: #f1f5fb; }
.upload-field input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 9px 16px;
  border: 0; border-radius: 999px;
  background: var(--fx-navy); color: #fff;
  font: 700 12px Karla, sans-serif; letter-spacing: .05em; text-transform: uppercase;
  cursor: pointer;
}
.upload-field input[type="file"]::file-selector-button:hover { background: #0a2657; }
.upload-hint {
  display: block; margin-top: 7px;
  font-size: 12.5px; color: var(--fx-soft);
  overflow-wrap: anywhere;
}
.upload-hint[data-error] { color: #9b1c31; font-weight: 600; }