/* ==========================================================================
   Saarathee Foundation — main stylesheet
   Pixel-targeted to the Figma design (1440px frame, container 1180px).
   Mobile-first responsive.
   ========================================================================== */

/* ---------- design tokens ---------- */
:root {
	--c-blue:        #00A8EF;
	--c-blue-dark:   #2557A7;
	--c-blue-deep:   #00638D;
	--c-yellow:      #F2C90A;
	--c-pink:        #E4287C;
	--c-pink-deep:   #A51656;
	--c-purple:      #805FB1;
	--c-purple-2:    #9333EA;
	--c-purple-deep: #6E2AA8;
	--c-text:        #232323;
	--c-text-soft:   #4A4E52;
	--c-text-mute:   #9D9FA0;
	--c-bg:          #FFFFFF;
	--c-bg-soft:     #EDF3F9;
	--c-bg-pink:     rgba(228, 40, 124, 0.05);
	--c-bg-footer:   #FAFAFA;
	--c-border:      #E5E5E5;
	--c-border-card: #979797;
	--shadow-card:   0 0 12px rgba(0,0,0,.05);
	--shadow-soft:   0 4px 12px rgba(0,0,0,.10);
	--shadow-lift:   0 18px 36px rgba(0,0,0,.12);

	--container-max: 1180px;
	--container-pad: 24px;
	--radius-sm:     8px;
	--radius-md:     12px;

	--ff-sans:       'Roboto', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
	--ff-display:    'Helvetica Neue', 'Roboto', -apple-system, BlinkMacSystemFont, Arial, sans-serif;

	--header-h:      96px;

	--ease:          cubic-bezier(.22,.61,.36,1);
	--brand-gradient:linear-gradient(90deg, #00A8EF 0%, #805FB1 50%, #E4287C 100%);
}
@media (max-width: 980px)  { :root { --container-pad: 20px; --header-h: 72px; } }
@media (max-width: 640px)  { :root { --container-pad: 16px; } }

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--ff-sans);
	font-size: 16px;
	line-height: 1.5;
	color: var(--c-text);
	background: var(--c-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }
.screen-reader-text {
	border:0; clip: rect(1px,1px,1px,1px); -webkit-clip-path:inset(50%); clip-path:inset(50%);
	height:1px; width:1px; overflow:hidden; position:absolute !important; white-space:nowrap;
}
.skip-link { position:absolute; top:-40px; left:8px; z-index:200; background:#fff; color:#000; padding:8px 12px; border-radius:4px; }
.skip-link:focus { top:8px; }

/* ---------- layout ---------- */
.container {
	width: 100%;
	max-width: calc(var(--container-max) + var(--container-pad) * 2);
	margin: 0 auto;
	padding-inline: var(--container-pad);
}

.section { padding: 80px 0 100px; }
.section--soft { background: var(--c-bg-soft); }
@media (max-width: 768px) { .section { padding: 56px 0 64px; } }

/* eyebrow heading: text + 3px gradient underline */
.section-eyebrow {
	display: inline-block;
	margin-bottom: 60px;
	width: max-content;
	max-width: 100%;
}
.section-eyebrow--center { align-self: center; text-align: center; }
.section-eyebrow::after {
	content: ""; display: block;
	height: 3px; border-radius: 4px;
	margin-top: 8px;
	background: var(--c-pink);
	transform-origin: left center;
	animation: eyebrow-line .6s var(--ease) both;
}
.section-eyebrow--light::after { background: var(--c-yellow); }
.section-eyebrow--center::after { transform-origin: center; }
@keyframes eyebrow-line { from { transform: scaleX(.3); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

.section-heading {
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: clamp(26px, 3.4vw, 32px);
	line-height: 1.25;
	color: var(--c-text);
	margin: 0;
}
.section-heading--light { color: #fff; }

.gradient-text {
	background: var(--brand-gradient);
	-webkit-background-clip: text; background-clip: text;
	color: transparent;
}

.nav-link {
	display: inline-flex; align-items: center; gap: 6px;
	font-weight: 600; font-size: 14px; letter-spacing: .04em; text-transform: uppercase;
	position: relative; padding: 4px 0;
	transition: color .2s var(--ease), opacity .2s var(--ease);
	align-self: flex-start;          /* don't stretch in column flex parents */
	width: -moz-fit-content;
	width: fit-content;
}
.nav-link--dark  { color: var(--c-text); }
.nav-link--light { color: #fff; }
.nav-link::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: 0;
	height: 2px; background: currentColor;
	transform: scaleX(0); transform-origin: left;
	transition: transform .3s var(--ease);
}
.nav-link:hover::after { transform: scaleX(1); }
.nav-link svg { transition: transform .25s var(--ease); }
.nav-link:hover svg { transform: translateX(4px); }

/* buttons */
.btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: 8px;
	padding: 12px 28px;
	border-radius: 999px;
	font-weight: 600; font-size: 15px;
	transition: transform .2s var(--ease), box-shadow .25s var(--ease), background-color .2s, opacity .2s;
	cursor: pointer; user-select: none; line-height: 1;
	white-space: nowrap;
}
.btn--ghost { background: transparent; color: #fff; border: 1px solid #fff; }
.btn--ghost:hover { background: rgba(255,255,255,.1); transform: translateY(-1px); }
.btn--filled {
	background: linear-gradient(90deg, var(--accent, var(--c-blue)) 0%, color-mix(in srgb, var(--accent, var(--c-blue)) 60%, #000) 100%);
	color: #fff;
}
.btn--filled:hover { transform: translateY(-2px); box-shadow: 0 12px 24px color-mix(in srgb, var(--accent, var(--c-blue)) 30%, transparent); }
.btn--donate { padding: 12px 28px; }

/* ---------- header ---------- */
.site-header {
	position: fixed; top: 0; left: 0; right: 0; z-index: 50;
	background: transparent;
	transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header__inner {
	max-width: 1440px; margin: 0 auto;
	display: flex; align-items: center; justify-content: space-between;
	padding: 16px clamp(20px, 6vw, 130px);
}
.site-header__logo { display: inline-flex; align-items: center; }
.site-header__logo-img { width: auto; height: 56px; max-height: 64px; transition: opacity .25s var(--ease); }
@media (min-width: 980px) { .site-header__logo-img { height: 72px; } }
.site-header__logo-img--dark { display: none; }
body.has-transparent-header .site-header:not(.is-scrolled) .site-header__logo-img--light { display: block; }
body.has-transparent-header .site-header:not(.is-scrolled) .site-header__logo-img--dark { display: none; }
.site-header.is-scrolled .site-header__logo-img--light,
body:not(.has-transparent-header) .site-header__logo-img--light { display: none; }
.site-header.is-scrolled .site-header__logo-img--dark,
body:not(.has-transparent-header) .site-header__logo-img--dark { display: block; }

.site-header.is-scrolled,
body:not(.has-transparent-header) .site-header { background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.08); }
.site-header.is-scrolled .site-nav__menu a,
body:not(.has-transparent-header) .site-header .site-nav__menu a,
.site-header.is-scrolled .btn--ghost,
body:not(.has-transparent-header) .site-header .btn--ghost { color: var(--c-text); border-color: var(--c-text); }
.site-header.is-scrolled .btn--ghost:hover,
body:not(.has-transparent-header) .site-header .btn--ghost:hover { background: rgba(0,0,0,.05); }

.site-nav { display: flex; align-items: center; gap: 40px; }
.site-nav__menu { display: flex; gap: 40px; }
.site-nav__menu a {
	color: #fff; font-size: 14px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .04em;
	padding: 6px 0; position: relative;
	transition: color .2s var(--ease);
}
.site-nav__menu a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0;
	height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left;
	transition: transform .3s var(--ease);
}
.site-nav__menu a:hover::after { transform: scaleX(1); }

.site-nav__toggle {
	display: none;
	width: 36px; height: 36px;
	flex-direction: column; justify-content: center; gap: 5px;
	padding: 0 6px;
}
.site-nav__toggle span { display: block; height: 2px; background: #fff; border-radius: 1px; transition: background .25s; }
.site-header.is-scrolled .site-nav__toggle span,
body:not(.has-transparent-header) .site-nav__toggle span { background: var(--c-text); }

@media (max-width: 980px) {
	.site-nav { gap: 20px; }
	.site-nav__toggle { display: flex; order: 3; margin: 0; }    /* extreme right */
	.site-header .btn--donate { order: 2; }                       /* before hamburger */
	.site-nav__menu { order: 1; }
	.site-nav__menu {
		position: fixed; inset: var(--header-h) 0 auto 0;
		flex-direction: column;
		background: #fff; padding: 24px var(--container-pad);
		border-top: 1px solid var(--c-border);
		gap: 16px;
		transform: translateY(-12px); opacity: 0; pointer-events: none;
		transition: opacity .25s var(--ease), transform .25s var(--ease);
		max-height: calc(100vh - var(--header-h)); overflow-y: auto;
	}
	.site-nav__menu a { color: var(--c-text); }
	.site-nav.is-open .site-nav__menu { opacity: 1; pointer-events: auto; transform: none; }
	.btn--donate { padding: 10px 18px; font-size: 13px; }
	.site-header__logo-img { height: 48px; }
}

/* ---------- HERO ----------
   Per Figma: 1440 × 800 frame, content centered horizontally and BOTTOM-aligned
   (sits at top: calc(50% + 196px)). Header is the absolute element on top.
*/
.hero {
	position: relative;
	min-height: 800px;
	height: 800px;
	max-height: 100vh;
	display: flex; align-items: flex-end; justify-content: center;
	color: #fff;
	background: #1a1a1a var(--hero-img) center/cover no-repeat;
	padding: calc(var(--header-h) + 60px) var(--container-pad) 100px;
	text-align: center;
	overflow: hidden;
}
@media (max-height: 760px) { .hero { min-height: 100vh; } }
@media (max-width: 768px)  { .hero { min-height: 640px; padding-bottom: 60px; } }

.hero__overlay {
	position: absolute; inset: 0;
	background:
		linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 80%, #000 100%),
		linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,.35));
	pointer-events: none;
}
.hero__inner {
	position: relative;
	max-width: 1000px;
	margin: 0 auto;
	display: flex; flex-direction: column; align-items: center;
	gap: 32px;
}
.hero__title {
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: clamp(40px, 7vw, 68px);
	line-height: 1.12;
	letter-spacing: .005em;
	text-transform: uppercase;
	margin: 0;
	display: flex; flex-direction: column; gap: 8px; align-items: center;
}
.hero__sub {
	font-size: clamp(16px, 1.6vw, 20px);
	line-height: 1.4;
	max-width: 760px;
	margin: 0;
	font-weight: 400;
}
.hero__cta {
	color: #fff;
	display: inline-flex !important;
	opacity: 1 !important;
	align-self: center;                 /* override nav-link's flex-start */
}

/* ---------- INTRO QUOTE ---------- */
.intro-quote {
	background: var(--c-bg-pink);
	padding: 40px 0;
}
.intro-quote__text {
	font-family: var(--ff-display);
	font-weight: 500;
	font-size: clamp(22px, 3.6vw, 40px);
	line-height: 1.2;
	margin: 0;
}

/* ---------- WHO WE ARE ---------- */
.who { padding: 20px 0 80px; }
.who__inner {
	display: grid; gap: 48px; align-items: center;
	grid-template-columns: 1fr;
}
@media (min-width: 1100px) { .who__inner { grid-template-columns: 1.05fr 1fr; gap: 80px; } }
.who__text { display: flex; flex-direction: column; gap: 20px; }
.who__text .section-eyebrow { margin-bottom: 8px; }
.who__body { color: var(--c-text-soft); font-size: 16px; line-height: 1.6; margin: 0; max-width: 580px; }

.who__visual {
	position: relative;
	width: 100%;
	min-height: 400px;
	isolation: isolate;
}
.who__graphic {
	position: absolute;
	right: 340px;                       /* slip behind left edge of photo */
	top: 50%;
	transform: translateY(-50%);
	width: 220px;
	z-index: 1;                         /* behind the photo */
	display: flex; align-items: center; justify-content: center;
	animation: who-float 6s ease-in-out infinite alternate;
	pointer-events: none;
}
.who__graphic svg { width: 100%; height: auto; }
@keyframes who-float { from { transform: translateY(calc(-50% - 6px)); } to { transform: translateY(calc(-50% + 8px)); } }
.who__photo {
	position: relative; z-index: 2;
	width: 360px; height: 360px;
	border-radius: 18px;
	overflow: hidden;
	background: #f2f2f2;
	box-shadow: 0 18px 36px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.04);
	transition: transform .6s var(--ease);
	margin-top: -48px;                  /* per Figma: photo extends UP into pink intro bar */
	margin-left: auto;                  /* hug right edge */
}
@media (max-width: 1099px) {
	/* Mobile/tablet: single clean column. Hide hand graphic. Heading,
	   body, CTA, image stack with consistent gap. Top/bottom padding
	   matches other sections (80px). */
	.who { padding: 80px 0; }
	.who__inner {
		display: flex;
		flex-direction: column;
		gap: 32px;
		align-items: stretch;
	}
	.who__text { gap: 20px; }
	.who__visual {
		min-height: auto;
		height: auto;
		padding: 0;
		display: block;
		position: static;
	}
	.who__graphic { display: none; }   /* hide hand on mobile/tablet */
	.who__photo {
		margin: 0;
		width: 100%;
		max-width: none;
		height: auto;
		aspect-ratio: auto;
		position: static;
		border-radius: 18px;
		overflow: hidden;
		box-shadow: 0 12px 24px rgba(0,0,0,.08);
	}
	.who__photo img {
		width: 100%;
		height: auto;
		display: block;
	}
}
.who__photo:hover { transform: translateY(-4px); }
.who__img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.who__photo:hover .who__img { transform: scale(1.04); }

/* ---------- VISION & MISSION ----------
   The wheelchair lady is a transparent PNG that "pops out" above the blue
   bar — her head/upper body extends ABOVE the section, while the bar sits
   behind her. Right side holds vision + mission text, divided by a thin line.
*/
.vm {
	position: relative;
	background: var(--c-blue);
	color: #fff;
	min-height: 288px;
	display: flex; align-items: center;
}
.vm__photo {
	position: absolute;
	left: clamp(20px, 6vw, 130px);
	bottom: 0;
	width: clamp(260px, 32vw, 460px);
	pointer-events: none;
	z-index: 3;
	display: block;
	line-height: 0;
}
.vm__photo img {
	width: 100%;
	height: auto;
	object-fit: contain;
	object-position: bottom left;
	display: block;
	filter: drop-shadow(0 18px 40px rgba(0,0,0,.18));
}
.vm__inner {
	position: relative; z-index: 2;
	max-width: 1440px; width: 100%;
	margin: 0 auto;
	padding: 60px var(--container-pad);
	display: grid; gap: 40px;
	grid-template-columns: 1fr;
	align-items: center;
	text-align: center;
}
@media (min-width: 880px) {
	.vm__inner {
		grid-template-columns: 1fr auto 1fr;
		padding-left: clamp(360px, 38vw, 540px);
		padding-right: clamp(60px, 9vw, 130px);
	}
}
.vm__col { padding: 8px; }
.vm__title {
	font-family: var(--ff-display);
	font-weight: 500;
	font-size: clamp(20px, 2.4vw, 24px);
	margin: 0 0 16px;
	line-height: 1.3;
}
.vm__body { font-size: 16px; line-height: 1.5; margin: 0; max-width: 360px; margin-inline: auto; }
.vm__divider { width: 1px; height: 120px; background: rgba(255,255,255,.5); display: none; margin: auto; }
@media (min-width: 880px) { .vm__divider { display: block; } }
@media (max-width: 1099px) {
	/* Tablet & mobile: lady sits INSIDE the blue section, sticks to bottom edge.
	   Source order: photo first, inner second — we flip with `order` so the
	   text appears on top and the lady at the bottom flush with section edge. */
	.vm {
		margin-top: 0;
		padding: 48px 0 0;
		min-height: 0;
		flex-direction: column;
		align-items: center;
	}
	.vm__inner {
		order: 1;
		grid-template-columns: 1fr;
		padding: 0 var(--container-pad) 0;
		text-align: center;
		gap: 32px;
	}
	.vm__divider { display: none; }
	.vm__photo {
		order: 2;                              /* render BELOW text */
		position: static;
		width: clamp(240px, 60vw, 360px);
		margin: 32px auto 0;
		padding: 0;
		left: auto; right: auto; top: auto; bottom: auto;
		transform: none;
		display: block;
		line-height: 0;
		align-self: center;
	}
	.vm__photo img {
		object-position: bottom center;
		display: block;
		margin: 0 auto;
	}
}

/* ---------- WHY WE EXIST ---------- */
.why .container { display: flex; flex-direction: column; }
.why .section-eyebrow { align-self: center; }
.why__rows { display: grid; gap: 20px; }
.why__row {
	display: grid; gap: 20px;
	grid-template-columns: 1fr;
}
@media (min-width: 980px) {
	.why__row { grid-template-columns: 580px 1fr; }
	.why__row--reverse { grid-template-columns: 1fr 580px; }
	.why__row--reverse .why__image { order: 2; }
}
.why__image {
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: #f2f2f2;
	aspect-ratio: 580/400;
	transition: transform .6s var(--ease);
}
.why__image:hover { transform: scale(1.02); }
.why__img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.why__image:hover .why__img { transform: scale(1.05); }
.why__card {
	background: linear-gradient(140deg, #fff 0%, #edf3f9 100%);
	border: 1px solid #edf3f9;
	border-radius: var(--radius-md);
	box-shadow: 0 0 4px rgba(0,0,0,.08);
	padding: 40px clamp(24px, 5vw, 80px);
	display: flex; flex-direction: column; justify-content: center; gap: 20px;
	text-align: center;
	min-height: 320px;
	transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.why__card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.10); }
.why__title { font-family: var(--ff-display); font-weight: 500; font-size: 24px; margin: 0; }
.why__body  { font-size: 16px; line-height: 1.6; color: var(--c-text-soft); margin: 0; }

/* ---------- WHAT WE DO ---------- */
.what .container { display: flex; flex-direction: column; }
.what .section-eyebrow { align-self: center; }
.what__grid {
	display: grid; gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
@media (min-width: 980px) {
	.what__grid {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: auto auto auto 1fr auto;     /* media | title | lede | bullets | target */
	}
	/* Each card spans all 5 rows — every row height = max across cards. */
	.what__card { grid-row: span 5; display: grid; grid-template-rows: subgrid; }
	.what__body { display: contents; }                   /* children inherit grid rows */
	.what__media   { grid-row: 1; }
	.what__title   { grid-row: 2; padding: 0 16px;       margin: 0; }
	.what__lede    { grid-row: 3; padding: 0 16px;       margin: 0; }
	.bullet-list   { grid-row: 4; padding: 0 16px;       margin: 0; }
	.what__target  { grid-row: 5; margin: 12px 16px 16px; }
}

/* Mobile: horizontal scroll-snap carousel. */
@media (max-width: 768px) {
	.what__grid {
		display: flex;
		gap: 16px;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding: var(--container-pad);
		-webkit-overflow-scrolling: touch;
		padding-bottom: 12px;
		margin-inline: calc( var(--container-pad) * -1 );
		padding-inline: var(--container-pad);
	}
	.what__grid::-webkit-scrollbar { height: 4px; }
	.what__grid::-webkit-scrollbar-thumb { background: var(--c-pink); border-radius: 2px; }
	.what__card {
		flex: 0 0 85%;
		scroll-snap-align: start;
		max-width: 320px;
	}
}

.card, .what__card {
	background: #fff;
	border: 1px solid var(--c-border-card);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	display: flex; flex-direction: column;
	transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.what__card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.what__media {
	position: relative;
	aspect-ratio: 380/220;
	background: #f2f2f2; overflow: hidden;
}
.what__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.what__card:hover .what__media img { transform: scale(1.06); }
.what__media::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.55));
	pointer-events: none;
}
.what__body { padding: 16px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.what__title { font-size: 20px; font-weight: 600; margin: 0; line-height: 1.4; color: var(--c-text); }
.what__lede { color: var(--c-text-soft); font-size: 16px; margin: 0; line-height: 1.5; }
.bullet-list { display: flex; flex-direction: column; gap: 8px; }
.bullet-list li { display: flex; gap: 8px; align-items: flex-start; font-size: 16px; color: var(--c-text-soft); line-height: 1.5; font-weight: 500; }
.bullet-list svg { flex-shrink: 0; margin-top: 1px; color: var(--c-blue); }
.what__target {
	background: #333;
	color: #fff;
	font-size: 14px; font-weight: 500;
	padding: 12px 20px;
	border-radius: var(--radius-sm);
	margin-top: auto;
	line-height: 1.45;
}

/* ---------- CHANGEMAKERS ---------- */
.changemakers .container { display: flex; flex-direction: column; align-items: stretch; }
.changemakers__intro { max-width: 780px; margin: 0 auto 40px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.changemakers__intro .section-eyebrow { margin-bottom: 0; }  /* kill default 60px → gap alone controls spacing */
.changemakers__sub { color: var(--c-text-soft); font-size: 16px; line-height: 1.6; margin: 0; }
@media (max-width: 768px) {
	.changemakers__intro { gap: 12px; margin-bottom: 28px; }
	.changemakers__sub { font-size: 14px; line-height: 1.5; }
}
.changemakers__swiper { padding-bottom: 50px; width: 100%; overflow: visible; }
.changemakers__swiper .swiper-pagination { position: relative; bottom: 0; padding-top: 24px; }
.changemakers__swiper .swiper-pagination-bullet { background: #c9c9c9; opacity: 1; width: 10px; height: 10px; transition: width .25s var(--ease), background .25s; }
.changemakers__swiper .swiper-pagination-bullet-active { background: var(--c-pink); width: 18px; border-radius: 8px; }

.story-card { display: flex; flex-direction: column; gap: 16px; height: 100%; }
.story-card__media {
	position: relative;
	aspect-ratio: 280/360;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: #f2f2f2;
	border: 1px solid var(--c-border-card);
	box-shadow: 0 0 8px rgba(0,0,0,.10);
	transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.story-card__media:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(0,0,0,.18); }
.story-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.story-card__media:hover img { transform: scale(1.05); }
.story-card__media::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,.7) 100%);
}
.story-card__name {
	position: absolute; left: 28px; bottom: 22px;
	color: #fff; font-weight: 600; font-size: 28px;
	z-index: 2;
}
.story-card__excerpt {
	font-size: 16px; line-height: 1.5;
	color: var(--c-text-soft);
	padding: 0 8px;
}

/* ---------- HOW WE WORK ---------- */
.how .container { display: flex; flex-direction: column; align-items: stretch; }
.how .section-eyebrow { align-self: center; }
.how__swiper { width: 100%; overflow: hidden; border-radius: var(--radius-md); }
.how__card {
	background: #fff;
	border: 1px solid var(--c-border-card);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr;
	min-height: 420px;
}
@media (min-width: 980px) { .how__card { grid-template-columns: 1fr 510px; } }
.how__text {
	padding: 40px clamp(24px, 4vw, 80px) 24px 40px;
	display: flex; flex-direction: column; gap: 24px; justify-content: center;
}
.how__title { font-family: var(--ff-sans); font-weight: 700; font-size: 24px; margin: 0; color: var(--c-text); }
.how__bar { display: block; width: 64px; height: 2px; background: var(--c-pink); }
.how__body { color: var(--c-text-soft); font-size: 16px; line-height: 1.5; }
.how__body p + p { margin-top: 12px; }
.how__count { color: var(--c-pink); font-weight: 700; font-size: 32px; line-height: 1; margin-top: auto; }
.how__count span { font-size: 24px; opacity: .8; padding: 0 4px; }
.how__image { background: #232323; height: 100%; min-height: 420px; align-self: stretch; }
.how__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.how__nav { display: flex; gap: 24px; justify-content: center; margin-top: 32px; }
.how__btn {
	width: 36px; height: 36px;
	border: 1px solid #222;
	border-radius: 999px;
	display: flex; align-items: center; justify-content: center;
	color: #222;
	transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.how__btn:hover { background: #222; color: #fff; transform: scale(1.05); }

/* Mobile: stack text + image, prevent content overflow. */
@media (max-width: 768px) {
	.how__card { grid-template-columns: 1fr; min-height: 0; }
	.how__text {
		padding: 24px 20px 20px;
		gap: 16px;
		min-width: 0;
	}
	.how__title { font-size: 20px; line-height: 1.3; }
	.how__body { font-size: 14px; line-height: 1.55; word-wrap: break-word; }
	.how__count { font-size: 24px; }
	.how__count span { font-size: 18px; }
	.how__image { aspect-ratio: 16/10; min-height: 0; order: -1; }
}

/* ---------- TEAM (carousel) ---------- */
.team .container { display: flex; flex-direction: column; align-items: stretch; }
.team .section-eyebrow { align-self: center; }
.team__swiper { width: 100%; overflow: hidden; }
.team__swiper .swiper-slide { height: auto; display: flex; }
.team__swiper-pagination {
	position: static !important;        /* override Swiper's bottom:10px absolute */
	display: flex; gap: 10px; justify-content: center;
	margin-top: 32px;
	height: 12px;
	width: auto !important;
	bottom: auto !important;
}
.team__swiper-pagination .swiper-pagination-bullet {
	background: #c9c9c9; opacity: 1;
	width: 10px; height: 10px; margin: 0;
	transition: width .25s var(--ease), background .25s;
}
.team__swiper-pagination .swiper-pagination-bullet-active {
	background: var(--c-pink);
	width: 22px; border-radius: 8px;
}
.team-card {
	position: relative;
	width: 100%;
	aspect-ratio: 280/360;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: #f2f2f2;
	border: 1px solid var(--c-border-card);
	box-shadow: 0 0 8px rgba(0,0,0,.10);
	transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.team-card:hover { transform: translateY(-6px); box-shadow: 0 18px 30px rgba(0,0,0,.16); }
.team-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.team-card:hover .team-card__img { transform: scale(1.05); }
.team-card__overlay {
	position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(to bottom, rgba(0,0,0,0) 55%, rgba(0,0,0,.7) 100%);
}
.team-card__meta {
	position: absolute; inset: auto 0 0 0;
	padding: 16px;
	color: #fff;
	display: flex; flex-direction: column; gap: 2px;
	z-index: 2;
}
.team-card__meta strong { font-size: 16px; font-weight: 600; }
.team-card__meta span  { color: var(--c-text-mute); font-size: 14px; }

/* ---------- GALLERY (auto-scroll rows) ---------- */
.gallery {
	background: #000;
	overflow: hidden;
	display: flex; flex-direction: column;
	gap: 2px; padding: 2px 0;
}
.gallery__row {
	width: 100%;
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}
.gallery__track {
	display: flex; gap: 2px;
	width: max-content;
	will-change: transform;
	animation: gallery-scroll 40s linear infinite;
}
.gallery__row[data-direction="right"] .gallery__track {
	animation-direction: reverse;
	animation-duration: 50s;
}
.gallery__row[data-direction="left"] .gallery__track:hover,
.gallery__row[data-direction="right"] .gallery__track:hover {
	animation-play-state: paused;
}
@keyframes gallery-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.gallery__item {
	flex: 0 0 360px;
	aspect-ratio: 360/200;
	background: #1a1a1a;
	overflow: hidden;
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), opacity .25s; }
.gallery__item:hover img { transform: scale(1.06); }
@media (max-width: 768px) { .gallery__item { flex-basis: 240px; } }

/* ---------- IMPACT ---------- */
.impact {
	position: relative;
	color: #fff;
	background: #007cb2 var(--impact-bg) center/cover no-repeat;
	padding: 80px var(--container-pad);
	text-align: center;
	overflow: hidden;
}
.impact__overlay {
	position: absolute; inset: 0;
	background:
		linear-gradient(90deg, rgba(0,0,0,.2), rgba(0,0,0,.2)),
		linear-gradient(90deg, rgba(0,168,239,.72), rgba(0,168,239,.72));
}
.impact__inner { position: relative; max-width: var(--container-max); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.impact .section-eyebrow { align-self: center; margin-bottom: 0; }
.impact__sub { max-width: 780px; margin: 0; font-size: 16px; line-height: 1.5; }
.impact__stats { display: grid; gap: 20px; grid-template-columns: 1fr; width: 100%; margin-top: 40px; }
@media (min-width: 768px) { .impact__stats { grid-template-columns: repeat(3, 1fr); } }
.impact__stat {
	border: 3px solid rgba(255,255,255,.4);
	border-radius: var(--radius-sm);
	padding: 24px 20px;
	display: flex; flex-direction: column; gap: 6px;
	transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.impact__stat:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.85); transform: translateY(-4px); }
.impact__stat strong {
	color: var(--c-yellow);
	font-size: clamp(36px, 5vw, 48px);
	font-weight: 700; line-height: 1.15;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
}
.impact__stat span { font-size: 16px; line-height: 1.45; }

/* ---------- WE NURTURE PWDs ---------- */
.nurture .container { display: flex; flex-direction: column; align-items: stretch; }
.nurture .section-eyebrow { align-self: center; }
.nurture__sub {
	max-width: 760px;
	margin: -32px auto 56px;
	text-align: center;
	color: var(--c-text-soft);
	font-size: 16px;
	line-height: 1.6;
}
.nurture__grid {
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr;
}
@media (min-width: 600px)  { .nurture__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .nurture__grid { grid-template-columns: repeat(4, 1fr); } }

.nurture__card {
	position: relative;
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: 16px;
	padding: 32px 24px 24px;
	box-shadow: 0 4px 16px rgba(0,0,0,.04);
	transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
	display: flex; flex-direction: column; gap: 14px;
	overflow: hidden;
	isolation: isolate;
}
.nurture__card::before {
	content: "";
	position: absolute; inset: auto -40% -40% auto;
	width: 200px; height: 200px; border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 70%);
	opacity: 0; transition: opacity .35s var(--ease);
	z-index: -1;
}
.nurture__card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 36px rgba(0,0,0,.10);
	border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}
.nurture__card:hover::before { opacity: 1; }

.nurture__icon {
	width: 64px; height: 64px;
	border-radius: 14px;
	background: color-mix(in srgb, var(--accent) 12%, #fff);
	display: flex; align-items: center; justify-content: center;
	transition: transform .35s var(--ease), background .35s var(--ease);
}
.nurture__card:hover .nurture__icon {
	transform: scale(1.08) rotate(-4deg);
	background: color-mix(in srgb, var(--accent) 22%, #fff);
}
.nurture__icon svg { width: 36px; height: 36px; }

.nurture__title {
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: 20px;
	color: var(--c-text);
	margin: 0;
}
.nurture__body {
	color: var(--c-text-soft);
	font-size: 15px;
	line-height: 1.55;
	margin: 0;
}
.nurture__step {
	position: absolute;
	top: 16px; right: 20px;
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: 14px;
	color: var(--accent);
	letter-spacing: .08em;
	opacity: .6;
}

/* ---------- JOIN US ---------- */
.join .container { display: flex; flex-direction: column; }
.join .section-eyebrow { align-self: center; }
.join__grid {
	display: grid; gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
@media (min-width: 760px)  { .join__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .join__grid { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
.join__card {
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-soft);
	padding: 24px;
	text-align: center;
	display: grid;
	grid-template-rows: 140px auto 1fr auto auto;
	row-gap: 20px;
	transition: transform .35s var(--ease), box-shadow .35s var(--ease);
	position: relative; isolation: isolate;
	min-height: 472px;
}
.join__card::before {
	content: "";
	position: absolute; inset: -1px; border-radius: inherit;
	background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 60%);
	opacity: 0; transition: opacity .35s var(--ease);
	z-index: -1; pointer-events: none;
}
.join__card:hover { transform: translateY(-8px); box-shadow: 0 22px 44px rgba(0,0,0,.14); }
.join__card:hover::before { opacity: 1; }
.join__icon {
	display: flex; justify-content: center; align-items: center;
	height: 140px;
	overflow: hidden;
}
.join__icon svg {
	transition: transform .45s var(--ease);
	width: auto; height: 100%;
	max-height: 130px; max-width: 200px;
	object-fit: contain;
}
.join__card:hover .join__icon svg { transform: scale(1.06) rotate(-2deg); }
.join__title {
	color: var(--accent);
	font-weight: 600; font-size: 20px;
	margin: 0;
	line-height: 1.35;
}
.join__body {
	color: var(--c-text-soft);
	font-size: 16px; line-height: 1.55;
	margin: 0;
	display: flex; align-items: flex-start; justify-content: center;
}
.join__benefit {
	background: var(--c-bg-soft);
	color: color-mix(in srgb, var(--accent) 70%, #000);
	font-size: 14px; font-weight: 500;
	padding: 12px 20px;
	border-radius: var(--radius-sm);
	line-height: 1.45;
	min-height: 68px;
	display: flex; align-items: center; justify-content: center;
}
.join__card .btn--filled { align-self: center; justify-self: center; }

/* ---------- FOOTER ---------- */
.site-footer__cta {
	background: linear-gradient(90deg, var(--c-blue) 0%, var(--c-purple) 50%, var(--c-pink) 100%);
	color: #fff;
	padding: 20px clamp(20px, 5vw, 130px);
	display: flex; flex-direction: column; gap: 18px;
	align-items: center; justify-content: center;
	text-align: center;
	min-height: 88px;
	position: relative;
	overflow: hidden;
}
.site-footer__cta-icon {
	width: 82px; height: 82px;
	display: flex; align-items: flex-end; justify-content: center;
	flex-shrink: 0;
	align-self: flex-end;          /* bottom-aligned in the strip */
}
.site-footer__cta-icon svg {
	width: 100%; height: 100%;
	max-width: 82px;
	display: block;
}
@media (min-width: 768px) {
	.site-footer__cta {
		flex-direction: row;
		gap: 32px;
		justify-content: space-between;
		align-items: stretch;        /* let icon hug bottom */
		padding: 0 clamp(20px, 5vw, 130px);
		min-height: 96px;
	}
	.site-footer__cta-icon { align-self: flex-end; margin-bottom: 0; }
	.site-footer__cta-text { flex: 1; text-align: left; align-self: center; padding-left: 8px; }
	.site-footer__cta .btn--donate { align-self: center; }
}
.site-footer__cta-text {
	font-family: var(--ff-sans);
	font-weight: 400;
	font-size: clamp(20px, 2.5vw, 32px);
	line-height: 1.25;
	margin: 0;
}
@media (min-width: 768px) {
	.site-footer__cta { flex-direction: row; }
	.site-footer__cta-text { text-align: left; }
}

/* Mobile CTA: 2-col grid — icon bottom-left flush, text+button right column. */
@media (max-width: 767px) {
	.site-footer__cta {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-areas:
			". text"
			"icon button";
		gap: 20px 20px;
		align-items: end;
		text-align: right;
		padding: 24px 20px 0;          /* zero bottom — icon flush to bottom edge */
		min-height: 0;
		overflow: visible;
	}
	.site-footer__cta-text {
		grid-area: text;
		text-align: right;
		font-size: 18px;
		line-height: 1.3;
		justify-self: end;
		padding-left: 0;
	}
	.site-footer__cta-icon {
		grid-area: icon;
		width: 64px; height: 64px;
		align-self: end;
		justify-self: start;
		margin-bottom: 0;              /* sits on bottom edge */
	}
	.site-footer__cta-icon svg { max-width: 64px; }
	.site-footer__cta .btn--donate {
		grid-area: button;
		justify-self: end;
		align-self: end;
		margin-bottom: 24px;           /* button keeps bottom breathing room */
	}
}

.site-footer__main {
	background: var(--c-bg-footer);
	padding: 60px var(--container-pad) 24px;
}
.site-footer__grid {
	max-width: var(--container-max);
	margin: 0 auto;
	display: grid; gap: 48px;
	grid-template-columns: 1fr;
}
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1.5fr; } }
.site-footer__col strong { display: block; margin-bottom: 12px; font-family: var(--ff-display); font-weight: 700; }
.site-footer__col--brand .site-footer__logo img { height: 80px; width: auto; }
.site-footer__contact { display: flex; flex-direction: column; gap: 16px; margin: 24px 0; font-size: 16px; line-height: 1.5; }
.site-footer__contact > div { display: flex; flex-direction: column; gap: 2px; }
.site-footer__contact > div strong { display: block; margin: 0; font-family: var(--ff-display); font-weight: 700; line-height: 1.4; }
.site-footer__contact > div br { display: none; }
.site-footer__contact a { color: var(--c-text); line-height: 1.4; }
.site-footer__contact a:hover { color: var(--c-blue); }
.site-footer__social-block strong { margin-bottom: 16px; }
.site-footer__socials { display: flex; gap: 18px; }
.site-footer__socials a {
	width: 40px; height: 40px; border-radius: 999px;
	background: var(--c-text); color: #fff;
	display: flex; align-items: center; justify-content: center;
	transition: background .2s var(--ease), transform .2s var(--ease);
}
.site-footer__socials a:hover { background: var(--c-blue); transform: translateY(-2px); }
.site-footer__links {
	display: flex; flex-direction: column; gap: 8px;
}
.site-footer__links li a {
	font-size: 16px; line-height: 1.6;
	transition: color .2s var(--ease), padding-left .25s var(--ease);
	display: inline-block;
}
.site-footer__links li a:hover { color: var(--c-pink); padding-left: 4px; }
.site-footer__qr { width: 152px; height: 152px; background: #fff; border-radius: 6px; padding: 6px; }
.site-footer__qr-placeholder {
	width: 152px; height: 152px;
	background:
		linear-gradient(45deg, transparent 48%, #222 48% 52%, transparent 52%) 0 0/16px 16px,
		linear-gradient(-45deg, transparent 48%, #222 48% 52%, transparent 52%) 0 0/16px 16px,
		#fff;
	border-radius: 6px;
}
.site-footer__hr { border: 0; border-top: 1px solid var(--c-border); margin: 40px 0 16px; }
.site-footer__bottom {
	display: flex; flex-direction: column; gap: 10px; align-items: center;
	font-size: 14px; color: var(--c-text);
	max-width: var(--container-max); margin: 0 auto;
}
@media (min-width: 768px) { .site-footer__bottom { flex-direction: row; justify-content: space-between; } }
.site-footer__bottom a { transition: color .2s; }
.site-footer__bottom a:hover { color: var(--c-pink); }
.site-footer__bottom span { margin: 0 8px; opacity: .5; }

/* ---------- DONATE — PITCH SECTION ---------- */
.donate-pitch {
	padding: 24px 0 48px;
	background: linear-gradient(180deg, #fff 0%, var(--c-bg-soft) 100%);
}
.pitch-block {
	margin: 56px 0;
	padding: 32px 0;
}
.pitch-block:first-child { margin-top: 0; }
.pitch-block--dark {
	background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
	color: #fff;
	border-radius: 24px;
	padding: 48px 32px;
	margin-inline: calc(var(--container-pad) * -1);
	padding-inline: calc(var(--container-pad) + 16px);
}
@media (min-width: 768px) {
	.pitch-block--dark {
		margin-inline: 0;
		padding: 56px clamp(32px, 6vw, 80px);
	}
}

.pitch-block__head {
	max-width: 820px;
	margin: 0 0 32px;          /* left-aligned with container */
}
.pitch-block__head--center { text-align: center; margin-inline: auto; }
.pitch-eyebrow {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--c, var(--c-pink));
	padding: 6px 14px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--c, var(--c-pink)) 14%, transparent);
	margin-bottom: 16px;
}
.pitch-eyebrow--light {
	background: color-mix(in srgb, var(--c, var(--c-yellow)) 22%, transparent);
}
.pitch-block__title {
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: clamp(24px, 3.4vw, 34px);
	line-height: 1.25;
	color: var(--c-text);
	margin: 0;
}
.pitch-block__title--light { color: #fff; }
.pitch-accent {
	background: linear-gradient(90deg, #00a8ef 0%, #9333ea 50%, #e4287c 100%);
	-webkit-background-clip: text; background-clip: text;
	color: transparent;
}
.pitch-block__lede {
	max-width: 820px;
	margin: 16px 0 0;          /* left-aligned with container */
	font-size: 17px;
	line-height: 1.6;
	color: var(--c-text-soft);
}
.pitch-block__head--center + .pitch-block__lede,
.pitch-block--dark .pitch-block__lede { margin-inline: auto; text-align: center; }

/* Pillars */
.pitch-pillars {
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr 1fr;
}
@media (min-width: 760px) { .pitch-pillars { grid-template-columns: repeat(4, 1fr); } }
.pitch-pillar {
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: 16px;
	padding: 28px 20px;
	display: flex; flex-direction: column; align-items: center; gap: 12px;
	text-align: center;
	transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.pitch-pillar:hover {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--c) 50%, transparent);
	box-shadow: 0 18px 36px color-mix(in srgb, var(--c) 14%, transparent);
}
.pitch-pillar svg { color: var(--c); width: 36px; height: 36px; }
.pitch-pillar strong {
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: 17px;
	color: var(--c-text);
}

/* Stats (dark block) */
.pitch-stats {
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr;
}
@media (min-width: 600px)  { .pitch-stats { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .pitch-stats { grid-template-columns: repeat(5, 1fr); } }
.pitch-stat {
	border: 2px solid rgba(255,255,255,.18);
	border-radius: 14px;
	padding: 24px 18px;
	text-align: center;
	display: flex; flex-direction: column; gap: 6px;
	transition: background .25s var(--ease), border-color .25s var(--ease);
}
.pitch-stat:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.4); }
.pitch-stat strong {
	color: var(--c-yellow);
	font-family: var(--ff-display);
	font-size: clamp(28px, 3vw, 36px);
	line-height: 1.1;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.pitch-stat strong span { color: var(--c-pink); }
.pitch-stat span { color: rgba(255,255,255,.85); font-size: 14px; line-height: 1.4; }
.pitch-stat--wide strong { font-size: clamp(20px, 2vw, 24px); color: var(--c-yellow); }

/* What Your Support Enables */
.pitch-enables {
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr;
}
@media (min-width: 720px) { .pitch-enables { grid-template-columns: repeat(3, 1fr); } }
.pitch-enable {
	background: #fff;
	border: 1px solid var(--c-border);
	border-left: 4px solid var(--c);
	border-radius: 14px;
	padding: 28px 24px;
	display: flex; flex-direction: column; gap: 8px;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.pitch-enable:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 28px color-mix(in srgb, var(--c) 14%, transparent);
}
.pitch-enable__num {
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: 36px;
	line-height: 1;
	color: var(--c);
	font-variant-numeric: tabular-nums;
}
.pitch-enable__label { color: var(--c-text-soft); font-size: 15px; line-height: 1.5; }

/* Tier Table */
.pitch-tiers {
	display: grid;
	gap: 14px;
	grid-template-columns: 1fr;
}
@media (min-width: 760px)  { .pitch-tiers { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .pitch-tiers { grid-template-columns: repeat(4, 1fr); } }
.pitch-tier {
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: 16px;
	padding: 24px 20px;
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
	position: relative; overflow: hidden;
}
.pitch-tier::before {
	content: ""; position: absolute; left: 0; top: 0; bottom: 0;
	width: 4px; background: var(--c);
	transition: width .3s var(--ease);
}
.pitch-tier:hover {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--c) 60%, transparent);
	box-shadow: 0 18px 36px color-mix(in srgb, var(--c) 18%, transparent);
}
.pitch-tier:hover::before { width: 6px; }
.pitch-tier__amount {
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: 22px;
	color: var(--c-text);
	display: flex; align-items: baseline; gap: 2px;
	font-variant-numeric: tabular-nums;
}
.pitch-tier__currency { font-size: 18px; color: var(--c); margin-right: 2px; }
.pitch-tier__arrow {
	color: var(--c);
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}
.pitch-tier__impact {
	display: flex; flex-direction: column; align-items: flex-end;
	text-align: right;
	flex-shrink: 0;
}
.pitch-tier__impact strong {
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: 22px;
	color: var(--c);
	line-height: 1;
}
.pitch-tier__impact span { color: var(--c-text-soft); font-size: 12px; margin-top: 2px; }

/* Closing tagline */
.pitch-tagline {
	max-width: 820px;
	margin: 32px auto 0;
	padding: 36px 32px;
	background: linear-gradient(135deg, color-mix(in srgb, var(--c-blue) 8%, #fff) 0%, color-mix(in srgb, var(--c-pink) 8%, #fff) 100%);
	border-radius: 20px;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.pitch-tagline__quote {
	font-family: var(--ff-display);
	font-size: 80px;
	font-weight: 700;
	line-height: .6;
	color: var(--c-pink);
	display: block;
	opacity: .3;
}
.pitch-tagline p {
	margin: 8px 0 0;
	font-size: clamp(20px, 2.4vw, 26px);
	line-height: 1.4;
	color: var(--c-text);
	font-family: var(--ff-display);
}
.pitch-tagline strong {
	background: linear-gradient(90deg, #00a8ef 0%, #9333ea 50%, #e4287c 100%);
	-webkit-background-clip: text; background-clip: text;
	color: transparent;
}

/* Bridge to bank details */
.pitch-bridge {
	margin: 40px auto 0;
	text-align: center;
}
.pitch-bridge p {
	margin: 0 0 16px;
	font-size: 16px;
	color: var(--c-text-soft);
	text-transform: uppercase;
	letter-spacing: .14em;
	font-weight: 600;
}
.pitch-bridge .btn--filled svg { transition: transform .3s var(--ease); }
.pitch-bridge .btn--filled:hover svg { transform: translateY(2px); }

/* ---------- DONATE PAGE ---------- */
.donate-hero {
	padding: calc(var(--header-h) + 56px) 0 32px;
	background: linear-gradient(180deg, var(--c-bg-pink), #fff);
}
.donate-hero .section-eyebrow { margin-bottom: 16px; }
.donate-hero__lede {
	max-width: 760px;
	font-size: 17px;
	line-height: 1.6;
	color: var(--c-text-soft);
	margin: 0 0 24px;
}
.donate-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: 12px;
	padding: 14px 20px;
	max-width: 760px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--c-text-soft);
	box-shadow: 0 4px 12px rgba(0,0,0,.04);
}
.donate-hero__badge svg { color: var(--c-yellow); flex-shrink: 0; fill: var(--c-yellow); }
.donate-hero__badge strong { color: var(--c-text); }

.donate-bank { padding: 40px 0 100px; }
.donate-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr;
}
@media (min-width: 768px) { .donate-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) {
	.donate-grid { grid-template-columns: repeat(2, 1fr); }
	.donate-card--primary { grid-row: span 2; }
}

.donate-card {
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: 16px;
	padding: 28px;
	box-shadow: 0 4px 16px rgba(0,0,0,.04);
	transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.donate-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.08); }
.donate-card--primary {
	border-color: var(--c-blue);
	background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--c-blue) 4%, #fff) 100%);
}
.donate-card--info { background: var(--c-bg-soft); border-color: transparent; }

.donate-card__title {
	margin: 0 0 4px;
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: 20px;
	color: var(--c-text);
}
.donate-card__sub {
	margin: 0 0 20px;
	color: var(--c-text-soft);
	font-size: 14px;
}
.donate-card__note {
	margin: 16px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--c-text-soft);
}

.donate-list { margin: 0; display: grid; gap: 12px; }
.donate-list > div { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 8px 0; border-bottom: 1px dashed var(--c-border); }
.donate-list > div:last-child { border-bottom: 0; }
@media (min-width: 480px) { .donate-list > div { grid-template-columns: 180px 1fr; gap: 16px; align-items: center; } }
.donate-list dt { font-size: 13px; color: var(--c-text-soft); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; margin: 0; }
.donate-list dd { font-size: 16px; color: var(--c-text); font-weight: 600; margin: 0; font-family: 'Roboto', monospace; word-break: break-all; }

.copyable { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.donate-copy {
	width: 30px; height: 30px;
	border: 1px solid var(--c-border);
	border-radius: 6px;
	background: #fff;
	color: var(--c-text-soft);
	display: flex; align-items: center; justify-content: center;
	transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.donate-copy:hover { background: var(--c-blue); color: #fff; border-color: var(--c-blue); }
.donate-copy.is-copied { background: #0a7c2f; color: #fff; border-color: #0a7c2f; }

.donate-upi {
	display: flex; flex-direction: column; gap: 16px;
}
.donate-upi__id {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	font-size: 18px; font-weight: 700; color: var(--c-text);
	background: var(--c-bg-soft);
	padding: 14px 18px;
	border-radius: 10px;
	border: 1px dashed var(--c-blue);
}
.donate-upi__id span { word-break: break-all; }

.donate-cta {
	margin-top: 40px;
	padding: 32px;
	background: linear-gradient(135deg, color-mix(in srgb, var(--c-blue) 8%, #fff) 0%, color-mix(in srgb, var(--c-pink) 8%, #fff) 100%);
	border-radius: 16px;
	text-align: center;
}
.donate-cta p { margin: 0 0 16px; font-size: 16px; color: var(--c-text); }
.donate-cta__row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.donate-cta__soon { margin: 20px 0 0 !important; font-size: 13px; color: var(--c-text-soft); }
.btn--ghost-dark { background: transparent; color: var(--c-text); border: 1px solid var(--c-text); }
.btn--ghost-dark:hover { background: var(--c-text); color: #fff; }

@media (max-width: 600px) {
	.donate-card { padding: 20px; }
	.donate-cta { padding: 24px 18px; }
}

/* ---------- MODAL ---------- */
.saarathee-modal {
	position: fixed; inset: 0;
	z-index: 1000;
	display: flex; align-items: center; justify-content: center;
	padding: 24px;
}
.saarathee-modal[hidden] { display: none; }
.saarathee-modal__backdrop {
	position: absolute; inset: 0;
	background: rgba(15, 20, 30, .6);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	animation: modal-fade-in .25s var(--ease) both;
}
.saarathee-modal__panel {
	position: relative;
	background: #fff;
	width: 100%;
	max-width: 560px;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	border-radius: 16px;
	box-shadow: 0 30px 60px rgba(0,0,0,.30);
	animation: modal-pop-in .35s var(--ease) both;
	padding: 32px clamp(20px, 4vw, 40px) 28px;
	-webkit-overflow-scrolling: touch;
}
.saarathee-modal__close {
	position: absolute; top: 14px; right: 14px;
	width: 36px; height: 36px;
	border-radius: 999px;
	background: #f4f4f5;
	color: var(--c-text);
	display: flex; align-items: center; justify-content: center;
	transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
	z-index: 2;
}
.saarathee-modal__close:hover { background: var(--c-text); color: #fff; transform: rotate(90deg); }
.saarathee-modal__header {
	margin: 0 0 20px;
	padding-right: 40px;
	border-bottom: 1px solid var(--c-border);
	padding-bottom: 16px;
}
.saarathee-modal__title {
	margin: 0 0 6px;
	color: var(--modal-accent, var(--c-text));
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: clamp(22px, 3vw, 26px);
	line-height: 1.25;
}
.saarathee-modal__lede {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--c-text-soft);
}
.saarathee-modal__body { font-size: 15px; }

/* Custom Saarathee form — used inside modals. */
.saarathee-form { display: block; }
.saarathee-form__honey { position: absolute; left: -9999px; top: -9999px; opacity: 0; pointer-events: none; }
.saarathee-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
@media (max-width: 600px) { .saarathee-form__grid { grid-template-columns: 1fr; } }
.saarathee-form__row {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.saarathee-form__row.is-half { grid-column: span 1; }
@media (max-width: 600px) { .saarathee-form__row.is-half { grid-column: 1 / -1; } }

.saarathee-form__label {
	font-weight: 600;
	font-size: 14px;
	color: var(--c-text);
	display: inline-flex;
	gap: 4px;
}
.saarathee-form__req { color: var(--modal-accent, var(--c-pink)); }

.saarathee-form input[type="text"],
.saarathee-form input[type="email"],
.saarathee-form input[type="tel"],
.saarathee-form input[type="number"],
.saarathee-form select,
.saarathee-form textarea {
	width: 100%;
	border: 1px solid var(--c-border);
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 15px;
	font-family: var(--ff-sans);
	background: #fff;
	color: var(--c-text);
	transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.saarathee-form textarea { resize: vertical; min-height: 96px; }
.saarathee-form input:focus,
.saarathee-form select:focus,
.saarathee-form textarea:focus {
	outline: none;
	border-color: var(--modal-accent, var(--c-blue));
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--modal-accent, var(--c-blue)) 22%, transparent);
}
.saarathee-form .has-error input,
.saarathee-form .has-error select,
.saarathee-form .has-error textarea { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192,57,43,.15); }
.saarathee-form__error { color: #c0392b; font-size: 13px; margin-top: 4px; }

.saarathee-form__actions { margin-top: 24px; display: flex; justify-content: flex-end; }
.saarathee-form__submit {
	background: var(--modal-accent, var(--c-pink));
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 14px 32px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex; align-items: center; gap: 10px;
	transition: transform .2s var(--ease), box-shadow .2s var(--ease), opacity .2s var(--ease);
	min-width: 180px;
	justify-content: center;
}
.saarathee-form__submit:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: 0 10px 22px color-mix(in srgb, var(--modal-accent, var(--c-pink)) 35%, transparent);
}
.saarathee-form__submit:disabled { opacity: .7; cursor: wait; }
.saarathee-form__submit-spinner {
	display: none;
	width: 16px; height: 16px;
	border-radius: 50%;
	border: 2px solid rgba(255,255,255,.4);
	border-top-color: #fff;
	animation: sf-spin .8s linear infinite;
}
.saarathee-form.is-submitting .saarathee-form__submit-spinner { display: inline-block; }
@keyframes sf-spin { to { transform: rotate(360deg); } }

.saarathee-form__feedback { margin-top: 16px; font-size: 14px; line-height: 1.5; }
.saarathee-form__feedback.is-success { color: #0a7c2f; padding: 14px 16px; background: rgba(10,124,47,.08); border-radius: 8px; border-left: 3px solid #0a7c2f; }
.saarathee-form__feedback.is-error   { color: #c0392b; padding: 14px 16px; background: rgba(192,57,43,.08); border-radius: 8px; border-left: 3px solid #c0392b; }
.saarathee-form.is-done .saarathee-form__grid,
.saarathee-form.is-done .saarathee-form__actions { display: none; }

@keyframes modal-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-pop-in {
	from { opacity: 0; transform: translateY(20px) scale(.96); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 600px) {
	.saarathee-modal { padding: 0; align-items: stretch; }
	.saarathee-modal__panel {
		max-height: 100vh;
		max-width: none;
		border-radius: 0;
		padding: 56px 20px 24px;
	}
	.saarathee-modal__close { top: 10px; right: 10px; }
}

body.saarathee-modal-open { overflow: hidden; }

/* ---------- GSAP scroll reveals (initial state, JS will animate to visible) ---------- */
.gs-fade { opacity: 0; transform: translateY(28px); }
.gs-fade.is-in { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }

/* SAFETY NET: cards default to visible. GSAP animates from invisible via
   inline styles only when each grid enters the viewport. */

/* ---------- responsive tweaks ---------- */
@media (max-width: 720px) {
	.who__visual { aspect-ratio: 4/3; }
	.section-eyebrow { display: inline-flex; }
	.how__count { font-size: 26px; }
	.story-card__name { font-size: 22px; left: 20px; bottom: 18px; }
	.site-footer__main { padding: 40px var(--container-pad) 20px; }
}
@media (prefers-reduced-motion: reduce) {
	* { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
	.gallery__track { animation: none !important; }
}