/* ===== Main styles ===== */
:root {
  --ce-banner: url("images/banner.jpg");
  --clay: #B04A2E;
  --clay-deep: #8F3A20;
  --maroon: #3A2117;
  --maroon-deep: #2A1610;
  --cream: #FAF7F1;
  --cream-2: #F2ECE2;
  --ivory: #FFFFFF;
  --ink: #2B201A;
  --ink-soft: #6E5D52;
  --amber: #FCE2C5;
  --line: rgba(43, 32, 26, .16);
  --line-soft: rgba(43, 32, 26, .09);
  --shadow: 0 2px 4px rgba(58, 33, 23, .06), 0 22px 48px -26px rgba(58, 33, 23, .4);
  --shadow-lift: 0 6px 14px rgba(58, 33, 23, .08), 0 30px 60px -28px rgba(58, 33, 23, .5);
  --maxw: 1600px;
  --pad: 48px;
  --measure: 940px;
  --fs-body: 1.0625rem;
  /* the ONE body-content size (=17px); only headings differ */
  --gap-para: 26px;
  /* the ONE gap between stacked intro paragraphs (About + Grant) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Inter", Lato;
  font-size: 17px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  font-family: "Lato", Georgia, serif;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  letter-spacing: -.015em;
  line-height: 1.08;
}

p {
  margin: 0 0 1.05em;
}

a {
  color: inherit;
}

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

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}

@media(max-width:640px) {
  :root {
    --pad: 22px;
  }
}

.eyebrow {
  font-family: "Inter", Lato;
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--clay);
  margin: 0 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
}

.eyebrow.light {
  color: var(--amber);
}

/* SECTION HEADINGS - bigger, highlighted */
.sec-h {
  font-size: clamp(2.3rem, 5vw, 3.5rem);
  line-height: 1.02;
  margin: 0;
  position: relative;
}

.sec-h .accent {
  color: var(--clay);
}

.h-rule {
  width: 64px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--clay), var(--amber));
  margin: 20px 0 0;
}

.center .h-rule,
.sec-h.center+.h-rule {
  margin-left: auto;
  margin-right: auto;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: "Inter", Lato;
  font-weight: 600;
  font-size: .86rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 15px 30px;
  border-radius: 4px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s;
}

.btn-clay {
  background: var(--clay);
  color: #fff;
  box-shadow: 0 8px 20px -10px rgba(176, 74, 46, .7);
}

.btn-clay:hover {
  background: var(--clay-deep);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -12px rgba(176, 74, 46, .85);
}

.btn-gold {
  background: var(--amber);
  color: #3a2606;
  box-shadow: 0 8px 20px -10px rgba(230, 169, 73, .8);
}

.btn-gold:hover {
  background: #d99a36;
  transform: translateY(-3px);
}

.btn-outline {
  background: transparent;
  border-color: currentColor;
}

.btn-outline:hover {
  background: rgba(176, 74, 46, .06);
  transform: translateY(-3px);
}

.btn-lg {
  padding: 18px 36px;
  font-size: .92rem;
}

.btn-block {
  width: 100%;
  justify-content: center;
}

.btn[disabled] {
  opacity: .5;
  pointer-events: none;
}

.grain {
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 140px;
  opacity: .05;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}

.iitk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.iitk img {
  height: 90px;
  width: auto;
  display: block;
}

.iitk .fb {
  display: none;
}

.iitk.nologo img {
  display: none;
}

.iitk.nologo .fb {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  width: 42px;
  border-radius: 50%;
  background: var(--maroon);
  color: var(--amber);
  font-family: "Lato", serif;
  font-weight: 600;
  font-size: .86rem;
  border: 1.5px solid var(--amber);
}

.frame {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: linear-gradient(135deg, #e7d9c1, #e3cbb3);
}

.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}

.frame.zoomable {
  cursor: zoom-in;
}

.frame.zoomable:hover img {
  transform: scale(1.05);
}

.frame.missing img {
  display: none;
}

.frame.missing::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  font: 600 .78rem "Inter", sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--clay-deep);
  opacity: .5;
  background: repeating-linear-gradient(45deg, rgba(176, 74, 46, .05) 0 12px, transparent 12px 24px), linear-gradient(135deg, #e9dcc6, #e2c9b0);
}

/* NAV */
header.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  transition: background .3s, box-shadow .3s;
}

header.nav.solid {
  background: rgba(253, 251, 247, .95);
  backdrop-filter: saturate(150%) blur(10px);
  box-shadow: 0 1px 0 var(--line-soft);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 2px var(--pad);
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}

.brand .divider {
  width: 1px;
  height: 36px;
  background: var(--line);
}

.brand .titles b {
  display: block;
  font-family: "Lato", serif;
  font-weight: 600;
  font-size: 1.04rem;
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -.01em;
}

.brand .titles small {
  display: block;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 2px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-links a {
  position: relative;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  transition: color .2s;
}

.nav-links a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -6px;
  height: 2px;
  background: var(--clay);
  transition: right .25s ease;
}

.nav-links a:not(.btn):hover::after {
  right: 0;
}

.nav-links a:not(.btn):hover {
  color: var(--clay);
}

.nav-links a.btn {
  color: #fff;
}

.nav-links a.btn:hover {
  color: #fff;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  transition: .25s;
}

.nav-toggle span::before {
  position: absolute;
  margin-top: -7px;
}

.nav-toggle span::after {
  position: absolute;
  margin-top: 7px;
}

body.menu-open .nav-toggle span {
  background: transparent;
}

body.menu-open .nav-toggle span::before {
  margin-top: 0;
  transform: rotate(45deg);
}

body.menu-open .nav-toggle span::after {
  margin-top: 0;
  transform: rotate(-45deg);
}

@media(max-width:880px) {
  .brand .titles small {
    display: none;
  }

  .iitk img {
    height: 54px;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-links {
    position: fixed;
    inset: 62px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--maroon);
    padding: 80px 0 16px;
    transform: translateY(-130%);
    transition: transform .32s cubic-bezier(.22, 1, .36, 1);
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .6);
  }

  body.menu-open .nav-links {
    transform: translateY(0);
  }

  .nav-links a {
    color: #fff !important;
    padding: 15px var(--pad);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    letter-spacing: .1em;
  }

  .nav-links a:not(.btn)::after {
    display: none;
  }

  .nav-links a.btn {
    margin: 14px var(--pad) 0;
    justify-content: center;
    background: var(--clay);
    border-radius: 4px;
  }
}

.float-cta {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 55;
  background: var(--clay);
  color: #fff;
  text-decoration: none;
  font: 600 .82rem "Inter", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 15px 24px;
  border-radius: 999px;
  box-shadow: 0 12px 30px -8px rgba(176, 74, 46, .7);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  opacity: 0;
  transform: translateY(20px) scale(.96);
  pointer-events: none;
  transition: all .35s cubic-bezier(.22, 1, .36, 1);
}

.float-cta.show {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.float-cta:hover {
  background: var(--clay-deep);
  transform: translateY(-2px);
}

.float-cta::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber);
  animation: pulse 2.2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(230, 169, 73, .6);
  }

  70% {
    box-shadow: 0 0 0 9px rgba(230, 169, 73, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(230, 169, 73, 0);
  }
}

@media(max-width:560px) {
  .float-cta {
    right: 16px;
    bottom: 16px;
    padding: 13px 20px;
  }
}

/* Floating Contribute button: visible on mobile only (same breakpoint as the hidden header CTA) */
.float-cta,
.float-cta.show {
  display: none !important;
}

@media(max-width:900px) {
  .float-cta,
  .float-cta.show {
    display: inline-flex !important;
    position: fixed !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    z-index: 9999 !important;
    right: 14px !important;
    left: auto !important;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    font-size: .78rem;
    padding: 13px 20px;
  }
}

/* keep the fund popup above the floating button */
.fundmenu {
  z-index: 10000 !important;
}

/* HERO BANNER */
.hero {
  position: relative;
  line-height: 0;
  background: #3a2117;
}

.hero img.banner {
  display: block;
  width: 100%;
  height: auto;
}

.hero .banner-fallback {
  display: none;
}

.hero img.banner.missing {
  display: none;
}

.hero img.banner.missing+.banner-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42vw;
  background: linear-gradient(135deg, #5a3322, #3a2117);
  color: rgba(255, 255, 255, .5);
  font: 600 .8rem "Inter", sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.4;
  text-align: center;
  padding: 24px;
}

/* HERO 2 - photo banner with overlay headline (Arzoo-style layout) */
.hero2 {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  background-color: #2A1610;
  background-size: cover;
  overflow: hidden;
}

.hero2-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(21, 11, 6, .72) 0%, rgba(21, 11, 6, .5) 32%, rgba(21, 11, 6, .08) 58%, rgba(21, 11, 6, 0) 72%);
  pointer-events: none;
}

.hero2-inner {
  position: relative;
  z-index: 2;
  padding-top: 64px;
  padding-bottom: 64px;
  max-width: 760px;
}

.hero2-eyebrow {
  font-family: "Inter", Lato;
  font-weight: 700;
  font-size: 1.0rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 18px;
}

.hero2-name {
  font-family: "Lato", serif;

  font-size: clamp(2rem, 5.4vw, 4.4rem);
  line-height: .98;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0;
  text-shadow: 0 4px 30px rgba(0, 0, 0, .35);
}

.hero2-sub {
  font-family: "Inter", Lato;
  font-weight: 700;
  font-size: clamp(1rem, 1.9vw, 1.4rem);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .86);
  margin: 10px 0 0;
}

.hero2-rule {
  width: 74px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--amber), var(--clay));
  margin: 28px 0 26px;
}

.hero2-lead {
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: rgba(255, 255, 255, .92);
  margin: 0 0 14px;
}

.hero2-tag {
  margin: 0 0 34px;
}

.hero2-tag span {
  display: inline-block;
  background: var(--amber);
  color: #3a2606;
  font-family: "Lato", serif;
  font-weight: 600;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  line-height: 1.25;
  padding: 6px 16px;
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .45);
}

.hero2-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.hero2-outline {
  color: #fff;
  border-color: rgba(255, 255, 255, .55);
}

.hero2-outline:hover {
  background: rgba(255, 255, 255, .12);
  border-color: #fff;
}

@media(max-width:760px) {
  .hero2 {
    background-image: var(--ce-banner) !important;
    background-size: cover;
    background-position: top center;
    background-color: #2A1610;
    aspect-ratio: 1081 / 1616;
    min-height: 0;
  }

  .hero2-scrim,
  .hero2-inner {
    display: none;
  }
}

.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 26px auto;
}

.ornament i {
  width: 7px;
  height: 7px;
  background: var(--amber);
  transform: rotate(45deg);
  flex: none;
}

.ornament span {
  display: block;
  height: 1px;
  width: 72px;
}

.ornament .l {
  background: linear-gradient(90deg, transparent, var(--clay));
}

.ornament .r {
  background: linear-gradient(90deg, var(--clay), transparent);
}

.drop::first-letter {
  font-family: "Lato", serif;
  font-weight: 600;
  font-size: 3.3em;
  line-height: .7;
  float: left;
  margin: 8px 12px 0 0;
  color: var(--clay);
}

/* ABOUT */
.about {
  padding: 58px 0;
}

.about-intro {
  max-width: 1440px;
  margin: 0 auto;
  text-align: center;
}

.about .sec-h {
  margin-bottom: 0;
}

.about .h-rule {
  margin: 20px auto 0;
}

.about .lead {
  font-family: "Lato", serif;
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  margin: 28px auto 0;
  letter-spacing: 0;
  max-width: 1280px;
  text-align: left;
}

.about-body {
  max-width: 1280px;
  margin: var(--gap-para) auto 0;
}

.about-body p {
  margin: 0;
  color: var(--ink);
}

@media(max-width:860px) {
  .drop::first-letter {
    font-size: 2.9em;
  }
}

/* A LIFE REMEMBERED
     TYPE SYSTEM: just two sizes - a heading size (--life-h, the name only)
     and one body size (--life-b, everything else). Hierarchy comes from
     font (Fraunces vs Inter), weight, italics, colour and the quote card,
     not from extra font sizes. */
.life {
  padding: 58px 0;
  --life-h: clamp(2.1rem, 4.2vw, 3rem);
  --life-b: 1.0625rem;
}

.life .top {
  display: grid;
  grid-template-columns: .56fr 1.44fr;
  gap: 60px;
  align-items: center;
  max-width: 1340px;
  margin: 0 auto;
}

.life .frame {
  aspect-ratio: 5/5;
  max-width: 460px;
  box-shadow: var(--shadow);
}

.life h2 {
  font-size: var(--life-h);
  margin-bottom: 6px;
  line-height: 1.05;
}

.life h2 .dates {
  display: block;
  font-family: "Lato", serif;
  font-style: italic;
  font-weight: 400;
  font-size: var(--life-b);
  color: var(--ink-soft);
  letter-spacing: 0;
  margin-top: 12px;
}

.life .hr {
  width: 54px;
  height: 2px;
  background: linear-gradient(90deg, var(--clay), var(--amber));
  margin: 18px 0 22px;
}

.life .top p {
  font-size: var(--life-b);
  color: var(--ink);
  margin: 0 0 1.05em;
}

.life .top p:last-child {
  margin-bottom: 0;
}

.life .more {
  max-width: 1240px;
  margin: 40px auto 0;
  text-align: center;
}

.life .turn {
  font-family: "Lato", serif;
  font-weight: 500;
  font-size: var(--life-b);
  color: var(--maroon);
  line-height: 1.45;
  margin: 0 0 22px;
}

.life .turn::before {
  content: "";
  display: block;
  width: 54px;
  height: 2px;
  background: linear-gradient(90deg, var(--clay), var(--amber));
  margin: 0 auto 22px;
}

.life .warm {
  font-family: "Lato", serif;
  font-style: italic;
  font-size: var(--life-b);
  line-height: 1.65;
  color: var(--clay-deep);
  background: var(--ivory);
  border-radius: 16px;
  padding: 30px 40px;
  box-shadow: var(--shadow);
  text-align: left;
  margin: 0 auto 24px;
  max-width: 1140px;
  position: relative;
}

/* IMPORTANT closing line - a clear statement, distinguished by serif + weight + colour, not size */
.life .close {
  font-family: "Lato", serif;
  font-weight: 500;
  font-size: var(--life-b);
  line-height: 1.55;
  color: var(--maroon);
  max-width: 1080px;
  margin: 0 auto;
  letter-spacing: 0;
}

.life .close .em {
  color: var(--clay);
  font-style: italic;
}

@media(max-width:860px) {
  .life .top {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .life .frame {
    aspect-ratio: 5/4;
    max-width: none;
  }

  .life .warm {
    padding: 26px 24px;
  }
}

/* GRANT */
.grant {
  padding: 58px 0;
}

.grant .head {
  max-width: 1280px;
  margin: 0 auto 40px;
  text-align: center;
}

.grant .sec-h {
  margin-bottom: 44px;
}

/* important para - promoted to lead */
.grant .glead {
  font-family: "Lato", serif;
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  max-width: none;
  margin: 0;
  letter-spacing: 0;
  text-align: left;
}

/* de-emphasised supporting line */
.grant .gsupport {
  font-family: "Inter", Lato;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: none;
  margin: 20px 0 0;
  text-align: left;
}

.grant .cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: none;
  margin: 0 auto;
}

.gcard {
  background: var(--ivory);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 34px 30px;
  position: relative;
  transition: transform .28s ease, box-shadow .28s ease;
  overflow: hidden;
}

.gcard::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;
  width: 0;
  background: var(--clay);
  transition: width .35s ease;
}

.gcard:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
}

.gcard:hover::before {
  width: 100%;
}

.gcard .badge {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(176, 74, 46, .1);
  color: var(--clay);
  margin-bottom: 16px;
}

.gcard .badge svg {
  width: 26px;
  height: 26px;
}

.gcard h3 {
  font-size: 1.26rem;
  margin-bottom: 6px;
}

.gcard .k {
  font-size: var(--fs-body);
  color: var(--ink-soft);
  margin-bottom: 13px;
}

.gcard ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gcard li {
  position: relative;
  padding: 10px 0 10px 22px;
  color: var(--ink);
  font-size: var(--fs-body);
  line-height: 1.55;
  border-bottom: 1px solid var(--line-soft);
}

.gcard li:last-child {
  border-bottom: none;
}

.gcard li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
}

.gcard .note {
  font-size: var(--fs-body);
  color: var(--ink-soft);
  margin: 14px 0 0;
  font-style: italic;
  line-height: 1.55;
}

@media(max-width:880px) {
  .grant .cols {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* CARRY FORWARD (contribute) */
.cf {
  background: linear-gradient(180deg, #FCFAF6 0%, #F2ECE2 100%);
  color: var(--ink);
  position: relative;
  overflow: hidden;
}

.cf .grain {
  opacity: .04;
}

.cf .wrap {
  padding: 60px var(--pad);
  position: relative;
  z-index: 2;
}

.cf .cf-head {
  text-align: center;
  max-width: 1180px;
  margin: 0 auto 36px;
}

.cf .sec-h {
  font-size: clamp(2.5rem, 6vw, 4rem);
}

.cf .cf-lead {
  color: var(--ink-soft);
  max-width: 62ch;
  margin: 22px auto 0;
  font-size: var(--fs-body);
}

.cf .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: stretch;
  max-width: none;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}

.cf .grid>div {
  display: flex;
}

.cf .prog-card,
.cf .give-card {
  width: 100%;
}

@media(max-width:880px) {
  .cf .grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* progress card - now carries the goal headline */
.prog-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  padding: 34px 34px 36px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}

.prog-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--clay), var(--amber));
}

.goal-banner {
  text-align: center;
  padding: 6px 0 26px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 26px;
}

.goal-banner .gb-k {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--clay);
  margin: 0 0 10px;
}

.goal-banner .gb-fig {
  font-family: "Lato", serif;
  font-weight: 600;
  font-size: clamp(1.7rem, 7vw, 2.4rem);
  line-height: .92;
  letter-spacing: -.02em;
  background: linear-gradient(100deg, var(--clay-deep) 28%, var(--amber) 50%, var(--clay-deep) 72%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--clay);
  animation: shine 5s linear infinite;
}

@keyframes shine {
  to {
    background-position: -220% center;
  }
}

.goal-banner .gb-sub {
  display: inline-block;
  font-family: "Inter", Lato;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--maroon);
  background: rgba(230, 169, 73, .18);
  border: 1px solid rgba(230, 169, 73, .5);
  padding: 6px 16px;
  border-radius: 999px;
  margin-top: 14px;
}

.prog-card .pc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}

.prog-card .pc-k {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--clay);
  margin: 0;
}

.prog-card .pc-pill {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--clay-deep);
  background: rgba(176, 74, 46, .09);
  border: 1px solid rgba(176, 74, 46, .18);
  padding: 6px 13px;
  border-radius: 999px;
  white-space: nowrap;
}

.prog-card .pc-top {
  display: flex;
  align-items: center;
  gap: 28px;
}

.prog-card .ring {
  width: 148px;
  height: 148px;
  flex: none;
}

.prog-card .ring-bg {
  fill: none;
  stroke: rgba(43, 32, 26, .08);
  stroke-width: 12;
}

.prog-card .ring-fg {
  fill: none;
  stroke: url(#ringgrad);
  stroke-width: 12;
  stroke-linecap: round;
  stroke-dasharray: 477.5;
  stroke-dashoffset: 477.5;
  transition: stroke-dashoffset 1.8s cubic-bezier(.22, 1, .36, 1);
}

.prog-card .ring-pct {
  fill: var(--ink);
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 34px;
}

.prog-card .ring-sub {
  fill: var(--ink-soft);
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.prog-card .pc-figs .raised {
  font-family: "Lato", serif;
  font-weight: 600;
  font-size: clamp(2rem, 3.8vw, 2.6rem);
  color: var(--clay);
  line-height: 1;
}

.prog-card .pc-figs .ofgoal {
  color: var(--ink-soft);
  font-size: .94rem;
  margin-top: 10px;
  line-height: 1.5;
}

.prog-card .pc-figs .ofgoal strong {
  color: var(--ink);
}

.prog-card .mbar {
  margin-top: 26px;
}

.prog-card .mbar .track {
  height: 10px;
  border-radius: 999px;
  background: rgba(43, 32, 26, .08);
  overflow: hidden;
}

.prog-card .mbar .fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--clay), var(--amber));
  box-shadow: 0 1px 8px rgba(230, 169, 73, .55);
  transition: width 1.8s cubic-bezier(.22, 1, .36, 1);
}

.prog-card .mbar .ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-soft);
}

@media(max-width:420px) {
  .prog-card .pc-top {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .prog-card .pc-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

@media(max-width:480px) {
  .prog-card {
    padding: 26px 22px 28px;
  }

  .give-card {
    padding: 28px 22px;
  }

  .prog-card .mbar .ticks {
    font-size: .6rem;
  }
}

/* CONTRIBUTION FORM (multi-step) */
.give-card {
  background: #fff;
  color: var(--ink);
  border-radius: 20px;
  padding: 38px 36px;
  box-shadow: var(--shadow);
  border: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
}

.give-card .form-head {
  text-align: center;
  margin-bottom: 24px;
}

.give-card .form-head .gc-k {
  display: inline-block;
  font: 700 clamp(.78rem, 3vw, .98rem) "Inter", sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--clay);
  padding: 9px 20px;
  border-radius: 999px;
  box-shadow: 0 8px 18px -10px rgba(176, 74, 46, .8);
  white-space: nowrap;
}

.give-card .steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

.give-card .steps .dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 .82rem "Inter", sans-serif;
  background: var(--cream-2);
  color: var(--ink-soft);
  border: 1.5px solid var(--line);
  transition: .25s;
}

.give-card .steps .dot.on {
  background: var(--clay);
  color: #fff;
  border-color: var(--clay);
}

.give-card .steps .sline {
  width: 34px;
  height: 2px;
  background: var(--line);
}

.give-card .steps .sline.on {
  background: var(--clay);
}

.give-card .step {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.give-card .step[hidden] {
  display: none !important;
}

.fld-label {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--clay);
  margin: 0 0 9px;
}

.give-card .step+.step,
.give-card .field+.fld-label,
.give-card .dropdown+.fld-label,
.give-card .seg+.fld-label {
  margin-top: 18px;
}

.req {
  color: var(--clay);
}

.field {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  transition: border-color .2s;
}

.field:focus-within {
  border-color: var(--clay);
}

.field .cur {
  padding: 0 0 0 16px;
  font-weight: 700;
  color: var(--ink);
  min-width: 40px;
}

.field input {
  flex: 1;
  border: none;
  outline: none;
  padding: 15px 16px;
  font: 600 1rem "Inter", sans-serif;
  color: var(--ink);
  background: transparent;
  width: 100%;
}

.field.full input {
  padding-left: 16px;
}

.err {
  display: none;
  color: var(--clay-deep);
  font-size: .78rem;
  font-weight: 600;
  margin: 7px 0 0;
}

.err.show {
  display: block;
}

.seg {
  display: inline-flex;
  align-self: flex-start;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.seg button {
  appearance: none;
  border: none;
  background: #fff;
  color: var(--ink-soft);
  font: 700 .86rem "Inter", sans-serif;
  letter-spacing: .04em;
  padding: 11px 26px;
  cursor: pointer;
  transition: .2s;
}

.seg button+button {
  border-left: 1.5px solid var(--line);
}

.seg button.on {
  background: var(--clay);
  color: #fff;
}

.form-actions {
  display: flex;
  gap: 12px;
  margin-top: auto;
  padding-top: 26px;
}

.form-actions .btn {
  flex: 1;
  justify-content: center;
}

.field.invalid {
  border-color: var(--clay-deep);
  box-shadow: 0 0 0 3px rgba(143, 58, 32, .12);
}

@media(max-width:560px) {
  .form-actions .btn.btn-lg {
    padding: 15px 12px;
    font-size: .8rem;
    letter-spacing: .02em;
  }
}

/* redirect note (shown only for international donors) */
.intl-note {
  display: none;
  margin-top: 18px;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--ink-soft);
  background: rgba(230, 169, 73, .12);
  border: 1px solid rgba(230, 169, 73, .42);
  border-left: 3px solid var(--amber);
  border-radius: 10px;
  padding: 13px 16px;
}

/* country dropdown */
.dropdown {
  position: relative;
}

.dd-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  font: 600 1rem "Inter", sans-serif;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .2s;
}

.dd-btn:hover {
  border-color: var(--clay);
}

.dropdown.open .dd-btn {
  border-color: var(--clay);
}

.dd-val {
  display: flex;
  align-items: center;
  gap: 11px;
}

.flag {
  font-size: 1.2rem;
  line-height: 1;
}

.dd-caret {
  color: var(--clay);
  font-size: .8rem;
  transition: transform .22s ease;
}

.dropdown.open .dd-caret {
  transform: rotate(180deg);
}

.dd-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-lift);
  max-height: 280px;
  overflow: auto;
  z-index: 30;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

.dropdown.open .dd-list {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.dd-list li {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  font-size: .98rem;
  color: var(--ink);
  transition: background .15s;
}

.dd-list li+li {
  border-top: 1px solid var(--line-soft);
}

.dd-list li:hover {
  background: var(--cream);
}

.dd-list li[aria-selected="true"] {
  background: var(--cream-2);
}

.dd-list li .ccode {
  margin-left: auto;
  font-size: .78rem;
  font-weight: 700;
  color: var(--ink-soft);
  letter-spacing: .05em;
}

/* contribution info notes */
.cf-notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 24px auto 0;
  position: relative;
  z-index: 1;
}

.cf-note {
  display: flex;
  align-self: start;
  align-items: flex-start;
  gap: 14px;
  background: rgba(255, 255, 255, .65);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  padding: 18px 20px;
}

.cf-note .cf-ic {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(176, 74, 46, .1);
  color: var(--clay);
}

.cf-note .cf-ic svg {
  width: 20px;
  height: 20px;
}

.cf-note p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink-soft);
}

.cf-note p strong {
  color: var(--ink);
  font-weight: 700;
}

@media(max-width:880px) {
  .cf-notes {
    grid-template-columns: 1fr;
  }
}

/* MEMORIES */
.mem {
  padding: 58px 0;
}

.mem .head {
  text-align: center;
  max-width: 1180px;
  margin: 0 auto 30px;
}

.mem .head p {
  color: var(--ink-soft);
  font-size: var(--fs-body);
  margin-top: 14px;
}

.mem .tools {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 34px auto 0;
  flex-wrap: wrap;
}

.mem .tools .btn {
  padding: 13px 24px;
}

.shuffle-ic {
  display: inline-block;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.shuffling .shuffle-ic {
  transform: rotate(360deg);
}

/* featured memory (focal, dark panel) */
.mfeature {
  position: relative;
  overflow: hidden;
  display: block;
  border-radius: 22px;
  padding: 52px 60px;
  margin-bottom: 24px;
  background: linear-gradient(135deg, #46271B 0%, #2A1610 100%);
  color: #fff;
  text-decoration: none;
  box-shadow: var(--shadow-lift);
  transition: transform .3s ease, opacity .3s ease;
}

.mfeature.fade {
  opacity: 0;
  transform: translateY(10px);
}

.mfeature:hover {
  transform: translateY(-4px);
}

.mfeature .fgrain {
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 150px;
  opacity: .06;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.mfeature .bigmark {
  position: absolute;
  top: -44px;
  right: 30px;
  font-family: "Lato", serif;
  font-weight: 600;
  font-size: 15rem;
  line-height: 1;
  color: rgba(230, 169, 73, .15);
  pointer-events: none;
}

.mfeature .ftag {
  display: inline-block;
  font: 700 .7rem "Inter", sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 16px;
  position: relative;
  z-index: 2;
}

.mfeature .fq {
  font-family: "Lato", serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.7rem, 3.1vw, 2.5rem);
  line-height: 1.28;
  color: #fff;
  letter-spacing: -.01em;
  max-width: 24ch;
  margin: 0;
  position: relative;
  z-index: 2;
}

.mfeature .fe {
  color: rgba(255, 255, 255, .82);
  font-size: var(--fs-body);
  line-height: 1.7;
  margin: 20px 0 0;
  max-width: 72ch;
  position: relative;
  z-index: 2;
}

.mfeature .frow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 30px;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}

.mfeature .fwho {
  display: flex;
  align-items: center;
  gap: 15px;
}

.mfeature .fav {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(230, 169, 73, .16);
  color: var(--amber);
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 1.1rem;
  border: 1.5px solid var(--amber);
}

.mfeature .fnm {
  font-family: "Lato", serif;
  font-weight: 600;
  font-size: 1.2rem;
  color: #fff;
  line-height: 1.2;
}

.mfeature .fnm span {
  display: block;
  font-family: "Inter", Lato;
  font-weight: 600;
  font-size: .7rem;
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .62);
  margin-top: 5px;
  text-transform: uppercase;
}

.mfeature .fmore {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 .76rem "Inter", sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--amber);
}

.mfeature .fmore em {
  font-style: normal;
  transition: transform .25s ease;
}

.mfeature:hover .fmore em {
  transform: translateX(5px);
}

@media(max-width:600px) {
  .mfeature {
    padding: 36px 26px;
  }

  .mfeature .bigmark {
    font-size: 10rem;
    top: -26px;
  }
}

.mgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

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

@media(max-width:560px) {
  .mgrid {
    grid-template-columns: 1fr;
  }
}

.mcard {
  position: relative;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBF6EE 100%);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  padding: 30px 30px 26px;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease, border-color .3s, opacity .3s;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.mcard .bigmark {
  position: absolute;
  top: 8px;
  right: 18px;
  font-family: "Lato", serif;
  font-weight: 600;
  font-size: 6rem;
  line-height: 1;
  color: rgba(176, 74, 46, .08);
  pointer-events: none;
  z-index: 0;
}

.mcard .read-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  font: 700 .73rem "Inter", Lato;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--clay);
  position: relative;
  z-index: 1;
}

.mcard .read-more em {
  font-style: normal;
  transition: transform .25s ease;
}

.mcard:hover .read-more em {
  transform: translateX(5px);
}

.mcard::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, var(--clay), var(--amber));
  opacity: .55;
  transition: opacity .3s;
  z-index: 1;
}

.mcard:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lift);
  border-color: var(--line);
}

.mcard:hover::before {
  opacity: 1;
}

.mcard.fade {
  opacity: 0;
  transform: translateY(10px);
}

.mcard .h {
  font-family: "Lato", serif;
  font-weight: 500;
  font-style: italic;
  font-size: 1.26rem;
  line-height: 1.32;
  color: var(--maroon);
  margin: 0 0 13px;
  position: relative;
  z-index: 1;
  padding-top: 8px;
}

.mcard .b {
  font-size: var(--fs-body);
  color: var(--ink-soft);
  line-height: 1.66;
  margin: 0 0 20px;
  flex: 1;
  position: relative;
  z-index: 1;
}

.mcard .who {
  display: flex;
  align-items: center;
  gap: 13px;
  border-top: 1px solid var(--line-soft);
  padding-top: 16px;
  position: relative;
  z-index: 1;
}

.mcard .who .av {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream-2);
  color: var(--clay-deep);
  font-family: "Lato", serif;
  font-weight: 600;
  font-size: .9rem;
  border: 1.5px solid var(--amber);
}

.mcard .who .nm {
  font-weight: 700;
  font-size: .92rem;
  color: var(--ink);
  line-height: 1.2;
}

.mcard .who .nm span {
  display: block;
  font-weight: 600;
  font-size: .7rem;
  letter-spacing: .08em;
  color: var(--ink-soft);
  margin-top: 3px;
  text-transform: uppercase;
}

/* GALLERY - unchanged */
.gallery {
  background: radial-gradient(150% 80% at 50% -12%, #FFFFFF 0%, var(--cream) 62%);
  padding: 58px 0;
  position: relative;
  overflow: hidden;
}

.gallery .grain {
  opacity: .04;
}

.gallery .wrap {
  position: relative;
  z-index: 2;
}

.gallery .head {
  text-align: center;
  max-width: 1180px;
  margin: 0 auto;
}

.gallery .head p {
  color: var(--ink-soft);
  margin-top: 14px;
}

.gallery .ornament {
  margin: 24px auto 34px;
}

.gmosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.gitem {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  cursor: zoom-in;

  aspect-ratio: 4 / 3;
}

.gitem img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}

.gitem::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, transparent 55%, rgba(58, 33, 23, .28));
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
}

.gitem:hover img {
  transform: scale(1.08);
}

.gitem:hover::after {
  opacity: 1;
}

.gitem.missing {
  cursor: default;
}

.gitem.missing img {
  display: none;
}

.gitem.missing::after {
  opacity: 1;
  background: repeating-linear-gradient(45deg, rgba(230, 169, 73, .05) 0 14px, transparent 14px 28px);
}

.gitem.missing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: center/40px no-repeat url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23E6A949'%20stroke-width='1.2'%3E%3Crect%20x='3'%20y='5'%20width='18'%20height='14'%20rx='2'/%3E%3Ccircle%20cx='8.5'%20cy='10'%20r='1.5'/%3E%3Cpath%20d='M21%2015l-5-5-8%208'/%3E%3C/svg%3E");
  opacity: .4;
}

@media(max-width:680px) {
  .gmosaic {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media(max-width:430px) {
  .gmosaic {
    grid-template-columns: 1fr;
  }
}


/* FOOTER */
footer {
  background: var(--maroon-deep);
  color: rgba(255, 255, 255, .62);
  padding: 56px 0 32px;
  font-size: .88rem;
  position: relative;
  overflow: hidden;
}

footer .grain {
  opacity: .05;
}

.foot-grid {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  gap: 44px;
  position: relative;
  z-index: 2;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  padding-bottom: 32px;
}

.foot-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 16px;
}

.foot-brand b {
  font-family: "Lato", serif;
  font-weight: 600;
  font-size: 1.1rem;
  color: #fff;
}

.foot-about p {
  max-width: 46ch;
  line-height: 1.6;
  margin: 0 auto 16px;
  font-style: italic;
}

.foot-col h4 {
  font-family: "Inter", Lato;
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 14px;
}

.foot-col a {
  display: block;
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  padding: 5px 0;
  transition: color .2s;
}

.foot-col a:hover {
  color: var(--amber);
}

.foot-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: .78rem;
  color: rgba(255, 255, 255, .42);
  padding-top: 20px;
  text-align: center;
  position: relative;
  z-index: 2;
}

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

@media(max-width:520px) {
  .foot-grid {
    grid-template-columns: 1fr;
  }
}

/* LIGHTBOX */
.lb {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(26, 12, 8, .95);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

.lb.open {
  display: flex;
}

.lb img {
  max-width: 92vw;
  max-height: 86vh;
  border-radius: 6px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8);
}

.lb-close {
  position: absolute;
  top: 22px;
  right: 26px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .4);
  background: transparent;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: .2s;
}

.lb-close:hover {
  background: rgba(255, 255, 255, .12);
}

:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
}

#readbar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--clay), var(--amber));
  z-index: 80;
  box-shadow: 0 0 12px rgba(230, 169, 73, .55);
  transition: width .08s linear;
}

.about {
  background: radial-gradient(150% 80% at 50% -15%, #FFFFFF 0%, var(--cream) 62%);
}

.grant {
  background: radial-gradient(150% 80% at 50% -15%, #FFFFFF 0%, var(--cream) 62%);
}

.mem {
  background: radial-gradient(150% 80% at 50% -10%, #FFFFFF 0%, var(--cream) 64%);
}

.life {
  background: linear-gradient(180deg, #F7F2EA 0%, #EFE8DC 100%);
}

.about,
.life,
.grant,
.mem,
.gallery {
  position: relative;
}

.about::before,
.life::before,
.grant::before,
.mem::before,
.gallery::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1600px, 100%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

/* light-sweep sheen on hover */
.gcard::after,
.mcard::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(115deg, transparent 42%, rgba(230, 169, 73, .22) 50%, transparent 58%);
  transform: translateX(-130%);
  transition: transform .8s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
  z-index: 3;
}

.gcard:hover::after,
.mcard:hover::after {
  transform: translateX(130%);
}

/* memory cards stagger in (also replays on shuffle) */
@keyframes cardIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.mgrid .mcard {
  animation: cardIn .55s cubic-bezier(.22, 1, .36, 1) both;
}

.mgrid .mcard:nth-child(1) {
  animation-delay: .04s;
}

.mgrid .mcard:nth-child(2) {
  animation-delay: .10s;
}

.mgrid .mcard:nth-child(3) {
  animation-delay: .16s;
}

.mgrid .mcard:nth-child(4) {
  animation-delay: .22s;
}

.mgrid .mcard:nth-child(5) {
  animation-delay: .28s;
}

.mgrid .mcard:nth-child(6) {
  animation-delay: .34s;
}

@media(prefers-reduced-motion:reduce) {

  .shuffle-ic,
  .mcard {
    transition: none !important;
  }

  .goal-banner .gb-fig {
    animation: none;
  }

  .mgrid .mcard {
    animation: none;
  }

  .gcard::after,
  .mcard::after {
    display: none;
  }
}

/* ===== Additional styles ===== */
/* page-specific additions - all colours/fonts come from styles.css tokens */
  .cats { padding: 58px 0 70px; }
  .cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; max-width: 1280px; margin: 44px auto 0; }
  .cat {
    position: relative; background: #fff; border: 1px solid var(--line-soft); border-top: 4px solid var(--clay);
    border-radius: 6px; padding: 38px 36px 34px; box-shadow: var(--shadow);
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .cat:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
  .cat-num {
    font-family: "Lato", serif; font-weight: 700; font-size: 3.4rem; line-height: 1;
    color: var(--amber); position: absolute; top: 18px; right: 26px; letter-spacing: -.03em;
  }
  .cat h3 { font-size: 1.55rem; line-height: 1.2; color: var(--clay-deep); margin: 0 0 18px; max-width: 80%; }
  .cat ul { list-style: none; margin: 0; padding: 0; }
  .cat li { position: relative; padding: 0 0 12px 26px; color: var(--ink); line-height: 1.6; }
  .cat li::before {
    content: ""; position: absolute; left: 2px; top: .62em; width: 9px; height: 9px;
    background: var(--clay); transform: rotate(45deg);
  }
  .quote-line {
    font-family: "Lato"; font-style: italic; font-weight: 700; font-size: 20px; line-height: 1.65;
    color: var(--clay-deep); text-align: center; max-width: 1140px; margin: 0 auto;
  }
  .cta-box { text-align: center; max-width: 820px; margin: 0 auto; }
  .cta-box p { font-size: 1.0625rem; margin: 22px 0 30px; }
  .cta-actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }

  /* cards: button pinned to bottom */
  .cat { display:flex; flex-direction:column; }
  .cat ul { flex:1; margin-bottom:18px; }
  .cat-btn { align-self:flex-start; margin-top:auto; padding:13px 26px; }

  /* footer contact */
  footer .foot-about p.foot-addr { font-style:normal; }
  .foot-contact { display:flex; flex-wrap:wrap; justify-content:center; gap:18px; margin:-40px auto 0; max-width:1100px; }
  .fc-item {
    display:flex; align-items:center; gap:14px; text-align:left; text-decoration:none;
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:6px;
    padding:16px 22px; color:rgba(255,255,255,.85); transition:background .2s, border-color .2s, transform .2s;
  }
  a.fc-item:hover { background:rgba(252,226,197,.1); border-color:var(--amber); transform:translateY(-3px); color:#fff; }
  .fc-ico {
    flex:0 0 42px; height:42px; border-radius:50%; display:grid; place-items:center;
    background:var(--clay); color:#fff;
  }
  .fc-ico svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .fc-txt small { display:block; font-weight:700; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--amber); margin-bottom:2px; }
  .fc-txt span { font-size:.92rem; line-height:1.5; font-style:normal; }

  /* mobile hero: styles.css hides the hero text under 760px (made for the portrait photo on the
     memorial page). This page uses a landscape banner, so bring the text back. */
  @media (max-width: 760px) {
    .hero2 { aspect-ratio: auto !important; min-height: 520px; background-position: 62% center !important; align-items: flex-end; }
    .hero2-scrim {
      display: block !important;
      background: linear-gradient(180deg, rgba(21,11,6,.25) 0%, rgba(21,11,6,.55) 45%, rgba(21,11,6,.88) 100%);
    }
    .hero2-inner { display: block !important; padding: 56px var(--pad) 40px !important; max-width: 100%; }
    .hero2-eyebrow { font-size: .72rem; letter-spacing: .2em; margin-bottom: 12px; }
    .hero2-name { font-size: clamp(1.7rem, 8vw, 2.4rem); }
    .hero2-rule { margin: 20px 0; }
    .hero2-cta { flex-direction: column; align-items: stretch; gap: 12px; }
    .hero2-cta .btn { justify-content: center; }
  }
  @media (max-width: 820px) {
    .fc-item { width:100%; }
    .cat-grid { grid-template-columns: 1fr; }
    .cat { padding: 32px 24px 26px; }
    .hero2-inner { padding-left: var(--pad) !important; }
  }

  .hero2-scrim{background:linear-gradient(100deg,rgba(21,11,6,.9) 0%,rgba(21,11,6,.8) 42%,rgba(21,11,6,.25) 68%,rgba(21,11,6,0) 80%)}
  .intro-tag{font:italic 700 1.25rem/1.5 Lato,serif;color:var(--clay-deep);margin:18px 0 0}
  .cat-grid{grid-template-columns:1fr}
  .cat.fund{display:grid;grid-template-columns:1.15fr .85fr;gap:0 52px;align-items:start}
  .cat.fund h3{grid-column:1/-1;max-width:80%;margin-bottom:22px}
  .cat.fund .fund-main p{margin:0 0 1.05em;color:var(--ink)}
  .cat.fund .fund-side h4{font:italic 700 1.1rem Lato,serif;color:var(--clay-deep);margin:0 0 14px}
  .cat.fund .fund-side ul{margin-bottom:10px}
  .cat.fund .fund-side li{padding-bottom:14px}
  .cat-close{font:italic 700 1.2rem/1.4 Lato,serif;color:var(--clay-deep);margin:10px 0 22px}
  .cat.fund .cat-btn{align-self:flex-start}
  .cta-sign{font:700 .95rem Inter,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--clay-deep);margin:34px 0 0}
  .intro-sub{font:italic 700 1.25rem/1.5 Lato,serif;color:var(--clay-deep);margin:30px 0 14px}
  @media(max-width:900px){.cat.fund{grid-template-columns:1fr;gap:0}.cat.fund h3{max-width:70%}}

  /* ---- Hero (banner) ---- */
  .ce-hero{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(540px,76vh,660px);display:flex;align-items:center;color:#fff;background:var(--maroon-deep)}
  .ce-hero-bg{position:absolute;inset:0;z-index:-3;background-image:var(--ce-banner);background-size:cover;background-position:42% 40%;filter:saturate(1.1) contrast(1.05);transform-origin:60% 50%;animation:ceZoom 24s ease-in-out infinite alternate}
  .ce-hero::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(100deg,rgba(21,11,6,.86) 0%,rgba(21,11,6,.62) 38%,rgba(21,11,6,.12) 68%,rgba(21,11,6,0) 100%),linear-gradient(0deg,rgba(21,11,6,.75) 0%,rgba(21,11,6,0) 38%)}
  .ce-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;z-index:1;background:linear-gradient(90deg,var(--clay),var(--amber),var(--clay))}
  .ce-hero-in{width:100%;max-width:1240px;margin:0 auto;padding:72px 32px 120px}
  .ce-card{max-width:660px;padding:38px 42px 40px;border-radius:6px;border:1px solid rgba(255,255,255,.16);border-left:4px solid var(--amber);background:rgba(26,14,8,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 24px 60px rgba(0,0,0,.35)}
  .ce-eyebrow{display:inline-block;font:700 .74rem Inter,sans-serif;letter-spacing:.26em;text-transform:uppercase;color:var(--amber);margin:0 0 16px}
  .ce-title{font:700 clamp(2.2rem,4.6vw,3.7rem)/1.06 Lato,serif;margin:0;color:#fff;letter-spacing:.005em}
  .ce-title span{color:var(--amber)}
  .ce-rule{width:78px;height:3px;margin:24px 0;background:linear-gradient(90deg,var(--clay),var(--amber));border-radius:2px}
  .ce-tag{font:italic 500 clamp(1.1rem,1.8vw,1.4rem)/1.5 Lato,serif;color:rgba(255,255,255,.92);margin:0 0 28px}
  .ce-cta{display:flex;flex-wrap:wrap;gap:14px}
  .ce-pillars{position:absolute;left:0;right:0;bottom:26px;z-index:2}
  .ce-pillars ul{list-style:none;margin:0 auto;padding:0 32px;max-width:1240px;display:flex;flex-wrap:wrap;gap:10px}
  .ce-pillars a{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;text-decoration:none;color:#fff;font:600 .82rem Inter,sans-serif;letter-spacing:.06em;border:1px solid rgba(255,255,255,.32);background:rgba(26,14,8,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .25s,border-color .25s,transform .25s}
  .ce-pillars a b{font:700 .72rem Inter,sans-serif;color:var(--amber)}
  .ce-pillars a:hover{background:var(--clay);border-color:var(--clay);transform:translateY(-2px)}
  .ce-card>*{animation:ceUp .8s cubic-bezier(.2,.7,.2,1) both}
  .ce-card>:nth-child(2){animation-delay:.1s}.ce-card>:nth-child(3){animation-delay:.2s}.ce-card>:nth-child(4){animation-delay:.3s}.ce-card>:nth-child(5){animation-delay:.4s}
  @keyframes ceUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  @keyframes ceZoom{from{transform:scale(1)}to{transform:scale(1.07)}}
  @media(prefers-reduced-motion:reduce){.ce-hero-bg,.ce-card>*{animation:none}}
  @media(max-width:760px){
    .ce-hero{min-height:0;align-items:flex-end}
    .ce-hero-bg{background-position:30% center}
    .ce-hero::before{background:linear-gradient(0deg,rgba(21,11,6,.92) 0%,rgba(21,11,6,.7) 55%,rgba(21,11,6,.2) 100%)}
    .ce-hero-in{padding:150px 18px 100px}
    .ce-card{padding:26px 22px 28px;background:rgba(26,14,8,.42)}
    .ce-cta .btn{flex:1 1 100%;justify-content:center}
    .ce-pillars{bottom:18px}.ce-pillars ul{padding:0 18px;gap:8px}.ce-pillars a{padding:8px 13px;font-size:.74rem}
  }

  /* hero v2: card on the right so the survey vehicle and labs stay visible */
  .ce-hero{min-height:clamp(500px,70vh,600px)}
  .ce-hero-bg{background-position:22% 45%}
  .ce-hero::before{background:linear-gradient(260deg,rgba(21,11,6,.84) 0%,rgba(21,11,6,.58) 36%,rgba(21,11,6,.05) 66%,rgba(21,11,6,0) 100%),linear-gradient(0deg,rgba(21,11,6,.6) 0%,rgba(21,11,6,0) 30%)}
  .ce-hero-in{padding:56px 32px 112px}
  .ce-card{margin-left:auto;padding:32px 38px 34px;max-width:620px}
  .ce-pillars ul{justify-content:flex-end}
  @media(max-width:760px){.ce-card{margin-left:0}.ce-pillars ul{justify-content:flex-start}.ce-hero-in{padding:150px 18px 100px}.ce-hero-bg{background-position:22% center}}
  .ce-card{max-width:680px}
  .ce-cta .btn{padding-left:24px;padding-right:24px}
  @media(max-width:760px){.ce-cta .btn{padding-left:16px;padding-right:16px}}
  @media(max-width:760px){
    .ce-hero{flex-direction:column;justify-content:flex-end;align-items:stretch}
    .ce-hero-in{padding:150px 18px 18px}
    .ce-pillars{position:static;padding:0 0 22px}
    .ce-cta{flex-direction:column;align-items:stretch}
    .ce-cta .btn{width:100%;box-sizing:border-box;white-space:normal;text-align:center;font-size:.8rem;letter-spacing:.08em;padding:15px 14px}
  }
  /* fund photos fill the left column */
  .cat.fund{align-items:stretch}
  .cat.fund .fund-main{display:flex;flex-direction:column}
  .fund-fig{margin:10px 0 0;flex:1 1 auto;min-height:240px;max-height:380px;border-radius:6px;overflow:hidden;position:relative;box-shadow:0 14px 34px rgba(42,22,16,.22)}
  .fund-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
  .fund-fig::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:4px;background:linear-gradient(90deg,var(--clay),var(--amber))}
  .cat.fund:hover .fund-fig img{transform:scale(1.04)}
  @media(max-width:900px){.fund-fig{flex:none;height:230px;min-height:0;margin:8px 0 26px}}
  @media(prefers-reduced-motion:reduce){.fund-fig img{transition:none}}
  #student .fund-fig img{object-position:center top}

  /* ===== redesign v3 ===== */
  .intro-grid{grid-template-columns:1.5fr .8fr;gap:56px;align-items:center}
  .intro-grid .about-body{max-width:none;margin:0}
  .stats{display:grid;gap:14px}
  .stat{display:flex;align-items:center;gap:20px;background:#fff;border-radius:14px;padding:20px 26px;border:1px solid rgba(176,74,46,.15);box-shadow:0 14px 34px rgba(42,22,16,.1);position:relative;overflow:hidden}
  .stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,var(--clay),var(--amber))}
  .stat b{font:700 3.2rem/1 Lato,serif;color:var(--clay);min-width:64px}
  .stat span{font:600 .84rem/1.35 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
  .cats{padding:84px 0 0;background:var(--page,#fbf7f0)}
  .cats>.wrap{display:flex;flex-direction:column;gap:96px;padding-bottom:96px}
  .zz{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
  .zz.rev .zz-media{order:2}
  .zz-media{position:relative;height:500px;border-radius:20px;box-shadow:0 30px 60px rgba(42,22,16,.25)}
  .zz-media::before{content:"";position:absolute;inset:-14px 14px 14px -14px;border:2px solid var(--amber);border-radius:22px;z-index:-1}
  .zz.rev .zz-media::before{inset:-14px -14px 14px 14px}
  .zz-media img{border-radius:20px;display:block;transition:transform .9s ease}
  .zz-media{overflow:visible}
  .zz-media::after{content:"";position:absolute;inset:0;border-radius:20px;}
  .zz-num{position:absolute;top:-26px;left:26px;z-index:2;font:700 5.5rem/1 Lato,serif;color:var(--amber);text-shadow:0 6px 24px rgba(0,0,0,.25)}
  .zz.rev .zz-num{left:auto;right:26px}
  .zz-chip{position:absolute;left:22px;right:22px;bottom:22px;z-index:2;color:#fff;font:italic 700 1.25rem/1.35 Lato,serif;padding:14px 18px;border-radius:12px;background:rgba(26,14,8,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.2)}
  .zz-ico{display:inline-grid;place-items:center;width:54px;height:54px;border-radius:14px;background:linear-gradient(135deg,var(--clay),var(--clay-deep));color:#fff;box-shadow:0 10px 24px rgba(176,74,46,.35);margin-bottom:16px}
  .zz-ico svg{width:26px;height:26px}
  .zz-body h3{font:700 clamp(1.9rem,3vw,2.6rem)/1.15 Lato,serif;color:var(--ink);margin:0 0 16px}
  .zz-body p{color:var(--ink);margin:0 0 1em}
  .zz-body h4{font:italic 700 1.1rem/1.4 Lato,serif;color:var(--clay-deep);margin:22px 0 12px}
  .zz-list{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:10px}
  .zz-list li{position:relative;padding:12px 16px 12px 52px;background:rgba(230,169,73,.14);border-radius:10px;border:1px solid rgba(176,74,46,.12)}
  .zz-list li::before{content:"";position:absolute;left:16px;top:14px;width:22px;height:22px;border-radius:50%;background:var(--clay)}
  .zz-list li::after{content:"";position:absolute;left:24px;top:19px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
  .legacy{position:relative;isolation:isolate;overflow:hidden;background:var(--maroon-deep);color:#fff;padding:96px 0}
  .legacy::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ce-banner) center/cover;opacity:.16;filter:grayscale(.3)}
  .legacy::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--maroon-deep),rgba(42,22,16,.72) 50%,var(--maroon-deep))}
  .lg-head{max-width:820px;margin:0 auto 52px;text-align:center}
  .lg-head .zz-ico{margin-bottom:6px}
  .lg-kick{font:700 .8rem Inter,sans-serif;letter-spacing:.3em;color:var(--amber);margin:6px 0 10px}
  .lg-head h2{font:700 clamp(2.1rem,4.2vw,3.0rem)/1.15 Lato,serif;color:#fff;margin:0 0 18px}
  .lg-head p{color:rgba(255,255,255,.88);font-size:1.15rem}
  .lg-head h4{font:italic 700 1.15rem/1.4 Lato,serif;color:var(--amber);margin:26px 0 0}
  .lg-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
  .lg-card{grid-column:span 2;padding:28px 26px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform .3s,background .3s,border-color .3s}
  .lg-card:nth-child(n+4){grid-column:span 3}
  .lg-card:hover{transform:translateY(-6px);background:rgba(255,255,255,.12);border-color:var(--amber)}
  .lg-card h5{font:700 1.25rem/1.3 Lato,serif;color:#fff;margin:0 0 10px}
  .lg-card p{margin:0;color:rgba(255,255,255,.84);font-size:1rem;line-height:1.6}
  .ce-close{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(135deg,var(--maroon-deep),var(--maroon))}
  .ce-close::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ce-banner) center/cover;opacity:.2}
  .ce-close .grain{opacity:.06}
  .ce-close .cta-box{background:transparent;box-shadow:none;border:0;color:#fff}
  .ce-close .cta-box p{color:rgba(255,255,255,.9);font-size:1.15rem}
  .ce-close .sec-h{color:#fff}
  .ce-close .cta-sign{color:var(--amber)}
  @media(max-width:900px){
    .intro-grid{grid-template-columns:1fr;gap:34px}
    .cats>.wrap{gap:70px}
    .zz{grid-template-columns:1fr;gap:34px}
    .zz.rev .zz-media{order:0}
    .zz-media{height:320px}
    .zz-media::before,.zz.rev .zz-media::before{inset:-10px 10px 10px -10px}
    .zz-num{font-size:4rem;top:-20px}
    .lg-grid{grid-template-columns:1fr}.lg-card,.lg-card:nth-child(n+4){grid-column:auto}
  }
  @media(prefers-reduced-motion:reduce){.zz-media img,.lg-card{transition:none}}
  .zz-num{top:14px;left:24px;color:#fff;font-size:4.6rem;opacity:.92}
  .zz.rev .zz-num{left:auto;right:24px}
  #student .zz-media img{object-position:center top}
  .ce-close .accent{color:var(--amber)}
  .ce-close .btn-outline{color:#fff!important;border-color:rgba(255,255,255,.65)}
  .ce-close .btn-outline:hover{background:rgba(255,255,255,.14)}

  /* ===== compact + quick contribute ===== */
  .cats{padding-top:6px}
  .cats>.wrap{gap:52px;padding-bottom:56px}
  .zz{gap:44px}
  .zz-media{height:360px}
  .zz-num{font-size:3.6rem}
  .zz-chip{font-size:1.05rem;padding:10px 14px;left:16px;right:16px;bottom:16px}
  .zz-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
  .zz-top .zz-ico{margin:0;width:46px;height:46px}
  .zz-cta-top{padding:11px 22px!important;font-size:.78rem!important}
  .zz-body h3{font-size:clamp(1.6rem,2.4vw,2.1rem);margin-bottom:10px}
  .zz-body p{font-size:.98rem;line-height:1.6;margin-bottom:.7em}
  .zz-body h4{margin:14px 0 8px;font-size:1rem}
  .zz-list{gap:7px;margin-bottom:18px}
  .zz-list li{padding:9px 14px 9px 46px;font-size:.95rem;line-height:1.45}
  .zz-list li::before{left:13px;top:11px;width:20px;height:20px}
  .zz-list li::after{left:20px;top:15px}
  #about{padding:56px 0 28px!important}
  .stat{padding:14px 22px}.stat b{font-size:2.6rem}
  .legacy{padding:64px 0}.lg-head{margin-bottom:34px}.lg-card{padding:22px 22px}
  .nav-cta{padding:10px 20px!important;font-size:.76rem!important;margin-left:10px}
  .fundmenu{position:fixed;right:24px;top:84px;z-index:60;width:min(380px,calc(100vw - 32px));background:#fff;border-radius:14px;box-shadow:0 24px 60px rgba(42,22,16,.35);border:1px solid rgba(176,74,46,.2);overflow:hidden}
  .fundmenu[hidden]{display:none}
  .fm-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:linear-gradient(135deg,var(--maroon-deep),var(--maroon));color:#fff;font:700 .78rem Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase}
  .fm-x{background:none;border:0;color:#fff;font-size:1.6rem;line-height:1;cursor:pointer}
  .fm-item{display:block;padding:14px 18px;text-decoration:none;border-top:1px solid rgba(176,74,46,.12);transition:background .2s}
  .fm-item:hover,.fm-item:focus-visible{background:rgba(230,169,73,.2)}
  .fm-item strong{display:block;font:700 1.05rem Lato,serif;color:var(--ink)}
  .fm-item small{display:block;font:italic 500 .92rem Lato,serif;color:var(--clay-deep)}
  @media(max-width:900px){
    .zz-media{height:240px}.cats>.wrap{gap:40px}
    .nav-cta{display:none}
    .fundmenu{right:16px;left:16px;top:auto;bottom:76px;width:auto}
  }

  /* ===== v4: wide layout + 4 blocks ===== */
  :root{--maxw:min(95vw,2300px)}
  .ce-hero-in,.ce-pillars ul{max-width:var(--maxw)}
  .cats>.wrap{display:block;padding-bottom:64px}
  .cats .about-intro{margin-bottom:40px}
  .zb-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:stretch}
  .zz{display:flex;flex-direction:column;gap:0;background:#fff;border-radius:18px;overflow:hidden;border:1px solid rgba(176,74,46,.14);box-shadow:0 18px 44px rgba(42,22,16,.12);transition:transform .3s,box-shadow .3s}
  .zz:hover{transform:translateY(-4px);box-shadow:0 26px 56px rgba(42,22,16,.2)}
  .zz.rev .zz-media{order:0}
  .zz-media{height:250px;border-radius:0;box-shadow:none;flex:none}
  .zz-media::before{display:none}
  .zz-media img,.zz-media::after{border-radius:0}
  .zz-body{display:flex;flex-direction:column;flex:1;padding:22px 26px 26px}
  .zz-body .zz-list{margin-bottom:20px}
  .zz-body>.btn{margin-top:auto;align-self:stretch;text-align:center;justify-content:center}
  .zz:hover .zz-media img{transform:scale(1.05)}
  .zz-num{top:10px;left:20px;right:auto}
  .zz.rev .zz-num{left:20px;right:auto}
  @media(min-width:2100px){
    .zb-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
    .lg-grid{grid-template-columns:repeat(5,1fr)}.lg-card,.lg-card:nth-child(n+4){grid-column:auto}
  }
  @media(max-width:900px){.zb-grid{grid-template-columns:1fr}.zz-media{height:220px}}
  .zz{align-items:stretch}
  .zz-media,.zz-body{width:100%}

  /* ===== v5: always 4 blocks in one row on desktop ===== */
  @media(min-width:1280px){
    .zb-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
    .zz-media{height:200px}
    .zz-num{font-size:3rem}
    .zz-chip{font-size:.95rem;padding:8px 12px;left:12px;right:12px;bottom:12px}
    .zz-body{padding:18px 18px 20px}
    .zz-top .zz-ico{width:40px;height:40px}.zz-top .zz-ico svg{width:22px;height:22px}
    .zz-cta-top{padding:9px 16px!important;font-size:.72rem!important}
    .zz-body h3{font-size:1.45rem}
    .zz-body p{font-size:.92rem;line-height:1.55}
    .zz-body h4{font-size:.95rem}
    .zz-list li{font-size:.88rem;padding:8px 10px 8px 40px}
    .zz-list li::before{left:10px;top:10px;width:18px;height:18px}
    .zz-list li::after{left:17px;top:14px;width:4px;height:8px}
    .zz-body>.btn{font-size:.78rem}
  }
  @media(min-width:1500px){.lg-grid{grid-template-columns:repeat(5,1fr)}.lg-card,.lg-card:nth-child(n+4){grid-column:auto}}
  @media(min-width:900px) and (max-width:1279px){.zb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

  /* ===== v6: 3 blocks + wide Outreach feature ===== */
  @media(min-width:1000px){
    .zb-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
    .zz-media{height:230px}
    .zz-num{font-size:3.4rem}
    .zz-chip{font-size:1.02rem;padding:10px 14px;left:14px;right:14px;bottom:14px}
    .zz-body{padding:56px 24px 24px}
    .zz-top .zz-ico{width:44px;height:44px}.zz-top .zz-ico svg{width:24px;height:24px}
    .zz-cta-top{padding:10px 18px!important;font-size:.75rem!important}
    .zz-body h3{font-size:1.6rem}
    .zz-body p{font-size:.97rem;line-height:1.6}
    .zz-body h4{font-size:1rem}
    .zz-list li{font-size:.93rem;padding:9px 12px 9px 44px}
    .zz-list li::before{left:12px;top:11px;width:19px;height:19px}
    .zz-list li::after{left:19px;top:15px;width:4px;height:9px}
  }
  .zz-steps{counter-reset:st}
  .zz-steps li{counter-increment:st}
  .zz-steps li::before{content:counter(st);color:#fff;font:700 .8rem/19px Inter,sans-serif;text-align:center}
  .zz-steps li::after{display:none}
  @media(min-width:1100px){
    .zz.wide{grid-column:1/-1;flex-direction:row;background:linear-gradient(120deg,#fff 35%,rgba(230,169,73,.24));border-left:6px solid var(--clay)}
    .zz.wide .zz-media{flex:0 0 35%;width:auto;height:auto;min-height:440px}
    .zz.wide .zz-body{width:auto;display:grid;grid-template-columns:1fr 1fr;column-gap:48px;align-content:start;padding:30px 36px}
    .zz.wide .zz-top{grid-column:1/-1;grid-row:1}
    .zz.wide .zz-body>h3{grid-column:1/-1;grid-row:2;font-size:2rem}
    .zz.wide .zz-body>p:nth-of-type(1){grid-column:1;grid-row:3}
    .zz.wide .zz-body>p:nth-of-type(2){grid-column:1;grid-row:4}
    .zz.wide .zz-body>h4{grid-column:2;grid-row:3;margin-top:0}
    .zz.wide .zz-body>.zz-list{grid-column:2;grid-row:4/span 2;margin-bottom:0}
    .zz.wide .zz-body>.btn{grid-column:1/-1;grid-row:6;margin-top:22px;align-self:end}
  }
  @media(min-width:1100px){
    .zz.wide .zz-body>h3{grid-column:1;grid-row:2}
    .zz.wide .zz-body>h4{grid-column:2;grid-row:2;align-self:end;margin:0 0 12px}
    .zz.wide .zz-body>.zz-list{grid-column:2;grid-row:3/span 2;align-self:start}
  }


/* Footer contact block */
footer .foot-about p.foot-addr { font-style: normal; margin: 0 auto; line-height: 1.7; }
footer .foot-contact { margin: 0 auto !important; width: 100%; position: relative; z-index: 2; align-items: stretch; }
footer .fc-item { align-items: center; }
footer .fc-txt span { color: rgba(255, 255, 255, .85); }
@media(max-width:560px) {
  footer .foot-contact { flex-direction: column; }
  footer .fc-item { width: 100%; }
}

/* ===== Legacy Endowments & Named Giving: redesign (colours unchanged) ===== */
.legacy::after{background:radial-gradient(90% 70% at 88% 0%,rgba(176,74,46,.30),transparent 60%),linear-gradient(180deg,var(--maroon-deep),rgba(42,22,16,.72) 50%,var(--maroon-deep))}
.legacy{padding:40px 0 96px}
.lg-head{max-width:860px;margin:0 auto 64px}
.lg-head h2{font:800 clamp(2.4rem,4.8vw,3.4rem)/1.12 Lato,serif;letter-spacing:-.01em;margin:0 0 26px}
.lg-head h2 .lg-hl{background:linear-gradient(90deg,var(--clay) 0%,#E6A949 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.lg-head p{max-width:680px;margin:0 auto;font-size:1.2rem;line-height:1.65;color:rgba(255,255,255,.88)}
.lg-head p strong{color:#E6A949;font-weight:700}
.lg-head h4{font:italic 400 1rem/1.5 Inter,sans-serif;color:rgba(255,255,255,.85);margin:28px 0 0}
.lg-card{display:flex;flex-direction:column;padding:34px 26px 30px;border-radius:16px;background:rgba(0,0,0,.20);border:1px solid rgba(255,255,255,.09);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 18px 40px -26px rgba(0,0,0,.6);transition:transform .3s,background .3s,border-color .3s,box-shadow .3s}
.lg-card:hover{transform:translateY(-6px);background:rgba(0,0,0,.28);border-color:rgba(230,169,73,.55);box-shadow:0 26px 50px -26px rgba(0,0,0,.7)}
.lg-num{display:block;font:600 .95rem/1 Inter,sans-serif;letter-spacing:.04em;color:#E6A949;margin:0 0 26px}
.lg-card h5{font:700 1.3rem/1.35 Lato,serif;color:#fff;margin:0 0 14px}
.lg-card p{color:rgba(255,255,255,.68);font-size:1rem;line-height:1.65}
/* keep the 3 + 2 layout on every desktop width */
@media(min-width:901px){
  .lg-grid{grid-template-columns:repeat(6,1fr);gap:24px}
  .lg-card{grid-column:span 2}
  .lg-card:nth-child(n+4){grid-column:span 3}
}
@media(max-width:900px){
  .lg-grid{grid-template-columns:1fr}
  .lg-card,.lg-card:nth-child(n+4){grid-column:auto}
  .legacy{padding:64px 0}
  .lg-head{margin-bottom:38px}
  .lg-card{padding:26px 22px}
  .lg-num{margin-bottom:18px}
}

/* Tagline chip: moved below the image, same dark pill design, centred */
.zz-body>.zz-chip{position:static;display:block;text-align:center;margin:auto 0 0;left:auto;right:auto;bottom:auto;background:linear-gradient(135deg,#3a2216,#1a0e08);border:1px solid rgba(230,169,73,.35);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 8px 20px rgba(42,22,16,.18)}

.zz-body>.zz-list+.zz-chip{margin-top:auto}
.zz-body .zz-list{margin-bottom:20px}