.green {
	color: var(--green2) !important;
}

#mtr40-hero .av-section-color-overlay {
	background: radial-gradient(ellipse 70% 80% at 70% 30%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 60%) !important;
	opacity: 1 !important;
}

#mtr40-hero h1 {
	font-family: var(--body) !important;
	font-weight: 800 !important;
	color: white;
	font-size: 5.5rem !important;
	line-height: 1 !important;
	margin-top: 0 !important;
	margin-bottom: 5rem !important;
}

.clip-image img {
 border-radius: 45% 45% 48% 48% / 8% 8% 4% 4%;
}

#generations {
	position: relative;
	overflow: hidden;
}

#generations::after {
	content: "";
	position: absolute;
	background: url(https://morethanaroof.org/wp-content/uploads/mtr-hope-icon.png) center center no-repeat;
	background-size: cover;
	bottom: -10px;
	right: -30px;
	width: 420px;
	height: 420px;
}

.center {text-align: center !important;}

.dark-bg h2.section-title {
	color: white !important;
}

.dark-bg .section-sub {
	color: var(--green2) !important;
}



.section .grand {
  font-size: 5rem !important;	
}




/* =====================================================================
   MTR40 — Impact stats grid
   Scoped under .mtr40-stats so it won't collide with global styles.
   Background is transparent (your section already provides the green).
   ===================================================================== */

.mtr40-stats {
  --mtr40-stats-gap: clamp(32px, 6vw, 72px);
  --mtr40-stats-icon-size: clamp(50px, 6vw, 80px);
  --mtr40-stats-number: var(--green2, #1db954);
  --mtr40-stats-text: #ffffff;

  background: transparent;
  padding: clamp(16px, 4vw, 40px);
  box-sizing: border-box;
}

.mtr40-stats *,
.mtr40-stats *::before,
.mtr40-stats *::after {
  box-sizing: border-box;
}

/* ----------------------------- GRID --------------------------------- */
.mtr40-stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--mtr40-stats-gap);
  row-gap: clamp(48px, 8vw, 90px);
}

/* ----------------------------- ITEM --------------------------------- */
.mtr40-stats__item {
  display: flex;
  flex-direction: column;
}

.mtr40-stats__icon {
  width: var(--mtr40-stats-icon-size) !important;
  height: auto;
  margin-bottom: clamp(20px, 3vw, 32px);
}

.mtr40-stats__number {
  margin: 0 0 0.1em;
  color: var(--mtr40-stats-number);
  font: 800 clamp(2.75rem, 6vw, 4rem)/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: -0.01em;
	font-size: 3rem !important;
}

.mtr40-stats__label {
  margin: 0;
  color: #f7f4ea !important;
  font: 700 clamp(1.5rem, 3.2vw, 2.1rem)/1.15 system-ui, -apple-system, "Segoe UI", sans-serif;
	font-weight: 500 !important;
	font-size: 1.6rem !important;
}

/* ============================ RESPONSIVE ============================= */
@media (max-width: 560px) {
  .mtr40-stats__grid {
    grid-template-columns: 1fr;
    row-gap: clamp(40px, 10vw, 64px);
  }
}


@media (min-width: 900px) {
	.border-left {
		border-left: 1px solid white !important;
	}
}

.padding-bottom {
	padding-bottom: 100px !important;
}




/* =====================================================================
   MTR40 — "Stories of Hope" video carousel
   Scoped under .mtr40-stories. Background transparent.
   Drop your YouTube IDs + quotes into the STORIES array in the script.
   ===================================================================== */

.mtr40-stories {
  --mtr40-stories-green: var(--green2, #16a34a);
  --mtr40-stories-heading: var(--green-dark, #14532d);
  --mtr40-stories-ink: #1c1c1c;
  --mtr40-stories-muted: #4b4b4b;

  background: transparent;
  padding: clamp(16px, 4vw, 40px);
  box-sizing: border-box;
}

.mtr40-stories *,
.mtr40-stories *::before,
.mtr40-stories *::after {
  box-sizing: border-box;
}

/* ----------------------------- HEADER ------------------------------- */
.mtr40-stories__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5vw, 64px);
  align-items: start;
  margin-bottom: clamp(20px, 3vw, 32px);
}

.mtr40-stories__title {
  margin: 0;
  color: var(--mtr40-stories-heading);
  font: 400 clamp(2.75rem, 7vw, 4.5rem)/0.98 Georgia, "Times New Roman", serif;
}

.mtr40-stories__eyebrow {
  margin: 0 0 0.15em;
  color: var(--mtr40-stories-green);
  font: 800 clamp(1.1rem, 2.4vw, 1.5rem)/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 2.5rem !important;
}

.mtr40-stories__subtitle {
  margin: 0 0 1.25em;
  color: var(--mtr40-stories-ink);
  font: 500 clamp(0.95rem, 1.6vw, 1.05rem)/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.mtr40-stories__quote {
  margin: 0;
  color: var(--mtr40-stories-ink) !important;
  font: italic 600 clamp(1rem, 1.7vw, 1.15rem)/1.4 Georgia, "Times New Roman", serif;
	border: none !important;
	padding-left: 0 !important;
	font-weight: 500 !important;
	font-family: var(--heading) !important;
	font-size: 1.6rem !important;
}

.mtr40-stories__intro {
  transition: opacity 0.3s ease;
}

/* ------------------------------ VIDEO ------------------------------- */
.mtr40-stories__video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

.mtr40-stories__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ------------------------------ BUTTON ------------------------------ */
.mtr40-stories__nav {
  margin-top: clamp(20px, 3vw, 32px);
}

.mtr40-stories__next {
  display: inline-block;
  border: 0;
  cursor: pointer;
  background: var(--mtr40-stories-green);
  color: #fff;
  padding: 11px 16px;
  font: 600 0.8rem/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 1.3rem !important;
	font-weight: 500 !important;
	text-transform: uppercase !important;
	color: #00392c !important;
  letter-spacing: 0.05em;
  transition: filter 0.2s ease, transform 0.1s ease;
}

.mtr40-stories__next:hover { filter: brightness(1.08); }
.mtr40-stories__next:active { transform: translateY(1px); }
.mtr40-stories__next:focus-visible { outline: 2px solid var(--mtr40-stories-heading); outline-offset: 2px; }

/* ============================ RESPONSIVE ============================= */
@media (max-width: 720px) {
  .mtr40-stories__header {
    grid-template-columns: 1fr;
  }
}










/* =====================================================================
   MTR40 — "Through The Years" history grid
   Everything is scoped under .mtr40-history so it won't collide with
   your global styles. Colours fall back to sensible values but will
   inherit your globally-defined CSS variables where provided.
   ===================================================================== */

.mtr40-history {
  /* --- local fallbacks; override globally if you like --- */
  --mtr40-bg: var(--mtr-green-dark, #14392b);
  --mtr40-gap: 16px;
  --mtr40-radius: 4px;
  --mtr40-caption-bg: var(--mtr-cream, #ece7da);
  --mtr40-caption-text: var(--mtr-ink, #1c1c1c);
  /* hover overlay: #9ecf56 at 80% opacity */
    --mtr40-overlay-bg: rgba(0, 201, 77, 0.8);

  --mtr40-overlay-text: var(--mtr-green-dark, #14392b);

  box-sizing: border-box;
}

.mtr40-history *,
.mtr40-history *::before,
.mtr40-history *::after {
  box-sizing: border-box;
}

/* ----------------------------- GRID --------------------------------- */
.mtr40-history__grid {
  display: grid;
	margin-top: 30px !important;
  gap: var(--mtr40-gap);
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 200px 230px 200px;
  grid-template-areas:
    "founder charleswood kindred"
    "founder rebrand     kindred"
    "gala    ceo         realestate";
}

.mtr40-history__item--founder    { grid-area: founder; }
.mtr40-history__item--charleswood{ grid-area: charleswood; }
.mtr40-history__item--rebrand    { grid-area: rebrand; }
.mtr40-history__item--kindred    { grid-area: kindred; }
.mtr40-history__item--gala       { grid-area: gala; }
.mtr40-history__item--ceo        { grid-area: ceo; }
.mtr40-history__item--realestate { grid-area: realestate; }

/* --------------------------- EACH CARD ------------------------------ */
.mtr40-history__item {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--mtr40-radius);
  background: rgba(0, 0, 0, 0.25);
}

.mtr40-history__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------- CAPTION (label bar, always visible) --------------- */
.mtr40-history__caption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  background: var(--mtr40-caption-bg);
  padding: 10px 14px;
  color: var(--mtr40-caption-text);
  font: 500 0.85rem/1.35 system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ------------------ HOVER OVERLAY (green + text) -------------------- */
.mtr40-history__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  padding: clamp(16px, 2.2vw, 32px);
  /* leave room so the description never collides with the caption bar */
  padding-bottom: clamp(48px, 5vw, 60px);
  background: var(--mtr40-overlay-bg);
  color: var(--mtr40-overlay-text);
  overflow: auto;

  opacity: 0;
  transition: opacity 0.3s ease;
}

.mtr40-history__item:hover .mtr40-history__overlay,
.mtr40-history__item:focus-within .mtr40-history__overlay {
  opacity: 1;
}

.mtr40-history__desc {
  margin: 0;
  font: 500 clamp(0.85rem, 1.05vw, 1rem)/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.mtr40-history__desc p { margin: 0 0 0.9em; color: white !important; }
.mtr40-history__desc p:last-child { margin-bottom: 0; }

/* Keyboard / focus styling */
.mtr40-history__item:focus { outline: none; }
.mtr40-history__item:focus-visible { outline: 2px solid var(--mtr40-overlay-bg); outline-offset: 2px; }

/* ============================ RESPONSIVE ============================= */

/* Tablet: 2 columns, founder spans full width on top */
@media (max-width: 900px) {
  .mtr40-history__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
/*     grid-auto-rows: 1fr; */
    grid-template-areas: none;
  }
  .mtr40-history__item {
    grid-area: auto;
    aspect-ratio: 4 / 3;
  }
  .mtr40-history__item--founder {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 9;
  }
}

/* Mobile: single column */
@media (max-width: 560px) {
  .mtr40-history__grid {
    grid-template-columns: 1fr;
  }
  .mtr40-history__item,
  .mtr40-history__item--founder {
    grid-column: auto;
    aspect-ratio: 4 / 3;
  }
}

@media(min-width: 901px) {
	.mtr40-history__item--kindred {
		border-top-right-radius: 90px;
	}
	
	.mtr40-history__item--gala {
		border-bottom-left-radius: 90px;
	}
	
	.mtr40-history__item--gala .mtr40-history__caption {
		padding-left: 60px;
	}
}