/*
Theme Name: CELS
Theme URI: https://creativeeducationandlifeskills.org
Author: Creative Education and Life Skills
Description: Lifeline-inspired standalone theme for Creative Education and Life Skills — NGO layout with topbar, welcome split, causes-with-progress, counter band, events, testimonials, partners, CTA band, and 4-col footer.
Template: twentytwentyfive
Version: 5.0.0
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cels-theme
*/

/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════════════════════════ */
:root {
	--cels-forest:        #1A6B3C;
	--cels-forest-dark:   #0F4A28;
	--cels-forest-deeper: #0A1628;
	--cels-forest-light:  #E8F5EE;
	--cels-sunset:        #E8511A;
	--cels-sunset-light:  #FEF0EB;
	--cels-gold:          #C9961A;
	--cels-gold-light:    #FDF6E3;
	--cels-sky:           #1578C2;
	--cels-black:         #0D1F12;
	--cels-white:         #FFFFFF;
	--cels-off-white:     #FAFAF8;
	--cels-pearl:         #F0EDE8;
	--cels-border:        #E2DDD8;
	--cels-muted:         #4A5568;
	--cels-radius-sm:     8px;
	--cels-radius:        16px;
	--cels-radius-lg:     24px;
	--cels-radius-xl:     32px;
	--cels-shadow-sm:     0 2px 8px rgba(10, 22, 40, 0.06);
	--cels-shadow:        0 8px 24px -4px rgba(10, 22, 40, 0.12);
	--cels-shadow-lg:     0 24px 48px -12px rgba(10, 22, 40, 0.18);
	--font-display:       'Plus Jakarta Sans', system-ui, sans-serif;
	--font-body:          'DM Sans', system-ui, sans-serif;
	--ease-spring:        cubic-bezier(0.22, 1, 0.36, 1);
	--ease-smooth:        cubic-bezier(0.4, 0, 0.2, 1);
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL RESET & BASE
═══════════════════════════════════════════════════════════════ */
*, *::before, *::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-body);
	background: var(--cels-off-white);
	color: var(--cels-muted);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection {
	background: var(--cels-forest);
	color: var(--cels-white);
}

img {
	max-width: 100%;
	height: auto;
}

/* Override TT5 margin resets */
.wp-block-group.alignfull,
.wp-block-cover.alignfull {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   TYPOGRAPHY
═══════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
	font-family: var(--font-display);
	color: var(--cels-black);
	line-height: 1.12;
	letter-spacing: -0.025em;
}

h1, .wp-block-heading.has-xx-large-font-size {
	font-size: clamp(2.75rem, 5vw + 1.25rem, 5rem);
	font-weight: 800;
	letter-spacing: -0.035em;
}

h2, .wp-block-heading.has-x-large-font-size {
	font-size: clamp(1.875rem, 2.5vw + 1rem, 2.875rem);
	font-weight: 700;
}

h3 { font-size: 1.25rem; font-weight: 700; }

p { line-height: 1.75; }

/* ═══════════════════════════════════════════════════════════════
   UTILITY CLASSES
═══════════════════════════════════════════════════════════════ */
.cels-section-label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cels-forest);
	margin-bottom: 1rem;
}

.cels-section-label::before {
	content: '';
	display: inline-block;
	width: 20px;
	height: 2px;
	background: var(--cels-forest);
	border-radius: 99px;
}

.cels-section-label--sunset {
	color: var(--cels-sunset);
}
.cels-section-label--sunset::before {
	background: var(--cels-sunset);
}

.cels-section-label--gold {
	color: var(--cels-gold);
}
.cels-section-label--gold::before {
	background: var(--cels-gold);
}

.cels-gradient-text {
	background: linear-gradient(135deg, var(--cels-forest) 0%, var(--cels-gold) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* ═══════════════════════════════════════════════════════════════
   STICKY HEADER — GLASSMORPHISM
═══════════════════════════════════════════════════════════════ */
.cels-header {
	position: sticky;
	top: 0;
	z-index: 200;
	background: rgba(250, 250, 248, 0.88);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border-bottom: 1px solid rgba(226, 221, 216, 0.6);
	transition: background 0.35s var(--ease-smooth),
	            box-shadow 0.35s var(--ease-smooth);
}

.cels-header.is-scrolled {
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 1px 32px rgba(10, 22, 40, 0.08);
}

/* NAV links */
.cels-header .wp-block-navigation__container .wp-block-navigation-item__content {
	font-family: var(--font-display);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--cels-black) !important;
	transition: color 0.2s;
}

.cels-header .wp-block-navigation__container .wp-block-navigation-item__content:hover {
	color: var(--cels-forest) !important;
}

/* ═══════════════════════════════════════════════════════════════
   HERO — FULL-SCREEN CINEMATIC
═══════════════════════════════════════════════════════════════ */
.cels-hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--cels-forest-deeper);
}

/* Background photo layer */
.cels-hero-bg {
	position: absolute;
	inset: 0;
	background-image: url('/wp-content/themes/cels-theme/assets/hero.jpg');
	background-size: cover;
	background-position: center 30%;
	transform: scale(1.04);
	animation: cels-ken-burns 20s ease-out forwards;
}

@keyframes cels-ken-burns {
	from { transform: scale(1.04) translateY(0); }
	to   { transform: scale(1) translateY(-1%); }
}

/* Multi-layer gradient overlay — dark bottom, tinted top */
.cels-hero-overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			to bottom,
			rgba(10, 22, 40, 0.35) 0%,
			rgba(10, 22, 40, 0.2) 30%,
			rgba(10, 22, 40, 0.55) 70%,
			rgba(10, 22, 40, 0.82) 100%
		),
		radial-gradient(
			ellipse at 20% 40%,
			rgba(26, 107, 60, 0.25) 0%,
			transparent 55%
		);
}

/* Decorative mesh grid */
.cels-hero-overlay::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
	background-size: 48px 48px;
	pointer-events: none;
}

/* Content area */
.cels-hero-content {
	position: relative;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	flex: 1;
	padding: clamp(6rem, 14vh, 11rem) 1.5rem clamp(5rem, 10vh, 8rem);
	max-width: 960px;
	margin: 0 auto;
	width: 100%;
}

/* Hero badge */
.cels-hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 1rem;
	border-radius: 100px;
	background: rgba(26, 107, 60, 0.25);
	border: 1px solid rgba(26, 107, 60, 0.5);
	color: #6EE7A6;
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 1.75rem;
	backdrop-filter: blur(8px);
	animation: cels-fade-up 0.8s var(--ease-spring) 0.1s both;
}

.cels-hero-badge-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #6EE7A6;
	animation: cels-pulse 2.5s ease-in-out infinite;
}

@keyframes cels-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%       { opacity: 0.5; transform: scale(0.8); }
}

/* Hero headline */
.cels-hero-title {
	font-family: var(--font-display);
	font-size: clamp(2.75rem, 6vw + 1rem, 5.5rem);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1.05;
	color: #fff;
	margin: 0 0 1.5rem;
	animation: cels-fade-up 0.9s var(--ease-spring) 0.2s both;
}

.cels-hero-title em {
	font-style: normal;
	background: linear-gradient(135deg, #6EE7A6 0%, var(--cels-gold) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* Hero subtitle */
.cels-hero-subtitle {
	font-size: clamp(1rem, 1.5vw + 0.5rem, 1.3rem);
	color: rgba(255, 255, 255, 0.8);
	line-height: 1.72;
	max-width: 640px;
	margin: 0 auto 2.75rem;
	animation: cels-fade-up 1s var(--ease-spring) 0.35s both;
}

/* Hero action buttons */
.cels-hero-actions {
	display: flex;
	gap: 0.875rem;
	justify-content: center;
	flex-wrap: wrap;
	animation: cels-fade-up 1s var(--ease-spring) 0.5s both;
}

/* Hero scroll indicator */
.cels-hero-scroll {
	position: absolute;
	bottom: 2.5rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	opacity: 0.6;
	animation: cels-fade-up 1s var(--ease-spring) 0.8s both, cels-float 3s ease-in-out 1.5s infinite;
}

.cels-hero-scroll span {
	font-size: 0.7rem;
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.7);
}

.cels-scroll-line {
	width: 1.5px;
	height: 36px;
	background: linear-gradient(to bottom, rgba(255,255,255,0.5), transparent);
	border-radius: 99px;
}

@keyframes cels-float {
	0%, 100% { transform: translateX(-50%) translateY(0); }
	50%       { transform: translateX(-50%) translateY(6px); }
}

/* ═══════════════════════════════════════════════════════════════
   SCROLLING MARQUEE TICKER
═══════════════════════════════════════════════════════════════ */
.cels-marquee {
	overflow: hidden;
	white-space: nowrap;
	background: var(--cels-forest);
	padding: 0.875rem 0;
	position: relative;
}

.cels-marquee::before,
.cels-marquee::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 80px;
	z-index: 2;
}

.cels-marquee::before {
	left: 0;
	background: linear-gradient(to right, var(--cels-forest), transparent);
}

.cels-marquee::after {
	right: 0;
	background: linear-gradient(to left, var(--cels-forest), transparent);
}

.cels-marquee-track {
	display: inline-flex;
	animation: cels-marquee-scroll 28s linear infinite;
}

.cels-marquee-track:hover {
	animation-play-state: paused;
}

.cels-marquee-item {
	display: inline-flex;
	align-items: center;
	gap: 2rem;
	padding: 0 2rem;
	font-family: var(--font-display);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.9);
}

.cels-marquee-item::after {
	content: '✦';
	font-size: 0.5em;
	opacity: 0.5;
}

@keyframes cels-marquee-scroll {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════════════ */
.cels-btn,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.9375rem 2.25rem;
	border-radius: 100px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.9375rem;
	letter-spacing: 0.01em;
	border: 2px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.25s var(--ease-spring),
	            box-shadow 0.25s var(--ease-spring),
	            background 0.2s,
	            color 0.2s;
	will-change: transform;
}

/* Primary — forest green */
.cels-btn--primary,
.wp-block-button__link.has-primary-background-color {
	background: var(--cels-forest);
	color: #fff;
	box-shadow: 0 4px 16px rgba(26, 107, 60, 0.25);
}

.cels-btn--primary:hover,
.wp-block-button__link.has-primary-background-color:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(26, 107, 60, 0.4);
	color: #fff;
}

/* Secondary — sunset orange */
.cels-btn--accent,
.wp-block-button__link.has-accent-background-color {
	background: var(--cels-sunset);
	color: #fff;
	box-shadow: 0 4px 16px rgba(232, 81, 26, 0.25);
}

.cels-btn--accent:hover,
.wp-block-button__link.has-accent-background-color:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(232, 81, 26, 0.4);
	color: #fff;
}

/* Outline — white (on dark backgrounds) */
.cels-btn--outline-white,
.is-style-outline .wp-block-button__link {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.6);
	color: #fff;
}

.cels-btn--outline-white:hover,
.is-style-outline .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.9);
	transform: translateY(-3px);
	color: #fff;
}

/* Outline — dark */
.cels-btn--outline-dark {
	background: transparent;
	border-color: var(--cels-black);
	color: var(--cels-black);
}

.cels-btn--outline-dark:hover {
	background: var(--cels-black);
	color: #fff;
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(13, 31, 18, 0.25);
}

/* Gold button */
.cels-btn--gold,
.wp-block-button__link.has-gold-background-color {
	background: var(--cels-gold);
	color: #fff;
	box-shadow: 0 4px 16px rgba(201, 150, 26, 0.25);
}

.cels-btn--gold:hover,
.wp-block-button__link.has-gold-background-color:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(201, 150, 26, 0.4);
	color: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   FEATURE CARDS
═══════════════════════════════════════════════════════════════ */
.cels-card {
	background: var(--cels-white);
	border: 1px solid var(--cels-border);
	border-radius: var(--cels-radius-lg);
	padding: 2.25rem 2rem;
	transition: transform 0.4s var(--ease-spring),
	            box-shadow 0.4s var(--ease-spring),
	            border-color 0.3s;
	position: relative;
	overflow: hidden;
}

.cels-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--cels-forest), var(--cels-gold));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s var(--ease-spring);
}

.cels-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--cels-shadow-lg);
	border-color: transparent;
}

.cels-card:hover::before {
	transform: scaleX(1);
}

/* Icon container inside card */
.cels-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	border-radius: var(--cels-radius);
	margin-bottom: 1.5rem;
	transition: transform 0.35s var(--ease-spring);
}

.cels-card-icon svg {
	width: 28px;
	height: 28px;
}

.cels-card:hover .cels-card-icon {
	transform: scale(1.1) rotate(-5deg);
}

.cels-card-icon--forest  { background: var(--cels-forest-light); color: var(--cels-forest); }
.cels-card-icon--sunset  { background: var(--cels-sunset-light); color: var(--cels-sunset); }
.cels-card-icon--gold    { background: var(--cels-gold-light);   color: var(--cels-gold); }
.cels-card-icon--sky     { background: #E8F3FD;                  color: var(--cels-sky); }
.cels-card-icon--dark    { background: #F0F2F4;                  color: var(--cels-black); }

/* Numbered impact card */
.cels-impact-card {
	background: var(--cels-white);
	border: 1px solid var(--cels-border);
	border-radius: var(--cels-radius-lg);
	padding: 2.5rem 2rem;
	text-align: center;
	transition: transform 0.4s var(--ease-spring), box-shadow 0.4s var(--ease-spring);
	position: relative;
	overflow: hidden;
}

.cels-impact-card::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 4px;
	opacity: 0;
	transition: opacity 0.3s;
}

.cels-impact-card--forest::after { background: var(--cels-forest); }
.cels-impact-card--sunset::after { background: var(--cels-sunset); }
.cels-impact-card--gold::after   { background: var(--cels-gold); }

.cels-impact-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--cels-shadow-lg);
}

.cels-impact-card:hover::after {
	opacity: 1;
}

.cels-impact-number {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(2.5rem, 4.5vw, 3.75rem);
	letter-spacing: -0.04em;
	line-height: 1;
	margin-bottom: 0.375rem;
}

.cels-impact-number--forest { color: var(--cels-forest); }
.cels-impact-number--sunset { color: var(--cels-sunset); }
.cels-impact-number--gold   { color: var(--cels-gold); }

.cels-impact-label {
	font-size: 0.9rem;
	color: var(--cels-muted);
	font-weight: 500;
	margin-top: 0.25rem;
}

/* ═══════════════════════════════════════════════════════════════
   TEAM CARDS
═══════════════════════════════════════════════════════════════ */
.cels-team-card {
	background: var(--cels-white);
	border: 1px solid var(--cels-border);
	border-radius: var(--cels-radius-lg);
	padding: 2.25rem 1.75rem;
	text-align: center;
	transition: transform 0.4s var(--ease-spring), box-shadow 0.4s var(--ease-spring);
}

.cels-team-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--cels-shadow-lg);
}

.cels-team-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.6rem;
	margin-bottom: 1.25rem;
	position: relative;
	transition: transform 0.3s var(--ease-spring);
}

.cels-team-card:hover .cels-team-avatar {
	transform: scale(1.08);
}

.cels-team-avatar::after {
	content: '';
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 2px solid transparent;
	transition: border-color 0.3s;
}

.cels-team-card:hover .cels-team-avatar::after {
	border-color: var(--cels-forest);
}

.cels-avatar--forest { background: var(--cels-forest-light); color: var(--cels-forest); }
.cels-avatar--sunset { background: var(--cels-sunset-light); color: var(--cels-sunset); }
.cels-avatar--gold   { background: var(--cels-gold-light);   color: var(--cels-gold); }

.cels-team-name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--cels-black);
	margin-bottom: 0.25rem;
}

.cels-team-role {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.cels-role--forest { color: var(--cels-forest); }
.cels-role--sunset { color: var(--cels-sunset); }
.cels-role--gold   { color: var(--cels-gold); }

/* ═══════════════════════════════════════════════════════════════
   ACCORDION / OBJECTIVES
═══════════════════════════════════════════════════════════════ */
.cels-accordion {
	background: var(--cels-white);
	border: 1px solid var(--cels-border);
	border-radius: var(--cels-radius);
	overflow: hidden;
	margin-bottom: 0.75rem;
	transition: border-color 0.25s, box-shadow 0.25s;
}

.cels-accordion:hover,
.cels-accordion[open] {
	border-color: var(--cels-forest);
	box-shadow: var(--cels-shadow-sm);
}

.cels-accordion summary {
	padding: 1.375rem 1.75rem;
	cursor: pointer;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1rem;
	color: var(--cels-black);
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	transition: color 0.2s;
	-webkit-tap-highlight-color: transparent;
}

.cels-accordion summary::-webkit-details-marker { display: none; }

.cels-accordion summary::after {
	content: '';
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--cels-forest-light);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%231A6B3C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 2v8M2 6h8'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px;
	transition: transform 0.3s var(--ease-spring), background-color 0.2s;
}

.cels-accordion[open] summary {
	color: var(--cels-forest);
}

.cels-accordion[open] summary::after {
	transform: rotate(45deg);
	background-color: var(--cels-forest);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 2v8M2 6h8'/%3E%3C/svg%3E");
}

.cels-accordion__body {
	padding: 0 1.75rem 1.5rem;
	color: var(--cels-muted);
	line-height: 1.75;
	font-size: 0.9375rem;
}

/* ═══════════════════════════════════════════════════════════════
   CONTACT / DONATION FORM
═══════════════════════════════════════════════════════════════ */
.cels-form-group {
	margin-bottom: 1.25rem;
}

.cels-form-label {
	display: block;
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--cels-black);
	margin-bottom: 0.5rem;
}

.cels-form-label .required { color: var(--cels-sunset); }

.cels-form-input,
.cels-donation-form input[type="text"],
.cels-donation-form input[type="email"],
.cels-donation-form input[type="tel"],
.cels-donation-form textarea {
	width: 100%;
	padding: 0.875rem 1.125rem;
	border: 1.5px solid var(--cels-border);
	border-radius: var(--cels-radius-sm);
	background: var(--cels-white);
	color: var(--cels-black);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.5;
	transition: border-color 0.2s, box-shadow 0.2s;
	appearance: none;
}

.cels-form-input:hover,
.cels-donation-form input:hover,
.cels-donation-form textarea:hover {
	border-color: var(--cels-muted);
}

.cels-form-input:focus,
.cels-donation-form input:focus,
.cels-donation-form textarea:focus {
	outline: none;
	border-color: var(--cels-forest);
	box-shadow: 0 0 0 4px rgba(26, 107, 60, 0.1);
}

/* ═══════════════════════════════════════════════════════════════
   FLOATING DONATE BUTTON
═══════════════════════════════════════════════════════════════ */
.cels-floating-donate {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	z-index: 150;
	background: var(--cels-sunset);
	color: #fff;
	padding: 0.9375rem 1.875rem;
	border-radius: 100px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.9rem;
	text-decoration: none;
	box-shadow: 0 8px 32px rgba(232, 81, 26, 0.4), 0 2px 8px rgba(232, 81, 26, 0.2);
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	transition: transform 0.3s var(--ease-spring),
	            box-shadow 0.3s var(--ease-spring);
	animation: cels-donate-enter 0.8s var(--ease-spring) 1.5s both;
}

@keyframes cels-donate-enter {
	from { transform: translateY(120%); opacity: 0; }
	to   { transform: translateY(0); opacity: 1; }
}

.cels-floating-donate:hover {
	transform: translateY(-4px) scale(1.04);
	box-shadow: 0 14px 40px rgba(232, 81, 26, 0.5), 0 4px 12px rgba(232, 81, 26, 0.2);
	color: #fff;
}

.cels-floating-donate svg {
	width: 18px;
	height: 18px;
	animation: cels-pulse-icon 2s ease-in-out infinite;
}

@keyframes cels-pulse-icon {
	0%, 100% { transform: scale(1); }
	50%       { transform: scale(1.15); }
}

/* ═══════════════════════════════════════════════════════════════
   GRADIENT SECTION BACKGROUNDS
═══════════════════════════════════════════════════════════════ */
.cels-section-forest {
	background: linear-gradient(160deg, var(--cels-forest-dark) 0%, var(--cels-forest-deeper) 100%);
	color: rgba(255, 255, 255, 0.85);
}

.cels-section-forest h2,
.cels-section-forest h3,
.cels-section-forest h4 {
	color: #fff;
}

.cels-section-warm {
	background: linear-gradient(160deg, var(--cels-sunset) 0%, #A3300A 100%);
	color: rgba(255, 255, 255, 0.85);
}

.cels-section-pearl {
	background: var(--cels-pearl);
}

.cels-section-off-white {
	background: var(--cels-off-white);
}

/* ═══════════════════════════════════════════════════════════════
   PHOTO WITH OVERLAY SECTIONS
═══════════════════════════════════════════════════════════════ */
.cels-photo-section {
	position: relative;
	overflow: hidden;
}

.cels-photo-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(15, 74, 40, 0.9) 0%, rgba(10, 22, 40, 0.85) 100%);
	z-index: 1;
}

.cels-photo-section > * {
	position: relative;
	z-index: 2;
}

/* ═══════════════════════════════════════════════════════════════
   VISION / MISSION SPLIT SECTION
═══════════════════════════════════════════════════════════════ */
.cels-split-section {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	overflow: hidden;
	border-radius: var(--cels-radius-xl);
}

.cels-split-panel {
	padding: 4rem 3.5rem;
}

.cels-split-panel--light {
	background: var(--cels-white);
}

.cels-split-panel--forest {
	background: var(--cels-forest);
	color: rgba(255, 255, 255, 0.85);
}

.cels-split-panel--forest h2,
.cels-split-panel--forest h3,
.cels-split-panel--forest .cels-section-label {
	color: #fff;
}

.cels-split-panel--forest .cels-section-label::before {
	background: rgba(255,255,255,0.6);
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════════ */
.cels-footer {
	background: var(--cels-forest-deeper);
	color: rgba(255, 255, 255, 0.7);
	position: relative;
	overflow: hidden;
}

/* Subtle texture on footer */
.cels-footer::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--cels-forest), var(--cels-gold), var(--cels-sunset));
}

.cels-footer a {
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
	transition: color 0.2s;
}

.cels-footer a:hover {
	color: var(--cels-white);
}

.cels-footer-heading {
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.4);
	margin-bottom: 1.25rem;
}

.cels-footer-logo-text {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.1rem;
	letter-spacing: -0.02em;
	color: var(--cels-white);
	margin-bottom: 0.875rem;
}

/* Footer nav links */
.cels-footer .wp-block-navigation__container {
	flex-direction: column;
	gap: 0.625rem !important;
}

.cels-footer .wp-block-navigation-item__content {
	font-size: 0.9rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.7) !important;
	transition: color 0.2s;
}

.cels-footer .wp-block-navigation-item__content:hover {
	color: var(--cels-white) !important;
}

/* Social icons in footer */
.cels-footer .wp-block-social-links .wp-social-link {
	background: rgba(255, 255, 255, 0.08) !important;
	transition: transform 0.25s var(--ease-spring), background 0.2s;
}

.cels-footer .wp-block-social-links .wp-social-link:hover {
	background: var(--cels-forest) !important;
	transform: translateY(-3px);
}

/* Footer divider */
.cels-footer-divider {
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	margin: 3rem 0 1.75rem;
}

/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════════════════════════ */
@keyframes cels-fade-up {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Intersection Observer animation classes */
.cels-reveal {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity 0.7s var(--ease-spring), transform 0.7s var(--ease-spring);
}

.cels-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.cels-reveal--delay-1 { transition-delay: 0.1s; }
.cels-reveal--delay-2 { transition-delay: 0.2s; }
.cels-reveal--delay-3 { transition-delay: 0.3s; }
.cels-reveal--delay-4 { transition-delay: 0.4s; }
.cels-reveal--delay-5 { transition-delay: 0.5s; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
	.cels-hero-title {
		font-size: clamp(2.25rem, 8vw, 3.5rem);
	}

	.cels-card:hover,
	.cels-team-card:hover,
	.cels-impact-card:hover {
		transform: none;
		box-shadow: var(--cels-shadow);
	}

	.cels-floating-donate {
		bottom: 1.25rem;
		right: 1.25rem;
		padding: 0.75rem 1.375rem;
		font-size: 0.8rem;
	}

	.cels-split-section {
		grid-template-columns: 1fr;
	}

	.cels-split-panel {
		padding: 2.5rem 1.75rem;
	}
}

@media (max-width: 480px) {
	.cels-hero-actions {
		flex-direction: column;
		align-items: center;
	}

	.cels-hero-badge {
		font-size: 0.65rem;
	}
}

/* ═══════════════════════════════════════════════════════════════
   TOP UTILITY BAR (Lifeline-style)
═══════════════════════════════════════════════════════════════ */
.cels-topbar {
	background: var(--cels-forest-deeper);
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.8125rem;
	padding: 0.625rem 0;
	border-bottom: 1px solid rgba(255,255,255,0.06);
}

.cels-topbar-inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 1.5rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.cels-topbar-left,
.cels-topbar-right {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	flex-wrap: wrap;
}

.cels-topbar a {
	color: rgba(255,255,255,0.75);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	transition: color 0.2s;
	font-weight: 500;
}

.cels-topbar a:hover { color: var(--cels-gold); }

.cels-topbar svg {
	width: 14px;
	height: 14px;
	opacity: 0.7;
}

.cels-topbar-socials {
	display: flex;
	gap: 0.25rem;
}

.cels-topbar-socials a {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(255,255,255,0.06);
	justify-content: center;
	border: 1px solid rgba(255,255,255,0.05);
}

.cels-topbar-socials a:hover {
	background: var(--cels-gold);
	color: #fff;
	border-color: var(--cels-gold);
	transform: translateY(-2px);
}

.cels-topbar-socials svg { width: 13px; height: 13px; opacity: 0.9; }

@media (max-width: 720px) {
	.cels-topbar-inner { justify-content: center; text-align: center; }
	.cels-topbar-left  { justify-content: center; gap: 1rem; }
}

/* ═══════════════════════════════════════════════════════════════
   MAIN HEADER BAR — Lifeline white+nav+donate layout
═══════════════════════════════════════════════════════════════ */
.cels-header--lifeline {
	background: #fff;
	border-bottom: 1px solid var(--cels-border);
	position: sticky;
	top: 0;
	z-index: 200;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	transition: box-shadow 0.3s;
}

.cels-header--lifeline.is-scrolled {
	box-shadow: 0 4px 20px rgba(10,22,40,0.08);
}

.cels-header-inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	min-height: 86px;
}

.cels-logo-wrap {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
}

.cels-logo-mark {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--cels-forest) 0%, var(--cels-forest-dark) 100%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.25rem;
	letter-spacing: -0.02em;
	box-shadow: 0 6px 16px rgba(26,107,60,0.25);
}

.cels-logo-text {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.cels-logo-title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.05rem;
	color: var(--cels-black);
	letter-spacing: -0.02em;
}

.cels-logo-sub {
	font-family: var(--font-display);
	font-size: 0.65rem;
	color: var(--cels-muted);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	margin-top: 0.1rem;
}

.cels-nav {
	display: flex;
	align-items: center;
	gap: 2.25rem;
}

.cels-nav a {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--cels-black);
	text-decoration: none;
	position: relative;
	padding: 0.25rem 0;
	transition: color 0.2s;
}

.cels-nav a::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--cels-forest);
	transition: width 0.3s var(--ease-spring);
}

.cels-nav a:hover,
.cels-nav a.active {
	color: var(--cels-forest);
}

.cels-nav a:hover::after,
.cels-nav a.active::after { width: 100%; }

.cels-header-cta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.cels-header-donate {
	background: var(--cels-sunset);
	color: #fff !important;
	padding: 0.75rem 1.5rem;
	border-radius: 100px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.875rem;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(232,81,26,0.28);
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	transition: transform 0.25s var(--ease-spring), box-shadow 0.25s, background 0.2s;
}

.cels-header-donate:hover {
	background: #D14712;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(232,81,26,0.4);
}

.cels-header-donate svg { width: 16px; height: 16px; }

@media (max-width: 960px) {
	.cels-nav { display: none; }
	.cels-header-inner { min-height: 72px; }
}

/* ═══════════════════════════════════════════════════════════════
   PAGE BANNER (inner pages, Lifeline-style)
═══════════════════════════════════════════════════════════════ */
.cels-page-banner {
	position: relative;
	padding: 7rem 1.5rem 5rem;
	background: linear-gradient(135deg, var(--cels-forest-dark) 0%, var(--cels-forest-deeper) 100%);
	color: #fff;
	text-align: center;
	overflow: hidden;
	isolation: isolate;
}

.cels-page-banner::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 20% 30%, rgba(201,150,26,0.15) 0%, transparent 45%),
		radial-gradient(circle at 85% 70%, rgba(232,81,26,0.12) 0%, transparent 50%);
	z-index: -1;
}

.cels-page-banner::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
	background-size: 56px 56px;
	z-index: -1;
	mask-image: radial-gradient(ellipse at center, black 50%, transparent 90%);
}

.cels-page-banner__inner {
	max-width: 900px;
	margin: 0 auto;
	position: relative;
}

.cels-page-banner h1 {
	color: #fff;
	font-size: clamp(2.25rem, 4vw + 1rem, 3.75rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	margin: 0.75rem 0 1rem;
}

.cels-page-banner p {
	color: rgba(255,255,255,0.78);
	font-size: 1.05rem;
	max-width: 620px;
	margin: 0 auto;
	line-height: 1.7;
}

.cels-breadcrumbs {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	font-family: var(--font-display);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.65);
}

.cels-breadcrumbs a {
	color: var(--cels-gold);
	text-decoration: none;
}

.cels-breadcrumbs span { opacity: 0.5; }

/* ═══════════════════════════════════════════════════════════════
   WELCOME SPLIT SECTION (image left, text right)
═══════════════════════════════════════════════════════════════ */
.cels-welcome {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: center;
}

.cels-welcome-media {
	position: relative;
	padding: 0 1rem 1rem 0;
}

.cels-welcome-media__image {
	position: relative;
	border-radius: var(--cels-radius-lg);
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: linear-gradient(135deg, #1A6B3C 0%, #0F4A28 100%);
	box-shadow: var(--cels-shadow-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255,255,255,0.15);
	font-size: 8rem;
	font-family: var(--font-display);
	font-weight: 800;
}

.cels-welcome-media__image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cels-welcome-media__accent {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 55%;
	aspect-ratio: 4 / 5;
	border-radius: var(--cels-radius-lg);
	overflow: hidden;
	background: linear-gradient(135deg, var(--cels-gold) 0%, #8F6A0F 100%);
	box-shadow: var(--cels-shadow-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255,255,255,0.2);
	font-size: 6rem;
	font-family: var(--font-display);
	font-weight: 800;
	border: 6px solid var(--cels-off-white);
}

.cels-welcome-media__accent img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cels-welcome-badge {
	position: absolute;
	top: 8%;
	left: -18px;
	background: var(--cels-sunset);
	color: #fff;
	padding: 1.25rem 1.5rem;
	border-radius: var(--cels-radius);
	box-shadow: 0 20px 40px rgba(232,81,26,0.35);
	text-align: center;
	z-index: 2;
}

.cels-welcome-badge strong {
	display: block;
	font-family: var(--font-display);
	font-size: 2rem;
	font-weight: 800;
	line-height: 1;
}

.cels-welcome-badge span {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.9;
	display: block;
	margin-top: 0.375rem;
}

.cels-welcome-content h2 {
	margin-bottom: 1.25rem;
}

.cels-welcome-intro {
	font-size: 1.0625rem;
	color: var(--cels-muted);
	line-height: 1.8;
	margin-bottom: 1.75rem;
}

.cels-feature-list {
	list-style: none;
	padding: 0;
	margin: 0 0 2rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.875rem;
}

.cels-feature-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-size: 0.9375rem;
	color: var(--cels-black);
	font-weight: 600;
	font-family: var(--font-display);
}

.cels-feature-list li::before {
	content: '';
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--cels-forest-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%231A6B3C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 7l3.5 3.5L12 3.5'/%3E%3C/svg%3E") center/13px no-repeat;
	margin-top: 2px;
}

@media (max-width: 900px) {
	.cels-welcome { grid-template-columns: 1fr; gap: 3rem; }
	.cels-feature-list { grid-template-columns: 1fr; }
	.cels-welcome-media { padding: 0; max-width: 440px; margin: 0 auto; }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION HEADING (centered intro block)
═══════════════════════════════════════════════════════════════ */
.cels-section-head {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 3.5rem;
}

.cels-section-head .cels-section-label {
	justify-content: center;
}

.cels-section-head h2 {
	margin: 0.75rem 0 1rem;
}

.cels-section-head p {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--cels-muted);
}

/* ═══════════════════════════════════════════════════════════════
   CAUSE CARDS — with progress bar (Lifeline centrepiece)
═══════════════════════════════════════════════════════════════ */
.cels-cause-card {
	background: #fff;
	border-radius: var(--cels-radius-lg);
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(10,22,40,0.05);
	transition: transform 0.4s var(--ease-spring), box-shadow 0.4s var(--ease-spring);
	display: flex;
	flex-direction: column;
	height: 100%;
}

.cels-cause-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--cels-shadow-lg);
}

.cels-cause-media {
	position: relative;
	aspect-ratio: 16 / 10;
	background: linear-gradient(135deg, var(--cels-forest) 0%, var(--cels-forest-dark) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255,255,255,0.18);
	font-size: 4rem;
	overflow: hidden;
}

.cels-cause-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s var(--ease-smooth);
}

.cels-cause-card:hover .cels-cause-media img {
	transform: scale(1.08);
}

.cels-cause-tag {
	position: absolute;
	top: 1rem;
	left: 1rem;
	padding: 0.375rem 0.875rem;
	border-radius: 100px;
	background: rgba(255,255,255,0.95);
	color: var(--cels-forest);
	font-family: var(--font-display);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	backdrop-filter: blur(8px);
}

.cels-cause-body {
	padding: 1.75rem 1.75rem 2rem;
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	flex: 1;
}

.cels-cause-body h3 {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--cels-black);
	margin: 0;
	line-height: 1.3;
}

.cels-cause-body p {
	font-size: 0.9375rem;
	color: var(--cels-muted);
	line-height: 1.7;
	flex: 1;
	margin: 0;
}

.cels-progress {
	margin-top: 0.5rem;
}

.cels-progress-track {
	background: var(--cels-pearl);
	border-radius: 100px;
	height: 8px;
	overflow: hidden;
	position: relative;
}

.cels-progress-fill {
	height: 100%;
	border-radius: 100px;
	background: linear-gradient(90deg, var(--cels-forest) 0%, var(--cels-gold) 100%);
	position: relative;
	transition: width 1.8s var(--ease-smooth);
}

.cels-progress-fill::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: linear-gradient(45deg, rgba(255,255,255,0.2) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 75%, transparent 75%);
	background-size: 12px 12px;
	animation: cels-stripes 1s linear infinite;
}

@keyframes cels-stripes {
	from { background-position: 0 0; }
	to { background-position: 12px 0; }
}

.cels-progress-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 0.625rem;
	font-size: 0.8125rem;
	font-family: var(--font-display);
	font-weight: 600;
}

.cels-progress-raised { color: var(--cels-forest); }
.cels-progress-goal   { color: var(--cels-muted); }

.cels-cause-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 1rem;
	margin-top: 0.25rem;
	border-top: 1px solid var(--cels-border);
}

.cels-cause-link {
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--cels-forest);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	transition: gap 0.25s, color 0.2s;
}

.cels-cause-link:hover {
	gap: 0.75rem;
	color: var(--cels-sunset);
}

.cels-cause-link svg { width: 14px; height: 14px; }

.cels-cause-donate {
	padding: 0.625rem 1.25rem;
	background: var(--cels-sunset);
	color: #fff;
	border-radius: 100px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.8125rem;
	text-decoration: none;
	transition: background 0.2s, transform 0.25s;
}

.cels-cause-donate:hover {
	background: #D14712;
	color: #fff;
	transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════
   STATS COUNTER BAND (full-width photo bg, 4 counters)
═══════════════════════════════════════════════════════════════ */
.cels-counter-band {
	position: relative;
	padding: 5rem 1.5rem;
	background: linear-gradient(135deg, var(--cels-forest-dark) 0%, var(--cels-forest-deeper) 100%);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

.cels-counter-band::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 15% 50%, rgba(201,150,26,0.22) 0%, transparent 40%),
		radial-gradient(circle at 85% 50%, rgba(232,81,26,0.18) 0%, transparent 40%);
	z-index: -1;
}

.cels-counter-band::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
	background-size: 48px 48px;
	z-index: -1;
}

.cels-counter-grid {
	max-width: 1240px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
	text-align: center;
}

.cels-counter-item {
	position: relative;
}

.cels-counter-item + .cels-counter-item::before {
	content: '';
	position: absolute;
	left: -1rem;
	top: 15%;
	bottom: 15%;
	width: 1px;
	background: rgba(255,255,255,0.12);
}

.cels-counter-icon {
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.12);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--cels-gold);
	margin-bottom: 1.25rem;
}

.cels-counter-icon svg { width: 26px; height: 26px; }

.cels-counter-number {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(2.25rem, 4vw, 3.25rem);
	letter-spacing: -0.03em;
	line-height: 1;
	margin-bottom: 0.5rem;
	color: #fff;
	display: block;
}

.cels-counter-label {
	font-size: 0.85rem;
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.7);
}

@media (max-width: 780px) {
	.cels-counter-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1rem; }
	.cels-counter-item + .cels-counter-item::before { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   EVENT CARDS (with date badge)
═══════════════════════════════════════════════════════════════ */
.cels-event-card {
	background: #fff;
	border: 1px solid var(--cels-border);
	border-radius: var(--cels-radius-lg);
	overflow: hidden;
	display: grid;
	grid-template-columns: 170px 1fr;
	gap: 0;
	transition: transform 0.4s var(--ease-spring), box-shadow 0.4s, border-color 0.3s;
}

.cels-event-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--cels-shadow);
	border-color: transparent;
}

.cels-event-date {
	background: linear-gradient(135deg, var(--cels-forest) 0%, var(--cels-forest-dark) 100%);
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1.75rem 1rem;
	text-align: center;
	position: relative;
}

.cels-event-date::after {
	content: '';
	position: absolute;
	top: 20%;
	bottom: 20%;
	right: 0;
	width: 1px;
	background: rgba(255,255,255,0.15);
}

.cels-event-day {
	font-family: var(--font-display);
	font-size: 3rem;
	font-weight: 800;
	line-height: 0.9;
	letter-spacing: -0.03em;
}

.cels-event-month {
	font-family: var(--font-display);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-top: 0.5rem;
	color: var(--cels-gold);
}

.cels-event-year {
	font-size: 0.7rem;
	font-weight: 600;
	color: rgba(255,255,255,0.55);
	margin-top: 0.25rem;
	letter-spacing: 0.08em;
}

.cels-event-body {
	padding: 1.5rem 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	justify-content: center;
}

.cels-event-body h3 {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--cels-black);
	margin: 0;
	line-height: 1.35;
}

.cels-event-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	font-size: 0.8125rem;
	color: var(--cels-muted);
	font-family: var(--font-display);
	font-weight: 500;
}

.cels-event-meta span {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.cels-event-meta svg { width: 14px; height: 14px; color: var(--cels-forest); }

.cels-event-body p {
	font-size: 0.9rem;
	color: var(--cels-muted);
	margin: 0.125rem 0 0;
	line-height: 1.7;
}

@media (max-width: 540px) {
	.cels-event-card { grid-template-columns: 1fr; }
	.cels-event-date { padding: 1.25rem; }
	.cels-event-date::after { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   TESTIMONIAL CARDS
═══════════════════════════════════════════════════════════════ */
.cels-testimonial {
	background: #fff;
	border-radius: var(--cels-radius-lg);
	padding: 2.25rem 2rem;
	box-shadow: 0 2px 12px rgba(10,22,40,0.05);
	border: 1px solid var(--cels-border);
	position: relative;
	transition: transform 0.4s var(--ease-spring), box-shadow 0.4s;
}

.cels-testimonial:hover {
	transform: translateY(-6px);
	box-shadow: var(--cels-shadow-lg);
}

.cels-testimonial-quote {
	position: absolute;
	top: 1.25rem;
	right: 1.5rem;
	width: 48px;
	height: 48px;
	color: var(--cels-gold);
	opacity: 0.25;
}

.cels-testimonial-body {
	font-size: 1rem;
	line-height: 1.75;
	color: var(--cels-black);
	font-style: italic;
	margin: 0 0 1.5rem;
	font-weight: 500;
}

.cels-testimonial-stars {
	display: flex;
	gap: 0.125rem;
	margin-bottom: 1rem;
	color: var(--cels-gold);
}

.cels-testimonial-stars svg { width: 16px; height: 16px; fill: currentColor; }

.cels-testimonial-foot {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--cels-border);
}

.cels-testimonial-avatar {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.1rem;
	flex-shrink: 0;
}

.cels-testimonial-info {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.cels-testimonial-name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--cels-black);
}

.cels-testimonial-role {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cels-forest);
}

/* ═══════════════════════════════════════════════════════════════
   PARTNERS STRIP
═══════════════════════════════════════════════════════════════ */
.cels-partners {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 2rem;
	align-items: center;
	padding: 2rem 0;
}

.cels-partner {
	aspect-ratio: 3 / 1;
	border-radius: var(--cels-radius);
	background: #fff;
	border: 1px solid var(--cels-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.875rem;
	color: var(--cels-muted);
	letter-spacing: 0.02em;
	transition: transform 0.3s var(--ease-spring), box-shadow 0.3s, color 0.2s;
	padding: 1rem;
	text-align: center;
	opacity: 0.75;
}

.cels-partner:hover {
	transform: translateY(-4px);
	box-shadow: var(--cels-shadow);
	color: var(--cels-forest);
	opacity: 1;
	border-color: var(--cels-forest-light);
}

@media (max-width: 860px) {
	.cels-partners { grid-template-columns: repeat(3, 1fr); }
}

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

/* ═══════════════════════════════════════════════════════════════
   CTA BANNER BAND
═══════════════════════════════════════════════════════════════ */
.cels-cta-band {
	position: relative;
	padding: 4.5rem 2rem;
	background: linear-gradient(135deg, var(--cels-sunset) 0%, #A3300A 100%);
	color: #fff;
	border-radius: var(--cels-radius-xl);
	overflow: hidden;
	isolation: isolate;
}

.cels-cta-band::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 90% 20%, rgba(255,255,255,0.15) 0%, transparent 40%),
		radial-gradient(circle at 10% 80%, rgba(0,0,0,0.2) 0%, transparent 50%);
	z-index: -1;
}

.cels-cta-band__inner {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
	position: relative;
}

.cels-cta-band h2 {
	color: #fff;
	font-size: clamp(1.875rem, 3vw + 1rem, 2.875rem);
	margin: 0 0 1rem;
	letter-spacing: -0.03em;
}

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

.cels-cta-band .cels-hero-actions { margin-top: 1.25rem; }

.cels-cta-band .cels-btn--primary {
	background: #fff;
	color: var(--cels-sunset);
}

.cels-cta-band .cels-btn--primary:hover {
	background: var(--cels-forest);
	color: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   NEWS / BLOG CARDS
═══════════════════════════════════════════════════════════════ */
.cels-news-card {
	background: #fff;
	border-radius: var(--cels-radius-lg);
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(10,22,40,0.05);
	display: flex;
	flex-direction: column;
	transition: transform 0.4s var(--ease-spring), box-shadow 0.4s;
	height: 100%;
}

.cels-news-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--cels-shadow-lg);
}

.cels-news-media {
	position: relative;
	aspect-ratio: 16 / 10;
	background: linear-gradient(135deg, var(--cels-gold) 0%, #8F6A0F 100%);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255,255,255,0.2);
	font-size: 3rem;
}

.cels-news-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s;
}

.cels-news-card:hover .cels-news-media img { transform: scale(1.06); }

.cels-news-date {
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	background: rgba(255,255,255,0.96);
	color: var(--cels-black);
	padding: 0.5rem 0.875rem;
	border-radius: 10px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	backdrop-filter: blur(6px);
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.cels-news-date svg { width: 12px; height: 12px; color: var(--cels-sunset); }

.cels-news-body {
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	flex: 1;
}

.cels-news-meta {
	display: flex;
	gap: 0.75rem;
	font-size: 0.75rem;
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--cels-forest);
}

.cels-news-body h3 {
	font-size: 1.125rem;
	line-height: 1.4;
	margin: 0.25rem 0;
	color: var(--cels-black);
}

.cels-news-body p {
	font-size: 0.9rem;
	color: var(--cels-muted);
	line-height: 1.7;
	margin: 0;
	flex: 1;
}

.cels-news-link {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.8125rem;
	color: var(--cels-sunset);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.75rem;
	letter-spacing: 0.02em;
	transition: gap 0.25s;
}

.cels-news-link:hover { gap: 0.75rem; }

/* ═══════════════════════════════════════════════════════════════
   4-COLUMN DARK FOOTER (Lifeline-style)
═══════════════════════════════════════════════════════════════ */
.cels-footer-lifeline {
	background: var(--cels-forest-deeper);
	color: rgba(255,255,255,0.7);
	position: relative;
	overflow: hidden;
	padding: 5rem 1.5rem 0;
}

.cels-footer-lifeline::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--cels-forest), var(--cels-gold), var(--cels-sunset));
}

.cels-footer-lifeline::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 15% 20%, rgba(26,107,60,0.18) 0%, transparent 40%),
		radial-gradient(circle at 90% 80%, rgba(201,150,26,0.1) 0%, transparent 50%);
	pointer-events: none;
	z-index: 0;
}

.cels-footer-lifeline > * { position: relative; z-index: 1; }

.cels-footer-grid {
	max-width: 1240px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: 3rem;
	padding-bottom: 3rem;
}

@media (max-width: 900px) {
	.cels-footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}

@media (max-width: 540px) {
	.cels-footer-grid { grid-template-columns: 1fr; }
}

.cels-footer-col h4 {
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 700;
	color: #fff;
	margin: 0 0 1.5rem;
	position: relative;
	padding-bottom: 0.875rem;
}

.cels-footer-col h4::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 32px;
	height: 2px;
	background: var(--cels-gold);
	border-radius: 99px;
}

.cels-footer-brand-logo {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
}

.cels-footer-brand-logo .cels-logo-mark { box-shadow: none; }

.cels-footer-brand-logo .cels-logo-title { color: #fff; font-size: 1.1rem; }

.cels-footer-brand-logo .cels-logo-sub { color: rgba(255,255,255,0.5); }

.cels-footer-col p {
	font-size: 0.9rem;
	line-height: 1.75;
	color: rgba(255,255,255,0.65);
	margin-bottom: 1.25rem;
}

.cels-footer-contact {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.cels-footer-contact li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-size: 0.875rem;
	line-height: 1.6;
	color: rgba(255,255,255,0.7);
}

.cels-footer-contact svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--cels-gold);
	margin-top: 0.15rem;
}

.cels-footer-links {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.cels-footer-links a {
	color: rgba(255,255,255,0.7);
	text-decoration: none;
	font-size: 0.9rem;
	transition: color 0.2s, padding-left 0.25s;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.25rem 0;
}

.cels-footer-links a::before {
	content: '›';
	color: var(--cels-gold);
	font-weight: 700;
	transition: transform 0.25s var(--ease-spring);
}

.cels-footer-links a:hover {
	color: #fff;
	padding-left: 0.25rem;
}

.cels-footer-links a:hover::before { transform: translateX(2px); }

.cels-newsletter-form {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.cels-newsletter-form input {
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 100px;
	padding: 0.75rem 1.25rem;
	color: #fff;
	font-size: 0.875rem;
	font-family: var(--font-body);
	width: 100%;
	transition: border-color 0.2s, background 0.2s;
}

.cels-newsletter-form input::placeholder { color: rgba(255,255,255,0.4); }

.cels-newsletter-form input:focus {
	outline: none;
	border-color: var(--cels-gold);
	background: rgba(255,255,255,0.1);
}

.cels-newsletter-form button {
	background: var(--cels-sunset);
	color: #fff;
	border: 0;
	border-radius: 100px;
	padding: 0.75rem 1.5rem;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.05em;
	cursor: pointer;
	transition: background 0.2s, transform 0.25s;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	justify-content: center;
}

.cels-newsletter-form button:hover {
	background: #D14712;
	transform: translateY(-2px);
}

.cels-footer-socials {
	display: flex;
	gap: 0.5rem;
	margin-top: 1.25rem;
}

.cels-footer-socials a {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.08);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: rgba(255,255,255,0.7);
	text-decoration: none;
	transition: background 0.2s, transform 0.25s, border-color 0.2s, color 0.2s;
}

.cels-footer-socials a:hover {
	background: var(--cels-gold);
	color: #fff;
	border-color: var(--cels-gold);
	transform: translateY(-3px);
}

.cels-footer-socials svg { width: 15px; height: 15px; }

.cels-footer-bottom {
	max-width: 1240px;
	margin: 0 auto;
	padding: 1.5rem 0;
	border-top: 1px solid rgba(255,255,255,0.08);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	font-size: 0.8rem;
	color: rgba(255,255,255,0.45);
}

.cels-footer-bottom a { color: rgba(255,255,255,0.6); text-decoration: none; margin-left: 1.25rem; }
.cels-footer-bottom a:hover { color: #fff; }

/* ═══════════════════════════════════════════════════════════════
   MISSION / VISION CARD
═══════════════════════════════════════════════════════════════ */
.cels-mv-card {
	background: #fff;
	border: 1px solid var(--cels-border);
	border-radius: var(--cels-radius-lg);
	padding: 2.5rem 2.25rem;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	position: relative;
	overflow: hidden;
	transition: transform 0.4s var(--ease-spring), box-shadow 0.4s;
}

.cels-mv-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--cels-shadow-lg);
}

.cels-mv-card::before {
	content: '';
	position: absolute;
	top: -60px;
	right: -60px;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	opacity: 0.1;
}

.cels-mv-card--vision::before { background: var(--cels-forest); }
.cels-mv-card--mission::before { background: var(--cels-sunset); }

.cels-mv-icon {
	width: 58px;
	height: 58px;
	border-radius: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0.5rem;
}

.cels-mv-card--vision .cels-mv-icon { background: var(--cels-forest-light); color: var(--cels-forest); }
.cels-mv-card--mission .cels-mv-icon { background: var(--cels-sunset-light); color: var(--cels-sunset); }

.cels-mv-icon svg { width: 28px; height: 28px; }

.cels-mv-card h3 {
	font-size: 1.625rem;
	font-weight: 700;
	margin: 0;
}

.cels-mv-card p {
	font-size: 1rem;
	line-height: 1.75;
	color: var(--cels-muted);
	margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT HELPERS
═══════════════════════════════════════════════════════════════ */
.cels-container {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.cels-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
}

.cels-grid-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.75rem;
}

.cels-grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}

@media (max-width: 900px) {
	.cels-grid-3, .cels-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
	.cels-grid-3, .cels-grid-4, .cels-grid-2 { grid-template-columns: 1fr; }
}

.cels-section {
	padding: 5rem 1.5rem;
}

.cels-section--tight { padding: 3.5rem 1.5rem; }
.cels-section--lg    { padding: 7rem 1.5rem; }

@media (max-width: 720px) {
	.cels-section { padding: 3.5rem 1.25rem; }
	.cels-section--lg { padding: 4.5rem 1.25rem; }
}

/* ═══════════════════════════════════════════════════════════════
   CUSTOM ILLUSTRATIONS (welcome + programs + contact map)
═══════════════════════════════════════════════════════════════ */

/* Welcome / About split image — hold an SVG illustration nicely
   (contain, not cover, with warm cream backdrop) */
.cels-welcome-media__image--illustration {
	background: linear-gradient(135deg, #FDF6E3 0%, #FEF0EB 60%, #E8F5EE 100%);
	border: 1px solid var(--cels-border);
	aspect-ratio: 4 / 5;
	padding: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	color: transparent; /* hide the legacy letter fallback */
}

.cels-welcome-media__image--illustration[src],
img.cels-welcome-media__image--illustration {
	position: relative;
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* When the <img> carries the illustration class directly (no wrapper div),
   reset inset positioning that the generic "img inside image" rule applies. */
.cels-welcome-media img.cels-welcome-media__image--illustration {
	position: relative;
	inset: auto;
}

/* Program-row illustrations (programs page) */
.cels-program-illustration {
	width: 85%;
	max-width: 420px;
	height: auto;
	display: block;
	margin: 0 auto;
	filter: drop-shadow(0 10px 30px rgba(10,22,40,0.18));
	transition: transform 0.45s var(--ease-spring);
}

.cels-program-row:hover .cels-program-illustration {
	transform: translateY(-4px) scale(1.02);
}

/* Keep the colored gradient card behind the illustration */
.cels-program-media {
	padding: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cels-program-media .cels-program-number {
	z-index: 2;
}

/* Contact map illustration fills its container edge-to-edge */
.cels-contact-map-illustration {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Homepage cause-card illustrations */
.cels-cause-illustration {
	width: 78%;
	max-width: 260px;
	height: auto;
	display: block;
	margin: 0 auto;
	filter: drop-shadow(0 6px 18px rgba(10,22,40,0.12));
	transition: transform 0.4s var(--ease-spring);
}

.cels-cause-card:hover .cels-cause-illustration {
	transform: translateY(-3px) scale(1.03);
}

/* Ensure the tag sits above the illustration */
.cels-cause-media {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
	position: relative;
}
.cels-cause-tag { z-index: 2; }

/* Mobile tuning */
@media (max-width: 820px) {
	.cels-welcome-media__image--illustration {
		aspect-ratio: 4 / 3;
		padding: 1.5rem;
	}
	.cels-program-illustration {
		width: 100%;
		max-width: 340px;
	}
}