/**
 * Give Page Styles
 *
 * Prefixed with .give- to avoid collisions with global styles.
 * Relies on base section, button, stat, and reveal classes from custom.css.
 *
 * @package flavor23
 */

/* ==============================
   Hero (Light Interior)
   ============================== */

.give-hero {
	background: var(--wp--preset--color--primary-dark, #2A2F42);
	padding: 8rem 1.5rem 5rem;
	text-align: center;
}

.give-hero__content {
	position: relative;
}

.give-hero .section__eyebrow,
.give-hero__title,
.give-hero__subtitle {
	opacity: 0;
	animation: heroFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.give-hero .section__eyebrow { animation-delay: 0.15s; }
.give-hero__title             { animation-delay: 0.35s; }
.give-hero__subtitle          { animation-delay: 0.55s; }

.give-hero__title {
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: clamp(2rem, 4vw, 3.3rem);
	font-weight: 600;
	line-height: 1.25;
	color: #fff;
	margin-bottom: 1.25rem;
}

.give-hero__subtitle {
	font-size: 1.125rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.85);
	max-width: 620px;
	margin: 0 auto;
}

/* ==============================
   Where Your Money Goes — Breakdown Cards
   ============================== */

.give-breakdown {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

.give-breakdown__card {
	background: #F7F8FA;
	border-radius: 16px;
	padding: 2.5rem 2rem 2rem;
	text-align: center;
	border-top: 4px solid rgba(93, 121, 146, 0.15);
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.give-breakdown__card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08);
}

.give-breakdown__card--highlight {
	border-top-color: var(--wp--preset--color--accent, #DD9F33);
	background: #fff;
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}

.give-breakdown__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(47, 173, 193, 0.1);
	color: var(--wp--preset--color--church-plant, #2FADC1);
	margin-bottom: 1.25rem;
}

.give-breakdown__icon--purple {
	background: rgba(126, 114, 175, 0.1);
	color: var(--wp--preset--color--sabbatical, #7E72AF);
}

.give-breakdown__icon--accent {
	background: rgba(221, 159, 51, 0.1);
	color: var(--wp--preset--color--accent, #DD9F33);
}

.give-breakdown__card h3 {
	font-size: 1.25rem;
	margin-bottom: 0.5rem;
	color: var(--wp--preset--color--primary-dark, #2A2F42);
}

.give-breakdown__amount {
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent, #DD9F33);
	margin-bottom: 1rem;
}

.give-breakdown__card p:last-child {
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--wp--preset--color--secondary-text, #6B7280);
	margin: 0;
}

/* Stagger reveals */
.give-breakdown .reveal:nth-child(2) { transition-delay: 0.12s; }
.give-breakdown .reveal:nth-child(3) { transition-delay: 0.24s; }

/* ==============================
   Impact Section (extends global)
   ============================== */

.give-impact {
	text-align: center;
	position: relative;
	overflow: hidden;
}

.give-impact::before {
	content: '';
	position: absolute;
	width: 950px;
	height: 950px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='rgb(93%2C121%2C146)' stroke-opacity='0.15' stroke-width='0.75'%3E%3Ccircle cx='200' cy='200' r='180'/%3E%3Ccircle cx='200' cy='200' r='135'/%3E%3Ccircle cx='200' cy='200' r='90'/%3E%3Ccircle cx='200' cy='200' r='45'/%3E%3Cellipse cx='200' cy='200' rx='70' ry='180'/%3E%3Cellipse cx='200' cy='200' rx='120' ry='180'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	opacity: 0.05;
}

.give-impact > * {
	position: relative;
	z-index: 1;
}

/* ==============================
   Why Trust 23 Project
   ============================== */

.give-trust {
	max-width: 680px;
	margin: 0 auto;
}

.give-trust__lead {
	font-size: 1.125rem;
	line-height: 1.8;
	color: var(--wp--preset--color--body-text, #1A1A2E);
	margin-bottom: 2.5rem;
	font-weight: 500;
}

.give-trust__values {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}

.give-trust__item {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}

.give-trust__marker {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(221, 159, 51, 0.1);
	color: var(--wp--preset--color--accent, #DD9F33);
	margin-top: 0.15rem;
}

.give-trust__text h3 {
	font-size: 1.25rem;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	margin-bottom: 0.375rem;
	color: var(--wp--preset--color--primary-dark, #2A2F42);
}

.give-trust__text p {
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--wp--preset--color--secondary-text, #6B7280);
	margin: 0;
}

/* Dark section overrides */
.section--dark .give-trust__lead {
	color: rgba(255, 255, 255, 0.9);
}

.section--dark .give-trust__text h3 {
	color: #fff;
}

.section--dark .give-trust__text p {
	color: rgba(255, 255, 255, 0.75);
}

.section--dark .give-trust__marker {
	background: rgba(221, 159, 51, 0.2);
}

/* ==============================
   Testimonial
   ============================== */

.give-testimonial__block {
	max-width: 680px;
	margin: 0 auto;
	text-align: center;
	border: none;
	padding: 0;
}

.give-testimonial__block p {
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: clamp(1.125rem, 2.5vw, 1.375rem);
	font-style: italic;
	line-height: 1.6;
	color: var(--wp--preset--color--primary-dark, #2A2F42);
	margin: 0 0 1.25rem;
}

.give-testimonial__block cite {
	display: block;
	font-style: normal;
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--accent, #DD9F33);
}

/* ==============================
   Give CTA
   ============================== */

.give-cta {
	text-align: center;
	position: relative;
	overflow: hidden;
}

.give-cta__bg {
	position: absolute;
	inset: -10%;
	z-index: 0;
	opacity: 0.035;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='rgb(93%2C121%2C146)' stroke-opacity='0.15' stroke-width='0.5'%3E%3Ccircle cx='200' cy='200' r='180'/%3E%3Ccircle cx='200' cy='200' r='135'/%3E%3Ccircle cx='200' cy='200' r='90'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 600px;
	background-position: center;
}

.give-cta__content {
	position: relative;
	z-index: 1;
}

.give-cta h2 {
	color: #fff;
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	margin-bottom: 1rem;
}

.give-cta p {
	color: rgba(255, 255, 255, 0.85);
	max-width: 580px;
	margin: 0 auto 2rem;
	font-size: 1.0625rem;
	line-height: 1.7;
}

.give-cta__actions {
	margin-bottom: 1.25rem;
}

.give-cta__actions .btn--accent {
	font-size: 1.2rem;
	padding: 1rem 3rem;
}

.give-cta__note {
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.55);
	margin: 0;
	letter-spacing: 0.02em;
}

/* ==============================
   Secondary CTA — Prayer
   ============================== */

.give-secondary {
	text-align: center;
}

.give-secondary__content {
	max-width: 600px;
	margin: 0 auto;
}

.give-secondary__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(221, 159, 51, 0.1);
	color: var(--wp--preset--color--accent, #DD9F33);
	margin-bottom: 1.25rem;
}

.give-secondary h2 {
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin-bottom: 1rem;
	color: var(--wp--preset--color--primary-dark, #2A2F42);
}

.give-secondary p {
	color: var(--wp--preset--color--secondary-text, #6B7280);
	margin-bottom: 2rem;
	font-size: 1.0625rem;
	line-height: 1.7;
}

/* Dark section overrides for secondary CTA */
.section--dark .give-secondary h2 {
	color: #fff;
}

.section--dark .give-secondary p {
	color: rgba(255, 255, 255, 0.85);
}

.section--dark .give-secondary__icon {
	background: rgba(221, 159, 51, 0.2);
}

/* ==============================
   Responsive — Tablet (992px)
   ============================== */

@media (max-width: 992px) {
	.give-breakdown {
		grid-template-columns: 1fr;
		max-width: 480px;
		margin-left: auto;
		margin-right: auto;
	}

	/* Reset stagger on single column */
	.give-breakdown .reveal:nth-child(2),
	.give-breakdown .reveal:nth-child(3) {
		transition-delay: 0s;
	}
}

/* ==============================
   Responsive — Mobile (640px)
   ============================== */

@media (max-width: 640px) {
	.give-hero {
		padding: 4rem 1.25rem 3.5rem;
	}

	.give-hero__title {
		font-size: clamp(1.75rem, 5vw, 2.25rem);
	}

	.give-breakdown__card {
		padding: 2rem 1.5rem 1.75rem;
	}

	.give-trust__item {
		flex-direction: column;
		gap: 0.5rem;
	}

	.give-trust__marker {
		margin-top: 0;
	}

	.give-cta__actions .btn--accent {
		font-size: 1.1rem;
		padding: 0.9rem 2.25rem;
		width: 100%;
		max-width: 320px;
	}
}

/* ==============================
   Reduced Motion
   ============================== */

@media (prefers-reduced-motion: reduce) {
	.give-hero .section__eyebrow,
	.give-hero__title,
	.give-hero__subtitle {
		animation: none;
		opacity: 1;
	}

	.give-cta__bg {
		animation: none;
	}

	.give-breakdown__card {
		transition: none;
	}

	.give-breakdown__card:hover {
		transform: none;
	}
}

/* ==============================================================
   Give page — trust-focused redesign
   Each component below answers a specific donor objection. Shared
   pattern: restrained warm surfaces, tight type, strong but
   non-aggressive CTAs. Never use more color than is needed to say
   "this is real, this is safe."
   ============================================================== */

/* ------------------------------
   Hero actions + micro-trust strip
   ------------------------------ */
.give-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.75rem;
	align-items: center;
	justify-content: center;
	margin-top: 2rem;
}

.give-hero__btn {
	min-width: 220px;
}

.give-hero__secondary {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	transition: color 0.2s ease;
}

.give-hero__secondary:hover,
.give-hero__secondary:focus-visible {
	color: var(--wp--preset--color--accent, #DD9F33);
}

.give-hero__trust {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem 1.5rem;
	margin: 2rem auto 0;
	padding: 0;
	list-style: none;
	max-width: 780px;
	font-family: 'Inter', sans-serif;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.82);
}

.give-hero__trust li,
.give-hero__trust a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.give-hero__trust a:hover,
.give-hero__trust a:focus-visible {
	color: var(--wp--preset--color--accent, #DD9F33);
}

.give-hero__trust li svg {
	color: var(--wp--preset--color--accent, #DD9F33);
	flex-shrink: 0;
}

.give-hero__trust-ext {
	color: currentColor;
	opacity: 0.55;
}

/* ------------------------------
   Safe & Secure Giving bar
   Warm neutral card with a "trust badge" wordmark row and three
   reassurance pills. Lives on a pale-amber stripe so it stands
   apart from the sections bracketing it.
   ------------------------------ */
.give-secure-bar {
	background: linear-gradient(180deg, #F5F1EC 0%, #FFFFFF 100%);
	padding: 3.25rem 0 3.5rem;
}

.give-secure {
	max-width: 1040px;
	margin: 0 auto;
	padding: 2.25rem 2.5rem;
	background: #fff;
	border: 1px solid rgba(42, 47, 66, 0.08);
	border-radius: 18px;
	box-shadow: 0 20px 40px -28px rgba(42, 47, 66, 0.25);
	text-align: center;
}

.give-secure__head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.9rem;
	margin-bottom: 1.5rem;
}

.give-secure__rule {
	flex: 1;
	height: 1px;
	background: rgba(42, 47, 66, 0.15);
	max-width: 120px;
}

.give-secure__kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-dark, #2A2F42);
	white-space: nowrap;
}

.give-secure__kicker svg {
	color: var(--wp--preset--color--accent, #DD9F33);
}

.give-secure__methods {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.give-secure__method-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 64px;
	height: 40px;
	padding: 0 0.9rem;
	background: #fff;
	border: 1px solid rgba(42, 47, 66, 0.15);
	border-radius: 8px;
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--primary-dark, #2A2F42);
	box-shadow: 0 2px 6px -3px rgba(42, 47, 66, 0.2);
}

.give-secure__promises {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem 2.5rem;
	margin: 0;
	padding: 1.25rem 0 0;
	border-top: 1px solid rgba(42, 47, 66, 0.08);
	list-style: none;
}

.give-secure__promises li {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-family: 'Inter', sans-serif;
	font-size: 0.875rem;
	color: var(--wp--preset--color--secondary-text, #6B7280);
}

.give-secure__promises li strong {
	color: var(--wp--preset--color--primary-dark, #2A2F42);
	font-weight: 600;
}

.give-secure__promises li svg {
	color: #2FADC1;
	flex-shrink: 0;
}

@media (max-width: 640px) {
	.give-secure {
		padding: 1.75rem 1.25rem;
	}
	.give-secure__head {
		flex-direction: column;
		gap: 0.6rem;
	}
	.give-secure__rule {
		display: none;
	}
	.give-secure__methods {
		gap: 0.4rem;
	}
	.give-secure__method-badge {
		min-width: 56px;
		height: 36px;
		padding: 0 0.7rem;
		font-size: 0.6875rem;
	}
	.give-secure__promises {
		flex-direction: column;
		gap: 0.8rem;
		align-items: flex-start;
		text-align: left;
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

/* ------------------------------
   Verify line under the allocation cards
   ------------------------------ */
.give-verify {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.4rem 0.65rem;
	margin: 2.5rem auto 0;
	padding: 0.875rem 1.25rem;
	max-width: 640px;
	background: #F5F1EC;
	border-radius: 999px;
	font-family: 'Inter', sans-serif;
	font-size: 0.875rem;
	color: var(--wp--preset--color--secondary-text, #6B7280);
	text-align: center;
}

.give-verify svg {
	color: var(--wp--preset--color--accent, #DD9F33);
	flex-shrink: 0;
}

.give-verify a {
	color: var(--wp--preset--color--primary-dark, #2A2F42);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba(47, 173, 193, 0.4);
	text-underline-offset: 3px;
	transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.give-verify a:hover,
.give-verify a:focus-visible {
	color: #2FADC1;
	text-decoration-color: #2FADC1;
}

/* ------------------------------
   Partner voices grid
   Three-column card with a mark glyph, pull quote, and a photo-
   led attribution row. Subtle warm background strip to separate
   from the dark impact section above.
   ------------------------------ */
.give-voices {
	background: #F5F1EC;
}

.give-voices__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 1.5rem;
	margin-top: 3rem;
}

.give-voice {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin: 0;
	padding: 2rem 1.75rem;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 12px 30px -22px rgba(42, 47, 66, 0.35);
	position: relative;
	overflow: hidden;
}

.give-voice__mark {
	color: rgba(47, 173, 193, 0.22);
	margin-bottom: -0.25rem;
}

.give-voice__quote {
	margin: 0;
	padding: 0;
	border: none;
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--wp--preset--color--primary-dark, #2A2F42);
}

.give-voice__quote p {
	margin: 0;
}

.give-voice__quote p::before { content: '\201C'; }
.give-voice__quote p::after  { content: '\201D'; }

.give-voice__attribution {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid rgba(42, 47, 66, 0.08);
}

.give-voice__photo {
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	overflow: hidden;
	display: block;
	border: 2px solid rgba(47, 173, 193, 0.25);
}

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

.give-voice__meta {
	min-width: 0;
}

.give-voice__name {
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary-dark, #2A2F42);
}

.give-voice__name a {
	color: inherit;
	text-decoration: none;
}

.give-voice__name a:hover,
.give-voice__name a:focus-visible {
	color: #2FADC1;
}

.give-voice__church {
	margin: 0.15rem 0 0;
	font-family: 'Inter', sans-serif;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--secondary-text, #6B7280);
}

.give-voices__cta {
	text-align: center;
	margin-top: 2.5rem;
}

/* ------------------------------
   Leadership cards — faces of the mission
   ------------------------------ */
.give-leaders__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: 2rem;
	margin-top: 3rem;
}

.give-leader {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 1.5rem;
	align-items: start;
	margin: 0;
	padding: 1.75rem;
	background: #fff;
	border: 1px solid rgba(42, 47, 66, 0.08);
	border-radius: 16px;
	box-shadow: 0 8px 24px -16px rgba(42, 47, 66, 0.3);
}

.give-leader__photo {
	width: 120px;
	height: 120px;
	border-radius: 14px;
	overflow: hidden;
	background: #F5F1EC;
}

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

.give-leader__role {
	margin: 0 0 0.35rem;
	font-family: 'Inter', sans-serif;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent, #DD9F33);
}

.give-leader__name {
	margin: 0 0 0.65rem;
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: 1.375rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary-dark, #2A2F42);
}

.give-leader__bio {
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--wp--preset--color--secondary-text, #6B7280);
}

.give-leaders__contact {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin: 3rem auto 0;
	padding: 1.5rem 1.75rem;
	max-width: 760px;
	background: #F5F1EC;
	border-radius: 14px;
}

.give-leaders__contact-icon {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(47, 173, 193, 0.12);
	color: #2FADC1;
}

.give-leaders__contact-body {
	flex: 1;
	min-width: 0;
}

.give-leaders__contact-kicker {
	margin: 0 0 0.15rem;
	font-family: 'Inter', sans-serif;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-dark, #2A2F42);
}

.give-leaders__contact-text {
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--secondary-text, #6B7280);
}

.give-leaders__contact-text a {
	color: var(--wp--preset--color--primary-dark, #2A2F42);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba(47, 173, 193, 0.4);
	text-underline-offset: 3px;
}

.give-leaders__contact-text a:hover,
.give-leaders__contact-text a:focus-visible {
	color: #2FADC1;
	text-decoration-color: #2FADC1;
}

@media (max-width: 640px) {
	.give-leader {
		grid-template-columns: 88px 1fr;
		gap: 1rem;
		padding: 1.25rem;
	}
	.give-leader__photo {
		width: 88px;
		height: 88px;
	}
	.give-leaders__contact {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
		padding: 1.25rem;
	}
}

/* ------------------------------
   Giving amount tiles
   Four tiles. Third is "biggest impact" and gets a subtle warm
   treatment. Entire tile is a link so the target is generous.
   ------------------------------ */
.give-tiers__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.25rem;
	margin-top: 3rem;
}

.give-tier {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 2rem 1.75rem;
	background: #fff;
	border: 1px solid rgba(42, 47, 66, 0.08);
	border-radius: 16px;
	color: inherit;
	text-decoration: none;
	box-shadow: 0 10px 24px -18px rgba(42, 47, 66, 0.3);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.give-tier:hover,
.give-tier:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 18px 34px -18px rgba(42, 47, 66, 0.4);
	border-color: rgba(47, 173, 193, 0.3);
	outline: none;
}

.give-tier__badge {
	position: absolute;
	top: -10px;
	left: 1.5rem;
	padding: 0.3rem 0.7rem;
	background: var(--wp--preset--color--accent, #DD9F33);
	color: #fff;
	border-radius: 999px;
	font-family: 'Inter', sans-serif;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.give-tier--feature {
	border-color: rgba(221, 159, 51, 0.35);
	background: linear-gradient(160deg, #FFF9F1 0%, #fff 55%);
}

.give-tier__amount {
	margin: 0;
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: 2rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary-dark, #2A2F42);
	letter-spacing: -0.01em;
}

.give-tier__outcome {
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--wp--preset--color--secondary-text, #6B7280);
	flex: 1;
}

.give-tier__action {
	margin-top: 0.75rem;
	font-family: 'Inter', sans-serif;
	font-size: 0.875rem;
	font-weight: 600;
	color: #2FADC1;
	transition: color 0.2s ease, transform 0.2s ease;
}

.give-tier:hover .give-tier__action,
.give-tier:focus-visible .give-tier__action {
	color: var(--wp--preset--color--accent, #DD9F33);
}

.give-tier:hover .give-tier__action span,
.give-tier:focus-visible .give-tier__action span {
	display: inline-block;
	transform: translateX(3px);
}

.give-tiers__note {
	margin: 2rem auto 0;
	text-align: center;
	font-family: 'Inter', sans-serif;
	font-size: 0.875rem;
	color: var(--wp--preset--color--secondary-text, #6B7280);
}

/* ------------------------------
   FAQ accordion
   ------------------------------ */
.give-faq__list {
	max-width: 780px;
	margin: 3rem auto 0;
}

.give-faq__item {
	border-bottom: 1px solid rgba(42, 47, 66, 0.1);
}

.give-faq__item:first-child {
	border-top: 1px solid rgba(42, 47, 66, 0.1);
}

.give-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 0.25rem;
	cursor: pointer;
	list-style: none;
	font-family: 'Inter', sans-serif;
	font-size: 1rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary-dark, #2A2F42);
	transition: color 0.2s ease;
}

.give-faq__item summary::-webkit-details-marker {
	display: none;
}

.give-faq__item summary::after {
	content: '';
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='5' x2='12' y2='19'/><line x1='5' y1='12' x2='19' y2='12'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	transition: transform 0.25s ease;
}

.give-faq__item[open] summary::after {
	transform: rotate(45deg);
}

.give-faq__item summary:hover {
	color: #2FADC1;
}

.give-faq__answer {
	padding: 0 0.25rem 1.5rem;
	font-family: 'Inter', sans-serif;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--wp--preset--color--secondary-text, #6B7280);
}

.give-faq__answer p {
	margin: 0 0 0.75rem;
}

.give-faq__answer p:last-child {
	margin-bottom: 0;
}

.give-faq__answer a {
	color: var(--wp--preset--color--primary-dark, #2A2F42);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba(47, 173, 193, 0.4);
	text-underline-offset: 3px;
}

.give-faq__answer a:hover,
.give-faq__answer a:focus-visible {
	color: #2FADC1;
	text-decoration-color: #2FADC1;
}

/* ------------------------------
   Final CTA — trust-bar repeat
   ------------------------------ */
.give-cta__promises {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem 1.75rem;
	margin: 2.25rem 0 0;
	padding: 1.25rem 1.5rem 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	list-style: none;
	font-family: 'Inter', sans-serif;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.85);
}

.give-cta__promises li {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.give-cta__promises li svg {
	color: var(--wp--preset--color--accent, #DD9F33);
	flex-shrink: 0;
}

/* ------------------------------
   Other ways to give
   ------------------------------ */
.give-options__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.5rem;
	margin-top: 3rem;
}

.give-option {
	margin: 0;
	padding: 1.75rem;
	background: #F5F1EC;
	border-radius: 14px;
	border: 1px solid rgba(42, 47, 66, 0.06);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.give-option:hover {
	background: #fff;
	border-color: rgba(47, 173, 193, 0.25);
}

.give-option__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 1rem;
	border-radius: 10px;
	background: #fff;
	color: var(--wp--preset--color--accent, #DD9F33);
}

.give-option h3 {
	margin: 0 0 0.5rem;
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary-dark, #2A2F42);
}

.give-option p {
	margin: 0 0 0.6rem;
	font-family: 'Inter', sans-serif;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--wp--preset--color--secondary-text, #6B7280);
}

.give-option p:last-child {
	margin-bottom: 0;
}

.give-option a {
	color: var(--wp--preset--color--primary-dark, #2A2F42);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba(47, 173, 193, 0.4);
	text-underline-offset: 3px;
}

.give-option a:hover,
.give-option a:focus-visible {
	color: #2FADC1;
	text-decoration-color: #2FADC1;
}

.give-option__address {
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--wp--preset--color--primary-dark, #2A2F42);
	font-style: normal;
}

.give-option__ein {
	margin-top: 0.25rem !important;
	font-family: 'Inter', sans-serif;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--primary-dark, #2A2F42) !important;
}

/* ------------------------------
   In-hero variant of the Safe & Secure card.
   Sits on the dark navy hero — so it needs a lift (warm ring, layered
   shadow, subtle amber glow) to feel like a floating trust emblem
   rather than a panel laid over the background.
   ------------------------------ */
.give-secure--in-hero {
	margin: 2.5rem auto 0;
	max-width: 960px;
	padding: 2rem 2.25rem;
	background: #fff;
	border: 1px solid rgba(221, 159, 51, 0.35);
	border-radius: 18px;
	box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.6);
	position: relative;
	text-align: center;
	z-index: 2;
}

/* Warm amber seal dot on the top edge — small designer touch that
   signals "certified, official" without a fake third-party badge. */
.give-secure--in-hero::before {
	content: "";
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	width: 56px;
	height: 4px;
	background: linear-gradient(90deg, var(--wp--preset--color--accent, #DD9F33) 0%, #2FADC1 100%);
	border-radius: 2px;
}

.give-secure--in-hero .give-secure__rule {
	background: rgba(42, 47, 66, 0.12);
}

.give-secure--in-hero .give-secure__promises {
	border-top-color: rgba(42, 47, 66, 0.1);
}

/* No CSS keyframe animation on this card — it relies on the site's
   .reveal observer instead. Running both at once caused visible jank
   because the browser has to animate opacity+transform twice over
   a heavy multi-layer shadow. Single animation path = smooth. */

@media (max-width: 640px) {
	.give-secure--in-hero {
		padding: 1.5rem 1.25rem;
		margin-top: 2rem;
	}
	.give-secure--in-hero::before {
		width: 44px;
	}
}

/* Breathing room inside the hero now that the card lives here too. */
.give-hero__trust {
	margin-bottom: 0;
}

/* When the in-hero secure card lives inside .give-cta, restore the
   card's own typography — otherwise `.give-cta p` forces all <p>
   elements white, which makes the kicker vanish on white.  */
.give-cta .give-secure--in-hero .give-secure__kicker {
	color: var(--wp--preset--color--primary-dark, #2A2F42);
	font-size: 0.75rem;
	max-width: none;
	margin: 0;
	line-height: 1;
}

/* ==============================================================
   Give page — scroll perf
   Long page with 4 parallax backgrounds + dozens of revealed cards.
   These two hints let the browser skip rendering offscreen chunks
   and isolate paint per section, which smooths the scroll from
   "Why Trust Us" downward where the compositor was doing the most
   concurrent work.
   ============================================================== */

/* Skip rendering offscreen sections entirely until they're near
   the viewport. `contain-intrinsic-size` gives the browser a
   placeholder height so scroll position stays stable. */
body.page-give .give-voices,
body.page-give .give-leaders,
body.page-give .give-faq,
body.page-give .give-options {
	content-visibility: auto;
	contain-intrinsic-size: 1px 900px;
}

/* Isolate layout+style inside each major section so invalidation
   in one card doesn't force the rest of the page to repaint.
   `paint` is intentionally omitted for the tiers grid because
   the "Biggest Impact" badge overflows its tile on purpose —
   paint containment would clip it. */
body.page-give .give-voices__grid,
body.page-give .give-leaders__grid,
body.page-give .give-options__grid,
body.page-give .give-faq__list {
	contain: layout paint;
}
body.page-give .give-tiers__grid {
	contain: layout style;
}

/* The hero card already sits above the fold, so it shouldn't hide,
   but the big layered shadow benefits from paint containment. */
body.page-give .give-secure--in-hero {
	contain: layout paint;
}

/* ==============================================================
   Four Convictions — editorial 2x2 grid on dark navy.
   Borrows the annual report's serif-italic pull word + numbered
   marker so the section reads like a thoughtful manifesto rather
   than a trust-us brochure.
   ============================================================== */
.give-convictions {
	background:
		radial-gradient(60% 50% at 10% 0%, rgba(221, 159, 51, 0.08), transparent 60%),
		radial-gradient(50% 60% at 100% 100%, rgba(47, 173, 193, 0.08), transparent 55%),
		var(--wp--preset--color--primary-dark, #1E2D3D);
	position: relative;
	overflow: hidden;
}

.give-convictions__head {
	margin: 0 auto 3.5rem;
	text-align: center;
}

.give-convictions__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.give-conviction {
	position: relative;
	padding: 2.25rem 2rem 2rem;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.015) 100%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	overflow: hidden;
	transition: border-color 0.25s ease, background-color 0.25s ease;
}

/* Amber hairline on the top edge — small designer tell that
   these are *principles*, not marketing bullet points. */
.give-conviction::before {
	content: "";
	position: absolute;
	top: 0;
	left: 2rem;
	width: 44px;
	height: 3px;
	background: var(--wp--preset--color--accent, #DD9F33);
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	opacity: 0.75;
}

.give-conviction:hover {
	border-color: rgba(221, 159, 51, 0.3);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
}

.give-conviction__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.give-conviction__num {
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

.give-conviction__word {
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 500;
	line-height: 1;
	color: var(--wp--preset--color--accent, #DD9F33);
	letter-spacing: -0.01em;
}

.give-conviction__word em {
	font-style: italic;
}

.give-conviction__title {
	margin: 0 0 0.75rem;
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
}

.give-conviction__body {
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-size: 1rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.78);
}

/* Subtle stagger so the grid doesn't fade in as one block. */
.give-convictions__grid .reveal:nth-child(1) { transition-delay: 0s; }
.give-convictions__grid .reveal:nth-child(2) { transition-delay: 0.08s; }
.give-convictions__grid .reveal:nth-child(3) { transition-delay: 0.16s; }
.give-convictions__grid .reveal:nth-child(4) { transition-delay: 0.24s; }

@media (max-width: 720px) {
	.give-convictions__grid {
		grid-template-columns: 1fr;
	}
	.give-conviction {
		padding: 1.75rem 1.5rem 1.5rem;
	}
	.give-conviction__head {
		gap: 0.75rem;
	}
}

/* ------------------------------
   Custom amount off-ramp — sits below the four tiles as a single
   wide row, signaling "the presets are a starting point, not a
   cage." Warm amber accent tint instead of the teal-lean of the
   tiles so it reads as an alternate path, not a fifth preset.
   ------------------------------ */
.give-tier-custom {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin: 1.5rem 0 0;
	padding: 1.5rem 1.75rem;
	background: #fff;
	border: 1px dashed rgba(221, 159, 51, 0.5);
	border-radius: 16px;
	color: inherit;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.give-tier-custom:hover,
.give-tier-custom:focus-visible {
	background: #FFF9F1;
	border-color: var(--wp--preset--color--accent, #DD9F33);
	transform: translateY(-1px);
	outline: none;
}

.give-tier-custom__icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: rgba(221, 159, 51, 0.12);
	color: var(--wp--preset--color--accent, #DD9F33);
}

.give-tier-custom__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.give-tier-custom__title {
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary-dark, #2A2F42);
}

.give-tier-custom__desc {
	font-family: 'Inter', sans-serif;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--wp--preset--color--secondary-text, #6B7280);
}

.give-tier-custom__cta {
	flex-shrink: 0;
	font-family: 'Inter', sans-serif;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent, #DD9F33);
	transition: transform 0.2s ease;
}

.give-tier-custom:hover .give-tier-custom__cta span,
.give-tier-custom:focus-visible .give-tier-custom__cta span {
	display: inline-block;
	transform: translateX(3px);
}

@media (max-width: 720px) {
	.give-tier-custom {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
		gap: 0.75rem;
		padding: 1.25rem;
	}
}

/* `.give-cta p` inflates every paragraph in this section to 1.0625rem,
   which also hits the eyebrow and subtitle. Restore their native sizes
   with a more specific selector scoped to the CTA only. */
.give-cta p.section__eyebrow {
	font-size: 0.75rem;
	max-width: none;
	margin: 0 0 0.75rem;
}

/* `.section--dark a { color: #fff }` in custom.css beats the base
   `.give-hero__secondary` color rule, so the CTA version of the
   link rendered pure white instead of the hero's muted off-white.
   Scope a specific rule that matches the hero's 70% white. */
.give-cta .give-hero__secondary,
.section--dark a.give-hero__secondary {
	color: rgba(255, 255, 255, 0.7);
}

.give-cta .give-hero__secondary:hover,
.give-cta .give-hero__secondary:focus-visible,
.section--dark a.give-hero__secondary:hover,
.section--dark a.give-hero__secondary:focus-visible {
	color: var(--wp--preset--color--accent, #DD9F33);
}