/* ==========================================================================
   Critter Stop — About page styles  (v2, written against the real DOM)
   --------------------------------------------------------------------------
   WHAT CHANGED FROM v1, AND WHY

   1. `cs-` is a SITE-WIDE prefix, not an About-page prefix. The booking
      modal (#cs-modal-overlay), the pricing cards and the footer all use
      it. `.about-page .cs-btn` (0,2,0) outranks the modal's own `.cs-btn`
      (0,1,0), so the About page was restyling the booking widget.
      FIX: colliding names are scoped to the two real About wrappers —
      .cs-about and .cs-hero. The modal sits directly under <body>, so it
      is now untouched.

   2. Tokens were defined on `.about-page .cs-about`. The modal is OUTSIDE
      .cs-about, so var(--radius) was undefined there and the modal's
      buttons lost their rounded corners on this page.
      FIX: tokens now live on `.about-page` (the <body>).

   3. 24 of the 63 classes the old sheet targeted DO NOT EXIST in the
      markup — .cs-scholarship*, .cs-team-grid, .cs-team-card,
      .cs-trust-grid, .cs-trust-item, .cs-trust-span, .cs-hero-row,
      .story-text, .story-img, .tagline, .toggle, .about-mobile-only,
      .about-desktop-only, .cs-swiper--trust, .ghost, .cta-col,
      .cs-leader-content, .cs-reviews, .caption, .cs-trust-card,
      .cs-team-group. Deleted rather than carried forward.

   Mobile-first. Breakpoints: 48rem (768px) and 64rem (1024px).
   ========================================================================== */


/* 1. Tokens — on .about-page, so anything on the page can resolve them
   ========================================================================== */

.about-page {
	/* ------------------------------------------------------------------
	   PALETTE ALIGNED TO THE HEADER (v1.1)
	   Your .csph-header block already defines a considered token system —
	   navy #003d70, CTA orange #c83a0d with the AA contrast math already
	   done (5.16:1). The About page was using a different navy (#00587c)
	   and no orange at all, which is why it reads as a bolted-on landing
	   page rather than part of the site.
	   Those tokens are scoped to .csph-header so they can't be referenced
	   from here; the values are redeclared to match.
	   TO REVERT: swap --cs-navy back to #00587c and set --cs-cta to
	   var(--cs-accent). Nothing else needs touching.
	   ------------------------------------------------------------------ */

	/* Brand */
	--cs-navy: #003d70;          /* headings — matches header + footer */
	--cs-navy-deep: #002f58;
	--cs-accent: #0b6fb2;        /* icons, links, secondary marks */
	--cs-accent-bright: #0d96c8;
	--cs-tint: #e9f4fb;

	/* Action — one conversion colour, used nowhere decorative */
	--cs-cta: #c83a0d;
	--cs-cta-hover: #a8300a;

	/* Ink */
	--cs-ink: #172433;
	--cs-ink-body: #3d4b5c;
	--cs-ink-muted: #617182;

	/* Surfaces — alternating sections use these two, nothing else */
	--cs-surface: #ffffff;
	--cs-surface-alt: #f5f9fc;
	--cs-border: #d7e3ed;

	/* Elevation. Flat is the default now; lift means "interactive". */
	--cs-shadow-sm: 0 1px 2px rgba(0, 61, 112, 0.06);
	--cs-shadow-md: 0 4px 14px rgba(0, 61, 112, 0.08);
	--cs-shadow-lg: 0 14px 34px rgba(0, 61, 112, 0.12);

	--cs-radius-sm: 8px;
	--cs-radius: 12px;
	--cs-radius-lg: 20px;
	--cs-radius-pill: 999px;

	--cs-gap: 1rem;
	--cs-gap-lg: 2rem;
	--cs-section-y: clamp(2.5rem, 5vw, 4.25rem);
	--cs-section-x: clamp(1rem, 4vw, 2rem);

	--cs-measure: 65ch;
	--cs-content-max: 1180px;

	--cs-ease: cubic-bezier(.2, .7, .2, 1);
	--cs-speed: 0.25s;
	--cs-focus: #003d70;

	/* Back-compat aliases */
	--cs-blue: var(--cs-accent);
	--cs-blue-deep: var(--cs-navy);
	--cs-blue-bright: var(--cs-accent-bright);
	--cs-blue-tint: var(--cs-tint);
	--cs-blue-wash: var(--cs-surface-alt);
	--blue: var(--cs-accent);
	--lightblue: var(--cs-tint);
	--muted: var(--cs-ink-muted);
	--radius: var(--cs-radius);
	--shadow: var(--cs-shadow-md);
}


/* 2. Base & typography
   ========================================================================== */

.about-page .cs-about {
	max-width: 100%;
	margin: 0 auto;
	padding: 0 var(--cs-section-x);
	color: var(--cs-ink);
	line-height: 1.55;
}

.about-page .cs-about h1,
.about-page .cs-about h2,
.about-page .cs-about h3,
.about-page .cs-about h4,
.about-page .cs-hero h1,
.about-page .cs-hero h2 {
	margin-top: 0;
	color: var(--cs-blue-deep);
	font-weight: 700;
	line-height: 1.2;
	text-wrap: balance;
}



/* Set the section-heading scale once. The old file repeated the same
   clamp() verbatim in five separate rules. */
.about-page .cs-about h2 {
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
	margin-bottom: 0.5rem;
}

.about-page .cs-about h3 {
	font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
}

/* Oxygen renders body copy as .ct-text-block divs, not <p>, so both are
   targeted — the old sheet only styled <p> and largely missed. */
.about-page .cs-about p,
.about-page .cs-about .ct-text-block {
	max-width: var(--cs-measure);
	color: var(--cs-ink-body);
	text-wrap: pretty;
}

.about-page .cs-about p {
	margin: 0 0 1rem;
}

.about-page .cs-about a {
	color: var(--cs-blue);
	text-decoration: none;
}

.about-page .cs-about a:hover,
.about-page .cs-about a:focus-visible {
	text-decoration: underline;
}

.about-page .cs-about img:not(.cs-ci-photo),



/* 3. Layout
   ========================================================================== */

.about-page .cs-values-grid,
.about-page .cs-leader-grid,
.about-page .cs-stats,
.about-page .cs-impact-stats,
.about-page .cs-about .cs-faqs {
	max-width: var(--cs-content-max);
	margin-inline: auto;
}

.about-page .cs-values-intro,
.about-page .cs-values-outro {
	max-width: 55ch;
	margin-inline: auto;
	text-align: center;
	color: var(--cs-ink-body);
}

.about-page .cs-values-outro {
	margin-top: 2rem;
}


/* 4. Buttons
   --------------------------------------------------------------------------
   CRITICAL: scoped to .cs-about / .cs-hero, NOT .about-page.
   `.about-page .cs-btn` was reaching into #cs-modal-overlay and restyling
   the booking widget's Back / Continue buttons on this page only.
   ========================================================================== */

.about-page .cs-about .cs-btn,


.about-page .cs-about .cs-btn.primary,


.about-page .cs-about .cs-btn.primary:hover,


/* The old sheet defined `.cs-btn.ghost`, but nothing on the page carries
   `.ghost` — "Request a Quote!" is a bare `.cs-btn`, so it rendered as
   unstyled padded text beside a solid blue button. This gives bare
   .cs-btn the outline treatment without an HTML change. */
.about-page .cs-about .cs-btn:not(.primary),


.about-page .cs-about .cs-btn:not(.primary):hover,


/* Visible keyboard focus. The old sheet had no :focus rules at all. */
.about-page .cs-about a:focus-visible,
.about-page .cs-about button:focus-visible,
.about-page .cs-about input:focus-visible,
.about-page .cs-about select:focus-visible,
.about-page .cs-about textarea:focus-visible,
.about-page .cs-about [tabindex]:focus-visible,
.about-page .cs-hero a:focus-visible,
.about-page .cs-hero button:focus-visible,
.about-page .cs-hero-form a:focus-visible,
.about-page .cs-hero-form input:focus-visible,
.about-page .cs-hero-form select:focus-visible,
.about-page .cs-hero-form textarea:focus-visible,
.about-page .cs-hero-form button:focus-visible {
	outline: 3px solid var(--cs-focus);
	outline-offset: 3px;
	border-radius: var(--cs-radius-sm);
}

.about-page .cs-cta-center a:focus-visible {
	outline-color: #fff;
}


/* 5. Hero
   --------------------------------------------------------------------------
   .cs-hero and .cs-hero-form sit OUTSIDE .cs-about — siblings, not children.
   ========================================================================== */

.about-page .cs-hero {
	position: relative;
	padding: 1rem var(--cs-section-x) 0;
	text-align: center;
	background: linear-gradient(180deg, rgba(198, 223, 244, 0.5) 0%, #ffffff 100%);
}

/* Normal flow. The old rule used position:absolute + translateX(-50%) then
   cancelled it with `position: unset !important` at every breakpoint under
   1024px. On desktop the overlap now comes from a negative margin, which
   cannot overflow the hero when the form grows (extra field, validation
   errors). This also resolves the conflict with the second inline <style>
   block on the page, which sets .cs-hero-form { position: relative }. */
.about-page .cs-hero-form {
	position: relative;
	z-index: 2;
	max-width: var(--cs-content-max);
	margin: var(--cs-gap-lg) auto 0;
	padding: 1.25rem;
	background: var(--cs-surface);
	border-radius: var(--cs-radius-lg);
	box-shadow: var(--cs-shadow-lg);
}

.about-page .cs-hero-form h2 {
	margin-bottom: 0.75rem;
	font-size: 1.25rem;
	text-align: center;
}


/* 6. Stats
   ========================================================================== */

.about-page .cs-about .cs-stats {
	display: grid;
	gap: var(--cs-gap);
	align-items: center;
	margin-block: 2rem;
	text-align: center;
}

.about-page .cs-about .cs-stat {
	padding: 1.25rem 1rem;
	background: var(--cs-surface);
	border-radius: var(--cs-radius);
	box-shadow: var(--cs-shadow-md);
}

.about-page .cs-about .cs-stat .num {
	margin-bottom: 0.25rem;
	font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
	font-weight: 700;
	line-height: 1;
	color: var(--cs-blue);
	font-variant-numeric: tabular-nums;
}

/* Suffix comes from the JS (data-count-suffix) rather than a hardcoded "+",
   so a stat can be "15,000+", "98%" or plain. */
.about-page .cs-about .cs-stat .num[data-count-suffix]::after {
	content: attr(data-count-suffix);
	font-size: 1em;
}

.about-page .cs-cta-center {
	padding: 1.25rem 1.5rem;
	background: linear-gradient(90deg, var(--cs-blue), var(--cs-blue-bright));
	border-radius: var(--cs-radius);
	box-shadow: var(--cs-shadow-md);
	color: #fff;
}

.about-page .cs-cta-center h3 {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 600;
	color: #fff;
}

.about-page .cs-cta-center a {
	display: block;
	margin-top: 0.25rem;
	font-size: 1.2rem;
	font-weight: 700;
	color: #fff;
}


/* 7. Core values (static cards)
   --------------------------------------------------------------------------
   These are principles, not hidden FAQ content. All five values are always
   visible. There is no click/keyboard toggle, chevron or collapsed state.
   ========================================================================== */

.about-page .cs-values-section {
	padding: var(--cs-section-y) var(--cs-section-x);
	background: var(--cs-surface-alt);
	border-block: 1px solid #eee;
}

.about-page .cs-values-section h2 {
	text-align: center;
	margin-bottom: 1rem;
}

.about-page .cs-values-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.2rem;
	align-items: stretch;
}

.about-page .cs-value {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 1.2rem 1.4rem;
	background: var(--cs-surface);
	border: 1px solid var(--cs-border);
	border-radius: var(--cs-radius);
	box-shadow: none;
}

.about-page .cs-value-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.about-page .cs-value-header h3 {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--cs-ink);
	text-align: left;
}

.about-page .cs-value-content,
.about-page .cs-value.open .cs-value-content {
	display: block;
}

/* .cs-value-inner rule removed in 1.5.1 — the accordion became static
   content in 1.5, so about.js no longer creates that wrapper. */

.about-page .cs-value-content .ct-text-block {
	margin-top: 0.8rem;
	font-size: 0.95rem;
	color: var(--cs-ink-body);
	text-align: left;
}

.about-page .cs-values-photo {
	max-width: 500px;
	margin: 1.5rem auto;
	text-align: center;
}

.about-page .cs-values-photo img {
	width: 100%;
	aspect-ratio: 5 / 2;
	object-fit: cover;
	object-position: center;
	border-radius: var(--cs-radius);
	box-shadow: var(--cs-shadow-md);
}


/* 8. Leadership
   ========================================================================== */

.about-page .cs-leader-section {
	max-width: var(--cs-content-max);
	margin: var(--cs-section-y) auto;
	padding: var(--cs-section-y) var(--cs-section-x);
	background: var(--cs-blue-wash);
	border-radius: var(--cs-radius);
}

.about-page .cs-leader-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--cs-gap-lg);
	align-items: center;
	justify-items: center;
}

.about-page .cs-leader-photo {
	max-width: 220px;
}

.about-page .cs-leader-photo img {
	width: 100%;
	border-radius: var(--cs-radius);
	box-shadow: var(--cs-shadow-md);
}

.about-page .cs-leader-headings {
	text-align: center;
}

.about-page .cs-leader-headings h3 {
	margin-bottom: 1rem;
	font-size: 1.25rem;
	color: var(--cs-blue);
}

.about-page .cs-leader-body {
	max-width: var(--cs-measure);
	color: var(--cs-ink-body);
}

.about-page .cs-leader-highlights {
	margin: 1rem 0;
	padding: 1rem 1.2rem;
	background: var(--cs-surface);
	border-radius: var(--cs-radius);
	box-shadow: var(--cs-shadow-md);
}










/* 9. Story / Why choose
   --------------------------------------------------------------------------
   Real markup: .cs-story > div (copy) + aside.cs-why
   The old CSS targeted .story-text and .story-img, neither of which exists.
   ========================================================================== */

.about-page .cs-story {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--cs-gap-lg);
	align-items: start;
	max-width: var(--cs-content-max);
	margin-inline: auto;
	padding: var(--cs-section-y) 0;
}

.about-page .cs-story > div:first-child h2 {
	text-align: center;
}

.about-page .cs-why {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--cs-gap);
}

.about-page .cs-why h3 {
	margin: 0 0 0.25rem;
	font-size: 1.4rem;
	text-align: center;
}

.about-page .cs-reason {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	max-width: 34rem;
	margin-inline: auto;
	padding: 1rem 1.2rem;
	background: var(--cs-surface);
	border-radius: var(--cs-radius);
	box-shadow: var(--cs-shadow-md);
	text-align: left;
}

.about-page .cs-reason-icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--cs-blue);
	color: #fff;
	font-size: 1rem;
	line-height: 1;
}

.about-page .cs-reason strong {
	display: block;
	margin-bottom: 0.25rem;
	color: var(--cs-ink);
}

.about-page .cs-reason p,
.about-page .cs-reason .ct-text-block {
	margin: 0;
	font-size: 0.95rem;
	color: var(--cs-ink-body);
}


/* 10. Trust strip
   --------------------------------------------------------------------------
   .cs-trust-grid / .cs-trust-item / .cs-trust-span do not exist — the
   accolades block (styled in its own <style> tag) replaced them. Only the
   .cs-trust wrapper survives, scoped so it can't hit anything sitewide.
   ========================================================================== */

.about-page .cs-about .cs-trust {
	padding: var(--cs-gap-lg) var(--cs-section-x);
	background: var(--cs-blue-tint);
	border-radius: var(--cs-radius);
	text-align: center;
}


/* 11. Community
   ========================================================================== */

.about-page .cs-community {
	max-width: 100%;
	margin-inline: auto;
	padding: var(--cs-section-y) 0;
	text-align: center;
}

.about-page .cs-impact-stats {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--cs-gap);
	margin-block: var(--cs-gap-lg);
	align-items: stretch;
}

.about-page .cs-impact-card {
	width: 100%;
	min-width: 0;
	height: 100%;
	box-sizing: border-box;
	justify-self: stretch;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background: var(--cs-surface);
	border-radius: var(--cs-radius);
	box-shadow: var(--cs-shadow-md);
	text-align: center;
}

.about-page .cs-impact-card > .ct-text-block {
	width: 100%;
	max-width: none;
	text-align: center;
}

/* These read "10%", "$100,000+", "2018 - Now" — deliberately NOT animated
   by the counter, which only targets .cs-stat .num. */
.about-page .cs-impact-card .num {
	margin-bottom: 0.25rem;
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--cs-blue);
	font-variant-numeric: tabular-nums;
}


/* 12. Team
   --------------------------------------------------------------------------
   Markup is .cs-team--modern > .cs-team-head + .cs-team-mosaic, which has
   its own <style> block. Only the outer wrapper is set here so the two
   don't fight.
   ========================================================================== */

.about-page .cs-team {
	max-width: 100%;
	margin-inline: auto;
	padding: var(--cs-section-y) 0;
	text-align: center;
}

.about-page .cs-team-caption-strong {
	color: var(--cs-ink);
	font-weight: 600;
}


/* 13. Benefit list
   --------------------------------------------------------------------------
   Class is .cs-faq but these are single-line benefit statements with a
   tick, not questions. Worth renaming to .cs-benefit.
   ========================================================================== */

.about-page .cs-about .cs-faqs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: var(--cs-gap);
	margin-block: var(--cs-section-y);
}

.about-page .cs-about .cs-faq {
	position: relative;
	display: flex;
	align-items: center;
	padding: 1.25rem 1rem 1.25rem 2.6rem;
	background: var(--cs-surface);
	border-radius: var(--cs-radius);
	box-shadow: var(--cs-shadow-md);
	font-weight: 600;
	color: var(--cs-ink);
	text-align: left;
}

.about-page .cs-about .cs-faq::before {
	content: "✓";
	position: absolute;
	left: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--cs-blue);
	color: #fff;
	font-size: 0.8rem;
	font-weight: bold;
	box-shadow: var(--cs-shadow-sm);
}


/* 14. CTA
   ========================================================================== */

.about-page .cs-cta-box {
	max-width: var(--cs-content-max);
	margin-inline: auto;
	padding: 1.75rem 1.5rem;
	background: linear-gradient(90deg, var(--cs-blue-wash), var(--cs-surface));
	border: 1px solid var(--cs-border);
	border-radius: var(--cs-radius-lg);
	box-shadow: var(--cs-shadow-md);
	text-align: center;
}

.about-page .cs-cta-box h3 {
	margin: 0 0 0.5rem;
	font-size: 1.3rem;
}

.about-page .cs-cta-box p {
	max-width: 55ch;
	margin: 0 auto 1rem;
	color: var(--cs-ink-muted);
}

.about-page .cs-cta-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	justify-content: center;
}


/* 15. Charity carousel
   ========================================================================== */

.about-page .cs-swiper--community {
	position: relative;
	overflow: hidden;
	max-width: 1120px;
	margin: var(--cs-gap-lg) auto 0;
	padding: 1.25rem 3rem;
	background:
		radial-gradient(circle at 12% 20%, rgba(11, 111, 178, 0.1), transparent 30%),
		linear-gradient(135deg, #eef8ff 0%, #ffffff 58%, var(--cs-blue-tint) 100%);
	border: 1px solid var(--cs-border);
	border-radius: var(--cs-radius-lg);
	box-shadow: var(--cs-shadow-lg);
}

.about-page .cs-swiper--community .swiper-wrapper {
	position: relative;
	z-index: 1;
	align-items: center;
}

/* The nth-child(even) translateY(8px) stagger was removed: with loop:true
   Swiper clones and reorders slides, so the stagger reassigned mid-
   transition and the logos visibly jumped. */
.about-page .cs-swiper--community .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 104px;
	padding: 1rem;
	background: rgba(255, 255, 255, 0.86);
	border: 1px solid var(--cs-border);
	border-radius: var(--cs-radius);
	box-shadow: var(--cs-shadow-sm);
	transition: box-shadow var(--cs-speed) var(--cs-ease),
	            border-color var(--cs-speed) var(--cs-ease);
}

.about-page .cs-swiper--community .swiper-slide:hover {
	border-color: rgba(11, 111, 178, 0.28);
	box-shadow: var(--cs-shadow-md);
}

.about-page .cs-swiper--community .swiper-slide img {
	max-width: 170px;
	max-height: 64px;
	width: auto;
	height: auto;
	object-fit: contain;
	opacity: 0.92;
	transition: opacity var(--cs-speed) var(--cs-ease);
}

.about-page .cs-swiper--community .swiper-slide:hover img {
	opacity: 1;
}

.about-page .cs-swiper--community .swiper-button-next,
.about-page .cs-swiper--community .swiper-button-prev {
	width: 34px;
	height: 34px;
	border-radius: var(--cs-radius-pill);
	background: var(--cs-surface);
	box-shadow: var(--cs-shadow-md);
	color: var(--cs-blue);
	z-index: 2;
}

.about-page .cs-swiper--community .swiper-button-next::after,
.about-page .cs-swiper--community .swiper-button-prev::after {
	font-size: 0.9rem;
	font-weight: 700;
}


/* 16. Gravity Forms
   --------------------------------------------------------------------------
   !important is legitimate here — we're overriding Gravity Forms' own
   stylesheet. It appears nowhere else in this file.
   ========================================================================== */

.about-page .gform_wrapper.gravity-theme .gform_footer,
.about-page .gform_wrapper.gravity-theme .gform_page_footer {
	margin: 6px 0 0 !important;
	padding: 6px 0 !important;
}

/* TODO: replace with a per-field Custom CSS Class in the Gravity Forms
   editor. This decodes as form 4 / field 5 / input 1 — rebuild, duplicate
   or re-import the form and the id changes and the rule dies silently.
   Confirmed live on the page as gform_4. */
.about-page #input_4_5_1 {
	width: 5%;
}


/* 17. Utilities
   ========================================================================== */

.about-page .cs-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}


/* ==========================================================================
   BREAKPOINT: 48rem / 768px
   ========================================================================== */

@media (min-width: 48rem) {

	.about-page .cs-values-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.about-page .cs-values-grid .cs-value:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		max-width: 38rem;
		justify-self: center;
	}

	.about-page .cs-impact-stats {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.about-page .cs-about .cs-stats {
		grid-template-columns: 1fr auto 1fr;
	}

	.about-page .cs-story > div:first-child h2,
	.about-page .cs-why h3 {
		text-align: left;
	}

	.about-page .cs-reason {
		max-width: none;
		margin-inline: 0;
	}
}


/* ==========================================================================
   BREAKPOINT: 64rem / 1024px
   ========================================================================== */

@media (min-width: 64rem) {

	.about-page .cs-values-grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.about-page .cs-values-grid .cs-value {
		grid-column: span 2;
	}

	.about-page .cs-values-grid .cs-value:nth-child(4),
	.about-page .cs-values-grid .cs-value:nth-child(5) {
		grid-column: span 3;
		max-width: none;
	}

	.about-page .cs-hero {
		padding-bottom: 0;
	}

	/* Desktop overlap without absolute positioning. */
	.about-page .cs-hero-form {
		margin-bottom: calc(var(--cs-section-y) * -0.5);
		padding: 1.5rem;
	}

	.about-page .cs-leader-grid {
		grid-template-columns: 320px 1fr;
		justify-items: stretch;
		text-align: left;
	}

	.about-page .cs-leader-photo {
		grid-column: 1;
		grid-row: 1 / span 2;
		max-width: none;
	}

	.about-page .cs-leader-headings,
	.about-page .cs-leader-body {
		grid-column: 2;
		text-align: left;
	}

	.about-page .cs-story {
		grid-template-columns: minmax(0, 1fr) minmax(360px, 0.95fr);
		text-align: left;
	}
}


@media (min-width: 90rem) {

	.about-page {
		--cs-content-max: 1280px;
	}
}


/* ==========================================================================
   18. Reduced motion & print
   ========================================================================== */

/* The old JS respected prefers-reduced-motion but the CSS did not — hover
   lifts, scales and transitions all still ran. Scoped to the About
   wrappers so it can't disable animation elsewhere on the page. */
@media (prefers-reduced-motion: reduce) {

	.about-page .cs-about *,
	.about-page .cs-about *::before,
	.about-page .cs-about *::after,
	.about-page .cs-hero *,
	.about-page .cs-hero-form * {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

@media print {

	.about-page .cs-swiper--community .swiper-button-next,
	.about-page .cs-swiper--community .swiper-button-prev,
	.about-page .cs-hero-form,
	.about-page .cs-cta-buttons {
		display: none;
	}


	.about-page .cs-value,
	.about-page .cs-about .cs-stat,
	.about-page .cs-reason,
	.about-page .cs-about .cs-faq,
	.about-page .cs-impact-card {
		box-shadow: none;
		border: 1px solid #ccc;
		break-inside: avoid;
	}
}


/* ==========================================================================
   19. DESIGN PASS (v1.1)
   --------------------------------------------------------------------------
   Everything below is new. It changes appearance, not structure — no markup
   changes required, and each block can be deleted independently.
   ========================================================================== */


/* 19a. Vertical rhythm — the biggest single fix
   --------------------------------------------------------------------------
   Twelve sections, all white, all the same padding, meant nothing signalled
   where one idea ended and the next began. Alternating surfaces chunk the
   page into readable groups. Full-bleed via viewport-width padding so the
   tint runs edge to edge even though .cs-about is a constrained container.
   ========================================================================== */

.about-page .cs-values-section,
.about-page .cs-community,
.about-page .cs-team {
	background: var(--cs-surface-alt);
	border-block: 1px solid var(--cs-border);
	/* break out of the .cs-about padding so the tint is full width */
	margin-inline: calc(var(--cs-section-x) * -1);
	padding-inline: var(--cs-section-x);
}

.about-page .cs-story,
.about-page .cs-leader-section {
	background: var(--cs-surface);
}

/* Section headings get room to breathe above them, not below. */
.about-page .cs-about h2 {
	margin-bottom: 0.75rem;
}


/* 19b. Fewer cards
   --------------------------------------------------------------------------
   Elevation should mean "this is interactive or important". It was on
   everything, so it meant nothing. Content panels are now flat with a
   hairline; only the form and genuinely interactive elements lift.
   ========================================================================== */

.about-page .cs-reason,
.about-page .cs-impact-card,
.about-page .cs-about .cs-faq,
.about-page .cs-leader-highlights {
	box-shadow: none;
	border: 1px solid var(--cs-border);
	background: var(--cs-surface);
}

/* Reason rows read better as a list than as six floating cards. */
.about-page .cs-reason {
	border-width: 0 0 1px 0;
	border-radius: 0;
	padding-inline: 0;
	background: transparent;
}

.about-page .cs-why .cs-reason:last-child {
	border-bottom: 0;
}


/* 19c. Stats — your strongest proof, previously whispered
   ========================================================================== */

.about-page .cs-about .cs-stat {
	background: transparent;
	box-shadow: none;
	border: 0;
	padding: 1.5rem 1rem;
}

.about-page .cs-about .cs-stat .num {
	font-size: clamp(2.5rem, 1.8rem + 3.2vw, 4rem);
	letter-spacing: -0.02em;
	color: var(--cs-navy);
	margin-bottom: 0.35rem;
}

/* The label under each number — small, spaced, quiet, so the numeral wins. */
.about-page .cs-about .cs-stat > *:not(.num) {
	font-size: 0.95rem;
	color: var(--cs-ink-muted);
	max-width: none;
}


/* 19d. Heading hierarchy
   --------------------------------------------------------------------------
   h2 and h3 were nearly the same size, weight and colour, so nothing
   signalled depth. h3 now steps down in size and sits in body ink, letting
   navy mean "section heading".
   ========================================================================== */

.about-page .cs-about h3 {
	font-size: 1.1rem;
	font-weight: 650;
	color: var(--cs-ink);
	letter-spacing: -0.005em;
}

.about-page .cs-about h2 {
	letter-spacing: -0.02em;
}


/* 19e. One action colour
   --------------------------------------------------------------------------
   Orange appeared on the hero CTA and Submit, then vanished — it read as an
   accident. It's now the only conversion colour on the page, and it appears
   nowhere decorative. #c83a0d is your header's --csph-cta, already carrying
   documented 5.16:1 contrast for white text.
   ========================================================================== */

.about-page .cs-about .cs-btn.primary,


.about-page .cs-about .cs-btn.primary:hover,


.about-page .cs-about .cs-btn:not(.primary),


.about-page .cs-about .cs-btn:not(.primary):hover,


.about-page .cs-cta-center {
	background: var(--cs-navy);
}

.about-page .cs-cta-box {
	background: var(--cs-surface-alt);
	border-color: var(--cs-border);
	box-shadow: none;
}


/* 19f. Core values — icon normalisation
   --------------------------------------------------------------------------
   about.js only wraps the leading emoji for consistent sizing and hides it
   from screen readers. The values themselves are static, always-visible
   content. There is no accordion behaviour.
   ========================================================================== */

.about-page .cs-value-emoji {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	margin-right: 0.6rem;
	flex-shrink: 0;
	border-radius: var(--cs-radius-pill);
	background: var(--cs-tint);
	font-size: 0.95rem;
	line-height: 1;
}

.about-page .cs-value-header h3 {
	display: flex;
	align-items: center;
}

.about-page .cs-value {
	box-shadow: none;
	border-color: var(--cs-border);
}


/* 19g. Form legibility
   --------------------------------------------------------------------------
   The consent copy was too small to reasonably call informed consent.
   Bumped to a readable size with proper line-height. The placeholder-as-
   label problem is a Gravity Forms field setting, not something CSS can fix
   — turn the labels back on in the form editor.
   ========================================================================== */

.about-page .cs-hero-form .gform_wrapper .gfield_consent_description,
.about-page .cs-hero-form .gform_wrapper .gfield--type-consent label,
.about-page .cs-hero-form .gform_wrapper .gform_fileupload_rules {
	font-size: 0.8125rem !important;
	line-height: 1.5 !important;
	color: var(--cs-ink-muted) !important;
}

.about-page .cs-hero-form .gform_wrapper .gform_footer input[type="submit"] {
	background: var(--cs-cta) !important;
	border-color: var(--cs-cta) !important;
	padding: 0.85rem 2rem !important;
	font-weight: 600 !important;
	border-radius: var(--cs-radius) !important;
}

.about-page .cs-hero-form .gform_wrapper .gform_footer input[type="submit"]:hover {
	background: var(--cs-cta-hover) !important;
}


/* 19h. Accolade / trust logos — consistent optical weight
   ========================================================================== */

.about-page .cs-swiper--community .swiper-slide {
	background: var(--cs-surface);
	box-shadow: none;
	border-color: var(--cs-border);
}

.about-page .cs-swiper--community {
	background: var(--cs-surface);
	box-shadow: none;
	border-color: var(--cs-border);
}


/* 19i. Scholarship module compatibility
   --------------------------------------------------------------------------
   The About-page base image reset used height:auto on every image inside
   .cs-about. Scholarship winner photos intentionally need height:100% +
   object-fit:cover inside the plugin's fixed photo frame. Let that module
   own its image sizing so the gray gap below each portrait cannot return.
   ========================================================================== */

.about-page .cs-about .cs-community-impact .cs-ci-photo-wrap {
	overflow: hidden;
}

.about-page .cs-about .cs-community-impact img.cs-ci-photo {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}


/* MEET YOUR LOCAL TEAM (Modern Mosaic)
   --------------------------------------------------------------------------
   v1.3: the old restored block mixed a 300px grid height with children that
   had 170px/360px minimum heights. That forced the tiles to overflow the
   grid and made the mosaic look oversized and uneven on wide screens.
   The generic About-page text/image rules also outranked the original
   caption/image rules, which is why captions rendered dark and team images
   did not have a dependable cover crop.

   This version keeps the existing Oxygen markup, but gives the mosaic one
   coherent size, constrains it to the page content width, and explicitly
   owns the image/caption cascade inside the tiles.
   ========================================================================== */

.about-page .cs-team.cs-team--modern {
	margin-top: clamp(2rem, 4vw, 3rem);
}

.about-page .cs-team--modern .cs-team-head {
	max-width: 62rem;
	margin: 0 auto 1.25rem;
	text-align: center;
}

.about-page .cs-team--modern .cs-team-head h2 {
	margin: 0 0 0.35rem;
}

.about-page .cs-team--modern .cs-team-head .lead {
	max-width: 52rem;
	margin: 0 auto;
}

.about-page .cs-team--modern .cs-team-mosaic {
	display: grid;
	width: min(100%, var(--cs-content-max));
	margin: 1.35rem auto 0;
	gap: 0.85rem;
	grid-template-columns: 1fr;
}

.about-page .cs-team--modern figure.cs-team-tile {
	position: relative;
	width: 100%;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	border: 1px solid rgba(0, 61, 112, 0.14);
	border-radius: var(--cs-radius-lg);
	background: #dfeaf2;
	box-shadow: 0 8px 24px rgba(0, 61, 112, 0.10);
}

/* This selector intentionally outranks the generic
   .about-page .cs-about img:not(...) { height:auto } rule. */
.about-page .cs-about .cs-team--modern figure.cs-team-tile > img.ct-image {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transform: none;
}

/* Keep the most useful part of each source image visible when cover-cropped. */
.about-page .cs-team--modern .cs-team-main > img {
	object-position: 50% 46%;
}

.about-page .cs-team--modern .cs-team-side-1 > img {
	object-position: 50% 50%;
}

.about-page .cs-team--modern .cs-team-side-2 > img,
.about-page .cs-team--modern .cs-team-side-3 > img {
	object-position: 50% 50%;
}

.about-page .cs-team--modern figure.cs-team-tile::after {
	display: none;
}

.about-page .cs-team--modern figure.cs-team-tile figcaption {
	position: absolute;
	z-index: 2;
	inset: auto 0 0;
	padding: 2.3rem 1rem 0.85rem;
	background: linear-gradient(
		to top,
		rgba(0, 47, 88, 0.94) 0%,
		rgba(0, 47, 88, 0.74) 45%,
		rgba(0, 47, 88, 0) 100%
	);
	color: #fff;
	font-size: 0.92rem;
	line-height: 1.3;
	text-align: left;
}

/* The base About rules give every .ct-text-block dark body ink. Force the
   actual captions back to white inside the navy image scrim. */
.about-page .cs-about .cs-team--modern figure.cs-team-tile figcaption .ct-text-block,
.about-page .cs-about .cs-team--modern figure.cs-team-tile figcaption .cs-team-caption-strong {
	width: 100%;
	max-width: none;
	margin: 0;
	color: #fff;
	text-align: left;
}

.about-page .cs-about .cs-team--modern figure.cs-team-tile figcaption .cs-team-caption-strong {
	display: block;
	margin-bottom: 0.15rem;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
}

.about-page .cs-about .cs-team--modern .cs-team-main figcaption .cs-team-caption-strong {
	font-size: 1.08rem;
}

.about-page .cs-about .cs-team--modern figure.cs-team-tile figcaption .ct-text-block {
	font-size: 0.9rem;
	line-height: 1.35;
}

@media (hover: hover) {
	.about-page .cs-team--modern figure.cs-team-tile {
		transition: transform 180ms ease, box-shadow 180ms ease;
	}

	.about-page .cs-team--modern figure.cs-team-tile:hover {
		transform: translateY(-2px);
		box-shadow: 0 14px 32px rgba(0, 61, 112, 0.14);
	}
}

/* Desktop and larger tablets: one balanced editorial mosaic. The aspect
   ratio determines the height, so the grid can never fight child min-heights. */
@media (min-width: 48rem) {
	.about-page .cs-team--modern .cs-team-smalls {
		display: contents;
	}

	.about-page .cs-team--modern .cs-team-mosaic {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) minmax(0, 0.85fr);
		grid-template-rows: repeat(2, minmax(0, 1fr));
		aspect-ratio: 3 / 1;
		align-items: stretch;
	}

	.about-page .cs-team--modern .cs-team-main {
		grid-column: 1 / 2;
		grid-row: 1 / 3;
		min-height: 0;
	}

	.about-page .cs-team--modern .cs-team-side-1 {
		grid-column: 2 / 4;
		grid-row: 1;
		min-height: 0;
	}

	.about-page .cs-team--modern .cs-team-side-2 {
		grid-column: 2 / 3;
		grid-row: 2;
		min-height: 0;
	}

	.about-page .cs-team--modern .cs-team-side-3 {
		grid-column: 3 / 4;
		grid-row: 2;
		min-height: 0;
	}
}

/* Mobile: preserve the same hierarchy, but let each source image keep a
   comfortable crop instead of squeezing a desktop mosaic into a phone. */
@media (max-width: 47.99rem) {
	.about-page .cs-team--modern .cs-team-main {
		min-height: 0;
		aspect-ratio: 4 / 3;
	}

	.about-page .cs-team--modern .cs-team-side-1 {
		min-height: 0;
		aspect-ratio: 16 / 7;
	}

	.about-page .cs-team--modern .cs-team-smalls {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.85rem;
		width: 100%;
	}

	.about-page .cs-team--modern .cs-team-side-2,
	.about-page .cs-team--modern .cs-team-side-3 {
		min-height: 0;
		aspect-ratio: 4 / 3;
	}
}

@media (max-width: 30rem) {
	.about-page .cs-team--modern .cs-team-smalls {
		grid-template-columns: 1fr;
	}

	.about-page .cs-team--modern .cs-team-side-2,
	.about-page .cs-team--modern .cs-team-side-3 {
		aspect-ratio: 16 / 10;
	}
}

/* Swiper scoped nav */
.about-page .cs-swiper-scope{ position:relative; }
.about-page .cs-swiper-scope .swiper-button-next,
.about-page .cs-swiper-scope .swiper-button-prev{ z-index:5; }

@media (prefers-reduced-motion: reduce){
  .about-page .swiper-wrapper{ transition-duration:0ms !important; }
}


/* 19i. Fixes found in visual review
   ========================================================================== */

/* The navy call bar had dark text on a dark ground — the phone number was
   the only legible part. Force white on everything inside it. */
/* Element selectors are needed here, not `*`. `.about-page .cs-about h3`
   scores (0,2,1) and beats `.about-page .cs-cta-center *` at (0,2,0), so
   the heading stayed near-black on navy. Matching the type raises this to
   (0,2,1) and source order decides. */
.about-page .cs-cta-center,
.about-page .cs-cta-center h2,
.about-page .cs-cta-center h3,
.about-page .cs-cta-center h4,
.about-page .cs-cta-center p,
.about-page .cs-cta-center a,
.about-page .cs-cta-center span,
.about-page .cs-cta-center div,
.about-page .cs-cta-center .ct-text-block,
.about-page .cs-cta-center .ct-headline {
	color: #fff;
}

.about-page .cs-cta-center a {
	text-decoration: none;
}

.about-page .cs-cta-center a:hover {
	text-decoration: underline;
}

/* The h3 step-down in 19d is right for value/reason headings but made the
   two CTA headings too quiet — they're section-level prompts, not
   sub-headings. Step them back up. */
.about-page .cs-cta-box h3,
.about-page .cs-leader-headings h3 {
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	font-weight: 700;
	color: var(--cs-navy);
}

.about-page .cs-cta-box p {
	margin-bottom: 1.25rem;
}


/* ========================================================================== 
   22. v1.4 targeted layout corrections
   ========================================================================== */

/* Why Choose: Oxygen's ct-div-block defaults can retain a column direction.
   Force each reason into a true row so the check sits beside the copy. */
.about-page .cs-why .cs-reason {
	flex-direction: row !important;
	align-items: flex-start !important;
	gap: 0.8rem;
}

.about-page .cs-why .cs-reason > :not(.cs-reason-icon) {
	flex: 1 1 auto;
	min-width: 0;
	width: auto !important;
}

/* Keep the tick optically light against the blue disc. The generic
   .ct-text-block body-color rule otherwise wins later in the cascade. */
.about-page .cs-why .cs-reason .cs-reason-icon {
	color: #fff !important;
	background: var(--cs-blue) !important;
	font-weight: 600;
}

/* Core Values: preserve the proven desktop treatment supplied after live
   testing. Keeping this late in the file ensures the 64rem grid rules do not
   undo the centered final card. */
@media (min-width: 48rem) {
	.about-page .cs-values-grid .cs-value:last-child:nth-child(odd) {
		grid-column: span 3;
		max-width: 38rem;
		justify-self: center;
	}
}

/* ========================================================================== 
   23. v1.5 scholarship contrast + leadership highlight icons
   ========================================================================== */

/* The scholarship plugin stylesheet loads after this About stylesheet, so
   keep these contrast fixes explicit and important. Active filter pills and
   the primary community CTA use dark backgrounds and must retain white text. */
.about-page .cs-community-impact .cs-ci-link,
.about-page .cs-community-impact .cs-ci-link:link,
.about-page .cs-community-impact .cs-ci-link:visited,
.about-page .cs-community-impact .cs-ci-link:hover,
.about-page .cs-community-impact .cs-ci-link:focus-visible,
.about-page .cs-community-impact .cs-ci-area-pill.is-active,
.about-page .cs-community-impact .cs-ci-year-pill.is-active,
.about-page .cs-community-impact .cs-ci-page-number.is-active,
.about-page .cs-community-impact .cs-ci-page-number[aria-current="page"] {
	color: #fff !important;
}

/* Leadership Spotlight: use the same blue-disc / white-check treatment as
   the Why Choose list. about.js removes the old literal bullet first. */
.about-page .cs-leader-highlights > .ct-text-block {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start !important;
	gap: 0.8rem;
	width: 100% !important;
	margin: 0;
	color: var(--cs-ink-body);
	text-align: left;
}

.about-page .cs-leader-highlights > .ct-text-block + .ct-text-block {
	margin-top: 0.75rem;
}

.about-page .cs-leader-highlights > .ct-text-block::before {
	content: "✓";
	display: flex;
	flex: 0 0 26px;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin-top: 0.05rem;
	border-radius: 50%;
	background: var(--cs-blue) !important;
	color: #fff !important;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
}


/* ==========================================================================
   20. STRICT PASS — rules that were targeting elements that don't exist
   --------------------------------------------------------------------------
   Verified against the live DOM. Each of these was written against an
   assumed markup shape and silently did nothing.
   ========================================================================== */

/* Gravity Forms renders the submit control as <button class="gform_button">,
   not <input type="submit">. The old rule matched nothing, so the CTA orange
   never reached the form's own button. */
.about-page .cs-hero-form .gform_wrapper .gform_footer .gform_button,
.about-page .cs-hero-form .gform_wrapper .gform-footer .gform_button {
	background: var(--cs-cta);
	border: 1px solid var(--cs-cta);
	color: #fff;
	padding: 0.85rem 2rem;
	font-weight: 600;
	border-radius: var(--cs-radius);
	cursor: pointer;
	transition: background-color var(--cs-speed) var(--cs-ease);
}

.about-page .cs-hero-form .gform_wrapper .gform_button:hover {
	background: var(--cs-cta-hover);
	border-color: var(--cs-cta-hover);
}

/* The consent copy lives in .gfield_consent_label. There is no
   .gfield_consent_description on this form, so the old size rule was inert
   and the consent text stayed at its default microscopic size. */
.about-page .cs-hero-form .gfield_consent_label,
.about-page .cs-hero-form .gform-field-label--type-inline,
.about-page .cs-hero-form .gfield_consent_description {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--cs-ink-muted);
}


/* 20b. Visible form labels — WCAG 3.3.2
   --------------------------------------------------------------------------
   I previously said only the Gravity Forms editor could fix this. That was
   wrong: the labels ARE in the DOM, hidden by GF's own stylesheet via the
   .hidden_label class. CSS can bring them back.

   Placeholders disappear the moment someone types, so a distracted user
   loses the only cue telling them which field is which — and screen readers
   treat placeholder text inconsistently.

   TO REVERT: delete this block. Turning labels off properly in the form
   editor instead of via CSS remains the cleaner long-term answer.
   ========================================================================== */

.about-page .cs-hero-form .gform_wrapper .hidden_label .gfield_label,
.about-page .cs-hero-form .gform_wrapper .gfield.hidden_label > .gform-field-label {
	position: static;
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
	margin: 0 0 0.35rem;
	padding: 0;
	overflow: visible;
	white-space: normal;
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--cs-ink);
}

/* Sub-labels (First / Last under the name field) stay hidden — the parent
   label already names the field, so showing both is noise. */
.about-page .cs-hero-form .gform_wrapper .hidden_sub_label {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px;
	height: 1px;
	overflow: hidden;
}


/* 20c. Cross-plugin overrides — defensive, not fixable
   --------------------------------------------------------------------------
   The .cs-ci-* classes belong to critter-stop-website-locations-scholarship.
   Overriding another plugin's internals can't be made safe — if it renames a
   class or raises its own specificity, these stop applying. What CAN be done
   is fail in the safe direction: the fallbacks below mean that if the
   override misses, the element inherits readable page colours rather than
   whatever the plugin ships.

   Re-check the scholarship section after ANY update to that plugin.
   ========================================================================== */

.about-page .cs-community-impact {
	color: var(--cs-ink-body);
}

.about-page .cs-community-impact a:not([class]) {
	color: var(--cs-accent);
}


/* ==========================================================================
   21. TABLET & MOBILE — full centring (below 64rem / 1024px)
   --------------------------------------------------------------------------
   Everything centres: headings, copy, icons, cards, images, buttons, grids.
   The desktop rules from 64rem up are untouched.

   The !important flags here are not decoration — sections 9 and 19 set
   flex-direction and width with !important to beat Oxygen's .ct-text-block
   output, so these have to match to win.
   ========================================================================== */

@media (max-width: 63.99rem) {

	/* --- Text ------------------------------------------------------- */

	.about-page .cs-about,
	.about-page .cs-about h1,
	.about-page .cs-about h2,
	.about-page .cs-about h3,
	.about-page .cs-about h4,
	.about-page .cs-about p,
	.about-page .cs-about .ct-text-block,
	.about-page .cs-about li,
	.about-page .cs-hero,
	.about-page .cs-hero h1,
	.about-page .cs-hero h2,
	.about-page .cs-hero .ct-text-block,
	.about-page .cs-story,
	.about-page .cs-story > div,
	.about-page .cs-why,
	.about-page .cs-why h3,
	.about-page .cs-community,
	.about-page .cs-team,
	.about-page .cs-leader-section,
	.about-page .cs-leader-headings,
	.about-page .cs-leader-headings h2,
	.about-page .cs-leader-headings h3,
	.about-page .cs-leader-body,
	.about-page .cs-values-section,
	.about-page .cs-cta-box,
	.about-page .cs-cta-center {
		text-align: center;
	}

	/* Keep a readable measure while centred — full-width centred prose is
	   the thing that actually hurts, not centring itself. */
	.about-page .cs-about p,
	.about-page .cs-about .ct-text-block,
	.about-page .cs-leader-body,
	.about-page .cs-story > div {
		max-width: 46ch;
		margin-inline: auto;
	}

	/* --- Grids and blocks -------------------------------------------- */

	.about-page .cs-values-grid,
	.about-page .cs-leader-grid,
	.about-page .cs-story,
	.about-page .cs-why,
	.about-page .cs-stats,
	.about-page .cs-impact-stats,
	.about-page .cs-faqs,
	.about-page .cs-team-mosaic {
		justify-items: center;
	}

	.about-page .cs-leader-grid {
		justify-content: center;
	}

	.about-page .cs-value,
	.about-page .cs-reason,
	.about-page .cs-impact-card,
	.about-page .cs-about .cs-faq,
	.about-page .cs-about .cs-stat,
	.about-page .cs-leader-highlights,
	.about-page .cs-cta-box,
	.about-page .cs-hero-form {
		/* border-box is not optional here. Several of these carry padding,
		   and width:100% on a content-box element adds that padding on top —
		   .cs-hero-form was rendering 398px wide inside a 390px viewport,
		   which is what put 34px of horizontal scroll on the page. */
		box-sizing: border-box;
		width: 100%;
		max-width: 34rem;
		margin-inline: auto;
	}

	/* --- Media -------------------------------------------------------- */

	.about-page .cs-about img,
	.about-page .cs-hero img,
	.about-page .cs-values-photo,
	.about-page .cs-leader-photo {
		display: block;
		margin-inline: auto;
	}

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

	.about-page .cs-cta-buttons,
	.about-page .cs-hero-form .gform_footer,
	.about-page .cs-hero-form .gform-footer {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	/* --- Icon rows: stack the mark above the text and centre both -----
	   These are flex rows on desktop (icon left, copy right). Centring a
	   row like that leaves the icon orphaned beside a centred paragraph,
	   so they become columns instead. */

	.about-page .cs-why .cs-reason,
	.about-page .cs-leader-highlights > .ct-text-block {
		flex-direction: column !important;
		align-items: center !important;
		text-align: center;
		gap: 0.55rem;
	}

	.about-page .cs-why .cs-reason > :not(.cs-reason-icon),
	.about-page .cs-leader-highlights > .ct-text-block > * {
		width: 100% !important;
		text-align: center;
	}

	.about-page .cs-why .cs-reason .cs-reason-icon,
	.about-page .cs-leader-highlights > .ct-text-block::before {
		margin-inline: auto;
	}

	/* Benefit ticks: the ::before is absolutely positioned on desktop with
	   left padding to clear it. Centred, that padding pushes the text
	   off-axis — so the tick goes back into flow, above the label. */
	.about-page .cs-about .cs-faq {
		flex-direction: column;
		justify-content: center;
		gap: 0.6rem;
		padding: 1.25rem 1rem;
		text-align: center;
	}

	.about-page .cs-about .cs-faq::before {
		position: static;
		transform: none;
		margin-inline: auto;
	}

	/* --- Core values -------------------------------------------------- */

	.about-page .cs-value-header {
		justify-content: center;
	}

	.about-page .cs-value-header h3,
	.about-page .cs-value-content .ct-text-block {
		text-align: center;
	}

	/* --- Team --------------------------------------------------------- */

	.about-page .cs-team--modern .cs-team-head,
	.about-page .cs-team--modern figcaption {
		text-align: center;
	}

	.about-page .cs-team--modern .cs-team-caption-strong {
		display: block;
	}
}


/* Phone-specific: tighten the measure so centred lines don't get long. */
@media (max-width: 30rem) {

	.about-page .cs-about p,
	.about-page .cs-about .ct-text-block,
	.about-page .cs-leader-body {
		max-width: 38ch;
	}

	.about-page .cs-value,
	.about-page .cs-reason,
	.about-page .cs-about .cs-faq,
	.about-page .cs-impact-card {
		max-width: 100%;
	}
}


/* 22. Overflow guard
   --------------------------------------------------------------------------
   Content-box elements with padding plus width:100% are the usual cause of
   phantom horizontal scroll on phones. Normalising box-sizing across the
   About scope removes the whole class of bug rather than the one instance.
   ========================================================================== */

.about-page .cs-about,
.about-page .cs-about *,
.about-page .cs-about *::before,
.about-page .cs-about *::after,
.about-page .cs-hero,
.about-page .cs-hero *,
.about-page .cs-hero-form,
.about-page .cs-hero-form * {
	box-sizing: border-box;
}


/* 23. Tablet/mobile grid resets — found by measuring, not by eye
   --------------------------------------------------------------------------
   Two grids were carrying desktop span rules below 1024px:

   1. .cs-values-grid — the `grid-column: span 2 / span 3` rules written for
      the six-column desktop layout were still applying at 768px, where the
      grid only has two tracks. A span wider than the track count makes the
      grid create IMPLICIT columns, so the tracks computed to
      116px 116px 435px and the copy wrapped to one word per line.

   2. .cs-faqs — the section heading is a child of the grid, so it was being
      placed as a grid item in column one with the tick list beside it.

   Measured at 768px before and after.
   ========================================================================== */

@media (max-width: 63.99rem) {

	/* Kill the desktop spans so the track count is honoured. */
	.about-page .cs-values-grid .cs-value,
	.about-page .cs-values-grid .cs-value:nth-child(4),
	.about-page .cs-values-grid .cs-value:nth-child(5),
	.about-page .cs-values-grid .cs-value:last-child:nth-child(odd) {
		grid-column: auto;
		max-width: none;
		justify-self: stretch;
	}

	/* Benefit list stacks: heading on its own line, ticks beneath. */
	.about-page .cs-about .cs-faqs {
		grid-template-columns: 1fr;
		justify-items: center;
	}

	.about-page .cs-about .cs-faqs > .ct-headline,
	.about-page .cs-about .cs-faqs > h2,
	.about-page .cs-about .cs-faqs > h3 {
		grid-column: 1 / -1;
		width: 100%;
		text-align: center;
		margin-bottom: 0.5rem;
	}
}

/* Tablet: two even columns for the values. */
@media (min-width: 48rem) and (max-width: 63.99rem) {

	.about-page .cs-values-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* An odd card left alone on the last row centres rather than hugging left. */
	.about-page .cs-values-grid .cs-value:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		max-width: 34rem;
		justify-self: center;
	}
}

/* Phone: single column throughout. */
@media (max-width: 47.99rem) {

	.about-page .cs-values-grid,
	.about-page .cs-faqs,
	.about-page .cs-impact-stats,
	.about-page .cs-about .cs-stats {
		grid-template-columns: 1fr;
	}
}


/* 23b. Benefit list — the ticks are inside one wrapper, not loose grid items
   --------------------------------------------------------------------------
   .cs-faqs has exactly two children: the heading and a single .ct-div-block
   holding all five ticks. Giving it two columns at tablet therefore left the
   whole right-hand column empty. One column below 1024px, with the wrapper
   centred and the ticks laid out inside it.
   ========================================================================== */

@media (max-width: 63.99rem) {

	.about-page .cs-about .cs-faqs {
		grid-template-columns: 1fr;
	}

	.about-page .cs-about .cs-faqs > .ct-div-block {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--cs-gap);
		width: 100%;
		max-width: 34rem;
		margin-inline: auto;
		justify-items: center;
	}

	.about-page .cs-about .cs-faqs > .ct-div-block > .cs-faq {
		width: 100%;
	}
}

/* Tablet has room for two ticks per row inside that wrapper. */
@media (min-width: 48rem) and (max-width: 63.99rem) {

	.about-page .cs-about .cs-faqs > .ct-div-block {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 44rem;
	}

	/* Odd one out centres across both columns instead of hugging left. */
	.about-page .cs-about .cs-faqs > .ct-div-block > .cs-faq:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		max-width: 21rem;
		justify-self: center;
	}
}


/* 23c. Full-bleed sections — the breakout was asymmetric
   --------------------------------------------------------------------------
   The tinted sections used `margin-inline: calc(var(--cs-section-x) * -1)`
   to escape the container padding. Measured at 768px, the LEFT margin pulled
   the section out as intended but the RIGHT one did not expand it — the
   parent (.ct-section-inner-wrap) sizes its children from the layout line,
   so a negative right margin does not add width there.

   Result: every tinted section, and everything inside it, sat exactly one
   --cs-section-x to the left of centre. That was the -16px on phone and
   -31px on tablet.

   Fixed with an explicit width plus a percentage-based margin, which resolves
   against the parent rather than relying on margin collapse behaviour.
   ========================================================================== */

.about-page .cs-values-section,
.about-page .cs-community,
.about-page .cs-team {
	width: 100%;
}


/* 23d. Full-bleed tint via pseudo-element — layout stays untouched
   --------------------------------------------------------------------------
   Two negative-margin approaches both failed the same way. The parent,
   .ct-section-inner-wrap, sizes its children from the layout line, so a
   negative RIGHT margin never expands the box — only the left one moves it.
   Every tinted section, and everything inside it, ended up exactly one
   --cs-section-x left of centre (-16px phone, -31px tablet, -32px desktop).

   Painting the tint with an absolutely-positioned ::before sidesteps it
   entirely: the band is centred on the viewport, the section's own box never
   moves, and nothing inside it can be dragged off-axis.
   ========================================================================== */

.about-page .cs-values-section,
.about-page .cs-community,
.about-page .cs-team {
	position: relative;
	width: 100%;
	margin-inline: 0;
	padding-inline: 0;
	background: transparent;
	border-block: 0;
}

.about-page .cs-values-section::before,
.about-page .cs-community::before,
.about-page .cs-team::before {
	content: "";
	position: absolute;
	inset: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	background: var(--cs-surface-alt);
	border-top: 1px solid var(--cs-border);
	border-bottom: 1px solid var(--cs-border);
	z-index: 0;
	pointer-events: none;
}

/* Keep real content above the band. */
.about-page .cs-values-section > *,
.about-page .cs-community > *,
.about-page .cs-team > * {
	position: relative;
	z-index: 1;
}

/* 100vw includes the scrollbar on desktop, which would create ~15px of
   horizontal scroll. Clipping at the page level absorbs it without
   affecting any sticky or fixed positioning inside the page. */
.about-page .cs-about {
	overflow-x: clip;
}


/* ==========================================================================
   24. OXYGEN ID OVERRIDES — the reason class rules were losing
   --------------------------------------------------------------------------
   Oxygen writes a per-element rule for every block you touch in the builder,
   keyed on an ID: #div_block-94-32439 { display:flex; flex-direction:row;
   height:150px }. An ID scores (1,0,0) and beats every selector in this
   file, so class rules for display, flex-direction, text-align, width and
   height were being silently discarded on the live site. 34 components are
   affected.

   A class rule carrying !important DOES outrank a normal ID rule, so the
   overrides below are class-based rather than ID-based on purpose: Oxygen
   regenerates those IDs when a block is rebuilt, and an ID-keyed fix would
   break the next time someone edits the page.

   Only the properties Oxygen actually sets are forced. Nothing else.
   ========================================================================== */

/* 24a. Fixed heights on text containers
   --------------------------------------------------------------------------
   Oxygen set height:150px on the impact row and height:100% on its cards.
   Text does not fit a fixed 150px box at narrow widths, which is why the
   "$100,000+" card was clipping and the copy spilled outside the card. */

.about-page .cs-impact-stats,
.about-page .cs-impact-card,
.about-page .cs-community {
	height: auto !important;
	max-height: none !important;
}

/* Preserve the intended desktop proportion without trapping the content. */
@media (min-width: 64rem) {

	.about-page .cs-impact-stats {
		min-height: 150px;
	}
}

/* 24b. The impact row: Oxygen forces display:flex + flex-direction:row */

.about-page .cs-impact-stats {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)) !important;
	gap: var(--cs-gap);
	align-items: stretch;
}

.about-page .cs-impact-card {
	display: flex !important;
	flex-direction: column !important;
	justify-content: center;
	width: 100%;
}

/* 24c. Containers Oxygen forces to flex row */

.about-page .cs-about .cs-faqs {
	display: grid !important;
}

.about-page .cs-cta-buttons {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap;
	width: auto !important;
	max-width: 100%;
	justify-content: center;
}

.about-page .cs-hero-form {
	width: 100% !important;
	max-width: var(--cs-content-max) !important;
}

@media (min-width: 64rem) {

	.about-page .cs-story {
		display: grid !important;
	}
}


/* ==========================================================================
   25. Centring below 1024px — same rules as section 21, but able to win
   --------------------------------------------------------------------------
   Oxygen sets text-align:left on roughly fifteen of these blocks, so the
   section 21 rules were being discarded on the live site even though they
   rendered correctly in isolation. These carry !important for that reason
   and that reason only.
   ========================================================================== */

@media (max-width: 63.99rem) {

	.about-page .cs-about,
	.about-page .cs-story,
	.about-page .cs-why,
	.about-page .cs-reason,
	.about-page .cs-community,
	.about-page .cs-impact-card,
	.about-page .cs-about .cs-stat,
	.about-page .cs-cta-center,
	.about-page .cs-about .cs-faqs,
	.about-page .cs-value,
	.about-page .cs-values-section,
	.about-page .cs-leader-section,
	.about-page .cs-leader-headings,
	.about-page .cs-leader-photo,
	.about-page .cs-team,
	.about-page .cs-team-head,
	.about-page .cs-cta-box,
	.about-page .cs-cta-content {
		text-align: center !important;
	}

	/* Oxygen forces flex-direction:row on the impact row and the story
	   block; stack them. */
	.about-page .cs-impact-stats {
		grid-template-columns: 1fr !important;
	}

	.about-page .cs-story {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
	}
}

@media (min-width: 48rem) and (max-width: 63.99rem) {

	.about-page .cs-impact-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.about-page .cs-impact-card:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		max-width: 22rem;
		justify-self: center;
	}
}