@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100..900&display=swap');

/* ===========================================================================
   Cheza Sports Foundation — stylesheet
   Rewritten 2026-08-23 as a single pass.

   This replaces nineteen appended "parts" that had accumulated into 123KB of
   rules overriding each other. Every colour below now appears exactly once,
   so what you read is what renders.

   BRAND
     Royal blue   #0050BF   70% — header, bands, footer, links
     Golden yellow #FFDF00  30% — calls to action, rules, accents
     Lexend Deca throughout

   CONTRAST (why the darker blues exist)
     #0050BF on white ....... 7.2:1   safe for body text and the header
     white on #0050BF ....... 7.2:1
     #002A61 on white ....... 14.0:1  deep field behind photographs
     #002A61 on #FFDF00 ..... 10.5:1  yellow buttons, blue labels
     #FFDF00 on white ....... 1.3:1   NEVER use yellow as text on light
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------------------- */

:root {
	--cz-blue:      #0050BF;   /* the brand blue */
	--cz-blue-deep: #002A61;   /* scrims, footer, dark fields */
	--cz-blue-lift: #2E76E8;   /* hover only */

	--cz-yellow:      #FFDF00;
	--cz-yellow-soft: #FFE95C;
	--cz-yellow-ink:  #7A5F00; /* small "yellow" text on light backgrounds */

	--cz-ink:     #16203a;
	--cz-muted:   #5a6478;
	--cz-white:   #ffffff;
	--cz-alt:     #f4f6fb;
	--cz-line:    #dde2ee;

	--cz-font: 'Lexend Deca', system-ui, -apple-system, 'Segoe UI', sans-serif;

	--cz-sm: clamp(1rem, 2vw, 1.5rem);
	--cz-md: clamp(2rem, 5vw, 3.5rem);
	--cz-lg: clamp(2.75rem, 6vw, 5rem);
	--cz-maxw: 1180px;

	--cz-ease: cubic-bezier(0.2, 0.7, 0.3, 1);

	--cz-shadow: 0 1px 2px rgba(0,42,97,.07), 0 8px 24px -6px rgba(0,42,97,.18);
	--cz-shadow-lift: 0 2px 6px rgba(0,42,97,.10), 0 22px 48px -12px rgba(0,42,97,.30);

	/* Header. Change these two to restyle the bar; everything follows. */
	--cz-header-bg:  var(--cz-blue);
	--cz-header-ink: var(--cz-white);
}


/* ===========================================================================
   2. HEADER

   The bar is Royal Addons, not Elementor Pro, so there is no
   .elementor-location-header on this site. These rules match on structure —
   the header element, the theme-builder wrapper, the nav and its list — and
   the body carries the same blue so any transparent wrapper reveals blue
   rather than a stray dark colour underneath.
   =========================================================================== */

body.cheza-redesign {
	background-color: var(--cz-header-bg);
	font-family: var(--cz-font);
}

.cheza-redesign header,
.cheza-redesign > header,
.cheza-redesign #masthead,
.cheza-redesign .site-header,
.cheza-redesign .elementor-location-header,
.cheza-redesign [data-elementor-type="header"] {
	background-color: var(--cz-header-bg) !important;
	background-image: none !important;
	position: relative;
	z-index: 50;
	border-bottom: 3px solid var(--cz-yellow) !important;
	box-shadow: 0 2px 14px -4px rgba(0, 42, 97, 0.4);
}

/* Clear every inner fill so nothing paints a panel behind the menu.
   Links, buttons, images and SVG are excluded. */
.cheza-redesign header *:not(a):not(button):not(img):not(svg):not([class*="button"]):not([class*="btn"]),
.cheza-redesign [data-elementor-type="header"] *:not(a):not(button):not(img):not(svg):not([class*="button"]):not([class*="btn"]),
.cheza-redesign .elementor-location-header *:not(a):not(button):not(img):not(svg):not([class*="button"]):not([class*="btn"]) {
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

/* Nav links — white, uppercase, yellow on hover. */
.cheza-redesign header a:not([class*="button"]):not([class*="btn"]),
.cheza-redesign nav a:not([class*="button"]):not([class*="btn"]),
.cheza-redesign .wpr-nav-menu a:not([class*="button"]),
.cheza-redesign ul.menu > li > a:not([class*="button"]) {
	position: relative;
	font-family: var(--cz-font) !important;
	font-size: 0.88rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.11em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	color: var(--cz-header-ink) !important;
	-webkit-text-fill-color: var(--cz-header-ink) !important;
	transition: color 0.2s ease;
}

.cheza-redesign header a:not([class*="button"]):hover,
.cheza-redesign nav a:not([class*="button"]):hover,
.cheza-redesign .wpr-nav-menu a:not([class*="button"]):hover,
.cheza-redesign ul.menu > li > a:not([class*="button"]):hover {
	color: var(--cz-yellow) !important;
	-webkit-text-fill-color: var(--cz-yellow) !important;
}

/* The logo link must not inherit nav typography. */
.cheza-redesign header a:has(img) {
	letter-spacing: normal !important;
	font-size: inherit !important;
}

/* Underline grows from the centre. Drawn as a pseudo-element because a
   border cannot animate its width. */
.cheza-redesign header nav a::after,
.cheza-redesign [data-elementor-type="header"] nav a::after {
	content: '';
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: -0.45rem;
	height: 3px;
	background: var(--cz-yellow);
	transition: left 0.28s var(--cz-ease), right 0.28s var(--cz-ease);
}

.cheza-redesign header nav a:hover::after,
.cheza-redesign [data-elementor-type="header"] nav a:hover::after {
	left: 0;
	right: 0;
}

.cheza-redesign header a:has(img)::after { display: none !important; }

/* GET STARTED — white fill, blue label, yellow on hover. */
.cheza-redesign header .elementor-button,
.cheza-redesign header a[class*="button"],
.cheza-redesign header .wpr-button,
.cheza-redesign nav a[class*="button"],
.cheza-redesign ul.menu > li > a[class*="button"] {
	background-color: var(--cz-white) !important;
	background-image: none !important;
	border: 2px solid var(--cz-white) !important;
	border-radius: 2px !important;
	font-family: var(--cz-font) !important;
	font-size: 0.88rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	box-shadow: 0 2px 10px -2px rgba(0, 42, 97, 0.35) !important;
	transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.cheza-redesign header .elementor-button,
.cheza-redesign header .elementor-button *,
.cheza-redesign header a[class*="button"],
.cheza-redesign header a[class*="button"] *,
.cheza-redesign header .wpr-button,
.cheza-redesign header .wpr-button *,
.cheza-redesign nav a[class*="button"],
.cheza-redesign nav a[class*="button"] * {
	color: var(--cz-blue) !important;
	-webkit-text-fill-color: var(--cz-blue) !important;
}

.cheza-redesign header .elementor-button:hover,
.cheza-redesign header a[class*="button"]:hover,
.cheza-redesign header .wpr-button:hover,
.cheza-redesign nav a[class*="button"]:hover {
	background-color: var(--cz-yellow) !important;
	border-color: var(--cz-yellow) !important;
	transform: translateY(-1px);
}

/* Hide the theme footer, and anything the theme appends after our content. */
.cheza-redesign .elementor-location-footer,
.cheza-redesign [data-elementor-type="footer"],
.cheza-redesign footer#colophon,
.cheza-redesign .site-footer,
.cheza-redesign main.cz ~ *:not(script):not(style):not(template) {
	display: none !important;
}

.cheza-redesign .elementor-location-single,
.cheza-redesign .site-content,
.cheza-redesign #content,
.cheza-redesign .content-area {
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
}


/* ===========================================================================
   3. MOBILE HEADER
   =========================================================================== */

@media (max-width: 1024px) {
	.cheza-redesign [class*="mobile-toggle"],
	.cheza-redesign [class*="menu-toggle"],
	.cheza-redesign [class*="hamburger"],
	.cheza-redesign button[class*="toggle"],
	.cheza-redesign a[class*="toggle"] {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		padding: 0.5rem 0.6rem !important;
		font-size: 1.5rem !important;
		color: var(--cz-white) !important;
		background: rgba(255,255,255,.14) !important;
		border: 1px solid rgba(255,255,255,.4) !important;
		border-radius: 3px !important;
	}

	.cheza-redesign [class*="toggle"] span,
	.cheza-redesign [class*="hamburger"] span { background-color: var(--cz-white) !important; }

	.cheza-redesign [class*="toggle"] svg,
	.cheza-redesign [class*="toggle"] path,
	.cheza-redesign [class*="toggle"] i { color: var(--cz-white) !important; }

	.cheza-redesign .wpr-mobile-nav-menu,
	.cheza-redesign [class*="mobile-menu"],
	.cheza-redesign [class*="mobile-nav"],
	.cheza-redesign nav ul.menu,
	.cheza-redesign nav > ul {
		background-color: var(--cz-blue-deep) !important;
		border: 1px solid rgba(255,255,255,.14) !important;
		border-radius: 4px !important;
		padding: 0.35rem 0 !important;
		box-shadow: 0 24px 48px -12px rgba(0,0,0,.55),
		            0 3px 0 0 var(--cz-yellow) inset !important;
	}

	.cheza-redesign .wpr-mobile-nav-menu li,
	.cheza-redesign nav ul.menu > li,
	.cheza-redesign nav > ul > li {
		border-bottom: 1px solid rgba(255,255,255,.10) !important;
	}

	.cheza-redesign nav a,
	.cheza-redesign .wpr-mobile-nav-menu a {
		display: block !important;
		padding: 0.95rem 1.15rem !important;
	}

	.cheza-redesign nav a:hover { background: rgba(255,255,255,.08) !important; }

	/* Our in-page jump nav is not the site menu. */
	.cz .cz-jump ul,
	.cz .cz-jump__inner {
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
	}
	.cz .cz-jump a { display: inline-block !important; padding: 0 !important; }
	.cz .cz-jump li { border: 0 !important; }
}


/* ===========================================================================
   4. PAGE SHELL AND TYPE
   =========================================================================== */

.cz {
	font-family: var(--cz-font);
	color: var(--cz-ink);
	background: var(--cz-white);
	overflow-x: hidden;
}

.cz *, .cz *::before, .cz *::after { box-sizing: border-box; }
.cz img { max-width: 100%; height: auto; display: block; }

.cz-wrap {
	width: 100%;
	max-width: var(--cz-maxw);
	margin-inline: auto;
	padding-inline: var(--cz-sm);
	background: transparent;
}

.cz-h2 {
	font-size: clamp(1.7rem, 3.4vw, 2.5rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	color: var(--cz-blue-deep);
	margin: 0 0 0.5em;
}

.cz-h3, .cz-def__title, .cz-route__title, .cz-way__title,
.cz-give__title, .cz-win__title, .cz-post__title, .cz-shortcut__title {
	font-family: var(--cz-font);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	color: var(--cz-blue-deep);
	margin: 0 0 0.4em;
}

.cz-h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); }

.cz-lede {
	font-size: clamp(1rem, 1.2vw, 1.14rem);
	line-height: 1.7;
	color: var(--cz-muted);
	max-width: 58ch;
	margin: 0 0 1.25em;
	text-wrap: pretty;
}

.cz-eyebrow {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cz-yellow);
	margin: 0 0 1rem;
}

.cz-subhead {
	display: inline-block;
	font-size: clamp(1.15rem, 2vw, 1.5rem);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--cz-blue-deep);
	margin: var(--cz-md) 0 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 3px solid var(--cz-yellow);
}

.cz-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--cz-blue);
	text-decoration: none;
	border-bottom: 2px solid var(--cz-yellow);
	padding-bottom: 2px;
	transition: color .18s ease, border-color .18s ease;
}

.cz-link::after { content: '→'; transition: transform .18s ease; }
.cz-link:hover { color: var(--cz-blue-lift); border-color: var(--cz-blue-lift); }
.cz-link:hover::after { transform: translateX(3px); }

.cz-note { margin: 0.85rem 0 0; font-size: 0.88rem; color: var(--cz-muted); }


/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */

.cz-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 2rem 0 0; }

.cz-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--cz-font);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	padding: 0.95em 1.9em;
	border: 2px solid transparent;
	border-radius: 2px;
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease,
	            border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.cz-btn--sm { padding: 0.7em 1.4em; font-size: 0.88rem; }

.cz-btn--gold {
	background: var(--cz-yellow);
	border-color: var(--cz-yellow);
	color: var(--cz-blue-deep);
	box-shadow: 0 2px 10px -2px rgba(255,223,0,.5);
}

.cz-btn--gold:hover {
	background: var(--cz-yellow-soft);
	border-color: var(--cz-yellow-soft);
	color: var(--cz-blue-deep);
	transform: translateY(-1px);
	box-shadow: 0 8px 22px -6px rgba(255,223,0,.55);
}

.cz-btn--ghost {
	background: transparent;
	color: var(--cz-white);
	border-color: rgba(255,255,255,.55);
}

.cz-btn--ghost:hover { background: rgba(255,255,255,.12); border-color: var(--cz-white); }

.cz a:focus-visible, .cz .cz-btn:focus-visible {
	outline: 3px solid var(--cz-yellow);
	outline-offset: 3px;
}


/* ===========================================================================
   5. HERO AND FEATURE BANDS

   Positive z-index inside an overflow-hidden parent. The earlier negative
   z-index approach let photographs bleed over the sections below whenever an
   ancestor created its own stacking context.
   =========================================================================== */

.cz-hero, .cz-feature, .cz-phero {
	position: relative;
	overflow: hidden;
	display: grid;
	align-items: end;
	background: var(--cz-blue-deep);
}

.cz-hero { min-height: clamp(30rem, 82vh, 46rem); }
.cz-feature { min-height: clamp(22rem, 56vh, 34rem); }
.cz-phero { min-height: clamp(18rem, 44vh, 26rem); }
.cz-phero--short { min-height: clamp(15rem, 34vh, 21rem); }

.cz-hero__img, .cz-feature__img, .cz-phero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.cz-hero__scrim, .cz-feature__scrim, .cz-phero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.cz-hero__scrim {
	background: linear-gradient(to top,
		rgba(0,42,97,.94) 0%, rgba(0,42,97,.74) 38%,
		rgba(0,42,97,.32) 70%, rgba(0,42,97,.46) 100%);
}

.cz-feature__scrim {
	background: linear-gradient(to top,
		rgba(0,42,97,.93) 0%, rgba(0,42,97,.64) 45%, rgba(0,42,97,.14) 100%);
}

.cz-phero__scrim {
	background: linear-gradient(to top,
		rgba(0,42,97,.94) 0%, rgba(0,42,97,.72) 55%, rgba(0,42,97,.36) 100%);
}

.cz-hero__inner, .cz-feature__inner, .cz-phero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--cz-maxw);
	margin-inline: auto;
	padding-inline: var(--cz-sm);
	color: var(--cz-white);
}

.cz-hero__inner { padding-block: var(--cz-lg); }
.cz-feature__inner, .cz-phero__inner { padding-block: var(--cz-md); }

.cz-hero__title {
	font-size: clamp(2.1rem, 5.6vw, 4.1rem);
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	color: var(--cz-white);
	margin: 0 0 0.4em;
	text-shadow: 0 2px 24px rgba(0,0,0,.35);
}

.cz-hero__word { display: block; }

.cz-hero__lede {
	font-size: clamp(1.02rem, 1.4vw, 1.22rem);
	line-height: 1.65;
	max-width: 56ch;
	margin: 0;
	color: rgba(255,255,255,.92);
}

.cz-phero__title {
	font-size: clamp(2rem, 4.6vw, 3.2rem);
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	color: var(--cz-white);
	margin: 0 0 0.35em;
}

.cz-phero__lede {
	margin: 0;
	max-width: 56ch;
	font-size: clamp(1rem, 1.3vw, 1.14rem);
	line-height: 1.65;
	color: rgba(255,255,255,.88);
}

.cz-phero--plain {
	min-height: 0;
	background: var(--cz-blue-deep);
	background-image: radial-gradient(120% 120% at 12% 0%, rgba(0,80,191,.55) 0%, transparent 55%);
}

.cz-phero--plain .cz-phero__inner { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

.cz-feature__img { transform: scale(1.04); transition: transform 1.6s var(--cz-ease); }
.cz-feature.is-in .cz-feature__img { transform: scale(1); }

.cz-feature__title {
	font-size: clamp(1.6rem, 3.4vw, 2.6rem);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--cz-white);
	margin: 0 0 0.5rem;
	max-width: 16ch;
	text-shadow: 0 2px 18px rgba(0,0,0,.3);
}

.cz-feature__caption {
	margin: 0;
	max-width: 46ch;
	font-size: 0.98rem;
	line-height: 1.65;
	color: rgba(255,255,255,.82);
	border-left: 3px solid var(--cz-yellow);
	padding-left: 0.9rem;
}


/* ===========================================================================
   6. SECTIONS
   =========================================================================== */

.cz-stats, .cz-split, .cz-prog, .cz-gallery, .cz-support,
.cz-band, .cz-vision, .cz-wins, .cz-cta, .cz-give, .cz-routes, .cz-footer {
	position: relative;
	z-index: 1;
}

.cz-split, .cz-prog, .cz-gallery, .cz-band, .cz-vision, .cz-wins, .cz-give {
	padding-block: var(--cz-lg);
}

.cz-routes { padding-block: clamp(2rem, 4vw, 3rem); background: var(--cz-white); }
.cz-band { background: var(--cz-white); }
.cz-band:nth-of-type(even), .cz-gallery { background: var(--cz-alt); }
.cz-split:nth-of-type(even) { background: var(--cz-alt); }

.cz-sectionhead { max-width: 46rem; margin-bottom: var(--cz-md); }
.cz-sectionhead--light .cz-h2 { color: var(--cz-white); }
.cz-sectionhead--light .cz-lede { color: rgba(255,255,255,.78); }


/* Stat band ---------------------------------------------------------------- */

.cz-stats { background: var(--cz-blue); color: var(--cz-white); padding-block: var(--cz-md); }

.cz-stats__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: var(--cz-sm);
}

.cz-stat {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding-left: 1rem;
	border-left: 3px solid var(--cz-yellow);
}

.cz-stat__value {
	font-size: clamp(2.1rem, 3.8vw, 2.9rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
}

.cz-stat__label { font-size: 0.95rem; font-weight: 600; }
.cz-stat__note { font-size: 0.82rem; color: rgba(255,255,255,.72); }


/* Split panels ------------------------------------------------------------- */

.cz-split__grid { display: grid; grid-template-columns: 1fr; gap: var(--cz-md); align-items: center; }

.cz-split__media { position: relative; margin: 0; }

.cz-split__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 3px;
	box-shadow: var(--cz-shadow);
	transition: transform .55s var(--cz-ease), box-shadow .55s var(--cz-ease);
}

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

.cz-split__media::after {
	content: '';
	position: absolute;
	left: -0.75rem;
	bottom: -0.75rem;
	width: 4.5rem;
	height: 4.5rem;
	border-left: 3px solid var(--cz-yellow);
	border-bottom: 3px solid var(--cz-yellow);
	pointer-events: none;
	transition: transform .55s var(--cz-ease);
}

.cz-split__media:hover::after { transform: translate(-6px, 6px); }

@media (min-width: 860px) {
	.cz-split__grid { grid-template-columns: 1fr 1fr; gap: var(--cz-lg); }
	.cz-split--flip .cz-split__media { order: 2; }
	.cz-split--flip .cz-split__media::after {
		left: auto; right: -0.75rem;
		border-left: 0; border-right: 3px solid var(--cz-yellow);
	}
	.cz-split--flip .cz-split__media:hover::after { transform: translate(6px, 6px); }
}


/* Programme grid ----------------------------------------------------------- */

.cz-prog__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	border-top: 1px solid var(--cz-line);
}

.cz-prog__item {
	padding: var(--cz-md) var(--cz-sm) var(--cz-sm) 0;
	border-bottom: 1px solid var(--cz-line);
}

@media (min-width: 700px) {
	.cz-prog__item { border-right: 1px solid var(--cz-line); padding-inline: var(--cz-sm); }
	.cz-prog__item:first-child { padding-left: 0; }
	.cz-prog__item:last-child { border-right: 0; }
}

.cz-prog__num {
	display: block;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--cz-yellow-ink);
	margin-bottom: 0.9rem;
}

.cz-prog__item p { margin: 0; font-size: 0.96rem; line-height: 1.65; color: var(--cz-muted); }


/* Gallery ------------------------------------------------------------------ */

.cz-gallery .cz-h2 { text-align: left; margin-bottom: var(--cz-sm); }

.cz-gallery__strip {
	margin-top: var(--cz-md);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.85rem;
}

@media (min-width: 820px) { .cz-gallery__strip { grid-template-columns: repeat(4, 1fr); } }

.cz-gallery__cell {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: 3px;
	background: var(--cz-line);
	box-shadow: var(--cz-shadow);
	transition: transform .45s var(--cz-ease), box-shadow .45s var(--cz-ease);
}

.cz-gallery__cell:hover { transform: translateY(-4px); box-shadow: var(--cz-shadow-lift); z-index: 2; }

.cz-gallery__cell img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	transition: transform .6s var(--cz-ease);
}

.cz-gallery__cell:hover img { transform: scale(1.04); }

.cz-gallery__caption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 1.5rem 0.9rem 0.7rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cz-white);
	background: linear-gradient(to top, rgba(0,42,97,.9), rgba(0,42,97,0));
	opacity: 0;
	transform: translateY(0.4rem);
	transition: opacity .28s ease, transform .28s ease;
}

@media (hover: hover) {
	.cz-gallery__cell:hover .cz-gallery__caption { opacity: 1; transform: none; }
}

@media (hover: none) { .cz-gallery__caption { opacity: 1; transform: none; } }


/* Support / give / CTA ----------------------------------------------------- */

.cz-support {
	padding-top: var(--cz-lg);
	padding-bottom: var(--cz-md);
	background: var(--cz-blue-deep);
	color: var(--cz-white);
}

.cz-ways, .cz-give__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: var(--cz-sm);
}

.cz-way, .cz-give__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.4rem;
	padding: 1.5rem 1.35rem;
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 3px;
	transition: transform .4s var(--cz-ease), border-color .4s var(--cz-ease),
	            background-color .4s var(--cz-ease);
}

.cz-way:hover, .cz-give__card:hover {
	transform: translateY(-4px);
	border-color: var(--cz-yellow);
	background: rgba(255,255,255,.08);
}

.cz-way__kicker, .cz-give__kicker {
	margin: 0;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--cz-yellow);
}

.cz-way__title, .cz-give__title { color: var(--cz-white); font-size: 1.45rem; margin: 0; }

.cz-way__body, .cz-give__body {
	margin: 0 0 1rem;
	font-size: 0.94rem;
	line-height: 1.6;
	color: rgba(255,255,255,.78);
}

.cz-way .cz-btn, .cz-give__card .cz-btn { margin-top: auto; }

.cz-give { background: var(--cz-blue-deep); color: var(--cz-white); }
.cz-give__icon { font-size: 2rem; color: var(--cz-yellow); margin-bottom: 0.5rem; }

.cz-cta {
	padding-block: clamp(2.75rem, 6vw, 4.5rem);
	background: var(--cz-blue);
	color: var(--cz-white);
}

.cz-cta__inner .cz-h2 { color: var(--cz-white); }
.cz-cta__inner .cz-lede { color: rgba(255,255,255,.85); }
.cz-cta__inner .cz-actions { margin-top: 1.5rem; }
.cz-cta__ball { display: block; font-size: 2.5rem; color: var(--cz-yellow); margin-bottom: 0.75rem; }


/* ===========================================================================
   7. INTERIOR PAGE COMPONENTS
   =========================================================================== */

.cz-jump {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--cz-blue);
	border-top: 1px solid rgba(255,255,255,.12);
	border-bottom: 3px solid var(--cz-yellow);
}

.cz-jump__inner {
	display: flex;
	gap: clamp(1rem, 3vw, 2.25rem);
	overflow-x: auto;
	padding-block: 0.85rem;
	scrollbar-width: none;
}

.cz-jump__inner::-webkit-scrollbar { display: none; }

.cz-jump a {
	flex: none;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255,255,255,.8);
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 2px solid transparent;
	transition: color .2s ease, border-color .2s ease;
}

.cz-jump a:hover { color: var(--cz-white); border-color: var(--cz-yellow); }

.cz-page [id] { scroll-margin-top: 4.5rem; }


/* Definition lists --------------------------------------------------------- */

.cz-defs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(1.25rem, 2.5vw, 2rem);
	grid-template-columns: 1fr;
}

@media (min-width: 640px)  { .cz-defs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cz-defs { grid-template-columns: repeat(3, 1fr); } }

.cz-defs--3 { grid-template-columns: 1fr; }
@media (min-width: 900px) { .cz-defs--3 { grid-template-columns: repeat(3, 1fr); } }

.cz-defs--4 { grid-template-columns: 1fr; }
@media (min-width: 640px)  { .cz-defs--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cz-defs--4 { grid-template-columns: repeat(4, 1fr); } }

.cz-def { padding-left: 1rem; border-left: 3px solid var(--cz-yellow); }
.cz-def__title { font-size: 1.15rem; margin: 0 0 0.4rem; }
.cz-def__body { margin: 0; font-size: 0.96rem; line-height: 1.65; color: var(--cz-muted); }


/* Chips -------------------------------------------------------------------- */

.cz-chips { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .cz-chips { grid-template-columns: repeat(2, 1fr); } }

.cz-chip {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 0.9rem 1.1rem;
	background: var(--cz-white);
	border: 1px solid var(--cz-line);
	border-radius: 3px;
	transition: border-color .3s var(--cz-ease), box-shadow .3s var(--cz-ease);
}

.cz-chip:hover { border-color: var(--cz-yellow); box-shadow: var(--cz-shadow); }

.cz-chip strong {
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cz-blue);
}

.cz-chip span { font-size: 0.94rem; line-height: 1.6; color: var(--cz-muted); }


/* Vision ------------------------------------------------------------------- */

.cz-vision__grid { display: grid; grid-template-columns: 1fr; gap: var(--cz-md); align-items: center; }
@media (min-width: 900px) { .cz-vision__grid { grid-template-columns: 0.9fr 1.1fr; gap: var(--cz-lg); } }

.cz-vision__media { margin: 0; }

.cz-vision__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 3px;
	box-shadow: var(--cz-shadow);
	transition: transform .55s var(--cz-ease), box-shadow .55s var(--cz-ease);
}

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

.cz-quote {
	position: relative;
	margin: 0 0 1.25rem;
	padding-left: 2.25rem;
	font-size: clamp(1.2rem, 2.2vw, 1.6rem);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--cz-blue-deep);
}

.cz-quote::before {
	content: '“';
	position: absolute;
	left: 0;
	top: -0.3em;
	font-size: 3.5em;
	line-height: 1;
	color: var(--cz-yellow);
	opacity: 0.75;
}


/* Achievements ------------------------------------------------------------- */

.cz-wins { background: var(--cz-blue-deep); color: var(--cz-white); }

.cz-wins__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cz-sm); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .cz-wins__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cz-wins__grid { grid-template-columns: repeat(4, 1fr); } }

.cz-win {
	padding: 1.25rem;
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 3px;
	transition: transform .4s var(--cz-ease), border-color .4s var(--cz-ease);
}

.cz-win:hover { transform: translateY(-4px); border-color: var(--cz-yellow); }

.cz-win__stat {
	display: block;
	font-size: clamp(2rem, 3.5vw, 2.75rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--cz-yellow);
	margin-bottom: 0.5rem;
}

.cz-win__title { color: var(--cz-white); font-size: 1.05rem; letter-spacing: 0.04em; margin: 0 0 0.35rem; }
.cz-win__body { margin: 0; font-size: 0.92rem; line-height: 1.6; color: rgba(255,255,255,.75); }


/* ===========================================================================
   8. GET INVOLVED
   =========================================================================== */

.cz-ico { width: 1em; height: 1em; display: block; color: inherit; overflow: visible; }

.cz-ico--ball { transform-origin: 50% 50%; transition: transform .7s var(--cz-ease); }
.cz-route__link:hover .cz-ico--ball { transform: rotate(90deg); }

.cz-ico__heart { transform-origin: 50% 60%; transition: transform .45s var(--cz-ease); }
.cz-route__link:hover .cz-ico__heart,
.cz-give__card:hover .cz-ico__heart,
.cz-role:hover .cz-ico__heart { transform: translateY(-2px) scale(1.08); }

.cz-ico__plus { transform-origin: 19.4px 10.9px; transition: transform .4s var(--cz-ease); }
.cz-route__link:hover .cz-ico__plus, .cz-role:hover .cz-ico__plus { transform: scale(1.25); }

.cz-ico__wave { transform-origin: 6px 8px; transition: transform .5s var(--cz-ease); }
.cz-role:hover .cz-ico__wave { transform: skewX(-6deg); }

.cz-ico__flap { transform-origin: 12px 7px; transition: transform .4s var(--cz-ease); }
.cz-method:hover .cz-ico__flap { transform: translateY(-1.5px) scaleY(.72); }

.cz-ico__dot { transform-origin: 12px 10.2px; transition: transform .4s var(--cz-ease); }
.cz-method:hover .cz-ico__dot { transform: scale(1.18); }

.cz-routes__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cz-sm); grid-template-columns: 1fr; }
@media (min-width: 780px) { .cz-routes__grid { grid-template-columns: repeat(3, 1fr); } }

.cz-route__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	gap: 0.35rem;
	padding: 1.5rem 1.35rem;
	text-decoration: none;
	background: var(--cz-white);
	border: 1px solid var(--cz-line);
	border-radius: 3px;
	box-shadow: var(--cz-shadow);
	transition: transform .4s var(--cz-ease), box-shadow .4s var(--cz-ease), border-color .4s var(--cz-ease);
}

.cz-route__link:hover { transform: translateY(-5px); box-shadow: var(--cz-shadow-lift); border-color: var(--cz-yellow); }

.cz-route__icon { font-size: 2.1rem; color: var(--cz-blue); margin-bottom: 0.6rem; }

.cz-route__kicker, .cz-method__label, .cz-tier__name {
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cz-yellow-ink);
}

.cz-route__title { font-size: 1.5rem; }
.cz-route__body { font-size: 0.94rem; line-height: 1.6; color: var(--cz-muted); margin-bottom: 0.9rem; }
.cz-route__cta, .cz-post__more { margin-top: auto; font-size: 0.88rem; font-weight: 600; color: var(--cz-blue); }
.cz-route__cta::after, .cz-post__more::after { content: ' →'; display: inline-block; transition: transform .25s var(--cz-ease); }
.cz-route__link:hover .cz-route__cta::after, .cz-post__link:hover .cz-post__more::after { transform: translateX(4px); }


/* Membership meter --------------------------------------------------------- */

.cz-meter {
	margin: var(--cz-sm) 0 var(--cz-md);
	padding: 1.5rem;
	background: var(--cz-alt);
	border: 1px solid var(--cz-line);
	border-radius: 4px;
}

.cz-meter__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }

.cz-meter__now {
	font-size: clamp(2.25rem, 4.5vw, 3.25rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--cz-blue);
}

.cz-meter__nowlabel { font-size: 0.95rem; font-weight: 600; }
.cz-meter__goal { margin-left: auto; text-align: right; font-size: 1.5rem; font-weight: 600; color: var(--cz-muted); }
.cz-meter__goal small { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }

.cz-meter__track {
	position: relative;
	height: 12px;
	border-radius: 999px;
	background: repeating-linear-gradient(90deg, rgba(0,42,97,.08) 0 6px, transparent 6px 12px), var(--cz-line);
}

.cz-meter__fill {
	position: relative;
	height: 100%;
	width: var(--cz-pct, 10%);
	border-radius: 999px;
	background: linear-gradient(90deg, var(--cz-blue-deep), var(--cz-blue));
	transition: width 1.6s cubic-bezier(.16,.84,.32,1) .15s;
}

.cz-anim .cz-meter[data-reveal]:not(.is-in) .cz-meter__fill { width: 0; }

.cz-meter__ball {
	position: absolute;
	right: -0.7rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.5rem;
	color: var(--cz-yellow);
	background: var(--cz-alt);
	border-radius: 50%;
}

.cz-meter__note { margin: 1.1rem 0 0; font-size: 0.9rem; line-height: 1.6; color: var(--cz-muted); max-width: 62ch; }


/* Tiers, M-Pesa, roles ----------------------------------------------------- */

.cz-tiers { list-style: none; margin: 0 0 var(--cz-md); padding: 0; display: grid; gap: var(--cz-sm); grid-template-columns: 1fr; }
@media (min-width: 780px) { .cz-tiers { grid-template-columns: repeat(3, 1fr); } }

.cz-tier {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 1.4rem 1.25rem;
	background: var(--cz-white);
	border: 1px solid var(--cz-line);
	border-top: 4px solid var(--cz-yellow);
	border-radius: 3px;
	transition: transform .4s var(--cz-ease), box-shadow .4s var(--cz-ease);
}

.cz-tier:hover { transform: translateY(-4px); box-shadow: var(--cz-shadow-lift); }

.cz-tier__amount {
	font-size: clamp(1.9rem, 3.2vw, 2.5rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--cz-blue-deep);
}

.cz-tier__unit { font-size: 0.88rem; font-weight: 600; color: var(--cz-blue); margin-bottom: 0.6rem; }
.cz-tier__body { margin: 0; font-size: 0.93rem; line-height: 1.6; color: var(--cz-muted); }

.cz-pay { padding: 1.5rem; background: var(--cz-blue-deep); color: var(--cz-white); border-radius: 4px; }

.cz-pay__heading {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin: 0 0 1.1rem;
	font-size: 1.3rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--cz-white);
}

.cz-pay__icon { font-size: 1.6rem; color: var(--cz-yellow); }
.cz-pay__grid { display: grid; gap: 0.75rem; margin: 0; grid-template-columns: 1fr; }
@media (min-width: 720px) { .cz-pay__grid { grid-template-columns: repeat(3, 1fr); } }

.cz-pay__row {
	padding: 0.9rem 1rem;
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 3px;
}

.cz-pay__row dt {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cz-yellow);
	margin-bottom: 0.35rem;
}

/* Payment numbers are copied by hand off a phone screen — monospace, large,
   generously tracked, so a 6 is never mistaken for an 8. */
.cz-pay__row dd {
	margin: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--cz-white);
	word-break: break-word;
}

.cz-pay__note { margin: 1rem 0 0; font-size: 0.88rem; line-height: 1.6; color: rgba(255,255,255,.72); }

.cz-roles { list-style: none; margin: 0 0 var(--cz-md); padding: 0; display: grid; gap: var(--cz-sm); grid-template-columns: 1fr; }
@media (min-width: 860px) { .cz-roles { grid-template-columns: repeat(3, 1fr); } }

.cz-role {
	padding: 1.35rem 1.25rem;
	background: var(--cz-white);
	border: 1px solid var(--cz-line);
	border-radius: 3px;
	transition: transform .4s var(--cz-ease), border-color .4s var(--cz-ease), box-shadow .4s var(--cz-ease);
}

.cz-role:hover { transform: translateY(-4px); border-color: var(--cz-yellow); box-shadow: var(--cz-shadow); }
.cz-role__icon { display: block; font-size: 1.9rem; color: var(--cz-blue); margin-bottom: 0.8rem; }


/* Embedded donation form --------------------------------------------------- */

.cz-embed {
	margin-top: var(--cz-md);
	padding: clamp(1rem, 2.5vw, 1.75rem);
	background: var(--cz-white);
	border-radius: 4px;
	box-shadow: var(--cz-shadow-lift);
}

.cz-embed__heading { margin: 0 0 1rem; font-size: clamp(1.3rem, 2.4vw, 1.75rem); font-weight: 700; color: var(--cz-blue-deep); }
.cz-embed__frame { position: relative; min-height: 32rem; border-radius: 3px; overflow: hidden; }
.cz-embed__frame iframe { width: 100% !important; border: 0 !important; display: block; }
.cz-embed__note { margin: 0.9rem 0 0; font-size: 0.88rem; line-height: 1.6; color: var(--cz-muted); }
.cz-embed__note a { color: var(--cz-blue); font-weight: 600; }


/* ===========================================================================
   9. CONTACT
   =========================================================================== */

.cz-methods { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cz-sm); grid-template-columns: 1fr; }
@media (min-width: 620px)  { .cz-methods { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cz-methods { grid-template-columns: repeat(4, 1fr); } }

.cz-method {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 1.35rem 1.25rem;
	background: var(--cz-white);
	border: 1px solid var(--cz-line);
	border-radius: 3px;
	box-shadow: var(--cz-shadow);
	transition: transform .4s var(--cz-ease), border-color .4s var(--cz-ease), box-shadow .4s var(--cz-ease);
}

.cz-method:hover { transform: translateY(-4px); border-color: var(--cz-yellow); box-shadow: var(--cz-shadow-lift); }
.cz-method__icon { font-size: 1.75rem; color: var(--cz-blue); margin-bottom: 0.5rem; }

.cz-method__value {
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--cz-blue-deep);
	text-decoration: none;
	word-break: break-word;
}

a.cz-method__value:hover { color: var(--cz-blue); }
.cz-method__note { font-size: 0.88rem; line-height: 1.55; color: var(--cz-muted); }

.cz-contact__grid { display: grid; grid-template-columns: 1fr; gap: var(--cz-md); align-items: start; }
@media (min-width: 940px) { .cz-contact__grid { grid-template-columns: 1.35fr 0.85fr; gap: var(--cz-lg); } }

.cz-formwrap {
	margin-top: 1.25rem;
	padding: 1.5rem;
	background: var(--cz-white);
	border: 1px solid var(--cz-line);
	border-radius: 4px;
	box-shadow: var(--cz-shadow);
}

.cz-formwrap label {
	display: block;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cz-blue-deep);
	margin-bottom: 0.35rem;
}

.cz-formwrap input[type="text"],
.cz-formwrap input[type="email"],
.cz-formwrap input[type="tel"],
.cz-formwrap input[type="url"],
.cz-formwrap input[type="number"],
.cz-formwrap select,
.cz-formwrap textarea {
	width: 100%;
	padding: 0.8rem 0.9rem;
	margin-bottom: 1rem;
	font-family: var(--cz-font);
	font-size: 1rem;
	color: var(--cz-ink);
	background: var(--cz-alt);
	border: 1px solid var(--cz-line);
	border-radius: 3px;
	transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.cz-formwrap textarea { min-height: 9rem; resize: vertical; }

.cz-formwrap input:focus, .cz-formwrap select:focus, .cz-formwrap textarea:focus {
	outline: none;
	background: var(--cz-white);
	border-color: var(--cz-blue);
	box-shadow: 0 0 0 3px rgba(0,80,191,.22);
}

.cz-formwrap input[type="submit"],
.cz-formwrap button[type="submit"],
.cz-formwrap .wpforms-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--cz-font);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	padding: 0.95em 1.9em;
	color: var(--cz-blue-deep);
	background: var(--cz-yellow);
	border: 2px solid var(--cz-yellow);
	border-radius: 2px;
	cursor: pointer;
	transition: background-color .18s ease, transform .18s ease;
}

.cz-formwrap input[type="submit"]:hover,
.cz-formwrap button[type="submit"]:hover,
.cz-formwrap .wpforms-submit:hover {
	background: var(--cz-yellow-soft);
	border-color: var(--cz-yellow-soft);
	transform: translateY(-1px);
}

.cz-shortcuts { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }

.cz-shortcut {
	padding: 1.15rem 1.2rem;
	background: var(--cz-alt);
	border-left: 4px solid var(--cz-yellow);
	border-radius: 0 3px 3px 0;
	transition: transform .35s var(--cz-ease), background-color .35s var(--cz-ease);
}

.cz-shortcut:hover { transform: translateX(4px); background: var(--cz-white); }
.cz-shortcut__title { font-size: 1.15rem; margin: 0 0 0.3rem; }
.cz-shortcut__body { margin: 0 0 0.6rem; font-size: 0.92rem; line-height: 1.55; color: var(--cz-muted); }


/* ===========================================================================
   10. NEWS
   =========================================================================== */

.cz-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cz-sm); grid-template-columns: 1fr; }
@media (min-width: 700px)  { .cz-posts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .cz-posts { grid-template-columns: repeat(3, 1fr); } }

.cz-post__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	background: var(--cz-white);
	border: 1px solid var(--cz-line);
	border-radius: 3px;
	overflow: hidden;
	box-shadow: var(--cz-shadow);
	transition: transform .4s var(--cz-ease), box-shadow .4s var(--cz-ease), border-color .4s var(--cz-ease);
}

.cz-post__link:hover { transform: translateY(-5px); box-shadow: var(--cz-shadow-lift); border-color: var(--cz-yellow); }
.cz-post__media { display: block; overflow: hidden; background: var(--cz-alt); }
.cz-post__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .6s var(--cz-ease); }
.cz-post__link:hover .cz-post__media img { transform: scale(1.04); }

.cz-post__placeholder {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 10;
	background: var(--cz-blue);
	color: rgba(255,255,255,.35);
}

.cz-post__placeholder svg { width: 3.5rem; height: 3.5rem; }

.cz-post__meta {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 1.15rem 1.2rem 0;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cz-muted);
}

.cz-post__cat { padding: 0.15rem 0.5rem; color: var(--cz-blue); background: var(--cz-alt); border-radius: 2px; }
.cz-post__title { margin: 0.5rem 0 0.4rem; padding-inline: 1.2rem; font-size: 1.35rem; }
.cz-post__excerpt { display: block; padding: 0 1.2rem 1rem; font-size: 0.94rem; line-height: 1.6; color: var(--cz-muted); }
.cz-post__more { padding: 0 1.2rem 1.25rem; }

.cz-pager { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: var(--cz-md); }

.cz-pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.6rem;
	padding: 0.6rem 0.9rem;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--cz-blue-deep);
	text-decoration: none;
	background: var(--cz-white);
	border: 1px solid var(--cz-line);
	border-radius: 3px;
	transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.cz-pager .page-numbers:hover { border-color: var(--cz-yellow); background: var(--cz-alt); }
.cz-pager .page-numbers.current { color: var(--cz-white); background: var(--cz-blue); border-color: var(--cz-blue); }

.cz-empty { padding: var(--cz-md) 0; max-width: 52ch; }


/* ===========================================================================
   11. PROSE (Terms, Privacy, any editor content)
   =========================================================================== */

.cz-prose { max-width: 68ch; font-size: 1.02rem; line-height: 1.75; color: var(--cz-ink); }
.cz-prose > * + * { margin-top: 1.1em; }

.cz-prose h1, .cz-prose h2, .cz-prose h3, .cz-prose h4,
.cz-prose .elementor-heading-title {
	font-family: var(--cz-font);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--cz-blue-deep);
	margin-top: 2em;
	margin-bottom: 0.5em;
}

.cz-prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.cz-prose h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }
.cz-prose h4 { font-size: 1.1rem; }

.cz-prose h2::after {
	content: '';
	display: block;
	width: 2.5rem;
	height: 3px;
	margin-top: 0.5rem;
	background: var(--cz-yellow);
}

.cz-prose p { margin: 0; color: var(--cz-muted); }
.cz-prose strong { color: var(--cz-ink); font-weight: 700; }

.cz-prose a {
	color: var(--cz-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color .18s ease;
}

.cz-prose a:hover { color: var(--cz-blue-lift); }

.cz-prose ul, .cz-prose ol { margin: 1.1em 0; padding-left: 1.35rem; color: var(--cz-muted); }
.cz-prose li { margin-bottom: 0.5em; }
.cz-prose li::marker { color: var(--cz-yellow-ink); }

.cz-prose blockquote {
	margin: 1.5em 0;
	padding: 0.25rem 0 0.25rem 1.15rem;
	border-left: 4px solid var(--cz-yellow);
	font-size: 1.08rem;
	color: var(--cz-ink);
}

.cz-prose img { border-radius: 3px; box-shadow: var(--cz-shadow); }
.cz-prose hr { border: 0; height: 1px; background: var(--cz-line); margin: 2.5em 0; }

.cz-prose table { width: 100%; border-collapse: collapse; font-size: 0.95rem; display: block; overflow-x: auto; }
.cz-prose th, .cz-prose td { padding: 0.7rem 0.85rem; border: 1px solid var(--cz-line); text-align: left; }
.cz-prose th { background: var(--cz-alt); font-weight: 700; color: var(--cz-blue-deep); }

.cz-prose code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
	padding: 0.15em 0.4em;
	background: var(--cz-alt);
	border-radius: 3px;
}

/* Legal pages were duplicated from About, so the first Elementor section is
   a leftover page-title hero. Delete it in Elementor and this can go. */
.cz-doc .cz-prose [data-elementor-type="wp-page"] > .elementor-section:first-child,
.cz-doc .cz-prose [data-elementor-type="wp-page"] > .e-con:first-child,
.cz-doc .cz-prose .elementor-widget-divider,
.cz-doc .cz-phero__lede {
	display: none !important;
}

.cz-doc .cz-prose .elementor-section,
.cz-doc .cz-prose .elementor-container,
.cz-doc .cz-prose .elementor-column,
.cz-doc .cz-prose .elementor-widget-wrap,
.cz-doc .cz-prose .e-con,
.cz-doc .cz-prose .e-con-inner {
	max-width: 100% !important;
	width: 100% !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	background: none !important;
}


/* ===========================================================================
   12. FOOTER
   =========================================================================== */

.cz-footer {
	background: var(--cz-blue-deep);
	color: rgba(255,255,255,.8);
	padding-top: var(--cz-md);
	padding-bottom: var(--cz-sm);
	border-top: 4px solid var(--cz-yellow);
}

.cz-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--cz-md) var(--cz-sm); }
@media (min-width: 700px)  { .cz-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cz-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }

.cz-footer__h {
	display: inline-block;
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cz-white);
	margin: 0 0 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 3px solid var(--cz-yellow);
}

.cz-footer__about { margin: 0; font-size: 0.94rem; line-height: 1.7; max-width: 46ch; color: rgba(255,255,255,.72); }

.cz-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }

.cz-footer__list a {
	font-size: 0.94rem;
	color: rgba(255,255,255,.78);
	text-decoration: none;
	transition: color .18s ease, padding-left .18s ease;
}

.cz-footer__list a:hover { color: var(--cz-yellow); padding-left: 4px; }
.cz-footer__list--contact a { font-weight: 600; color: var(--cz-white); }
.cz-footer__place { font-size: 0.94rem; color: rgba(255,255,255,.6); }

.cz-footer__social { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.9rem 0 0; padding: 0; list-style: none; }

.cz-social {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.8rem;
	background: rgba(255,255,255,.05);
	border: 1px solid rgba(255,255,255,.18);
	border-radius: 999px;
	text-decoration: none !important;
	transition: border-color .25s var(--cz-ease), background-color .25s var(--cz-ease), transform .25s var(--cz-ease);
}

.cz-social:hover { border-color: var(--cz-yellow); background: rgba(255,255,255,.09); transform: translateY(-2px); }
.cz-social svg { width: 1.05rem; height: 1.05rem; flex: none; color: var(--cz-yellow); }
.cz-social span { font-size: 0.86rem; font-weight: 600; color: var(--cz-white); }
.cz-social__note { display: block; margin-top: 0.15rem; font-size: 0.78rem; font-weight: 400; color: rgba(255,255,255,.6); }

.cz-footer__base { margin-top: var(--cz-sm); padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.1); }
.cz-footer__base p { margin: 0; font-size: 0.82rem; color: rgba(255,255,255,.5); }


/* ===========================================================================
   13. MOTION

   Content is visible by default; the animation is the enhancement. The
   .cz-anim class is added by JavaScript, so a blocked script or a
   reduced-motion preference can never leave the page blank.
   =========================================================================== */

.cz-anim [data-reveal] {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .6s var(--cz-ease) var(--cz-delay, 0ms),
	            transform .6s var(--cz-ease) var(--cz-delay, 0ms);
	will-change: opacity, transform;
}

.cz-anim [data-reveal].is-in { opacity: 1; transform: none; }

@media (hover: none) {
	.cz-split__media:hover img,
	.cz-gallery__cell:hover,
	.cz-way:hover,
	.cz-route__link:hover,
	.cz-post__link:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.cz *, .cz *::before, .cz *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	.cz-anim [data-reveal] { opacity: 1 !important; transform: none !important; }
	.cz-meter__fill { width: var(--cz-pct, 10%) !important; }
}


/* ===========================================================================
   14. HEADER BLUE — winning the specificity fight

   The stat band renders #0050BF correctly, which proves this stylesheet is
   loading. So the bar is being painted by something more specific than the
   rules in section 2 — almost certainly the page background showing through
   a transparent header wrapper, or an Elementor overlay layer sitting on top.

   These are the same colour, stated at higher specificity and with
   !important, plus the two layers section 2 didn't account for.
   =========================================================================== */

html:has(body.cheza-redesign),
body.cheza-redesign {
	background-color: var(--cz-header-bg) !important;
}

/* Elementor paints an extra absolutely-positioned layer over section
   backgrounds. If that carries the dark colour, no amount of styling the
   header element itself will show. */
.cheza-redesign header .elementor-background-overlay,
.cheza-redesign [data-elementor-type="header"] .elementor-background-overlay,
.cheza-redesign .elementor-location-header .elementor-background-overlay {
	background: none !important;
	background-image: none !important;
	opacity: 0 !important;
}

/* REMOVED: a `:has(> header)` rule used to live here to paint whatever wraps
   the site header. It also matched .cz-sectionhead — which is a <header>
   element — and so painted the "What we actually do" section blue, with dark
   headings on dark blue.

   Section 15 targets the real header by its Elementor id, so this was never
   needed. Any future header rule must be scoped to [data-elementor-id="1236"],
   never to the bare `header` tag: this page's own section heads use it. */

/* Page content is white. Stated after the header rules so nothing above can
   reach into the article. */
body.cheza-redesign main.cz,
body.cheza-redesign main.cz header,
body.cheza-redesign main.cz .cz-wrap,
body.cheza-redesign main.cz .cz-sectionhead {
	background-color: transparent !important;
}

body.cheza-redesign main.cz { background-color: var(--cz-white) !important; }
body.cheza-redesign main.cz .cz-band { background-color: var(--cz-white) !important; }
body.cheza-redesign main.cz .cz-band:nth-of-type(even),
body.cheza-redesign main.cz .cz-gallery { background-color: var(--cz-alt) !important; }
body.cheza-redesign main.cz .cz-prog,
body.cheza-redesign main.cz .cz-routes { background-color: var(--cz-white) !important; }

/* And the colours those sections carry. */
body.cheza-redesign main.cz .cz-prog .cz-h2,
body.cheza-redesign main.cz .cz-band .cz-h2,
body.cheza-redesign main.cz .cz-gallery .cz-h2,
body.cheza-redesign main.cz .cz-split .cz-h2 { color: var(--cz-blue-deep) !important; }

body.cheza-redesign main.cz .cz-prog .cz-lede,
body.cheza-redesign main.cz .cz-band .cz-lede,
body.cheza-redesign main.cz .cz-split .cz-lede { color: var(--cz-muted) !important; }

body.cheza-redesign main.cz .cz-prog__item p,
body.cheza-redesign main.cz .cz-def__body { color: var(--cz-muted) !important; }

/* Dark bands keep their light text. */
body.cheza-redesign main.cz .cz-support .cz-h2,
body.cheza-redesign main.cz .cz-wins .cz-h2,
body.cheza-redesign main.cz .cz-give .cz-h2,
body.cheza-redesign main.cz .cz-cta .cz-h2 { color: var(--cz-white) !important; }

body.cheza-redesign main.cz .cz-support .cz-lede,
body.cheza-redesign main.cz .cz-wins .cz-lede,
body.cheza-redesign main.cz .cz-give .cz-lede,
body.cheza-redesign main.cz .cz-cta .cz-lede { color: rgba(255,255,255,.82) !important; }

/* Elementor writes per-element rules like
   .elementor-104 .elementor-element.elementor-element-a1b2c3 { background-color: … }
   which are more specific than a plain class. Matching the same shape at
   higher weight, scoped to inside the header only. */
body.cheza-redesign header section,
body.cheza-redesign header .elementor-section,
body.cheza-redesign header .elementor-container,
body.cheza-redesign header .elementor-column,
body.cheza-redesign header .elementor-widget-wrap,
body.cheza-redesign header .e-con,
body.cheza-redesign header .e-con-inner,
body.cheza-redesign [data-elementor-type="header"] .elementor-section,
body.cheza-redesign [data-elementor-type="header"] .elementor-container,
body.cheza-redesign [data-elementor-type="header"] .e-con,
body.cheza-redesign [data-elementor-type="header"] .e-con-inner {
	background-color: transparent !important;
	background-image: none !important;
}


/* ===========================================================================
   15. THE ACTUAL HEADER

   DevTools settled it. Two facts I had wrong:

   1. The bar is NOT a <header> element and NOT data-elementor-type="header".
      Royal Addons renders it as  <div data-elementor-type="wp-post"
      data-elementor-id="1236">  containing a normal Elementor section. So
      every header selector in sections 2 and 14 matched nothing at all. The
      blue that did appear was the body showing through.

   2. That section carries  background-color: #000000A6  — black at 65%
      opacity — layered over whatever is behind it. That is the darkening.
      It is not a different blue; it is our blue with black on top.

   These rules target the header by its Elementor id, which is stable because
   it is one saved template used on every page.

   IF THE HEADER IS EVER REBUILT and the id changes, read the new one from
   DevTools (the data-elementor-id on the wrapper div) and update the two
   selectors below.
   =========================================================================== */

/* The wrapper and every layer inside it — no black overlay survives. */
body.cheza-redesign [data-elementor-id="1236"],
body.cheza-redesign [data-elementor-id="1236"] > .elementor-section,
body.cheza-redesign [data-elementor-id="1236"] .elementor-section,
body.cheza-redesign [data-elementor-id="1236"] .elementor-container,
body.cheza-redesign [data-elementor-id="1236"] .elementor-column,
body.cheza-redesign [data-elementor-id="1236"] .elementor-widget-wrap,
body.cheza-redesign [data-elementor-id="1236"] .e-con,
body.cheza-redesign [data-elementor-id="1236"] .e-con-inner,
body.cheza-redesign .elementor-element-4b996b580,
body.cheza-redesign .elementor-element-4b996b580:not(.elementor-motion-effects-element-type-background) {
	background-color: var(--cz-header-bg) !important;
	background-image: none !important;
}

/* Inner blocks stay clear so only the bar itself carries colour. */
body.cheza-redesign [data-elementor-id="1236"] .elementor-container,
body.cheza-redesign [data-elementor-id="1236"] .elementor-column,
body.cheza-redesign [data-elementor-id="1236"] .elementor-widget-wrap,
body.cheza-redesign [data-elementor-id="1236"] .elementor-widget,
body.cheza-redesign [data-elementor-id="1236"] .e-con-inner {
	background-color: transparent !important;
}

/* The motion-effects layer and background overlay are separate absolutely
   positioned divs. Either one can darken the bar on its own. */
body.cheza-redesign [data-elementor-id="1236"] .elementor-motion-effects-layer,
body.cheza-redesign [data-elementor-id="1236"] .elementor-background-overlay,
body.cheza-redesign .elementor-element-4b996b580 > .elementor-background-overlay,
body.cheza-redesign .elementor-element-4b996b580 .elementor-motion-effects-layer {
	background-color: transparent !important;
	background-image: none !important;
	opacity: 0 !important;
}

/* Bar furniture, now that the right element is being addressed. */
body.cheza-redesign [data-elementor-id="1236"] {
	position: relative;
	z-index: 50;
	border-bottom: 3px solid var(--cz-yellow) !important;
	box-shadow: 0 2px 14px -4px rgba(0, 42, 97, 0.4);
}

/* Nav links inside the real header. */
body.cheza-redesign [data-elementor-id="1236"] a:not([class*="button"]):not([class*="btn"]) {
	font-family: var(--cz-font) !important;
	font-size: 0.88rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.11em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	color: var(--cz-white) !important;
	-webkit-text-fill-color: var(--cz-white) !important;
}

body.cheza-redesign [data-elementor-id="1236"] a:not([class*="button"]):hover {
	color: var(--cz-yellow) !important;
	-webkit-text-fill-color: var(--cz-yellow) !important;
}

body.cheza-redesign [data-elementor-id="1236"] a:has(img) {
	letter-spacing: normal !important;
	font-size: inherit !important;
}

/* GET STARTED — white fill, blue label. */
body.cheza-redesign [data-elementor-id="1236"] a[class*="button"],
body.cheza-redesign [data-elementor-id="1236"] .elementor-button,
body.cheza-redesign [data-elementor-id="1236"] .wpr-button {
	background-color: var(--cz-white) !important;
	border-color: var(--cz-white) !important;
	border-radius: 2px !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
}

body.cheza-redesign [data-elementor-id="1236"] a[class*="button"],
body.cheza-redesign [data-elementor-id="1236"] a[class*="button"] *,
body.cheza-redesign [data-elementor-id="1236"] .elementor-button,
body.cheza-redesign [data-elementor-id="1236"] .elementor-button * {
	color: var(--cz-blue) !important;
	-webkit-text-fill-color: var(--cz-blue) !important;
}

body.cheza-redesign [data-elementor-id="1236"] a[class*="button"]:hover,
body.cheza-redesign [data-elementor-id="1236"] .elementor-button:hover {
	background-color: var(--cz-yellow) !important;
	border-color: var(--cz-yellow) !important;
}